@marketplace-co/input-tel

src/InputTel.js:

class: InputTel, mpc-input-tel

Superclass

Name	Module	Package
LitElement		lit

Fields

Name	Privacy	Type	Default	Description	Inherited From
input
label	public	string	'Phone Number'	The inputs label
disabled		boolean	false
value	public	string	''	The inputs value
_placeholder	public	string	''
region	public	string	'US'	The inputs active region, this is used as a preference and can be overwritten by user input
name	public	string	'phone'	The inputs name
preferredRegions	public	array	[]	Array of preferred regions
allowedRegions	public	array	[]	Array of allowed regions
invalid	public	boolean	false	Whether the input is disabled `readonly`
_phoneUtil	public			Disables the input

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
fire			name, value
computePlaceholder

Events

Name	Type	Description	Inherited From
value-changed	CustomEvent
invalid-changed	CustomEvent

Attributes

Name	Field	Inherited From
label	label
value	value
region	region
name	name
preferredRegions	preferredRegions
allowedRegions	allowedRegions
invalid	invalid
_phoneUtil	_phoneUtil
_placeholder	_placeholder

---

Exports

Kind	Name	Declaration	Module	Package
js	InputTel	InputTel	src/InputTel.js

src/InputTelDropdown.js:

class: InputTelDropdown, mpc-input-tel-dropdown

Superclass

Name	Module	Package
LionInputTelDropdown		@lion/input-tel-dropdown

Static Fields

Name	Privacy	Type	Default	Description	Inherited From
templates		object	``{

dropdown: templateDataForDropdown => {
  const { refs, data } = templateDataForDropdown;
  const renderOption = regionMeta =>
    html`${this.templates.dropdownOption(
      templateDataForDropdown,
      regionMeta
    )} `;

  // TODO: once spread directive available, use it per ref
  return html`         <select
      class="form-select transition w-16 focus:ring-primary-500 focus:border-primary-500 h-full py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"
      ${ref(refs?.dropdown?.ref)}
      aria-label="${refs?.dropdown?.labels?.selectCountry}"
      @change="${refs?.dropdown?.listeners?.change}"
      style="${refs?.dropdown?.props?.style}"         >
      ${data?.regionMetaListPreferred?.length
        ? html`
            ${data.regionMetaListPreferred.map(renderOption)}                 <option disabled>---------------</option>
            ${data?.regionMetaList?.map(renderOption)}               `
        : html` ${data?.regionMetaList?.map(renderOption)}`}         </select>       `;
},
/**      * @param {TemplateDataForDropdownInputTel} templateDataForDropdown      * @param {RegionMeta} contextData      */
// eslint-disable-next-line class-methods-use-this
dropdownOption: (
  templateDataForDropdown,
  { regionCode, countryCode, flagSymbol }
) => html`       <!-- <option value="${regionCode}">
    ${regionCode} (+${countryCode}) &nbsp; ${flagSymbol}       </option> -->       <option value="${regionCode}">${regionCode}</option>     `,

}`` | | |

Fields

Name	Privacy	Type	Default	Description	Inherited From
	public
initialRegion	public

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
__calculateActiveRegion

Events

Name	Type	Description	Inherited From
active-region-changed	CustomEvent

Attributes

Name	Field	Inherited From
initialRegion	initialRegion

---

Exports

Kind	Name	Declaration	Module	Package
js	InputTelDropdown	InputTelDropdown	src/InputTelDropdown.js
custom-element-definition	mpc-input-tel-dropdown	InputTelDropdown	src/InputTelDropdown.js

mpc-input-tel.js:

Exports

Kind	Name	Declaration	Module	Package
custom-element-definition	mpc-input-tel	InputTel	/src/InputTel.js
js	default	InputTel	mpc-input-tel.js