Input Tel >> Overview ||10

Input field for entering phone numbers, including validation, formatting and mobile keyboard support.

import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from '@lion/core';
import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel/define';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';

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
• 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 as modelValue
• Uses awesome-phonenumber (a performant, concise version of google-lib-phonenumber):
  • 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

npm i --save @lion/input-tel

import { LionInputTel } from '@lion/input-tel';
// or
import '@lion/input-tel/define';