Back to guidelines

Web ComponentThe latest version of this package is: 0.3.4, Opens in new window

Webcomponent for Phonenumber Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-wc/phonenumber@0.3.4

Table of Contents

Usage

Markup

<html class="if" lang="en"><form class="if" autocomplete="off">
    <div class="if input-wrapper">
      <ids-phonenumber></ids-phonenumber>
      <input
        type="tel"
        class="if input-field phonenumber is-optional"
        data-lpignore="true"
      />
      <label class="if input-label">Default</label>
      <div class="if input-error">Please enter a valid phonenumber</div>
    </div>
    <button type="submit" class="if primary button">Submit</button>
  </form>
  <script src="…phonenumber-webcomponent.iife.js"></script></html>

Open on init

Use data-open to open the component on init.

Please enter a valid phonenumber
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <ids-phonenumber data-open></ids-phonenumber>
    <input
      type="tel"
      class="if input-field phonenumber is-optional"
      data-lpignore="true"
    />
    <label class="if input-label">Default</label>
    <div class="if input-error">Please enter a valid phonenumber</div>
  </div>
</form>

Custom locale

Use data-locale to enforce the locale to be used. If nothing is given, we default to the lang-attribute on the html-tag.

Please enter a valid phonenumber
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <ids-phonenumber data-locale="ru"></ids-phonenumber>
    <input
      type="tel"
      class="if input-field phonenumber is-optional"
      data-lpignore="true"
    />
    <label class="if input-label">Default</label>
    <div class="if input-error">Please enter a valid phonenumber</div>
  </div>
</form>

Api

Properties

Property Type Description
data-locale String The locale to be used, default is html[lang]
data-open Boolean Open on init

Events

The webcomponent fires a CustomEvent when a phonenumber is valid: ids:phonenumber:valid. The webcomponent fires a Invalid event when a phonenumber is invalid: invalid.

Event Type Description
ids:phonenumber:valid CustomEvent Event fired when phonenumber is valid
invalid Invalid event Event fired when phonenumber is invalid

The payload of the CustomEvent looks something like this:

detail: {
  source: 'IDS_PHONENUMBER',
  type: 'IDS_PHONENUMBER_VALID',
  payload: {
    value: this.telInputElement.value
  }
}
Contact us, Opens in new window