@lion/ui 0.15.3 → 0.15.4

package/README.md

@@ -44,7 +44,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 - **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
 - **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
 - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
-- **Modern Code:** Lion is distributes as pure es modules.
+- **Modern Code:** Lion is distributed as pure es modules.
 - **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
 
 > Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings.
@@ -91,7 +91,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 
 ### Astro how to
 
-- To start in dev mode run `nmm run start`
+- To start in dev mode run `npm run start`
 - To start in production mode:
   - Run `npm run build`
   - Run `npm run preview`

package/components/combobox/src/LionCombobox.js

@@ -965,7 +965,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
           if (isInlineAutoFillCandidate) {
             const textboxValue = this._getTextboxValueFromOption(option);
             const stringValues =
-              textboxValue && typeof textboxValue === 'string' && typeof curValue === 'string';
+              typeof textboxValue === 'string' &&
+              textboxValue !== '' &&
+              typeof curValue === 'string' &&
+              curValue !== '';
             const beginsWith =
               stringValues && textboxValue.toLowerCase().indexOf(curValue.toLowerCase()) === 0;
             // We only can do proper inline autofilling when the beginning of the word matches

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

@@ -1,9 +1,32 @@
+import { css } from 'lit';
 import { runListboxMixinSuite } from '@lion/ui/listbox-test-suites.js';
 import '@lion/ui/define/lion-combobox.js';
 import { runCustomChoiceGroupMixinSuite } from '../../form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js';
+import { LionCombobox } from '../src/LionCombobox.js';
+import { ScopedStylesController } from '../../core/src/ScopedStylesController.js';
 
 runListboxMixinSuite({ tagString: 'lion-combobox' });
 runCustomChoiceGroupMixinSuite({
   parentTagString: 'lion-combobox',
   childTagString: 'lion-option',
 });
+
+// Test case for using ScopedStylesController inside the LionCombobox
+class ComboboxWithScopedStyles extends LionCombobox {
+  static scopedStyles() {
+    return css`
+      p {
+        display: block;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.scopedStylesController = new ScopedStylesController(this);
+  }
+}
+
+customElements.define('combobox-with-scoped-styles', ComboboxWithScopedStyles);
+
+runListboxMixinSuite({ tagString: 'combobox-with-scoped-styles' });

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

@@ -652,6 +652,26 @@ describe('lion-combobox', () => {
       expect(visibleOptions().length).to.equal(0, 'after clear');
     });
 
+    it('keeps interaction states on clear()', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+      await mimicUserTyping(el, 'a');
+      await el.updateComplete;
+      expect(el.dirty).to.equal(true);
+
+      el.clear();
+      await el.updateComplete;
+      expect(el.dirty).to.equal(true);
+    });
+
     it('resets modelValue and textbox value on reset()', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`

package/components/core/src/ScopedStylesController.js

@@ -6,6 +6,8 @@ import { unsafeCSS, css } from 'lit';
  * @implements {ReactiveController}
  */
 export class ScopedStylesController {
+  #hasConnected = false;
+
   /**
    * @param {import('lit').CSSResult} scope
    * @return {import('lit').CSSResultGroup}
@@ -26,12 +28,11 @@ export class ScopedStylesController {
   }
 
   hostConnected() {
-    this.host.classList.add(this.scopedClass);
-    this.__setupStyleTag();
-  }
-
-  hostDisconnected() {
-    this.__teardownStyleTag();
+    if (!this.#hasConnected) {
+      this.host.classList.add(this.scopedClass);
+      this.__setupStyleTag();
+      this.#hasConnected = true;
+    }
   }
 
   __setupStyleTag() {
@@ -46,8 +47,4 @@ export class ScopedStylesController {
       .toString();
     this.host.insertBefore(this.__styleTag, this.host.childNodes[0]);
   }
-
-  __teardownStyleTag() {
-    this.host.removeChild(this.__styleTag);
-  }
 }

package/components/core/test-helpers/getCachedFixture.js

@@ -0,0 +1,55 @@
+import { defineCE, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { LitElement, nothing } from 'lit';
+import { cache } from 'lit/directives/cache.js';
+import { createRef } from 'lit/directives/ref.js';
+
+/**
+ * Helper to get a fixture with a cached render function and show/hide methods.
+ * @template T
+ * @param {(ref: import('lit/directives/ref.js').Ref<T>) => import('lit').TemplateResult} render - The render function
+ * @returns {Promise<{ wrapper: LitElement, el: T | undefined, show: () => Promise<void>, hide: () => Promise<void> }>}
+ */
+export async function getCachedFixture(
+  /** @type {(ref: import('lit/directives/ref.js').Ref<any>) => import('lit').TemplateResult} */ render,
+) {
+  class CachingWrapper extends LitElement {
+    static properties = {
+      _show: { type: Boolean },
+    };
+
+    constructor() {
+      super();
+      this._show = true;
+      this.ref = createRef();
+    }
+
+    async show() {
+      this._show = true;
+      return this.updateComplete;
+    }
+
+    async hide() {
+      this._show = false;
+      return this.updateComplete;
+    }
+
+    render() {
+      return html`${cache(this._show ? render(this.ref) : nothing)}`;
+    }
+  }
+
+  const customElementName = defineCE(CachingWrapper);
+  const customTag = unsafeStatic(customElementName);
+
+  const wrapper =
+    /** @type {LitElement & { ref: import('lit/directives/ref.js').Ref<any>, show(): Promise<void>, hide(): Promise<void> }} */ (
+      await fixture(html`<${customTag}></${customTag}>`)
+    );
+
+  return {
+    wrapper,
+    el: wrapper.ref.value,
+    show: async () => wrapper.show(),
+    hide: async () => wrapper.hide(),
+  };
+}

package/components/input-amount/src/parsers.js

@@ -31,14 +31,15 @@ function round(value, decimals) {
  * @param {FormatNumberOptions} [givenOptions] Locale Options
  */
 export function parseAmount(value, givenOptions) {
-  const unmatchedInput = value.match(/[^0-9,.\-\u2212 ]/g);
+  const trimmedValue = value.trim();
+  const unmatchedInput = trimmedValue.match(/[^0-9,.\-\u2212 ]/g);
   // for the full paste behavior documentation:
   // ./docs/components/input-amount/use-cases.md#paste-behavior
   if (unmatchedInput && givenOptions?.mode !== 'pasted') {
     return undefined;
   }
 
-  const number = parseNumber(value, givenOptions);
+  const number = parseNumber(trimmedValue, givenOptions);
 
   if (typeof number !== 'number' || Number.isNaN(number)) {
     return undefined;

package/components/input-amount/test/parsers.test.js

@@ -61,6 +61,12 @@ describe('parseAmount()', async () => {
     expect(parseAmount('EUR 1,50', { mode: 'pasted' })).to.equal(1.5);
   });
 
+  it('trim spaces when "pasted" mode used', async () => {
+    // Use case: there is a cell in Excel which is formatted as Accounting, Currency: Zl, Decimal 2
+    // and the whole cell is copied
+    expect(parseAmount(' 1,00 zł ', { mode: 'pasted' })).to.equal(1);
+  });
+
   it('parses based on locale when "user-edited" mode used combined with viewValueStates "formatted"', async () => {
     expect(parseAmount('123,456.78', { mode: 'auto' })).to.equal(123456.78);
     expect(

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

@@ -55,7 +55,7 @@ const countryToCurrencyList = {
   BD: 'BDT',
   BE: 'EUR',
   BF: 'XOF',
-  BG: 'BGN',
+  BG: 'EUR',
   BH: 'BHD',
   BI: 'BIF',
   BJ: 'XOF',

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

@@ -36,6 +36,10 @@ export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
       return import('@lion/ui/input-file-translations/hu-HU.js');
     case 'hu':
       return import('@lion/ui/input-file-translations/hu.js');
+    case 'id-ID':
+      return import('@lion/ui/input-file-translations/id-ID.js');
+    case 'id':
+      return import('@lion/ui/input-file-translations/id.js');
     case 'it-IT':
       return import('@lion/ui/input-file-translations/it-IT.js');
     case 'it':

package/components/input-file/translations/bg.js

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Име на файл: ',
   generalValidatorMessage: '"{validatorMessage}", за {listOfErroneousFiles}.',
   noFilesSelected: 'Не са избрани файлове.',
+  noFilesUploaded: 'Няма качени файлове.',
+  fileSelected: 'Избрани файл: ',
+  fileUploaded: 'Качване на файл: ',
+  filesSelected: 'Избрани файлове: {numberOfFiles} файла.',
+  filesUploaded: 'Качени файлове: {numberOfFiles} файла.',
   numberOfFiles: '{numberOfFiles} файла.',
   removeButtonLabel: 'Отстраняване на файла {fileName}',
   selectTextDuplicateFileName: 'Файл със същото име на файл вече е налице.',

package/components/input-file/translations/cs.js

@@ -8,6 +8,11 @@ export default {
   fileNameDescriptionLabel: 'Název souboru: ',
   generalValidatorMessage: '"{validatorMessage}", pro {listOfErroneousFiles}.',
   noFilesSelected: 'Nebyly vybrány žádné soubory.',
+  noFilesUploaded: 'Nebyly nahrány žádné soubory.',
+  fileSelected: 'Zvolené soubor: ',
+  fileUploaded: 'Nahraný soubor: ',
+  filesSelected: 'Zvolené soubory: {numberOfFiles} souborů.',
+  filesUploaded: 'Nahrané soubory: {numberOfFiles} souborů.',
   numberOfFiles: '{numberOfFiles} soubory/souborů.',
   removeButtonLabel: 'Odebrat soubor {fileName}',
   selectTextDuplicateFileName: 'Soubor se stejným názvem byl již přítomen.',

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Nombre de archivo: ',
   generalValidatorMessage: '"{validatorMessage}", para {listOfErroneousFiles}.',
   noFilesSelected: 'No se han seleccionado archivos.',
+  noFilesUploaded: 'No se han cargado archivos.',
+  fileSelected: 'Archivo seleccionado: ',
+  fileUploaded: 'Archivo cargado: ',
+  filesSelected: 'Archivos seleccionados: {numberOfFiles} archivos.',
+  filesUploaded: 'Archivos cargados: {numberOfFiles} archivos.',
   numberOfFiles: '{numberOfFiles} archivos.',
   removeButtonLabel: 'Elimine el archivo: {fileName}',
   selectTextDuplicateFileName: 'Ya había un archivo con el mismo nombre de archivo.',

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

@@ -8,6 +8,11 @@ export default {
   fileNameDescriptionLabel: 'Nom de fichier: ',
   generalValidatorMessage: '"{validatorMessage}", pour {listOfErroneousFiles}.',
   noFilesSelected: 'Aucun fichier sélectionné.',
+  noFilesUploaded: 'Aucun fichier téléchargé.',
+  fileSelected: 'Fichier sélectionnés : ',
+  fileUploaded: 'Fichier téléchargé : ',
+  filesSelected: 'Fichiers sélectionnés : {numberOfFiles} fichiers.',
+  filesUploaded: 'Fichiers téléchargés : {numberOfFiles} fichiers.',
   numberOfFiles: '{numberOfFiles} fichiers.',
   removeButtonLabel: 'Supprimer le fichier {fileName}',
   selectTextDuplicateFileName: 'Un fichier portant le même nom de fichier était déjà présent.',

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Fájlnév: ',
   generalValidatorMessage: '"{validatorMessage}", ehhez: {listOfErroneousFiles}.',
   noFilesSelected: 'Nincs fájl kiválasztva.',
+  noFilesUploaded: 'Nincs feltöltött fájl.',
+  fileSelected: 'Kiválasztott fájl: ',
+  fileUploaded: 'Feltöltött fájl: ',
+  filesSelected: 'Kiválasztott fájlok: {numberOfFiles} fájl.',
+  filesUploaded: 'Feltöltött fájlok: {numberOfFiles} fájl.',
   numberOfFiles: '{numberOfFiles} fájl.',
   removeButtonLabel: 'A(z) {fileName} fájl eltávolítása',
   selectTextDuplicateFileName: 'Már volt ilyen nevű fájl.',

package/components/input-file/translations/id-ID.js

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

package/components/input-file/translations/id.js

@@ -0,0 +1,19 @@
+export default {
+  allowedFileSize: 'Unggah file dengan ukuran maks. {maxSize}.',
+  allowedFileValidatorSimple: 'Unggah file {allowedType} dengan ukuran maks. {maxSize}.',
+  allowedFileValidatorComplex:
+    'Unggah file {allowedTypesArray}, atau {allowedTypesLastItem} dengan ukuran maks. {maxSize}.',
+  dragAndDropText: 'Seret & Jatuhkan file di sini atau', // TODO: or what? Why is Drag & Drop capitalized?
+  fileNameDescriptionLabel: 'Nama file: ',
+  generalValidatorMessage: '"{validatorMessage}", untuk {listOfErroneousFiles}.',
+  noFilesSelected: 'Tidak ada file yang dipilih.',
+  noFilesUploaded: 'Tidak ada file yang diunggah.',
+  fileSelected: 'File yang dipilih: ',
+  fileUploaded: 'File yang diunggah: ',
+  filesSelected: 'File yang dipilih: {numberOfFiles} file.',
+  filesUploaded: 'File yang diunggah: {numberOfFiles} file.',
+  removeButtonLabel: 'Hapus file {fileName}',
+  selectTextDuplicateFileName: 'File dengan nama file yang sama sudah ada.',
+  selectTextMultipleFile: 'Pilih beberapa file',
+  selectTextSingleFile: 'Pilih berkas',
+};

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Nome file: ',
   generalValidatorMessage: '"{validatorMessage}", per {listOfErroneousFiles}.',
   noFilesSelected: 'Nessun file selezionato.',
+  noFilesUploaded: 'Nessun file caricato.',
+  fileSelected: 'File selezionati: ',
+  fileUploaded: 'File caricato: ',
+  filesSelected: 'File selezionati: {numberOfFiles} file.',
+  filesUploaded: 'File caricati: {numberOfFiles} file.',
   numberOfFiles: '{numberOfFiles} file.',
   removeButtonLabel: 'Rimuovere il file {fileName}',
   selectTextDuplicateFileName: 'Un file con lo stesso nome file era già presente.',

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Nazwa pliku: ',
   generalValidatorMessage: '"{validatorMessage}", dla {listOfErroneousFiles}.',
   noFilesSelected: 'Nie wybrano żadnych plików.',
+  noFilesUploaded: 'Nie przesłano plików.',
+  fileSelected: 'Wybrane plik: ',
+  fileUploaded: 'Przesłany plik: ',
+  filesSelected: 'Wybrane pliki: Liczba plików: {numberOfFiles}.',
+  filesUploaded: 'Przesłane pliki: Liczba plików: {numberOfFiles}.',
   numberOfFiles: 'Liczba plików: {numberOfFiles}.',
   removeButtonLabel: 'Usuń plik {fileName}',
   selectTextDuplicateFileName: 'Plik o tej samej nazwie już istnieje.',

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Nume fişier: ',
   generalValidatorMessage: '"{validatorMessage}", pentru {listOfErroneousFiles}.',
   noFilesSelected: 'Niciun fișier selectat.',
+  noFilesUploaded: 'Nu au fost încărcate fișiere.',
+  fileSelected: 'Fișier selectate: ',
+  fileUploaded: 'Fișier încărcat: ',
+  filesSelected: 'Fișiere selectate: {numberOfFiles} fișiere.',
+  filesUploaded: 'Fișiere încărcate: {numberOfFiles} fișiere.',
   numberOfFiles: '{numberOfFiles} fișiere.',
   removeButtonLabel: 'Eliminaţi fişierul {filename}',
   selectTextDuplicateFileName: 'Există deja un fişier cu acelaşi nume de fişier.',

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Názov súboru: ',
   generalValidatorMessage: '"{validatorMessage}", pre {listOfErroneousFiles}.',
   noFilesSelected: 'Neboli vybrané žiadne súbory.',
+  noFilesUploaded: 'Nenahrali sa žiadne súbory.',
+  fileSelected: 'Zvolené súbor: ',
+  fileUploaded: 'Nahratý súbor: ',
+  filesSelected: 'Zvolené súbory: {numberOfFiles} súbory/-ov.',
+  filesUploaded: 'Nahraté súbory: {numberOfFiles} súbory/-ov.',
   numberOfFiles: 'Počet súborov: {numberOfFiles}.',
   removeButtonLabel: 'Odstrániť súbor {fileName}',
   selectTextDuplicateFileName: 'Súbor s rovnakým názvom súboru už existoval.',

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: 'Ім’я файлу: ',
   generalValidatorMessage: '"{validatorMessage}", для {listOfErroneousFiles}.',
   noFilesSelected: 'Не вибрано жодного файлу.',
+  noFilesUploaded: 'Файли не завантажено.',
+  fileSelected: 'Вибрані файл: ',
+  fileUploaded: 'Завантажений файл: ',
+  filesSelected: 'Вибрані файли: {numberOfFiles} файли(-ів).',
+  filesUploaded: 'Завантажені файли: {numberOfFiles} файли(-ів).',
   numberOfFiles: '{numberOfFiles} файли(-ів).',
   removeButtonLabel: 'Видалення файлу {fileName}',
   selectTextDuplicateFileName: 'Файл із такою назвою вже існував.',

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

@@ -7,6 +7,11 @@ export default {
   fileNameDescriptionLabel: '文件名: ',
   generalValidatorMessage: '"{validatorMessage}", 例如 {listOfErroneousFiles}。',
   noFilesSelected: '未选择任何文件。',
+  noFilesUploaded: '未上传任何文件。',
+  fileSelected: '已选择文件： ',
+  fileUploaded: '已上传文件： ',
+  filesSelected: '已选择文件：{numberOfFiles} 个文件。',
+  filesUploaded: '已上传文件：{numberOfFiles} 个文件。',
   numberOfFiles: '{numberOfFiles}  个文件。',
   removeButtonLabel: '删除 {fileName} 文件',
   selectTextDuplicateFileName: '已存在具有相同文件名的文件。',

package/components/input-stepper/test/lion-input-stepper-integrations.test.js

@@ -1,20 +1,3 @@
-import {
-  runInteractionStateMixinSuite,
-  runFormatMixinSuite,
-} from '@lion/ui/form-core-test-suites.js';
+import { runInputStepperIntegrationSuite } from '../test-suites/lion-input-stepper.integration.suite.js';
 
-import '@lion/ui/define/lion-input-stepper.js';
-
-const tagString = 'lion-input-stepper';
-
-describe('<lion-input-stepper> integrations', () => {
-  runInteractionStateMixinSuite({
-    tagString,
-    allowedModelValueTypes: [Number],
-  });
-
-  runFormatMixinSuite({
-    tagString,
-    modelValueType: Number,
-  });
-});
+runInputStepperIntegrationSuite();