@lion/ui 0.5.3 → 0.5.5

package/components/input-stepper/translations/es.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Disminuir',
+  increase: 'Aumentar',
+};

package/components/input-stepper/translations/fr-BE.js

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

package/components/input-stepper/translations/fr-FR.js

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

package/components/input-stepper/translations/fr.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Diminuer',
+  increase: 'Augmenter',
+};

package/components/input-stepper/translations/hu-HU.js

@@ -0,0 +1,5 @@
+import hu from './hu.js';
+
+export default {
+  ...hu,
+};

package/components/input-stepper/translations/hu.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Csökkentés',
+  increase: 'Növelés',
+};

package/components/input-stepper/translations/it-IT.js

@@ -0,0 +1,5 @@
+import it from './it.js';
+
+export default {
+  ...it,
+};

package/components/input-stepper/translations/it.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Diminuisci',
+  increase: 'Aumenta',
+};

package/components/input-stepper/translations/nl-BE.js

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

package/components/input-stepper/translations/nl-NL.js

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

package/components/input-stepper/translations/nl.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Verlagen',
+  increase: 'Verhogen',
+};

package/components/input-stepper/translations/pl-PL.js

@@ -0,0 +1,5 @@
+import pl from './pl.js';
+
+export default {
+  ...pl,
+};

package/components/input-stepper/translations/pl.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Zmniejsz',
+  increase: 'Zwiększ',
+};

package/components/input-stepper/translations/ro-RO.js

@@ -0,0 +1,5 @@
+import ro from './ro.js';
+
+export default {
+  ...ro,
+};

package/components/input-stepper/translations/ro.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Scădere',
+  increase: 'Creștere',
+};

package/components/input-stepper/translations/ru-RU.js

@@ -0,0 +1,5 @@
+import ru from './ru.js';
+
+export default {
+  ...ru,
+};

package/components/input-stepper/translations/ru.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Уменьшить',
+  increase: 'Увеличить',
+};

package/components/input-stepper/translations/sk-SK.js

@@ -0,0 +1,5 @@
+import sk from './sk.js';
+
+export default {
+  ...sk,
+};

package/components/input-stepper/translations/sk.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Znížiť',
+  increase: 'Zvýšiť',
+};

package/components/input-stepper/translations/uk-UA.js

@@ -0,0 +1,5 @@
+import uk from './uk.js';
+
+export default {
+  ...uk,
+};

package/components/input-stepper/translations/uk.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Зменшити',
+  increase: 'Збільшити',
+};

package/components/input-stepper/translations/zh.js

