npm package: @marketplace-co/input-tel
Description: Webcomponent mpc-input-tel following open-wc recommendations
Author: mpc-input-tel
Latest version: 0.0.8

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

<hr/>

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

<hr/>

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