@lion/ui 0.24.0 → 0.26.0

package/docs/components/input-tel/api-table.md

@@ -1,77 +0,0 @@
----
-parts:
-  - API Table
-  - Input Tel
-title: 'Input Tel: API Table'
-eleventyNavigation:
-  key: API Table >> Input Tel
-  title: API Table
-  order: 90
-  parent: Input Tel
----
-# Input Tel: API Table
- 
-
-## class: `LionInputTel`, `lion-input-tel`
-
-### Fields
-
-| Name                     | Privacy   | Type                       | Default           | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------ | --------- | -------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `activePhoneNumberType`  | public    |                            |                   | Type of phone number, derived from textbox value. Enum with values:
-'fixed-line'
-'fixed-line-or-mobile'
-'mobile'
-'pager'
-'personal-number'
-'premium-rate'
-'shared-cost'
-'toll-free'
-'uan'
-'voip'
-'unknown'
See https\://www\.npmjs.com/package/awesome-phonenumber                                                                                     |                |
-| `activeRegion`           | public    | `string`                   |                   | Currently active region based on:
1\. allowed regions: get the region from configured allowed regions (if one entry)
2\. user input: try to derive active region from user input
3\. locale: try to get the region from locale (\`html\[lang]\` attribute)                                                                                                                                            |                |
-| `allowedRegions`         | public    | `RegionCode[]`             | `[]`              | The regions that should be considered when international phone numbers are detected.
(when not configured, all regions worldwide will be considered)                                                                                                                                                                                                                                                          |                |
-| `autocomplete`           | public    | `string`                   | `'tel'`           |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `fieldName`              | public    |                            |                   | Set a default name for this field, so that validation feedback will be always
accessible and linguistically correct                                                                                                                                                                                                                                                                                           |                |
-| `formatCountryCodeStyle` | public    | `string`                   | `'default'`       | Extra styling of the format strategy
default \| parentheses                                                                                                                                                                                                                                                                                                                                                   |                |
-| `formatStrategy`         | public    | `PhoneNumberFormat`        | `'international'` | Determines what the formatter output should look like.
Formatting strategies as provided by google-libphonenumber
See: https\://www\.npmjs.com/package/google-libphonenumber                                                                                                                                                                                                                              |                |
-| `placeholder`            | public    | `string`                   | `''`              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `preferredRegions`       | public    | `RegionCode[]`             | `[]`              | Regions that will be shown on top of the dropdown                                                                                                                                                                                                                                                                                                                                                                 |                |
-| `readOnly`               | public    | `boolean`                  | `false`           | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
-| `slots`                  | public    |                            |                   |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `type`                   | public    | `string`                   | `'text'`          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_allowedOrAllRegions`   | protected | `RegionCode[]`             |                   | Used for rendering the region/country list                                                                                                                                                                                                                                                                                                                                                                        |                |
-| `_feedbackConditionMeta` | protected |                            |                   |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`         | protected |                            |                   |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_inputNode`             | protected | `HTMLInputElement`         |                   |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_langIso`               | protected | `RegionCode \| undefined`  | `undefined`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_phoneUtil`             | protected | `AwesomePhoneNumber\|null` |                   |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_phoneUtilLoadComplete` | protected | `Promise<PhoneNumber>`     |                   |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-
-### Methods
-
-| Name                      | Privacy   | Description                                                                                                                                                                                                             | Parameters                                                                                                                                                     | Return                                                    | Inherited From |
-| ------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -------------- |
-| `clear`                   | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this)                                                                                                                          |                                                                                                                                                                |                                                           | LionField      |
-| `formatter`               | public    |                                                                                                                                                                                                                         | `modelValue: string`                                                                                                                                           | `string`                                                  |                |
-| `onLocaleUpdated`         | public    |                                                                                                                                                                                                                         |                                                                                                                                                                |                                                           |                |
-| `parser`                  | public    |                                                                                                                                                                                                                         | `viewValue: string`                                                                                                                                            | `string`                                                  |                |
-| `preprocessor`            | public    |                                                                                                                                                                                                                         | `viewValue: string, { currentCaretIndex, prevViewValue }, options: @param {string} options.prevViewValue    * @param {number} options.currentCaretIndex    * ` | `{ viewValue: string; caretIndex: number; } \| undefined` |                |
-| `reset`                   | public    | Resets modelValue to initial value.&#xA;Interaction states are cleared                                                                                                                                                  |                                                                                                                                                                |                                                           | LionField      |
-| `resetInteractionState`   | public    |                                                                                                                                                                                                                         |                                                                                                                                                                |                                                           | LionField      |
-| `_onChange`               | protected | Dispatches custom bubble event                                                                                                                                                                                          | `ev: Event=`                                                                                                                                                   |                                                           | LionField      |
-| `_onPhoneNumberUtilReady` | protected |                                                                                                                                                                                                                         |                                                                                                                                                                |                                                           |                |
-| `_reflectBackOn`          | protected | Do not reflect back .formattedValue during typing (this normally wouldn't happen when&#xA;FormatMixin calls \_calculateValues based on user input, but for LionInputTel we need to&#xA;call it on .activeRegion change) |                                                                                                                                                                | `boolean`                                                 |                |
-| `_setActiveRegion`        | protected | Protected setter for activeRegion, only meant for subclassers                                                                                                                                                           | `newValue: RegionCode\|undefined`                                                                                                                              |                                                           |                |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name                        | Field                  | Inherited From |
-| --------------------------- | ---------------------- | -------------- |
-| `allowedRegions`            | allowedRegions         |                |
-| `format-strategy`           | formatStrategy         |                |
-| `format-country-code-style` | formatCountryCodeStyle |                |
-| `activeRegion`              | activeRegion           |                |
-| `preferredRegions`          | preferredRegions       |                |
-| `_phoneUtil`                | \_phoneUtil            |                |
-| `readonly`                  | readOnly               | LionInput      |
-| `type`                      | type                   | LionInput      |
-| `placeholder`               | placeholder            | LionInput      |
-
-<hr/>

package/docs/components/input-tel/index.md

@@ -1,13 +0,0 @@
----
-title: Input Tel
-parts:
-  - Input Tel
-eleventyNavigation:
-  key: Input Tel
-  order: 20
-  title: Input Tel
----
-
-# Input Tel
-
--> go to Overview

package/docs/components/input-tel/overview.md

@@ -1,74 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Tel
-  - Overview
-eleventyNavigation:
-  key: 'Input Tel: Overview'
-  order: 10
-  parent: Input Tel
-  title: Overview
----
-
-# Overview
-
-Input field for entering phone numbers, including validation, formatting and mobile keyboard support.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { ref, createRef } from 'lit/directives/ref.js';
-
-import { PhoneUtilManager } from '@lion/ui/input-tel.js';
-import '@lion/ui/define/lion-input-tel.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import '../../../docs/fundamentals/systems/form/assets/h-output.js';
-```
-
-```js preview-story
-export const main = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel
-      .modelValue="${'+639921343959'}"
-      live-format
-      label="Telephone number"
-      name="phoneNumber"
-    ></lion-input-tel>
-    <h-output
-      .show="${[
-        'activeRegion',
-        {
-          name: 'all or allowed regions',
-          processor: el => JSON.stringify(el._allowedOrAllRegions),
-        },
-        'modelValue',
-      ]}" 'modelValue']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-## Features
-
-- Extends our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
-- Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
-- Can be configured with a list of allowed region codes
-- Will be preconfigured with region derived from locale
-- Has the [e164 standard format](https://en.wikipedia.org/wiki/E.164) as modelValue
-- Uses [awesome-phonenumber](https://www.npmjs.com/package/awesome-phonenumber) (a performant, concise version of [google-lib-phonenumber](https://www.npmjs.com/package/google-libphonenumber)):
-  - Formats phone numbers, based on region code
-  - Validates phone numbers, based on region code
-- Lazy loads awesome-phonenumber, so that the first paint of this component will be brought to your screen as quick as possible
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputTel } from '@lion/ui/input-tel.js';
-// or
-import '@lion/ui/define/lion-input-tel.js';
-```

package/docs/components/input-tel/src/h-region-code-table.js

@@ -1,109 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-import { ScopedStylesController } from '@lion/ui/core.js';
-import { regionMetaList } from '../../select-rich/src/regionMetaList.js';
-
-export class HRegionCodeTable extends LitElement {
-  static properties = {
-    regionMeta: Object,
-  };
-
-  constructor() {
-    super();
-    /** @type {ScopedStylesController} */
-    this.scopedStylesController = new ScopedStylesController(this);
-  }
-
-  /**
-   * @param {CSSResult} scope
-   */
-  static scopedStyles(scope) {
-    return css`
-      /* Custom input range styling comes here, be aware that this won't work for polyfilled browsers */
-      .${scope} .sr-only {
-        position: absolute;
-        top: 0;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip-path: inset(100%);
-        clip: rect(1px, 1px, 1px, 1px);
-        white-space: nowrap;
-        border: 0;
-        margin: 0;
-        padding: 0;
-      }
-
-      .${scope} table {
-        position: relative;
-        height: 300px;
-      }
-
-      .${scope} th {
-        border-left: none;
-        border-right: none;
-        position: sticky;
-        top: -1px;
-      }
-
-      .${scope} th .backdrop {
-        background-color: white;
-        opacity: 0.95;
-        filter: blur(4px);
-        position: absolute;
-        inset: -5px;
-      }
-
-      .${scope} th .content {
-        position: relative;
-      }
-
-      .${scope} td {
-        border-left: none;
-        border-right: none;
-      }
-    `;
-  }
-
-  // Render to light dom, so global table styling will be applied
-  createRenderRoot() {
-    return this;
-  }
-
-  render() {
-    const finalRegionMetaList = this.regionMetaList || regionMetaList;
-    return html`
-      <table role="table">
-        <caption class="sr-only">
-          Region codes
-        </caption>
-        <thead>
-          <tr>
-            <th align="left">
-              <span class="backdrop"></span><span class="content">country name</span>
-            </th>
-            <th align="right">
-              <span class="backdrop"></span><span class="content">region code</span>
-            </th>
-            <th align="right">
-              <span class="backdrop"></span><span class="content">country code</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          ${repeat(
-            finalRegionMetaList,
-            regionMeta => regionMeta.regionCode,
-            ({ regionCode, countryCode, flagSymbol, nameForLocale }) =>
-              html` <tr>
-                <td align="left"><span aria-hidden="true">${flagSymbol}</span> ${nameForLocale}</td>
-                <td align="right">${regionCode}</td>
-                <td align="right">${countryCode}</td>
-              </tr>`,
-          )}
-        </tbody>
-      </table>
-    `;
-  }
-}
-customElements.define('h-region-code-table', HRegionCodeTable);

package/docs/components/input-tel/use-cases.md

@@ -1,319 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Tel
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Tel: Use Cases'
-  order: 20
-  parent: Input Tel
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { ref, createRef } from 'lit/directives/ref.js';
-import { Unparseable } from '@lion/ui/form-core.js';
-import { localize } from '@lion/ui/localize.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import { PhoneUtilManager } from '@lion/ui/input-tel.js';
-import '@lion/ui/define/lion-input-tel.js';
-import './src/h-region-code-table.js';
-import '../../../docs/fundamentals/systems/form/assets/h-output.js';
-
-// TODO: make each example load/use the dependencies by default
-// loadDefaultFeedbackMessages();
-```
-
-## Regions: some context
-
-Say we have the following telephone number from Madrid, Spain: `+34919930432`.
-
-It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
-Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
-
-The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions) are not configured,
-all of them will be supported as values of Input Tel.
-
-```js story
-export const regionCodesTable = () => {
-  loadDefaultFeedbackMessages();
-  return html`<h-region-code-table></h-region-code-table>`;
-};
-```
-
-### Active region
-
-The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
-should be applied. It is dependent on the following factors:
-
-- [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
-  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
-- the modelValue or viewValue: once it contains sufficient info to derive its region code (and
-  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions) if configured)
-- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel/#allowed-regions) if configured)
-
-What follows from the list above is that .activeRegion can change dynamically, after a value
-change in the text box by the user (or when locales or allowed regions would be changed by the
-Application Developer).
-
-### How active region is computed
-
-The following heuristic will be applied:
-
-1. check for **allowed regions**: if one region defined in .allowedRegions, use it.
-2. check for **user input**: try to derive active region from user input
-3. check for **locale**: try to get the region from locale (`html[lang]` attribute)
-
-```js preview-story
-export const heuristic = () => {
-  loadDefaultFeedbackMessages();
-
-  const initialAllowedRegions = ['CN', 'ES'];
-  const [inputTelRef, outputRef, selectRef] = [createRef(), createRef(), createRef()];
-
-  const setDerivedActiveRegionScenario = (
-    scenarioToSet,
-    inputTel = inputTelRef.value,
-    output = outputRef.value,
-  ) => {
-    if (scenarioToSet === 'only-allowed-region') {
-      // activeRegion will be the top allowed region, which is 'NL'
-      inputTel.modelValue = undefined;
-      inputTel.allowedRegions = ['NL']; // activeRegion will always be the only option
-      output.innerText = '.activeRegion (NL) is only allowed region';
-    } else if (scenarioToSet === 'user-input') {
-      // activeRegion will be based on phone number => 'BE'
-      inputTel.allowedRegions = ['NL', 'BE', 'DE'];
-      inputTel.modelValue = '+3261234567'; // BE number
-      output.innerText = '.activeRegion (BE) is derived (since within allowedRegions)';
-    } else if (scenarioToSet === 'locale') {
-      localize.locale = 'en-GB';
-      // activeRegion will be `html[lang]`
-      inputTel.modelValue = undefined;
-      inputTel.allowedRegions = undefined;
-      output.innerText = `.activeRegion (${inputTel._langIso}) set to locale when inside allowed or all regions`;
-    } else {
-      output.innerText = '';
-    }
-  };
-  return html`
-    <select
-      aria-label="Set scenario"
-      @change="${({ target }) => setDerivedActiveRegionScenario(target.value)}"
-    >
-      <option value="">--- select scenario ---</option>
-      <option value="only-allowed-region">1. only allowed region</option>
-      <option value="user-input">2. user input</option>
-      <option value="locale">3. locale</option>
-    </select>
-    <output style="display:block; min-height: 1.5em;" id="myOutput" ${ref(outputRef)}></output>
-    <lion-input-tel
-      ${ref(inputTelRef)}
-      @model-value-changed="${({ detail }) => {
-        if (detail.isTriggeredByUser && selectRef.value) {
-          selectRef.value.value = '';
-        }
-      }}"
-      name="phoneNumber"
-      label="Active region"
-      .allowedRegions="${initialAllowedRegions}"
-    ></lion-input-tel>
-    <h-output
-      .show="${[
-        'activeRegion',
-        {
-          name: 'all or allowed regions',
-          processor: el => JSON.stringify(el._allowedOrAllRegions),
-        },
-        'modelValue',
-      ]}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-## Allowed regions
-
-`.allowedRegions` is an array of one or more region codes.
-Once it is configured, validation and formatting will be restricted to those
-values that are present in this list.
-
-> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-tel-dropdown/index.md), only allowed regions will
-> be shown in the dropdown list.
-
-```js preview-story
-export const allowedRegions = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel
-      label="Allowed regions 'NL', 'BE', 'DE'"
-      help-text="Type '+31'(NL), '+32'(BE) or '+49'(DE) and see how activeRegion changes"
-      .allowedRegions="${['NL', 'BE', 'DE']}"
-      .modelValue="${'+31612345678'}"
-      name="phoneNumber"
-    ></lion-input-tel>
-    <h-output
-      .show="${['modelValue', 'activeRegion']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-### Restrict to one region
-
-When one allowed region is configured, validation and formatting will be restricted to just that
-region (that means that changes of the region via viewValue won't have effect).
-
-```js preview-story
-export const oneAllowedRegion = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel
-      label="Only allowed region 'DE'"
-      help-text="Restricts validation / formatting to one region"
-      .allowedRegions="${['DE']}"
-      .modelValue="${'+31612345678'}"
-      name="phoneNumber"
-    ></lion-input-tel>
-    <h-output
-      .show="${['modelValue', 'activeRegion', 'validationStates']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-## Format
-
-### Format strategy
-
-Determines what the formatter output should look like.
-Formatting strategies as provided by awesome-phonenumber / google-libphonenumber.
-
-Possible values:
-
-| strategy      |                 output |
-| :------------ | ---------------------: |
-| e164          |         `+46707123456` |
-| international |     `+46 70 712 34 56` |
-| national      |        `070-712 34 56` |
-| significant   |            `707123456` |
-| rfc3966       | `tel:+46-70-712-34-56` |
-
-Also see:
-
-- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
-
-```js preview-story
-export const formatStrategy = () => {
-  loadDefaultFeedbackMessages();
-  const inputTel = createRef();
-  return html`
-    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
-      <option value="e164">e164</option>
-      <option value="international">international</option>
-      <option value="national">national</option>
-      <option value="significant">significant</option>
-      <option value="rfc3966">rfc3966</option>
-    </select>
-    <lion-input-tel
-      ${ref(inputTel)}
-      label="Format strategy"
-      help-text="Choose a strategy above"
-      .modelValue="${'+46707123456'}"
-      format-strategy="national"
-      name="phoneNumber"
-    ></lion-input-tel>
-    <h-output
-      .show="${['modelValue', 'formatStrategy']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-### Format country code style
-
-You can also style the country code with parentheses.
-
-```js preview-story
-export const formatCountryCodeStyle = () => {
-  loadDefaultFeedbackMessages();
-  const inputTel = createRef();
-  return html`
-    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
-      <option value="e164">e164</option>
-      <option value="international">international</option>
-      <option value="rfc3966">rfc3966</option>
-    </select>
-    <lion-input-tel
-      ${ref(inputTel)}
-      label="Format strategy"
-      help-text="Choose a strategy above"
-      .modelValue="${'+46707123456'}"
-      format-country-code-style="parentheses"
-      name="phoneNumber"
-    ></lion-input-tel>
-    <h-output
-      .show="${['modelValue', 'formatStrategy']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```
-
-### Live format
-
-Type '6' in the example below to see how the phone number is formatted during typing.
-
-See [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
-
-```js preview-story
-export const liveFormat = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel
-      label="Realtime format on user input"
-      help-text="Partial numbers are also formatted"
-      .modelValue="${new Unparseable('+31')}"
-      format-strategy="international"
-      live-format
-      name="phoneNumber"
-    ></lion-input-tel>
-  `;
-};
-```
-
-## Active phone number type
-
-The readonly acessor `.activePhoneNumberType` outputs the current phone number type, based on
-the textbox value.
-
-Possible types: `fixed-line`, `fixed-line-or-mobile`, `mobile`, `pager`, `personal-number`, `premium-rate`, `shared-cost`, `toll-free`, `uan`, `voip`, `unknown`
-
-Also see:
-
-- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
-
-```js preview-story
-export const activePhoneNumberType = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-tel
-      label="Active phone number type"
-      .modelValue="${'+31612345678'}"
-      format-strategy="international"
-      name="phoneNumber"
-    ></lion-input-tel>
-    <h-output
-      .show="${['activePhoneNumberType']}"
-      .readyPromise="${PhoneUtilManager.loadComplete}"
-    ></h-output>
-  `;
-};
-```