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 | |