159 lines
4.7 KiB
Markdown
159 lines
4.7 KiB
Markdown
# Input Tel Dropdown >> Use Cases ||20
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import { ref, createRef } from 'lit/directives/ref.js';
|
|
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
|
|
import { PhoneUtilManager } from '@lion/ui/input-tel.js';
|
|
import '@lion/ui/define/lion-input-tel-dropdown.js';
|
|
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
|
|
|
|
// TODO: make each example load/use the dependencies by default
|
|
// loadDefaultFeedbackMessages();
|
|
```
|
|
|
|
## Input Tel Dropdown
|
|
|
|
When `.allowedRegions` is not configured, all regions/countries will be available in the dropdown
|
|
list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.
|
|
|
|
```js preview-story
|
|
export const InputTelDropdown = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<lion-input-tel-dropdown
|
|
label="Select region via dropdown"
|
|
help-text="Shows all regions by default"
|
|
name="phoneNumber"
|
|
></lion-input-tel-dropdown>
|
|
<h-output
|
|
.show="${['modelValue', 'activeRegion']}"
|
|
.readyPromise="${PhoneUtilManager.loadComplete}"
|
|
></h-output>
|
|
`;
|
|
};
|
|
```
|
|
|
|
## Allowed regions
|
|
|
|
When `.allowedRegions` is configured, only those regions/countries will be available in the dropdown
|
|
list.
|
|
|
|
```js preview-story
|
|
export const allowedRegions = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<lion-input-tel-dropdown
|
|
label="Select region via dropdown"
|
|
help-text="With region code 'NL'"
|
|
.modelValue=${'+31612345678'}
|
|
name="phoneNumber"
|
|
.allowedRegions=${['NL', 'DE', 'GB']}
|
|
></lion-input-tel-dropdown>
|
|
<h-output
|
|
.show="${['modelValue', 'activeRegion']}"
|
|
.readyPromise="${PhoneUtilManager.loadComplete}"
|
|
></h-output>
|
|
`;
|
|
};
|
|
```
|
|
|
|
## Preferred regions
|
|
|
|
When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
|
|
|
|
```js preview-story
|
|
export const preferredRegionCodes = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<lion-input-tel-dropdown
|
|
label="Select region via dropdown"
|
|
help-text="Preferred regions show on top"
|
|
.modelValue=${'+31612345678'}
|
|
name="phoneNumber"
|
|
.allowedRegions=${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}
|
|
.preferredRegions=${['DE', 'NL']}
|
|
></lion-input-tel-dropdown>
|
|
<h-output
|
|
.show="${['modelValue', 'activeRegion']}"
|
|
.readyPromise="${PhoneUtilManager.loadComplete}"
|
|
></h-output>
|
|
`;
|
|
};
|
|
```
|
|
|
|
## Format
|
|
|
|
### Format strategy
|
|
|
|
Determines what the formatter output should look like.
|
|
Formatting strategies as provided by awesome-phonenumber / google-libphonenumber.
|
|
|
|
Possible values:
|
|
|
|
| strategy | output |
|
|
| :------------ | ------------------------------------: |
|
|
| e164 | `+46707123456` |
|
|
| international | `+46 70 712 34 56` |
|
|
| national | not applicable for input-tel-dropdown |
|
|
| significant | not applicable for input-tel-dropdown |
|
|
| rfc3966 | `tel:+46-70-712-34-56` |
|
|
|
|
Also see:
|
|
|
|
- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
|
|
|
|
```js preview-story
|
|
export const formatStrategy = () => {
|
|
loadDefaultFeedbackMessages();
|
|
const inputTel = createRef();
|
|
return html`
|
|
<select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
|
|
<option value="e164">e164</option>
|
|
<option value="international">international</option>
|
|
<option value="rfc3966">rfc3966</option>
|
|
</select>
|
|
<lion-input-tel-dropdown
|
|
${ref(inputTel)}
|
|
label="Format strategy"
|
|
help-text="Choose a strategy above"
|
|
format-strategy="e164"
|
|
name="phoneNumber"
|
|
></lion-input-tel-dropdown>
|
|
<h-output
|
|
.show="${['modelValue', 'formatStrategy']}"
|
|
.readyPromise="${PhoneUtilManager.loadComplete}"
|
|
></h-output>
|
|
`;
|
|
};
|
|
```
|
|
|
|
### Format country code style
|
|
|
|
You can style the country code with parentheses.
|
|
|
|
```js preview-story
|
|
export const formatCountryCodeStyle = () => {
|
|
loadDefaultFeedbackMessages();
|
|
const inputTel = createRef();
|
|
return html`
|
|
<select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
|
|
<option value="e164">e164</option>
|
|
<option value="international">international</option>
|
|
<option value="rfc3966">rfc3966</option>
|
|
</select>
|
|
<lion-input-tel-dropdown
|
|
${ref(inputTel)}
|
|
label="Format strategy"
|
|
help-text="Choose a strategy above"
|
|
format-country-code-style="parentheses"
|
|
format-strategy="e164"
|
|
name="phoneNumber"
|
|
></lion-input-tel-dropdown>
|
|
<h-output
|
|
.show="${['modelValue', 'formatStrategy']}"
|
|
.readyPromise="${PhoneUtilManager.loadComplete}"
|
|
></h-output>
|
|
`;
|
|
};
|
|
```
|