0.0.2 • Published 3 years ago
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}) ${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 | |