Back to Phonenumber-guidelines

Web ComponentThe latest version of this package is: 0.6.9, 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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-wc/phonenumber@0.6.9

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

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.3.7 (2022-03-09)

Miscellaneous chores

0.3.6 (2022-03-09)

Miscellaneous chores

0.3.5 (2022-03-08)

Miscellaneous chores

0.3.4 (2021-11-10)

Miscellaneous chores

  • Manually testing inclusion of CHANGELOG.md (f91eb76)

0.3.0 (2021-11-10)

Miscellaneous chores

0.2.3 (2021-10-28)

Miscellaneous chores

  • reinstall (0f764a7)

  • update after change of navigational structure (e8962a1)

0.2.2 (2021-10-16)

Documentation Updates

0.2.0 (2021-10-14)

Miscellaneous chores

0.1.0 (2021-10-01)

⚠ BREAKING CHANGES

  • 🧨 We are now serving IIFE files instead of UMD, for a better dev

experience when including scripts with script-tag

  • 🧨 All webcomponent versions has been reset, due to new scope; @ids-wc

✅ Closes: 467386

Bug Fixes

  • 🐛 Rename required file to use IIFE, escape correctly (dff7a27)

  • 🐛 Use correct classnames for input-label and wrapper (04172fd)

  • 🐛 Use correct number of colons for pseudo-elements (5dc2806)

Documentation Updates

  • ✏️ Add and update docs for webcomponents (18f4342), closes #467386

Miscellaneous chores

  • 🤖 prettier (c4334ab)

  • 🤖 Remove babel, no longer required (9f6497c)

  • 🤖 Remove unneeded rc files (fdcac58)

  • 🤖 Remove usage of .npmignore, use files-prop instead (8b7c55e)

  • 🤖 Reset CHANGELOG.md files (bf1ef63)

  • 🤖 Reset versions for webcomponents, due to new scope (f540b01)

  • 🤖 Set correct output name (98da4f6)

  • 🤖 Update prettier rc files (7d0e3c9)

  • 🤖 Use correct dependencies after renaming of scope (38aba43), closes #467386

  • 🤖 Use correct names for import (72e77f3)

  • 🤖 Use iife instead of umd (ae0ebcc)

  • bootstrap (420cc99)

  • initial commit (8d74b20)

  • use correct import path (1fff2cb)

Contact us, Opens in new window