@lion/ui 0.18.1 → 0.20.0-menu-system.0

package/collapsible.js

@@ -1 +1,2 @@
 export { LionCollapsible } from './components/collapsible/src/LionCollapsible.js';
+// export { DisclosureMixin } from '../components/collapsible/src/DisclosureMixin.js';

package/components/button/src/LionButton.js

@@ -220,4 +220,8 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
       this.click();
     }
   }
+
+  // we want to be able to identify LionButtons w/o instanceof (for perf (loose dep) and dual version support),
+  // so we use a static property for that that doesn't get renamed by minifiers
+  static ['_$isLionButton$'] = true;
 }

package/components/button/test-suites/LionButton.suite.js

@@ -279,6 +279,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
 
         sameProperties.forEach(property => {
           it(`has same value of the property "${property}" as in native button event`, () => {
+            // @ts-ignore - dynamic property access
             expect(lionButtonEvent[property]).to.equal(nativeButtonEvent[property]);
           });
         });

package/components/calendar/src/LionCalendar.js

@@ -928,6 +928,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (type !== 'Date') {
       tmpDate.setDate(1);
     }
+    // @ts-ignore - dynamic method access
     tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify);
     // if we've reset the day count,
     // restore day count as best we can
@@ -935,6 +936,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
       tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
     }
+    // @ts-ignore - dynamic property access
     this[dateType] = tmpDate;
   }
 

package/components/collapsible/src/DisclosureMixin.js

