Input Tel Dropdown: API Table

class: LionInputTelDropdown, lion-input-tel-dropdown

Fields

Name	Privacy	Type	Default	Description	Inherited From
activePhoneNumberType	public			Type of phone number, derived from textbox value. Enum with values: -‘fixed-line’ -‘fixed-line-or-mobile’ -‘mobile’ -‘pager’ -‘personal-number’ -‘premium-rate’ -‘shared-cost’ -‘toll-free’ -‘uan’ -‘voip’ -‘unknown’ See https://www.npmjs.com/package/awesome-phonenumber	LionInputTel
activeRegion	public	string		Currently active region based on: 1. allowed regions: get the region from configured allowed regions (if one entry) 2. user input: try to derive active region from user input 3. locale: try to get the region from locale (`html[lang]` attribute)	LionInputTel
allowedRegions	public	RegionCode[]	[]	The regions that should be considered when international phone numbers are detected. (when not configured, all regions worldwide will be considered)	LionInputTel
autocomplete	public	string	'tel'		LionInputTel
fieldName	public			Set a default name for this field, so that validation feedback will be always accessible and linguistically correct	LionInputTel
formatCountryCodeStyle	public	string	'default'	Extra styling of the format strategy default | parentheses	LionInputTel
formatStrategy	public	PhoneNumberFormat	'international'	Determines what the formatter output should look like. Formatting strategies as provided by google-libphonenumber See: https://www.npmjs.com/package/google-libphonenumber	LionInputTel
placeholder	public	string	''		LionInput
preferredRegions	public	RegionCode[]	[]	Regions that will be shown on top of the dropdown	LionInputTel
readOnly	public	boolean	false	A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled. (From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)	LionInput
refs	public	object	{ /** @type {DropdownRef} */ dropdown: /** @type {DropdownRef} */ (createRef()), }
slots	public				LionInput
type	public	string	'text'		LionInput
_allCountriesLabel	protected	string	''	Group label for all countries, when preferredCountries are shown
_allowedOrAllRegions	protected	RegionCode[]		Used for rendering the region/country list	LionInputTel
_feedbackConditionMeta	protected				LionField
_focusableNode	protected				LionField
_inputNode	protected	HTMLInputElement			LionInput
_langIso	protected	RegionCode | undefined	undefined		LionInputTel
_phoneUtil	protected	AwesomePhoneNumber|null			LionInputTel
_phoneUtilLoadComplete	protected	Promise<PhoneNumber>			LionInputTel
_preferredCountriesLabel	protected	string	''	Group label for preferred countries, when preferredCountries are shown
_templateDataDropdown	protected	TemplateDataForDropdownInputTel		This method provides a TemplateData object to be fed to pure template functions, a.k.a. Pure Templates™. The goal is to totally decouple presentation from logic here, so that Subclassers can override all content without having to loose private info contained within the template function that was overridden. Subclassers would need to make sure all the contents of the TemplateData object are implemented by making sure they are coupled to the right ‘ref’ ([data-ref=dropdown] in this example), with the help of lit’s spread operator directive. To enhance this process, the TemplateData object is completely typed. Ideally, this would be enhanced by providing linters that make sure all of their required members are implemented by a Subclasser. When a Subclasser wants to add more data, this can be done via:

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
clear	public	Clears modelValue. Interaction states are not cleared (use resetInteractionState for this)			LionField
formatter	public		modelValue: string	string	LionInputTel
onLocaleUpdated	public				LionInputTel
parser	public		viewValue: string	string	LionInputTel
preprocessor	public		viewValue: string, { currentCaretIndex, prevViewValue }, options: @param {string} options.prevViewValue * @param {number} options.currentCaretIndex *	{ viewValue: string; caretIndex: number; } | undefined	LionInputTel
reset	public	Resets modelValue to initial value. Interaction states are cleared			LionField
resetInteractionState	public				LionField
_initModelValueBasedOnDropdown	protected
_isEmpty	protected	Used for Required validation and computation of interaction states. We need to override this, because we prefill the input with the region code (like +31), but for proper UX, we don’t consider this as having interaction state `prefilled`	modelValue: string	boolean
_onChange	protected	Dispatches custom bubble event	ev: Event=		LionField
_onDropdownValueChange	protected		event: OnDropdownChangeEvent
_onPhoneNumberUtilReady	protected				LionInputTel
_reflectBackOn	protected	Do not reflect back .formattedValue during typing (this normally wouldn’t happen when FormatMixin calls _calculateValues based on user input, but for LionInputTel we need to call it on .activeRegion change)		boolean	LionInputTel
_repropagationCondition	protected	Usually, we don’t use composition in regular LionFields (non choice-groups). Here we use a LionSelect(Rich) inside. We don’t want to repropagate any children, since an Application Developer is not concerned with these internals (see repropate logic in FormControlMixin) Also, we don’t want to give (wrong) info to InteractionStateMixin, that will set the wrong interaction states based on child info. TODO: Make “this._repropagationRole !== ‘child’” the default for FormControlMixin (so that FormControls used within are never repropagated for LionFields)
_setActiveRegion	protected	Protected setter for activeRegion, only meant for subclassers	newValue: RegionCode|undefined		LionInputTel

Events

Name	Type	Description	Inherited From
user-input-changed	Event		LionField

Attributes

Name	Field	Inherited From
allowedRegions	allowedRegions	LionInputTel
format-strategy	formatStrategy	LionInputTel
format-country-code-style	formatCountryCodeStyle	LionInputTel
activeRegion	activeRegion	LionInputTel
preferredRegions	preferredRegions	LionInputTel
_phoneUtil	_phoneUtil	LionInputTel
readonly	readOnly	LionInput
type	type	LionInput
placeholder	placeholder	LionInput

---