11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
44 lines
1.1 KiB
Markdown
44 lines
1.1 KiB
Markdown
---
|
|
parts:
|
|
- Input Tel Dropdown
|
|
- Extensions
|
|
title: 'Input Tel Dropdown: Extensions'
|
|
eleventyNavigation:
|
|
key: 'Input Tel Dropdown: Extensions'
|
|
order: 30
|
|
parent: Input Tel Dropdown
|
|
title: Extensions
|
|
---
|
|
|
|
# Input Tel Dropdown: Extensions
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import '@lion/ui/define/lion-select-rich.js';
|
|
import './src/intl-input-tel-dropdown.js';
|
|
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
|
|
```
|
|
|
|
## Input Tel International
|
|
|
|
A visually advanced Subclasser implementation of `LionInputTelDropdown`.
|
|
|
|
Inspired by:
|
|
|
|
- [intl-tel-input](https://intl-tel-input.com/)
|
|
- [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2)
|
|
|
|
```js preview-story
|
|
export const IntlInputTelDropdown = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<intl-input-tel-dropdown
|
|
.preferredRegions="${['NL', 'PH']}"
|
|
.modelValue="${'+639608920056'}"
|
|
label="Telephone number"
|
|
help-text="Advanced dropdown and styling"
|
|
name="phoneNumber"
|
|
></intl-input-tel-dropdown>
|
|
`;
|
|
};
|
|
```
|