@lion/ui 0.11.4 → 0.11.6

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

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Nahrajte súbor {allowedTypesArray} alebo {allowedTypesLastItem} s maximálnou veľkosťou {maxSize}.',
   dragAndDropText: 'Súbory presuňte sem alebo',
-  fileNameDescriptionLabel: 'Názov súboru: {fileName}',
+  fileNameDescriptionLabel: 'Názov súboru: ',
   generalValidatorMessage: '"{validatorMessage}", pre {listOfErroneousFiles}.',
   noFilesSelected: 'Neboli vybrané žiadne súbory.',
   numberOfFiles: 'Počet súborov: {numberOfFiles}.',

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

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Завантажте файл {allowedTypesArray} або {allowedTypesLastItem} розміром до {maxSize}.',
   dragAndDropText: 'Перетягніть файли сюди або',
-  fileNameDescriptionLabel: 'Ім’я файлу: {fileName}',
+  fileNameDescriptionLabel: 'Ім’я файлу: ',
   generalValidatorMessage: '"{validatorMessage}", для {listOfErroneousFiles}.',
   noFilesSelected: 'Не вибрано жодного файлу.',
   numberOfFiles: '{numberOfFiles} файли(-ів).',

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

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     '请上传最大 {maxSize} 的 {allowedTypesArray} 或 {allowedTypesLastItem} 文件。',
   dragAndDropText: '将您的文件拖放到此处，或',
-  fileNameDescriptionLabel: '文件名: {fileName}',
+  fileNameDescriptionLabel: '文件名: ',
   generalValidatorMessage: '"{validatorMessage}", 例如 {listOfErroneousFiles}。',
   noFilesSelected: '未选择任何文件。',
   numberOfFiles: '{numberOfFiles}  个文件。',

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