@@ -0,0 +1,313 @@
+/**
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureHost} DisclosureHost
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureMixin} DisclosureMixin
+ */
+
+// /**
+//  * @type {DisclosureMixin}
+//  */
+// const DisclosureMixinImplementation = superclass =>
+//   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+//   class DisclosureMixin extends superclass {
+//     /** @type {any} */
+//     static get properties() {
+//       return {
+//         opened: { type: Boolean, reflect: true },
+//         handleFocus: { type: Boolean, attribute: 'handle-focus' },
+//         invokerInteraction: { type: String, attribute: 'invoker-interaction' },
+//       };
+//     }
+
+//     /**
+//      * @param {Element} focusableElOrWrapper
+//      * @returns {Element|null}
+//      */
+//     static _getFocusableInvokerEl(focusableElOrWrapper) {
+//       // return focusableElOrWrapper;
+//       return (
+//         focusableElOrWrapper &&
+//         (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
+//           ? focusableElOrWrapper
+//           : focusableElOrWrapper.querySelector('[role=button], button'))
+//       );
+//     }
+
+//     get _invokerNode() {
+//       const ctor = this.constructor;
+//       if (!this.__invokerNode) {
+//         const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
+//         if (slottedNode) {
+//           this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
+//         } else {
+//           this.__invokerNode =
+//             this.previousElementSibling?.hasAttribute('data-invoker') &&
+//             ctor._getFocusableInvokerEl(this.previousElementSibling);
+//         }
+//       }
+//       return this.__invokerNode;
+//     }
+
+//     get _contentNode() {
+//       if (!this._cachedOverlayContentNode) {
+//         this._cachedOverlayContentNode = Array.from(this.children).find(
+//           child => child.slot === 'content',
+//         );
+//       }
+//       return this._cachedOverlayContentNode;
+//     }
+
+//     constructor() {
+//       super();
+//       this.opened = false;
+//       /**
+//        * @type {'click'|'hover'}
+//        */
+//       this.invokerInteraction = 'click';
+//       /**
+//        * Puts focus on `_contentNode` on open and on `_invokerNode` on close.
+//        * @type {Boolean}
+//        */
+//       this.handleFocus = false;
+//       this.__disclosureNeedsSetup = true;
+
+//       this.toggle = this.toggle.bind(this);
+//       this.open = this.open.bind(this);
+//       this.close = this.close.bind(this);
+
+//       this.__handleAnimateComplete = this.__handleAnimateComplete.bind(this);
+
+//       this.__onInvokerMouseenter = this.__onInvokerMouseenter.bind(this);
+//       this.__onContentMouseenter = this.__onContentMouseenter.bind(this);
+//       this.__onInvokerMouseleave = this.__onInvokerMouseleave.bind(this);
+//       this.__onContentMouseleave = this.__onContentMouseleave.bind(this);
+//     }
+
+//     connectedCallback() {
+//       super.connectedCallback();
+//       // we do a setup after every connectedCallback as firstUpdated will only be called once
+//       this.__disclosureNeedsSetup = true;
+//       this.updateComplete.then(() => {
+//         if (this.__disclosureNeedsSetup) {
+//           this._setupDisclosure();
+//         }
+//         this.__disclosureNeedsSetup = false;
+//       });
+//       this.__setupAnimation();
+//     }
+
+//     disconnectedCallback() {
+//       super.disconnectedCallback();
+//       this._teardownDisclosure();
+//       this.__teardownAnimation();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupDisclosure() {
+//       console.log('_setupDisclosure', this.level);
+
+//       this._setupOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownDisclosure() {
+//       this._teardownOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupOpenCloseListeners() {
+//       console.log('setup listeners', this.level);
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       const interactions = this.invokerInteraction.split(' ');
+
+//       if (interactions.includes('hover')) {
+//         this._invokerNode.addEventListener('mouseenter', this.__onInvokerMouseenter);
+//         this._contentNode?.addEventListener('mouseenter', this.__onContentMouseenter);
+//         this._invokerNode.addEventListener('mouseleave', this.__onInvokerMouseleave);
+//         this._contentNode?.addEventListener('mouseleave', this.__onContentMouseleave);
+//       }
+//       if (interactions.includes('click')) {
+//         this._invokerNode.addEventListener('click', this.toggle);
+//       }
+//     }
+
+//     __onInvokerMouseenter() {
+//       this.__invokerHover = true;
+//       this.open();
+//     }
+
+//     __onContentMouseenter() {
+//       this.__contentHover = true;
+//       console.log('this.__contentHover', this.__contentHover);
+//       this.open();
+//     }
+
+//     __onInvokerMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__contentHover) {
+//           this.close();
+//         }
+//       });
+//       this.__invokerHover = false;
+//     }
+
+//     __onContentMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__invokerHover) {
+//           this.close();
+//         }
+//       });
+//       this.__contentHover = false;
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownOpenCloseListeners() {
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       this._invokerNode.removeEventListener('mouseenter', this.open);
+//       this._invokerNode.removeEventListener('mouseleave', this.close);
+//       this._contentNode?.removeEventListener('mouseenter', this.open);
+//       this._contentNode?.removeEventListener('mouseleave', this.close);
+
+//       // console.log(this, 'removetCLick');
+
+//       this._invokerNode.removeEventListener('click', this.toggle);
+//     }
+
+//     // TODO: fire event on updated?
+//     /**
+//      * @override
+//      * @param {string} name
+//      * @param {any} oldValue
+//      */
+//     requestUpdate(name, oldValue) {
+//       super.requestUpdate(name, oldValue);
+//       if (name === 'opened') {
+//         this.dispatchEvent(new Event('opened-changed'));
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     updated(changedProperties) {
+//       super.updated(changedProperties);
+
+//       if (changedProperties.has('opened')) {
+//         this._onOpenedChanged();
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     firstUpdated(changedProperties) {
+//       super.firstUpdated(changedProperties);
+//       this._onOpenedChanged();
+
+//       if (this.handleFocus && !this._contentNode?.hasAttribute('tabindex')) {
+//         this._contentNode?.setAttribute('tabindex', '-1');
+//       }
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     async _onOpenedChanged() {
+//       this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
+
+//       if (this.opened) {
+//         this._contentNode.style.setProperty('display', '');
+//         await this._showAnimation({ contentNode: this._contentNode });
+//         this._onDisclosureShow();
+//       } else {
+//         this._onDisclosureHide();
+//         await this._hideAnimation({ contentNode: this._contentNode });
+//         this._contentNode.style.setProperty('display', 'none');
+//       }
+//     }
+
+//     _onDisclosureShow() {
+//       // if (this.checkedIndex != null) {
+//       //   this.activeIndex = this.checkedIndex;
+//       // }
+
+//       if (this.handleFocus) {
+//         this._contentNode.focus();
+//       }
+//     }
+
+//     _onDisclosureHide() {
+//       if (this.handleFocus) {
+//         this._invokerNode.focus();
+//       }
+//     }
+
+//     /**
+//      * Show animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _showAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     /**
+//      * Hide animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _hideAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     _refreshAnimateCompletePromise() {
+//       this._animateComplete = new Promise(resolve => {
+//         // Note that when a lib like GSAP is used, neither 'transitionend' or 'animationend' will be called.
+//         // In such a case, a subclasser needs to resolve this pending promise by calling this method
+//         this._resolveAnimateComplete = resolve;
+//       });
+//     }
+
+//     __setupAnimation() {
+//       this._contentNode.addEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.addEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __teardownAnimation() {
+//       this._contentNode.removeEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.removeEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __handleAnimateComplete() {
+//       if (typeof this._resolveAnimateComplete === 'function') {
+//         this._resolveAnimateComplete();
+//       }
+//     }
+
+//     toggle() {
+//       // console.log('toggul', this);
+//       this.opened = !this.opened;
+//     }
+
+//     open() {
+//       this.opened = true;
+//     }
+
+//     close() {
+//       this.opened = false;
+//     }
+//   };
+// export const DisclosureMixin = dedupeMixin(DisclosureMixinImplementation);

package/components/collapsible/test-suites/DisclosureMixin.suite.js

@@ -0,0 +1,30 @@
+// import { LitElement } from 'lit';
+// import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+// import { DisclosureMixin } from '../src/DisclosureMixin.js';
+
+// import '@lion/ui/define/lion-menu.js';
+// import '@lion/ui/define/lion-item.js';
+
+// class DisclosureClass extends DisclosureMixin(LitElement) {}
+
+// /**
+//  * @typedef {import('lit').TemplateResult} TemplateResult
+//  */
+
+// const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
+
+// /**
+//  * @param { {tagString?:string, itemTagString?:string} } [customConfig]
+//  */
+// export function runDisclosureMixinSuite(customConfig = {}) {
+//   const cfg = {
+//     tagString: 'lion-menu',
+//     ...customConfig,
+//   };
+
+//   const tagString = cfg.tagString || defineCE(DisclosureClass);
+//   const tag = unsafeStatic(tagString);
+
+//   describe('DisclosureMixin', () => {
+//   });
+// }

package/components/collapsible/types/DisclosureMixinTypes.ts

@@ -0,0 +1,48 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+export declare class DisclosureHost {
+  public opened: Boolean;
+
+  protected get _invokerNode(): HTMLElement;
+
+  protected get _contentNode(): HTMLElement;
+
+  public toggle(): void;
+
+  public open(): void;
+
+  public close(): void;
+
+  protected _onOpenedChanged(): Promise<void>;
+
+  protected _onDisclosureShow(): void;
+
+  protected _onDisclosureHide(): void;
+
+  protected _showAnimation(cfg: object): Promise<void>;
+
+  protected _hideAnimation(cfg: object): Promise<void>;
+
+  protected _refreshAnimateCompletePromise(): void;
+
+  protected _setupOpenCloseListeners(): void;
+
+  protected _teardownOpenCloseListeners(): void;
+
+  private __setupAnimation(): void;
+
+  private __teardownAnimation(): void;
+
+  private __handleAnimateComplete(): void;
+}
+
+export declare function DisclosureImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<DisclosureHost> &
+  DisclosureHost &
+  Pick<typeof DisclosureHost, keyof typeof DisclosureHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type DisclosureMixin = typeof DisclosureImplementation;

package/components/combobox/test/lion-combobox.test.js

@@ -3227,6 +3227,7 @@ describe('lion-combobox', () => {
         const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' });
         await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
         await el.updateComplete;
+        // @ts-ignore - array index access
         const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]');
         expect(labelledElement).to.not.be.null;
         expect(labelledElement.innerText).to.equal('Artichoke');

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -352,11 +352,14 @@ const FormGroupMixinImplementation = superclass =>
       this.formElements._keys().forEach(name => {
         const elem = this.formElements[name];
         if (elem instanceof FormControlsCollection) {
+          // @ts-ignore - dynamic property access
           result[name] = elem.filter(el => _filterFn(el, property)).map(el => el[property]);
         } else if (_filterFn(elem, property)) {
           if (typeof elem._getFromAllFormElements === 'function') {
+            // @ts-ignore - dynamic property access
             result[name] = elem._getFromAllFormElements(property);
           } else {
+            // @ts-ignore - dynamic property access
             result[name] = elem[property];
           }
         }
@@ -386,6 +389,7 @@ const FormGroupMixinImplementation = superclass =>
           if (Array.isArray(this.formElements[name])) {
             this.formElements[name].forEach(
               (/** @type {FormControl} */ el, /** @type {number} */ index) => {
+                // @ts-ignore - dynamic property access
                 el[property] = values[name][index]; // eslint-disable-line no-param-reassign
               },
             );
@@ -393,6 +397,7 @@ const FormGroupMixinImplementation = superclass =>
           if (this.formElements[name]) {
             this.formElements[name][property] = values[name];
           } else {
+            // @ts-ignore - dynamic property access
             this.__pendingValues[property][name] = values[name];
           }
         });
@@ -406,6 +411,7 @@ const FormGroupMixinImplementation = superclass =>
     _anyFormElementHas(property) {
       return Object.keys(this.formElements).some(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore - dynamic property access
           return this.formElements[name].some((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];
@@ -436,6 +442,7 @@ const FormGroupMixinImplementation = superclass =>
     _everyFormElementHas(property) {
       return Object.keys(this.formElements).every(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore - dynamic property access
           return this.formElements[name].every((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];

package/components/form-core/src/registration/FormRegistrarMixin.js

@@ -162,15 +162,21 @@ const FormRegistrarMixinImplementation = superclass =>
         }
 
         if (name.substr(-2) === '[]') {
+          // @ts-ignore - dynamic named access to form elements
           if (!Array.isArray(this.formElements[name])) {
+            // @ts-ignore
             this.formElements[name] = new FormControlsCollection();
           }
           if (indexToInsertAt > 0) {
+            // @ts-ignore
             this.formElements[name].splice(indexToInsertAt, 0, child);
           } else {
+            // @ts-ignore
             this.formElements[name].push(child);
           }
+          // @ts-ignore
         } else if (!this.formElements[name]) {
+          // @ts-ignore
           this.formElements[name] = child;
         } else {
           console.info('Error Node:', child); // eslint-disable-line no-console
@@ -194,12 +200,17 @@ const FormRegistrarMixinImplementation = superclass =>
       // 2. Handle name based object keys
       if (this._isFormOrFieldset) {
         const { name } = child; // FIXME: <-- ElementWithParentFormGroup should become LionFieldWithParentFormGroup so that "name" exists
+        // @ts-ignore - dynamic named access to form elements
         if (name.substr(-2) === '[]' && this.formElements[name]) {
+          // @ts-ignore
           const idx = this.formElements[name].indexOf(child);
           if (idx > -1) {
+            // @ts-ignore
             this.formElements[name].splice(idx, 1);
           }
+          // @ts-ignore
         } else if (this.formElements[name]) {
+          // @ts-ignore
           delete this.formElements[name];
         }
       }

package/components/form-core/test/FormControlMixin.test.js

@@ -153,6 +153,7 @@ describe('FormControlMixin', () => {
         el.shadowRoot?.querySelector('.form-field__label'),
       );
       Object.entries(expectedValues).forEach(([key, val]) => {
+        // @ts-ignore - dynamic style property access
         expect(labelStyle[key]).to.equal(val);
       });
     });

package/components/form-core/test/validate/Validator.test.js

@@ -191,7 +191,9 @@ describe('Validator', () => {
   it('adds static ["_$isValidator$"] property as a marker to identify the Validator class across different lion versions (as instanceof cannot be used)', async () => {
     const myValidator = new Validator();
 
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.exist;
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.be.true;
   });
 

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -1554,11 +1554,13 @@ export function runValidateMixinSuite(customConfig) {
           // eslint-disable-next-line no-restricted-syntax
           for (const state of ['dirty', 'touched', 'prefilled', 'submitted']) {
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = false;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;
             expect(spy.callCount).to.equal(counter);
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = true;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -714,6 +714,7 @@ export function runValidateMixinFeedbackPart() {
             const results = {
               'a-string-instead-of-bool': 'Msg based on enum output',
             };
+            // @ts-ignore - test data structure
             return results[/** @type {string} */ (outcome)];
           }
         }

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

@@ -398,14 +398,16 @@ export class LionInputAmountDropdown extends LionInputAmount {
 
   /**
    * Used for Required validation and computation of interaction states.
-   * We need to override this, because we prefill the input with the currency code, but for proper UX,
-   * we don't consider this as having interaction state `prefilled`
-   * @param {string} modelValue
+   * We only consider the amount part for emptiness checks.
+   * Missing, null, empty-string or NaN amount is considered empty.
    * @return {boolean}
    * @protected
    */
   _isEmpty(modelValue = this.modelValue) {
-    return super._isEmpty(modelValue) || this.currency === this.__initializedCurrencyCode;
+    const isNumberValue =
+      typeof modelValue?.amount === 'number' &&
+      (modelValue?.amount === 0 || Number.isNaN(modelValue?.amount));
+    return !modelValue?.amount && !isNumberValue;
   }
 
   /**

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

@@ -1,6 +1,7 @@
 import { mimicUserChangingDropdown } from '@lion/ui/input-amount-dropdown-test-helpers.js';
 import { runInputAmountDropdownSuite } from '@lion/ui/input-amount-dropdown-test-suites.js';
 import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
+import { Required } from '@lion/ui/form-core.js';
 import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { LionSelectRich } from '@lion/ui/select-rich.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -194,7 +195,25 @@ describe('WithFormControlInputAmountDropdown', () => {
       el.modelValue = { currency: 'EUR' };
       await aTimeout(0);
       el.modelValue = { currency: 'EUR', amount: '' };
-      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+      expect(el.hasFeedbackFor).to.deep.equal([]);
     });
   });
+
+  it('includes error in showsFeedbackFor when required, empty, and touched & dirty', async () => {
+    const el = /** @type {LionInputAmountDropdown} */ (
+      await fixture(html`
+        <lion-input-amount-dropdown
+          .allowedCurrencies="${['GBP', 'EUR']}"
+          .validators="${[new Required()]}"
+        ></lion-input-amount-dropdown>
+      `)
+    );
+    await el.updateComplete;
+    el.touched = true;
+    el.dirty = true;
+    await el.updateComplete;
+    await el.feedbackComplete;
+    expect(el.hasFeedbackFor).to.include('error', 'hasFeedbackFor');
+    expect(el.showsFeedbackFor).to.include('error', 'showsFeedbackFor');
+  });
 });

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

@@ -317,5 +317,29 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       // @ts-ignore
       expect(el._isEmpty(), 'empty').to.be.true;
     });
+
+    it('only checks modelValue.amount', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+
+      el.modelValue = { currency: 'GBP', amount: 1 };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'filled amount').to.be.false;
+
+      el.modelValue = { currency: 'EUR', amount: '' };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'empty amount').to.be.true;
+
+      el.modelValue = { currency: 'EUR' };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'missing amount property').to.be.true;
+
+      el.modelValue = null;
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'null modelValue').to.be.true;
+    });
   });
 }

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

@@ -6,6 +6,7 @@ async function combineLocalizeImports(importPromises) {
   const combinedResult = localizeObjects[0];
   for (const localizeObject of localizeObjects.slice(1)) {
     Object.entries(localizeObject.default).forEach(([key, val]) => {
+      // @ts-ignore - dynamic property access
       combinedResult.default[key] = val;
     });
   }