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.
$ 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.
<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.
<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
- reinstall (fa531f7)
0.3.6 (2022-03-09)
Miscellaneous chores
- reinstall (8482f7f)
0.3.5 (2022-03-08)
Miscellaneous chores
- reinstall (3220fb0)
0.3.4 (2021-11-10)
Miscellaneous chores
- Manually testing inclusion of CHANGELOG.md (f91eb76)
0.3.0 (2021-11-10)
Miscellaneous chores
-
reinstall (aac54a4)
-
rename (c20e410)
-
update references after name changing of util to utils (7dda072)
0.2.3 (2021-10-28)
Miscellaneous chores
0.2.2 (2021-10-16)
Documentation Updates
0.2.0 (2021-10-14)
Miscellaneous chores
- 🤖 linting (45467b0)
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
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)