@@ -0,0 +1,4 @@
+export default {
+  decrease: '减少',
+  increase: '增加',
+};

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -324,7 +324,10 @@ export class LionInputTelDropdown extends LionInputTel {
    */
   _onDropdownValueChange(event) {
     const isInitializing = event.detail?.initialize || !this._phoneUtil;
-    const dropdownValue = /** @type {RegionCode} */ (event.target.modelValue || event.target.value);
+    const dropdownElement = event.target;
+    const dropdownValue = /** @type {RegionCode} */ (
+      dropdownElement.modelValue || dropdownElement.value
+    );
 
     if (isInitializing || this.activeRegion === dropdownValue) {
       return;
@@ -355,8 +358,13 @@ export class LionInputTelDropdown extends LionInputTel {
     }
 
     // Put focus on text box
-    const overlayController = event.target._overlayCtrl;
-    if (overlayController?.isShown) {
+    //
+    // A LionSelectRich with interactionMode set on windows/linux
+    // will set each item on arrow key up/down to activeElement
+    // which causes the focus to jump every time to the inputNode
+    const overlayController = dropdownElement._overlayCtrl;
+    // @ts-ignore interactionMode only exists on LionSelectRich not on HTMLSelectElement
+    if (overlayController?.isShown && dropdownElement.interactionMode !== 'windows/linux') {
       setTimeout(() => {
         this._inputNode.focus();
       });

package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -1,10 +1,10 @@
 import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
-import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { ref } from 'lit/directives/ref.js';
-
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
 import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js';
+import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
 
 import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-select-rich.js';
@@ -53,4 +53,112 @@ describe('WithFormControlInputTelDropdown', () => {
   // @ts-expect-error
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });
+
+  it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
+    class InputTelDropdownMac extends LionInputTelDropdown {
+      static templates = {
+        ...(super.templates || {}),
+        /**
+         * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
+         */
+        dropdown: templateDataForDropdown => {
+          const { refs, data } = templateDataForDropdown;
+          // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+          return html`
+            <lion-select-rich
+              ${ref(refs?.dropdown?.ref)}
+              label="${refs?.dropdown?.labels?.country}"
+              label-sr-only
+              @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+              style="${refs?.dropdown?.props?.style}"
+              interaction-mode="mac"
+            >
+              ${repeat(
+                data.regionMetaList,
+                regionMeta => regionMeta.regionCode,
+                regionMeta =>
+                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+              )}
+            </lion-select-rich>
+          `;
+        },
+      };
+    }
+    customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
+    const el = /** @type {LionInputTelDropdown} */ (
+      await fixture(
+        html`
+          <input-tel-dropdown-mac
+            .allowedRegions="${['NL', 'BE']}"
+            .modelValue="${'+31612345678'}"
+          ></input-tel-dropdown-mac>
+        `,
+      )
+    );
+    const dropdownElement = el.refs.dropdown.value;
+    // @ts-expect-error [allow-protected-in-tests]
+    if (dropdownElement?._overlayCtrl) {
+      // @ts-expect-error [allow-protected-in-tests]
+      dropdownElement._overlayCtrl.show();
+      mimicUserChangingDropdown(dropdownElement, 'BE');
+      await el.updateComplete;
+      await aTimeout(0);
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(el._inputNode).to.equal(document.activeElement);
+    }
+  });
+
+  it('does not focus the textbox right after selection if selected via opened dropdown if interaction-mode is windows/linux', async () => {
+    class InputTelDropdownWindows extends LionInputTelDropdown {
+      static templates = {
+        ...(super.templates || {}),
+        /**
+         * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
+         */
+        dropdown: templateDataForDropdown => {
+          const { refs, data } = templateDataForDropdown;
+          // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+          return html`
+            <lion-select-rich
+              ${ref(refs?.dropdown?.ref)}
+              label="${refs?.dropdown?.labels?.country}"
+              label-sr-only
+              @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+              style="${refs?.dropdown?.props?.style}"
+              interaction-mode="windows/linux"
+            >
+              ${repeat(
+                data.regionMetaList,
+                regionMeta => regionMeta.regionCode,
+                regionMeta =>
+                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+              )}
+            </lion-select-rich>
+          `;
+        },
+      };
+    }
+    customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
+    const el = /** @type {LionInputTelDropdown} */ (
+      await fixture(
+        html`
+          <input-tel-dropdown-windows
+            .allowedRegions="${['NL', 'BE']}"
+            .modelValue="${'+31612345678'}"
+          ></input-tel-dropdown-windows>
+        `,
+      )
+    );
+    const dropdownElement = el.refs.dropdown.value;
+    // @ts-expect-error [allow-protected-in-tests]
+    if (dropdownElement?._overlayCtrl) {
+      // @ts-expect-error [allow-protected-in-tests]
+      dropdownElement._overlayCtrl.show();
+      mimicUserChangingDropdown(dropdownElement, 'BE');
+      await el.updateComplete;
+      await aTimeout(0);
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(el._inputNode).to.not.equal(document.activeElement);
+    }
+  });
 });

package/components/input-tel-dropdown/test-helpers/mimicUserChangingDropdown.js

@@ -0,0 +1,22 @@
+/**
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ */
+
+/**
+ * @param {DropdownElement} dropdownEl
+ * @param {string} value
+ */
+export function mimicUserChangingDropdown(dropdownEl, value) {
+  if ('modelValue' in dropdownEl) {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.modelValue = value;
+    dropdownEl.dispatchEvent(
+      new CustomEvent('model-value-changed', { detail: { isTriggeredByUser: true } }),
+    );
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.value = value;
+    dropdownEl.dispatchEvent(new Event('change'));
+    dropdownEl.dispatchEvent(new Event('input'));
+  }
+}

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -11,6 +11,7 @@ import {
 } from '@open-wc/testing';
 import sinon from 'sinon';
 import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -36,24 +37,6 @@ function getDropdownValue(dropdownEl) {
   return dropdownEl.value;
 }
 
-/**
- * @param {DropdownElement} dropdownEl
- * @param {string} value
- */
-function mimicUserChangingDropdown(dropdownEl, value) {
-  if ('modelValue' in dropdownEl) {
-    // eslint-disable-next-line no-param-reassign
-    dropdownEl.modelValue = value;
-    dropdownEl.dispatchEvent(
-      new CustomEvent('model-value-changed', { detail: { isTriggeredByUser: true } }),
-    );
-  } else {
-    // eslint-disable-next-line no-param-reassign
-    dropdownEl.value = value;
-    dropdownEl.dispatchEvent(new Event('change'));
-  }
-}
-
 /**
  * @param {{ klass:LionInputTelDropdown }} config
  */
@@ -335,26 +318,6 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         expect(el.value).to.equal('+32');
       });
 
-      it('focuses the textbox right after selection if selected via opened dropdown', async () => {
-        const el = await fixture(
-          html` <${tag} .allowedRegions="${[
-            'NL',
-            'BE',
-          ]}" .modelValue="${'+31612345678'}"></${tag}> `,
-        );
-        const dropdownElement = el.refs.dropdown.value;
-        // @ts-expect-error [allow-protected-in-tests]
-        if (dropdownElement?._overlayCtrl) {
-          // @ts-expect-error [allow-protected-in-tests]
-          dropdownElement._overlayCtrl.show();
-          mimicUserChangingDropdown(dropdownElement, 'BE');
-          await el.updateComplete;
-          await aTimeout(0);
-          // @ts-expect-error [allow-protected-in-tests]
-          expect(el._inputNode).to.equal(document.activeElement);
-        }
-      });
-
       it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
         const el = await fixture(
           html` <${tag} .allowedRegions="${[

package/components/localize/src/LocalizeMixin.js

@@ -64,11 +64,11 @@ const LocalizeMixinImplementation = superclass =>
      * hook into LitElement to only render once all translations are loaded
      * @returns {Promise.<void>}
      */
-    async performUpdate() {
+    async scheduleUpdate() {
       if (Object.getPrototypeOf(this).constructor.waitForLocalizeNamespaces) {
         await this.localizeNamespacesLoaded;
       }
-      super.performUpdate();
+      super.scheduleUpdate();
     }
 
     connectedCallback() {

package/components/overlays/src/OverlayController.js

@@ -931,7 +931,7 @@ export class OverlayController extends EventTarget {
       return;
     }
 
-    if (this.elementToFocusAfterHide) {
+    if (this.elementToFocusAfterHide instanceof HTMLElement) {
       this.elementToFocusAfterHide.focus();
       this.elementToFocusAfterHide.scrollIntoView({ block: 'nearest' });
     } else {

package/components/select/src/LionSelect.js

@@ -57,6 +57,11 @@ class LionFieldWithSelect extends LionField {
  * @customElement lion-select
  */
 export class LionSelect extends LionFieldWithSelect {
+  // eslint-disable-next-line class-methods-use-this
+  get operationMode() {
+    return 'select';
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this._inputNode.addEventListener('change', this._proxyChangeEvent);

package/components/validate-messages/src/getLocalizedMessage.js

@@ -0,0 +1,122 @@
+/**
+ * @typedef {import('../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
+ * @typedef {import('@lion/ui/localize.js').LocalizeManager} LocalizeManager
+ */
+
+/** @type {Promise<void | object>} */
+let pendingPromise;
+
+/**
+ * @param {string} string
+ */
+const capitalize = string => (string && string[0].toUpperCase() + string.slice(1)) || '';
+
+/**
+ * @param {{localize: LocalizeManager}} opts
+ */
+export async function loadValidateNamespace({ localize }) {
+  if (pendingPromise) {
+    return pendingPromise;
+  }
+
+  pendingPromise = localize.loadNamespace(
+    {
+      'lion-validate': /** @param {string} locale */ locale => {
+        switch (locale) {
+          case 'bg-BG':
+            return import('@lion/ui/validate-messages-translations/bg-BG.js');
+          case 'bg':
+            return import('@lion/ui/validate-messages-translations/bg.js');
+          case 'cs-CZ':
+            return import('@lion/ui/validate-messages-translations/cs-CZ.js');
+          case 'cs':
+            return import('@lion/ui/validate-messages-translations/cs.js');
+          case 'de-DE':
+            return import('@lion/ui/validate-messages-translations/de-DE.js');
+          case 'de':
+            return import('@lion/ui/validate-messages-translations/de.js');
+          case 'en-AU':
+            return import('@lion/ui/validate-messages-translations/en-AU.js');
+          case 'en-GB':
+            return import('@lion/ui/validate-messages-translations/en-GB.js');
+          case 'en-US':
+            return import('@lion/ui/validate-messages-translations/en-US.js');
+          case 'en-PH':
+            return import('@lion/ui/validate-messages-translations/en-PH.js');
+          case 'en':
+            return import('@lion/ui/validate-messages-translations/en.js');
+          case 'es-ES':
+            return import('@lion/ui/validate-messages-translations/es-ES.js');
+          case 'es':
+            return import('@lion/ui/validate-messages-translations/es.js');
+          case 'fr-FR':
+            return import('@lion/ui/validate-messages-translations/fr-FR.js');
+          case 'fr-BE':
+            return import('@lion/ui/validate-messages-translations/fr-BE.js');
+          case 'fr':
+            return import('@lion/ui/validate-messages-translations/fr.js');
+          case 'hu-HU':
+            return import('@lion/ui/validate-messages-translations/hu-HU.js');
+          case 'hu':
+            return import('@lion/ui/validate-messages-translations/hu.js');
+          case 'it-IT':
+            return import('@lion/ui/validate-messages-translations/it-IT.js');
+          case 'it':
+            return import('@lion/ui/validate-messages-translations/it.js');
+          case 'nl-BE':
+            return import('@lion/ui/validate-messages-translations/nl-BE.js');
+          case 'nl-NL':
+            return import('@lion/ui/validate-messages-translations/nl-NL.js');
+          case 'nl':
+            return import('@lion/ui/validate-messages-translations/nl.js');
+          case 'pl-PL':
+            return import('@lion/ui/validate-messages-translations/pl-PL.js');
+          case 'pl':
+            return import('@lion/ui/validate-messages-translations/pl.js');
+          case 'ro-RO':
+            return import('@lion/ui/validate-messages-translations/ro-RO.js');
+          case 'ro':
+            return import('@lion/ui/validate-messages-translations/ro.js');
+          case 'ru-RU':
+            return import('@lion/ui/validate-messages-translations/ru-RU.js');
+          case 'ru':
+            return import('@lion/ui/validate-messages-translations/ru.js');
+          case 'sk-SK':
+            return import('@lion/ui/validate-messages-translations/sk-SK.js');
+          case 'sk':
+            return import('@lion/ui/validate-messages-translations/sk.js');
+          case 'uk-UA':
+            return import('@lion/ui/validate-messages-translations/uk-UA.js');
+          case 'uk':
+            return import('@lion/ui/validate-messages-translations/uk.js');
+          case 'zh-CN':
+          case 'zh':
+            return import('@lion/ui/validate-messages-translations/zh.js');
+          default:
+            return import('@lion/ui/validate-messages-translations/en.js');
+        }
+      },
+    },
+    { locale: localize.locale },
+  );
+
+  return pendingPromise;
+}
+
+/**
+ * @param {{data:FeedbackMessageData; localize: LocalizeManager}} opts
+ * @returns {Promise<string|Element>}
+ */
+export const getLocalizedMessage = async ({ data, localize }) => {
+  await loadValidateNamespace({ localize });
+  if (data) {
+    const operationMode =
+      data.formControl?.operationMode !== 'enter' && data.name === 'Required'
+        ? capitalize(data.formControl?.operationMode)
+        : undefined;
+    const validatorName = operationMode ? `_${data.name}${operationMode}` : data.name;
+
+    return localize.msg(`lion-validate:${data.type}.${validatorName}`, data);
+  }
+  return '';
+};