@marketplace-co/input-tel NPM

`src/InputTel.js`:

class: `InputTel`, `mpc-input-tel`

Superclass

Name	Module	Package
`LitElement`		lit

Fields

Name	Privacy	Type	Default	Description
`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