diff --git a/.changeset/long-dragons-admire.md b/.changeset/long-dragons-admire.md new file mode 100644 index 000000000..cf50e54de --- /dev/null +++ b/.changeset/long-dragons-admire.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +feat(input-tel): use first preferred region to set a default region diff --git a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js index 82146194c..0cffb57cf 100644 --- a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js +++ b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js @@ -42,14 +42,6 @@ import { regionCodeToLocale } from './regionCodeToLocale.js'; * `e164` format that contains all info (both region code and national phone number). */ export class LionInputTelDropdown extends LionInputTel { - /** - * @configure LitElement - * @type {any} - */ - static properties = { - preferredRegions: { type: Array }, - }; - refs = { /** @type {DropdownRef} */ dropdown: /** @type {DropdownRef} */ (createRef()), @@ -214,11 +206,6 @@ export class LionInputTelDropdown extends LionInputTel { constructor() { super(); - /** - * Regions that will be shown on top of the dropdown - * @type {string[]} - */ - this.preferredRegions = []; /** * Group label for all countries, when preferredCountries are shown * @protected diff --git a/packages/ui/components/input-tel/src/LionInputTel.js b/packages/ui/components/input-tel/src/LionInputTel.js index 699f60241..adad7c182 100644 --- a/packages/ui/components/input-tel/src/LionInputTel.js +++ b/packages/ui/components/input-tel/src/LionInputTel.js @@ -27,6 +27,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) { formatStrategy: { type: String, attribute: 'format-strategy' }, formatCountryCodeStyle: { type: String, attribute: 'format-country-code-style' }, activeRegion: { type: String }, + preferredRegions: { type: Array }, _phoneUtil: { type: Object, state: true }, }; @@ -156,6 +157,12 @@ export class LionInputTel extends LocalizeMixin(LionInput) { */ this.allowedRegions = []; + /** + * Regions that will be shown on top of the dropdown + * @type {RegionCode[]} + */ + this.preferredRegions = []; + /** @private */ this.__isPhoneNumberValidatorInstance = new PhoneNumber(); /** @configures ValidateMixin */ @@ -326,13 +333,19 @@ export class LionInputTel extends LocalizeMixin(LionInput) { return; } - // 3. Try to get the region from locale + // 3. Get the first region in the list of preferred regions + if (this.preferredRegions?.length > 0) { + this._setActiveRegion(this.preferredRegions[0]); + return; + } + + // 4. Try to get the region from locale if (this._langIso && this._allowedOrAllRegions.includes(this._langIso)) { this._setActiveRegion(this._langIso); return; } - // 4. Not derivable + // 5. Not derivable this._setActiveRegion(undefined); } } diff --git a/packages/ui/components/input-tel/test-suites/LionInputTel.suite.js b/packages/ui/components/input-tel/test-suites/LionInputTel.suite.js index 391c1d6c1..efe7b2248 100644 --- a/packages/ui/components/input-tel/test-suites/LionInputTel.suite.js +++ b/packages/ui/components/input-tel/test-suites/LionInputTel.suite.js @@ -100,6 +100,20 @@ function runActiveRegionTests({ tag, phoneUtilLoadedAfterInit }) { expect(el.activeRegion).to.equal('NL'); }); + it('.modelValue takes precedence over .preferredRegions when both preconfigured and .modelValue updated', async () => { + const el = await fixture( + html` <${tag} .preferredRegions="${[ + 'DE', + 'BE', + ]}" .modelValue="${'+31612345678'}" > `, + ); + if (resolvePhoneUtilLoaded) { + resolvePhoneUtilLoaded(undefined); + await el.updateComplete; + } + expect(el.activeRegion).to.equal('NL'); + }); + it('deducts it from value when modelValue is unparseable', async () => { const modelValue = new Unparseable('+316'); const el = await fixture(html` <${tag} .modelValue=${modelValue}> `); @@ -122,7 +136,18 @@ function runActiveRegionTests({ tag, phoneUtilLoadedAfterInit }) { expect(el.activeRegion).to.equal('NL'); }); - // 3. **locale**: try to get the region from locale (`html[lang]` attribute) + // 3. **preferred-region**: get the first element in the preferred regions list + it('deducts it from the .preferredRegions when provided', async () => { + const el = await fixture(html` <${tag} .preferredRegions="${['DE', 'NL']}"> `); + if (resolvePhoneUtilLoaded) { + resolvePhoneUtilLoaded(undefined); + await el.updateComplete; + } + // Region code for country code '+49' is 'DE' + expect(el.activeRegion).to.equal('DE'); + }); + + // 4. **locale**: try to get the region from locale (`html[lang]` attribute) it('automatically bases it on current locale when nothing preconfigured', async () => { const el = await fixture(html` <${tag}> `); if (resolvePhoneUtilLoaded) {