@@ -266,7 +266,15 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
    */
   __increment() {
     const { step, min, max } = this.values;
-    const newValue = this.currentValue + step;
+    const stepMin = min !== Infinity ? min : 0;
+
+    let newValue = this.currentValue + step;
+
+    if ((this.currentValue + stepMin) % step !== 0) {
+      // If the value is not aligned to step, align it to the nearest step
+      newValue = Math.floor(this.currentValue / step) * step + step + (stepMin % step);
+    }
+
     if (newValue <= max || max === Infinity) {
       this.modelValue = newValue < min && min !== Infinity ? `${min}` : `${newValue}`;
       this.__toggleSpinnerButtonsState();
@@ -279,8 +287,16 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
    * @private
    */
   __decrement() {
-    const { step, min, max } = this.values;
-    const newValue = this.currentValue - step;
+    const { step, max, min } = this.values;
+    const stepMin = min !== Infinity ? min : 0;
+
+    let newValue = this.currentValue - step;
+
+    if ((this.currentValue + stepMin) % step !== 0) {
+      // If the value is not aligned to step, align it to the nearest step
+      newValue = Math.floor(this.currentValue / step) * step + (stepMin % step);
+    }
+
     if (newValue >= min || min === Infinity) {
       this.modelValue = newValue > max && max !== Infinity ? `${max}` : `${newValue}`;
       this.__toggleSpinnerButtonsState();

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

@@ -265,6 +265,100 @@ describe('<lion-input-stepper>', () => {
       await nextFrame();
       expect(incrementButton?.getAttribute('disabled')).to.equal('true');
     });
+
+    describe('It align to steps', () => {
+      it('aligns the value to the nearest step when incrementing', async () => {
+        let el = await fixture(
+          html`<lion-input-stepper step="10" min="0" max="100" value="55"></lion-input-stepper>`,
+        );
+        let incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(60, 'Fail + : (0 > 100 by 10; val 55)');
+
+        // min 1
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="1" max="100" value="55"></lion-input-stepper>`,
+        );
+        incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(61, 'Fail + : (1 > 100 by 10; val 55)');
+
+        // min 34
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="34" max="100" value="55"></lion-input-stepper>`,
+        );
+        incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(64, 'Fail + : (34 > 100 by 10; val 55)');
+
+        // min -23
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="-23" max="100" value="55"></lion-input-stepper>`,
+        );
+        incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(57, 'Fail + : (-23 > 100 by 10; val 55)'); // -23 > -13 > -3 > 7 > ... > 57
+
+        // min -23
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="-23" max="100" value="-9"></lion-input-stepper>`,
+        );
+        incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(-3, 'Fail + : (-23 > 100 by 10; val 55)'); // -23 > -13 > -3 > 7
+      });
+
+      it('aligns the value to the nearest step when decrementing', async () => {
+        let el = await fixture(
+          html`<lion-input-stepper step="10" min="0" max="100" value="55"></lion-input-stepper>`,
+        );
+        let decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(50, 'Fail - : (0 > 100 by 10; val 55)');
+
+        // min 1
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="1" max="100" value="55"></lion-input-stepper>`,
+        );
+        decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(51, 'Fail - : (1 > 100 by 10; val 55)');
+
+        // min 34
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="34" max="100" value="55"></lion-input-stepper>`,
+        );
+        decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(54, 'Fail - : (34 > 100 by 10; val 55)');
+
+        // min -23
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="-23" max="100" value="55"></lion-input-stepper>`,
+        );
+        decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(47, 'Fail - : (-23 > 100 by 10; val 55)'); // -23 > -13 > -3 > 7 > ... > 47
+
+        // min -23
+        el = await fixture(
+          html`<lion-input-stepper step="10" min="-23" max="100" value="-9"></lion-input-stepper>`,
+        );
+        decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(-13, 'Fail - : (-23 > 100 by 10; val 55)'); // -23 > -13 > -3 > 7
+      });
+    });
   });
 
   describe('Accessibility', () => {

package/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);
   }
 }

package/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'}" ></${tag}> `,
+      );
+      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}></${tag}> `);
@@ -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']}"></${tag}> `);
+      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}></${tag}> `);
       if (resolvePhoneUtilLoaded) {

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

@@ -4,6 +4,7 @@ import { ref, createRef } from 'lit/directives/ref.js';
 import { LionInputTel } from '@lion/ui/input-tel.js';
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { getFlagSymbol } from './getFlagSymbol.js';
+import { regionCodeToLocale } from './regionCodeToLocale.js';
 
 /**
  * Note: one could consider to implement LionInputTelDropdown as a
@@ -41,14 +42,6 @@ import { getFlagSymbol } from './getFlagSymbol.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()),
@@ -193,8 +186,7 @@ export class LionInputTelDropdown extends LionInputTel {
   onLocaleUpdated() {
     super.onLocaleUpdated();
 
-    // @ts-expect-error relatively new platform api
-    this.__namesForLocale = new Intl.DisplayNames([this._langIso], {
+    this.__namesForLocale = new Intl.DisplayNames([this._localizeManager.locale], {
       type: 'region',
     });
     this.__createRegionMeta();
@@ -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
@@ -408,7 +395,7 @@ export class LionInputTelDropdown extends LionInputTel {
     this.__regionMetaListPreferred = [];
     this._allowedOrAllRegions.forEach(regionCode => {
       // @ts-ignore relatively new platform api
-      const namesForRegion = new Intl.DisplayNames([regionCode.toLowerCase()], {
+      const namesForRegion = new Intl.DisplayNames([regionCodeToLocale(regionCode)], {
         type: 'region',
       });
       const countryCode =

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

@@ -0,0 +1,10 @@
+/**
+ * Get the full locale for a region.
+ * As we don't know the language for that region, we first set it as 'und', which stands for 'undetermined'.
+ * @param {string} regionCode
+ */
+export function regionCodeToLocale(regionCode) {
+  const locale = new Intl.Locale('und', { region: regionCode }); // Set language as undetermined.
+  const maximizedLocale = locale.maximize(); // Determine the most likely full locale for a region with an undetermined language.
+  return maximizedLocale.baseName;
+}

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

@@ -0,0 +1,10 @@
+import { expect } from '@open-wc/testing';
+import { regionCodeToLocale } from '../src/regionCodeToLocale.js';
+
+describe('regionCodeToLocale', () => {
+  it('returns the most likely locale basename for a region', () => {
+    expect(regionCodeToLocale('NL')).to.equal('nl-Latn-NL');
+    expect(regionCodeToLocale('FR')).to.equal('fr-Latn-FR');
+    expect(regionCodeToLocale('DE')).to.equal('de-Latn-DE');
+  });
+});

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

@@ -133,7 +133,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
                   countryCode: 63,
                   flagSymbol: '🇵🇭',
                   nameForLocale: 'Philippines',
-                  nameForRegion: 'Philippines',
+                  nameForRegion: 'Pilipinas',
                   regionCode: 'PH',
                 },
               ],
@@ -239,6 +239,74 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         restorePhoneUtilManager();
         spy.restore();
       });
+
+      it('has the correct nameForLocale, based on browser language', async () => {
+        const el = fixtureSync(html` <${tag}
+          .modelValue="${'+31612345678'}"
+          .allowedRegions="${['NL', 'PH']}"
+          .preferredRegions="${['PH']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        // @ts-ignore
+        const originalLocale = el._localizeManager.locale;
+        // @ts-ignore
+        el._localizeManager.locale = 'fr-BE';
+        await el.updateComplete;
+        const dropdownNode = el.refs.dropdown.value;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
+          spy.args[0][0]
+        );
+        expect(templateDataForDropdown).to.eql(
+          /** @type {TemplateDataForDropdownInputTel} */ ({
+            data: {
+              activeRegion: 'NL',
+              regionMetaList: [
+                {
+                  countryCode: 31,
+                  flagSymbol: '🇳🇱',
+                  nameForLocale: 'Pays-Bas',
+                  nameForRegion: 'Nederland',
+                  regionCode: 'NL',
+                },
+              ],
+              regionMetaListPreferred: [
+                {
+                  countryCode: 63,
+                  flagSymbol: '🇵🇭',
+                  nameForLocale: 'Philippines',
+                  nameForRegion: 'Pilipinas',
+                  regionCode: 'PH',
+                },
+              ],
+            },
+            refs: {
+              dropdown: {
+                labels: {
+                  allCountries: 'Tous les pays',
+                  preferredCountries: 'Pays suggérés',
+                  selectCountry: 'Sélectionnez un pays',
+                },
+                listeners: {
+                  // @ts-expect-error [allow-protected]
+                  change: el._onDropdownValueChange,
+                  // @ts-expect-error [allow-protected]
+                  'model-value-changed': el._onDropdownValueChange,
+                },
+                props: { style: 'height: 100%;' },
+                ref: { value: dropdownNode },
+              },
+              // @ts-expect-error [allow-protected]
+              input: el._inputNode,
+            },
+          }),
+        );
+        spy.restore();
+        // @ts-ignore
+        el._localizeManager.locale = originalLocale; // restore the locale back to original
+      });
     });
 
     describe('On dropdown value change', () => {

package/components/overlays/translations/tr-TR.js

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

package/components/overlays/translations/tr.js

@@ -0,0 +1,4 @@
+export default {
+  back: 'Geri',
+  close: 'Kapat',
+};

package/components/pagination/src/LionPagination.js

@@ -73,6 +73,8 @@ export class LionPagination extends LocalizeMixin(LitElement) {
               return import('@lion/ui/pagination-translations/ru.js');
             case 'sk-SK':
               return import('@lion/ui/pagination-translations/sk.js');
+            case 'tr-TR':
+              return import('@lion/ui/pagination-translations/tr.js');
             case 'uk-UA':
               return import('@lion/ui/pagination-translations/uk.js');
             case 'zh-CN':

package/components/pagination/translations/tr.js

@@ -0,0 +1,6 @@
+export default {
+  label: 'Sayfa gezintisi',
+  previous: 'Önceki sayfa',
+  next: 'Sonraki sayfa',
+  page: '{page}. sayfa',
+};

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

@@ -85,6 +85,10 @@ export async function loadValidateNamespace({ localize }) {
             return import('@lion/ui/validate-messages-translations/sk-SK.js');
           case 'sk':
             return import('@lion/ui/validate-messages-translations/sk.js');
+          case 'tr-TR':
+            return import('@lion/ui/validate-messages-translations/tr-TR.js');
+          case 'tr':
+            return import('@lion/ui/validate-messages-translations/tr.js');
           case 'uk-UA':
             return import('@lion/ui/validate-messages-translations/uk-UA.js');
           case 'uk':

package/components/validate-messages/translations/tr-TR.js

@@ -0,0 +1,13 @@
+import tr from './tr.js';
+
+export default {
+  ...tr,
+  error: {
+    ...tr.error,
+    IsDate: 'Lütfen geçerli bir tarih girin (GG/AA/YYYY).',
+  },
+  warning: {
+    ...tr.warning,
+    IsDate: 'Lütfen geçerli bir tarih girin (GG/AA/YYYY).',
+  },
+};

package/components/validate-messages/translations/tr.js

@@ -0,0 +1,56 @@
+export default {
+  error: {
+    Required: '{fieldName} alanını doldurun.',
+    _RequiredUpload: '{fieldName} dosyasını yükleyin.',
+    _RequiredSelect: '{fieldName} seçin.',
+    EqualsLength: '{fieldName} alanı tam olarak {params} karakter olmalıdır.',
+    MinLength: '{fieldName} alanı en az {params} karakter olmalıdır.',
+    MaxLength: '{fieldName} alanı en fazla {params} karakter olmalıdır.',
+    MinMaxLength: '{fieldName} alanı {params.min} ile {params.max} karakter arasında olmalıdır.',
+    Pattern: 'Geçerli bir {fieldName} girin.',
+    IsNumber: 'Geçerli bir {fieldName} girin.',
+    MinNumber: '{fieldName}, {params} veya daha büyük olmalıdır.',
+    MaxNumber: '{fieldName}, {params} veya daha küçük olmalıdır.',
+    MinMaxNumber: '{fieldName}, {params.min} ile {params.max} arasında olmalıdır.',
+    IsDate: 'Geçerli bir tarih girin (GG/AA/YYYY).',
+    MinDate: '{fieldName}, {params, date, YYYYMMDD} veya daha sonraki bir tarih olmalıdır.',
+    MaxDate: '{fieldName}, {params, date, YYYYMMDD} veya daha önceki bir tarih olmalıdır.',
+    MinMaxDate:
+      '{fieldName}, {params.min, date, YYYYMMDD} ile {params.max, date, YYYYMMDD} arasında olmalıdır.',
+    IsDateDisabled: 'Bu tarih kullanılamaz. Lütfen başka bir tarih seçin.',
+    IsEmail: 'Geçerli bir {fieldName} girin ("ad@örnek.com" formatında).',
+    MatchesOption: 'Eşleşen sonuç bulunamadı. Farklı bir anahtar kelime ya da kategori deneyin.',
+  },
+  warning: {
+    Required: '{fieldName} alanını doldurun.',
+    _RequiredUpload: '{fieldName} dosyasını yükleyin.',
+    _RequiredSelect: '{fieldName} seçin.',
+    EqualsLength: '{fieldName} alanı tam olarak {params} karakter olmalıdır.',
+    MinLength: '{fieldName} alanı en az {params} karakter olmalıdır.',
+    MaxLength: '{fieldName} alanı en fazla {params} karakter olmalıdır.',
+    MinMaxLength: '{fieldName} alanı {params.min} ile {params.max} karakter arasında olmalıdır.',
+    IsNumber: 'Geçerli bir {fieldName} girin.',
+    MinNumber: '{fieldName}, {params} veya daha büyük olmalıdır.',
+    MaxNumber: '{fieldName}, {params} veya daha küçük olmalıdır.',
+    MinMaxNumber: '{fieldName}, {params.min} ile {params.max} arasında olmalıdır.',
+    IsDate: 'Geçerli bir tarih girin (GG/AA/YYYY).',
+    MinDate: '{fieldName}, {params, date, YYYYMMDD} veya daha sonraki bir tarih olmalıdır.',
+    MaxDate: '{fieldName}, {params, date, YYYYMMDD} veya daha önceki bir tarih olmalıdır.',
+    MinMaxDate:
+      '{fieldName}, {params.min, date, YYYYMMDD} ile {params.max, date, YYYYMMDD} arasında olmalıdır.',
+    IsDateDisabled: 'Bu tarih kullanılamaz. Lütfen başka bir tarih seçin.',
+    IsEmail: 'Geçerli bir {fieldName} girin ("ad@örnek.com" formatında).',
+    MatchesOption: 'Eşleşen sonuç bulunamadı. Farklı bir anahtar kelime ya da kategori deneyin.',
+  },
+  success: {
+    DefaultOk: 'Tamam',
+    RandomOk:
+      'success.DefaultOk,success.Correct,success.Succeeded,success.Ok,success.ThisIsRight,success.Changed,success.OkCorrect',
+    Correct: 'Doğru',
+    Succeeded: 'Başarılı',
+    Ok: 'Tamam!',
+    ThisIsRight: 'Bu doğru.',
+    Changed: 'Değiştirildi!',
+    OkCorrect: 'Tamam, doğru.',
+  },
+};