@lion/ui 0.21.1 → 0.22.0

package/components/input/src/LionInput.js

@@ -103,7 +103,9 @@ export class LionInput extends NativeTextFieldMixin(LionField) {
     }
 
     if (changedProperties.has('autocomplete')) {
-      this._inputNode.autocomplete = /** @type {string} */ (this.autocomplete);
+      // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
+      // cast keeps this valid on both compilers without widening the public type
+      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
     }
   }
 

package/components/input-amount-dropdown/src/LionInputAmountDropdown.js

@@ -175,7 +175,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
     return {
       refs,
       data: {
-        // @ts-expect-error - cannot cast string to CurrencyCode outside a TS file
+        // @ts-ignore - cannot cast string to CurrencyCode outside a TS file
         currency: this.currency,
         regionMetaList: this.__regionMetaList,
         regionMetaListPreferred: this.__regionMetaListPreferred,
@@ -320,6 +320,39 @@ export class LionInputAmountDropdown extends LionInputAmount {
     this.__createCurrencyMeta();
   }
 
+  /**
+   * Group label for all countries, when preferredCountries are shown
+   * @protected
+   */
+  _allCurrenciesLabel;
+
+  /**
+   * Group label for preferred countries, when preferredCountries are shown
+   * @protected
+   */
+  _preferredCurrenciesLabel;
+
+  /**
+   * Contains everything needed for rendering region options:
+   * region code, currency code, display name according to locale, display name
+   * @private
+   * @type {RegionMeta[]}
+   */
+  __regionMetaList;
+
+  /**
+   * A filtered `this.__regionMetaList`, containing all regions provided in `preferredCurrencies`
+   * @private
+   * @type {RegionMeta[]}
+   */
+  __regionMetaListPreferred;
+
+  /**
+   * @protected
+   * @type {RegionCode | undefined}
+   */
+  _langIso = undefined;
+
   /**
    * @lifecycle platform
    */
@@ -359,30 +392,11 @@ export class LionInputAmountDropdown extends LionInputAmount {
      */
     this.allowedCurrencies = [];
 
-    /**
-     * Group label for all countries, when preferredCountries are shown
-     * @protected
-     */
     this._allCurrenciesLabel = '';
-    /**
-     * Group label for preferred countries, when preferredCountries are shown
-     * @protected
-     */
     this._preferredCurrenciesLabel = '';
 
-    /**
-     * Contains everything needed for rendering region options:
-     * region code, currency code, display name according to locale, display name
-     * @private
-     * @type {RegionMeta[]}
-     */
     this.__regionMetaList = [];
 
-    /**
-     * A filtered `this.__regionMetaList`, containing all regions provided in `preferredCurrencies`
-     * @private
-     * @type {RegionMeta[]}
-     */
     this.__regionMetaListPreferred = [];
 
     /**
@@ -401,7 +415,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
 
   /**
    * @lifecycle LitElement
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('lit').PropertyValues } changedProperties
    */
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
@@ -412,7 +426,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('lit').PropertyValues } changedProperties
    */
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -434,7 +448,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
 
   /**
    * @lifecycle LitElement
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('lit').PropertyValues } changedProperties
    */
   firstUpdated(changedProperties) {
     super.firstUpdated?.(changedProperties);
@@ -446,9 +460,9 @@ export class LionInputAmountDropdown extends LionInputAmount {
    */
   _initModelValueBasedOnDropdown() {
     const { currency, amount } = this._initialModelValue || {};
-    if (!currency && !amount && !this.dirty) {
+    if (!currency && !this.dirty) {
       this.__initializedCurrencyCode = this.currency;
-      this._initialModelValue = { currency: this.currency };
+      this._initialModelValue = { currency: this.currency, amount };
       this.modelValue = this._initialModelValue;
       this.initInteractionState();
     }
@@ -478,10 +492,12 @@ export class LionInputAmountDropdown extends LionInputAmount {
     const dropdownValue = /** @type {RegionCode} */ (
       dropdownElement.modelValue || dropdownElement.value
     );
+    // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; declared `string` but legitimately reset to undefined: widen the type in the types file (API change) or guard the read with a local
     if (isInitializing || this.currency === dropdownValue) {
       return;
     }
 
+    // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; declared `string` but legitimately reset to undefined: widen the type in the types file (API change) or guard the read with a local
     const prevCurrency = this.currency;
 
     /** @type {RegionCode | string} */
@@ -596,12 +612,14 @@ export class LionInputAmountDropdown extends LionInputAmount {
         this._currencyUtil?.countryToCurrencyMap.get(this._langIso),
       )
     ) {
-      this.currency = this._currencyUtil?.countryToCurrencyMap.get(this._langIso);
+      this.currency = /** @type {any} */ (
+        this._currencyUtil?.countryToCurrencyMap.get(this._langIso)
+      );
       return;
     }
 
     // 5. Not derivable
-    this.currency = undefined;
+    this.currency = /** @type {any} */ (undefined);
   }
 
   /**

package/components/input-amount-dropdown/test/LionInputAmountDropdown.test.js

@@ -26,6 +26,7 @@ class WithFormControlInputAmountDropdown extends ScopedElementsMixin(LionInputAm
    * @configure ScopedElementsMixin
    */
   static scopedElements = {
+    // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
     ...super.scopedElements,
     'lion-select-rich': LionSelectRich,
     'lion-option': LionOption,

package/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.js

@@ -15,9 +15,18 @@ describe('<lion-input-amount-dropdown> integrations', () => {
       }
       return !toggleValue ? { amount: 123, currency: 'EUR' } : { amount: 456, currency: 'EUR' };
     },
-    getExpectedInitialModelValue: el => ({ currency: /** @type {any} */ (el).currency }),
-    getExpectedInitialFormattedValue: el => ({ currency: /** @type {any} */ (el).currency }),
-    getExpectedInitialSerializedValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedInitialModelValue: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
+    getExpectedInitialFormattedValue: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
+    getExpectedInitialSerializedValue: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
     getExpectedModelValueForEmptyInputNode: el => ({
       currency: /** @type {any} */ (el).currency,
       amount: '',

package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -53,7 +53,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
         'GBP',
       );
-      expect(el.modelValue).to.eql({ currency: 'GBP' });
+      expect(el.modelValue).to.eql({ currency: 'GBP', amount: '' });
     });
 
     it('syncs value of dropdown on reset if input has no value', async () => {
@@ -62,7 +62,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       await el.updateComplete;
       el.reset();
       await el.updateComplete;
-      expect(el.modelValue).to.eql({ currency: 'GBP' });
+      expect(el.modelValue).to.eql({ currency: 'GBP', amount: '' });
       expect(el.value).to.equal('');
     });
 
@@ -89,7 +89,13 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       const el = await fixture(html` <${tag}
           .preferredCurrencies="${['JPY', 'EUR']}"
           ></${tag}> `);
-      expect(el.modelValue).to.eql({ currency: 'JPY' });
+      expect(el.modelValue).to.eql({ currency: 'JPY', amount: '' });
+    });
+
+    it('derives currency when modelValue only has an amount', async () => {
+      const el = await fixture(html` <${tag} .modelValue="${{ amount: 123 }}" ></${tag}> `);
+      expect(el.currency).to.equal('GBP');
+      expect(el.modelValue).to.eql({ currency: 'GBP', amount: 123 });
     });
 
     it('sets correct interaction states on init if input has a value', async () => {
@@ -262,6 +268,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
         );
         expect(el.modelValue).to.eql({
           currency: 'GBP',
+          amount: '',
         });
       });
 

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -28,6 +28,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
 ) {
   static get scopedElements() {
     return {
+      // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
       ...super.scopedElements,
       'lion-calendar': LionCalendar,
     };
@@ -134,21 +135,31 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     return this.focused && this._isHandlingUserInput;
   }
 
+  /** @private */
+  __invokerId;
+
+  /** @protected */
+  _focusCentralDateOnCalendarOpen;
+
+  /** @protected */
+  _hideOnUserSelect;
+
+  /** @protected */
+  _syncOnUserSelect;
+
+  /** @protected */
+  _isHandlingCalendarUserInput;
+
   constructor() {
     super();
-    /** @private */
     this.__invokerId = uuid(this.localName);
     /** @protected */
     this._calendarInvokerSlot = 'suffix';
 
     // Configuration flags for subclassers
-    /** @protected */
     this._focusCentralDateOnCalendarOpen = true;
-    /** @protected */
     this._hideOnUserSelect = true;
-    /** @protected */
     this._syncOnUserSelect = true;
-    /** @protected */
     this._isHandlingCalendarUserInput = false;
 
     /** @private */
@@ -389,7 +400,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   /**
    * The LionCalendar shouldn't know anything about the modelValue;
    * it can't handle Unparseable dates, but does handle 'undefined'
-   * @param {?} modelValue
+   * @param {any} modelValue
    * @returns {Date | undefined} a 'guarded' modelValue
    */
   static __getSyncDownValue(modelValue) {

package/components/input-datepicker/src/localizeNamespaceLoader.js

@@ -1,5 +1,5 @@
 /**
- * @param {Promise<{default:object}>[]} importPromises
+ * @param {Promise<{default: Record<string, any>}>[]} importPromises
  */
 async function combineLocalizeImports(importPromises) {
   const localizeObjects = await Promise.all(importPromises);

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -362,6 +362,7 @@ describe('<lion-input-datepicker>', () => {
             tagName,
             class CustomInputDatepicker extends LionInputDatepicker {
               static get validationTypes() {
+                // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
                 return [...super.validationTypes, 'warning'];
               }
             },
@@ -470,13 +471,17 @@ describe('<lion-input-datepicker>', () => {
         expect(el.hasFeedbackFor).to.include('error');
         expect(el.validationStates).to.have.property('error');
         expect(el.validationStates.error).to.have.property('AlwaysInvalid');
-        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), elObj.calendarEl.selectedDate))
-          .to.be.true;
+        expect(
+          isSameDate(
+            /** @type {Date} */ (parseDate(el.value)),
+            /** @type {Date} */ (elObj.calendarEl.selectedDate),
+          ),
+        ).to.be.true;
         expect(
           isSameDate(
             // @ts-ignore [allow-protected] in test
             /** @type {Date} */ (parseDate(el._inputNode.value)),
-            elObj.calendarEl.selectedDate,
+            /** @type {Date} */ (elObj.calendarEl.selectedDate),
           ),
         ).to.be.true;
       });
@@ -499,13 +504,17 @@ describe('<lion-input-datepicker>', () => {
         expect(el.hasFeedbackFor).to.include('error');
         expect(el.validationStates).to.have.property('error');
         expect(el.validationStates.error).to.have.property('AlwaysInvalid');
-        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), elObj.calendarEl.selectedDate))
-          .to.be.true;
+        expect(
+          isSameDate(
+            /** @type {Date} */ (parseDate(el.value)),
+            /** @type {Date} */ (elObj.calendarEl.selectedDate),
+          ),
+        ).to.be.true;
         expect(
           isSameDate(
             // @ts-ignore [allow-protected] in test
             /** @type {Date} */ (parseDate(el._inputNode.value)),
-            elObj.calendarEl.selectedDate,
+            /** @type {Date} */ (elObj.calendarEl.selectedDate),
           ),
         ).to.be.true;
       });

package/components/input-datepicker/test-helpers/DatepickerInputObject.js

@@ -53,7 +53,7 @@ export class DatepickerInputObject {
 
   get overlayEl() {
     // @ts-expect-error not supposed to call _overlayCtrl publicly here on this.el
-    return /** @type {LitElement} */ (this.el._overlayCtrl.contentNode);
+    return /** @type {import('lit').LitElement} */ (this.el._overlayCtrl.contentNode);
   }
 
   get overlayHeadingEl() {
@@ -69,8 +69,10 @@ export class DatepickerInputObject {
   }
 
   get calendarEl() {
-    // @ts-ignore [allow-protected] in test
-    return /** @type {import('@lion/calendar').LionCalendar} */ (this.el && this.el._calendarNode);
+    return /** @type {import('../../calendar/src/LionCalendar.js').LionCalendar} */ (
+      // @ts-ignore [allow-protected] in test
+      this.el && this.el._calendarNode
+    );
   }
 
   /**

package/components/input-file/src/LionInputFile.js

@@ -43,6 +43,7 @@ function formatBytes(bytes, decimals = 2) {
 export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) {
   static get scopedElements() {
     return {
+      // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
       ...super.scopedElements,
       'lion-selected-file-list': LionSelectedFileList,
     };
@@ -50,6 +51,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
 
   static get properties() {
     return {
+      ...super.properties,
       accept: { type: String },
       multiple: { type: Boolean, reflect: true },
       buttonLabel: { type: String, attribute: 'button-label' },
@@ -132,13 +134,38 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     this.requestUpdate('buttonLabel', oldValue);
   }
 
+  /**
+   * Overrides the inherited accessor with a typed pair instead of a class field: a field would be
+   * emitted as a property and every consumer that type-checks the declarations reports
+   * "TS2610: 'modelValue' is defined as an accessor ... but is overridden here as an instance
+   * property". Keeps the published InputFile[] type and adds no runtime behaviour.
+   *
+   * @returns {InputFile[]}
+   */
+  // @ts-ignore [ts7-2611] TS7 resolves the inherited member as a field (its inference, see the
+  // ts7-2855 notes), so a typed accessor override is rejected here; the emitted declaration is the
+  // accessor, which is what consumers see. Retire with ts7-2855.
+  get modelValue() {
+    // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field).
+    // Dot form kept deliberately. Retire when TS stops inferring fields from method assignments.
+    return super.modelValue;
+  }
+
+  /** @param {InputFile[]} value */
+  set modelValue(value) {
+    // @ts-ignore [ts7-2855] see the getter above.
+    super.modelValue = value;
+  }
+
   /**
    * @protected
    * @configure FocusMixin
+   * @returns {import('../../form-core/types/FormControlMixinTypes.js').HTMLElementWithValue & HTMLButtonElement}
    */
-  // @ts-ignore
   get _focusableNode() {
-    return this._buttonNode;
+    return /** @type {import('../../form-core/types/FormControlMixinTypes.js').HTMLElementWithValue & HTMLButtonElement} */ (
+      this._buttonNode
+    );
   }
 
   /**
@@ -150,6 +177,20 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     return 'draggable' in document.createElement('div');
   }
 
+  /**
+   * @private
+   */
+  __initialUploadResponse;
+
+  /** @private */
+  __duplicateFileNamesValidator;
+
+  /**
+   * @private
+   * @type {FileList | null}
+   */
+  __previouslyParsedFiles;
+
   constructor() {
     super();
     this.type = 'file';
@@ -163,9 +204,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
      */
     // TODO: make readonly?
     this.uploadResponse = [];
-    /**
-     * @private
-     */
     this.__initialUploadResponse = this.uploadResponse;
     // TODO: public default booleans are always false
     this.uploadOnSelect = false;
@@ -175,9 +213,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     this.accept = '';
     this.buttonLabel = '';
     this._initialButtonLabel = '';
-    /**
-     * @type {InputFile[]}
-     */
     this.modelValue = [];
     /**
      * @protected
@@ -185,12 +220,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
      */
     this._onRemoveFile = this._onRemoveFile.bind(this);
 
-    /** @private */
     this.__duplicateFileNamesValidator = new DuplicateFileNames({ show: false });
-    /**
-     * @private
-     * @type {FileList | null}
-     */
     this.__previouslyParsedFiles = null;
   }
 

package/components/input-file/src/LionSelectedFileList.js

@@ -104,7 +104,7 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
   /**
    * @protected
    * @param {InputFile} file
-   * @return {TemplateResult|nothing}
+   * @return {TemplateResult|typeof nothing}
    */
   // eslint-disable-next-line class-methods-use-this, no-unused-vars
   _listItemBeforeTemplate(file) {

package/components/input-iban/src/validators.js

@@ -109,7 +109,7 @@ export class IsIBAN extends Validator {
    * @param {string} [data.fieldName]
    * @param {*} [data.params]
    * @param {string} [data.type]
-   * @param {Object.<string,?>} [data.config]
+   * @param {Object.<string,any>} [data.config]
    * @param {string} [data.name]
    * @returns {Promise<string|Element>}
    */
@@ -153,7 +153,7 @@ export class IsCountryIBAN extends IsIBAN {
    * @param {string} [data.fieldName]
    * @param {*} [data.params]
    * @param {string} [data.type]
-   * @param {Object.<string,?>} [data.config]
+   * @param {Object.<string,any>} [data.config]
    * @param {string} [data.name]
    * @returns {Promise<string|Element>}
    */
@@ -202,7 +202,7 @@ export class IsNotCountryIBAN extends IsIBAN {
    * @param {string} [data.fieldName]
    * @param {*} [data.params]
    * @param {string} [data.type]
-   * @param {Object.<string,?>} [data.config]
+   * @param {Object.<string,any>} [data.config]
    * @param {string} [data.name]
    * @returns {Promise<string|Element>}
    */

package/components/input-stepper/src/LionInputStepper.js

@@ -75,6 +75,15 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     return /** @type {HTMLInputElement} */ (super._inputNode);
   }
 
+  /**
+   * Id of the timeout that clears the visually hidden value text again.
+   * Declared as `ReturnType<typeof setTimeout>` rather than left to inference: with `@types/node` in
+   * the type build, inference puts `NodeJS.Timeout` in the declarations, which consumers that do not
+   * load node types cannot resolve.
+   * @type {ReturnType<typeof setTimeout> | undefined}
+   */
+  timer = undefined;
+
   constructor() {
     super();
     /** @param {string} modelValue */

package/components/input-tel/src/LionInputTel.js

@@ -13,7 +13,7 @@ import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
  * @typedef {import('awesome-phonenumber').PhoneNumberFormat} PhoneNumberFormat
  * @typedef {import('awesome-phonenumber').PhoneNumberTypes} PhoneNumberTypes
  * @typedef {import('../../form-core/types/FormatMixinTypes.js').FormatOptions} FormatOptions
- * @typedef {* & import('awesome-phonenumber')} AwesomePhoneNumber
+ * @typedef {* & typeof import('awesome-phonenumber')} AwesomePhoneNumber
  * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
  */
 
@@ -43,7 +43,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    * 1. allowed regions: get the region from configured allowed regions (if one entry)
    * 2. user input: try to derive active region from user input
    * 3. locale: try to get the region from locale (`html[lang]` attribute)
-   * @readonly
    * @property {RegionCode|undefined}activeRegion
    */
   get activeRegion() {
@@ -68,7 +67,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    * -'voip'
    * -'unknown'
    * See https://www.npmjs.com/package/awesome-phonenumber
-   * @readonly
    * @property {PhoneNumberTypes|undefined} activePhoneNumberTypes
    */
   get activePhoneNumberType() {
@@ -125,12 +123,20 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    * accessible and linguistically correct
    * @configure FormControlMixin
    */
-  // @ts-expect-error
   // eslint-disable-next-line class-methods-use-this
   get fieldName() {
     return this._localizeManager.msg('lion-input-tel:phoneNumber');
   }
 
+  /** @private */
+  __isPhoneNumberValidatorInstance;
+
+  /**
+   * @protected
+   * @type {RegionCode | undefined}
+   */
+  _langIso = undefined;
+
   /**
    * @lifecycle platform
    */
@@ -166,7 +172,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
      */
     this.preferredRegions = [];
 
-    /** @private */
     this.__isPhoneNumberValidatorInstance = new PhoneNumber();
     /**  @configures ValidateMixin */
     this.defaultValidators.push(this.__isPhoneNumberValidatorInstance);
@@ -188,7 +193,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('lit').PropertyValues } changedProperties
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
@@ -197,7 +202,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
   }
 
   /**
-   * @param {import('lit-element').PropertyValues } changedProperties
+   * @param {import('lit').PropertyValues } changedProperties
    */
   updated(changedProperties) {
     super.updated(changedProperties);

package/components/input-tel/src/PhoneUtilManager.js

@@ -2,7 +2,7 @@
 let resolveLoaded;
 
 /**
- * @typedef {* & import('awesome-phonenumber')} AwesomePhoneNumber
+ * @typedef {* & typeof import('awesome-phonenumber')} AwesomePhoneNumber
  */
 
 /**

package/components/input-tel/test/LionInputTel.test.js

@@ -1,3 +1,5 @@
 import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
+import { LionInputTel } from '@lion/ui/input-tel.js';
 
 runInputTelSuite();
+runInputTelSuite({ klass: LionInputTel, hasParentheses: true });

package/components/input-tel/test/validators.test.js

@@ -4,7 +4,7 @@ import { PhoneNumber, PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
 
 /**
- * @typedef {* & import('awesome-phonenumber')} AwesomePhoneNumber
+ * @typedef {* & typeof import('awesome-phonenumber')} AwesomePhoneNumber
  */
 
 // For enum output, see: https://www.npmjs.com/package/awesome-phonenumber

package/components/input-tel/test-helpers/mockPhoneUtilManager.js

@@ -1,7 +1,7 @@
 import { PhoneUtilManager } from '../src/PhoneUtilManager.js';
 
 const originalLoadComplete = PhoneUtilManager.loadComplete;
-const originalIsLoaded = PhoneUtilManager.isLoaded;
+const originalIsLoaded = Object.getOwnPropertyDescriptor(PhoneUtilManager, 'isLoaded')?.get;
 
 export function mockPhoneUtilManager() {
   /** @type {(value: any) => void} */
@@ -21,5 +21,8 @@ export function mockPhoneUtilManager() {
 
 export function restorePhoneUtilManager() {
   PhoneUtilManager.loadComplete = originalLoadComplete;
-  Object.defineProperty(PhoneUtilManager, 'isLoaded', { get: () => originalIsLoaded });
+  Object.defineProperty(PhoneUtilManager, 'isLoaded', {
+    // @ts-ignore
+    get: () => originalIsLoaded.call(PhoneUtilManager),
+  });
 }