@lion/ui 0.6.0-alpha.2 → 0.6.0-alpha.3

package/components/input-range/translations/en-US.js

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

package/components/input-range/translations/en.js

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimum',
+  maximum: 'Maximum',
+};

package/components/input-range/translations/es-ES.js

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Mínimo',
+  maximum: 'Máximo',
+};

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

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

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimum',
+  maximum: 'Maximum',
+};

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimum',
+  maximum: 'Maximum',
+};

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimo',
+  maximum: 'Massimo',
+};

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

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

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimum',
+  maximum: 'Maximum',
+};

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimum',
+  maximum: 'Maksymalnie',
+};

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minim',
+  maximum: 'Maxim',
+};

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Минимум',
+  maximum: 'Максимум',
+};

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Minimálne',
+  maximum: 'Maximálne',
+};

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

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: 'Мінімум',
+  maximum: 'Максимум',
+};

package/components/input-range/translations/zh-CN.js

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

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

@@ -0,0 +1,4 @@
+export default {
+  minimum: '最少',
+  maximum: '最多',
+};

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

@@ -1,6 +1,8 @@
 import { html, css, render } from 'lit';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { LionInput } from '@lion/ui/input.js';
 import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
+import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**
  * @typedef {import('lit').RenderOptions} RenderOptions
@@ -11,7 +13,7 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
  *
  * @customElement lion-input-stepper
  */
-export class LionInputStepper extends LionInput {
+export class LionInputStepper extends LocalizeMixin(LionInput) {
   static get styles() {
     return [
       ...super.styles,
@@ -41,6 +43,11 @@ export class LionInputStepper extends LionInput {
     };
   }
 
+  static localizeNamespaces = [
+    { 'lion-input-stepper': localizeNamespaceLoader },
+    ...super.localizeNamespaces,
+  ];
+
   /**
    * @returns {number}
    */
@@ -82,9 +89,7 @@ export class LionInputStepper extends LionInput {
     this.addEventListener('keydown', this.__keyDownHandler);
     this._inputNode.setAttribute('inputmode', 'decimal');
     this._inputNode.setAttribute('autocomplete', 'off');
-    this.setAttribute('aria-label', this.label);
-    this.step = this.hasAttribute('step') ? this.step : 1;
-    this.__setAriaLabelsAndValidator();
+    this.__setDefaultValidators();
     this.__toggleSpinnerButtonsState();
   }
 
@@ -117,6 +122,14 @@ export class LionInputStepper extends LionInput {
       this._inputNode.step = `${this.step}`;
       this.values.step = this.step;
     }
+
+    if (changedProperties.has('_ariaLabelledNodes')) {
+      this.__reflectAriaAttrToSpinButton('aria-labelledby', this._ariaLabelledNodes);
+    }
+
+    if (changedProperties.has('_ariaDescribedNodes')) {
+      this.__reflectAriaAttrToSpinButton('aria-describedby', this._ariaDescribedNodes);
+    }
   }
 
   get slots() {
@@ -128,41 +141,47 @@ export class LionInputStepper extends LionInput {
   }
 
   /**
-   * Set aria labels and apply validators
+   * Based on FormControlMixin __reflectAriaAttr()
+   *
+   * Will handle help text, validation feedback and character counter,
+   * prefix/suffix/before/after (if they contain data-description flag attr).
+   * Also, contents of id references that will be put in the <lion-field>._ariaDescribedby property
+   * from an external context, will be read by a screen reader.
+   * @param {string} attrName
+   * @param {Element[]} nodes
    * @private
    */
-  __setAriaLabelsAndValidator() {
-    const ariaAttributes = {
-      'aria-valuemax': this.values.max,
-      'aria-valuemin': this.values.min,
-    };
+  __reflectAriaAttrToSpinButton(attrName, nodes) {
+    const string = nodes.map(n => n.id).join(' ');
+    this.setAttribute(attrName, string);
+  }
 
-    const minMaxValidators = /** @type {(MaxNumber | MinNumber)[]} */ (
-      Object.entries(ariaAttributes)
-        .map(([key, val]) => {
-          if (val !== Infinity) {
-            this.setAttribute(key, `${val}`);
-            return key === 'aria-valuemax' ? new MaxNumber(val) : new MinNumber(val);
-          }
-          return null;
-        })
-        .filter(validator => validator !== null)
+  /**
+   * Set aria labels and apply validators
+   * @private
+   */
+  __setDefaultValidators() {
+    const validators = /** @type {(IsNumber| MaxNumber | MinNumber)[]} */ (
+      [
+        new IsNumber(),
+        this.min !== Infinity ? new MinNumber(this.min) : null,
+        this.max !== Infinity ? new MaxNumber(this.max) : null,
+      ].filter(validator => validator !== null)
     );
-    const validators = [new IsNumber(), ...minMaxValidators];
     this.defaultValidators.push(...validators);
   }
 
   /**
    * Update values on keyboard arrow up and down event
-   * @param {KeyboardEvent} e - keyboard event
+   * @param {KeyboardEvent} ev - keyboard event
    * @private
    */
-  __keyDownHandler(e) {
-    if (e.key === 'ArrowUp') {
+  __keyDownHandler(ev) {
+    if (ev.key === 'ArrowUp') {
       this.__increment();
     }
 
-    if (e.key === 'ArrowDown') {
+    if (ev.key === 'ArrowDown') {
       this.__decrement();
     }
   }
@@ -177,6 +196,9 @@ export class LionInputStepper extends LionInput {
     const incrementButton = this.__getSlot('suffix');
     const disableIncrementor = this.currentValue >= max && max !== Infinity;
     const disableDecrementor = this.currentValue <= min && min !== Infinity;
+    if (disableDecrementor || disableIncrementor) {
+      this._inputNode.focus();
+    }
     decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
     incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
     this.setAttribute('aria-valuenow', `${this.currentValue}`);
@@ -201,10 +223,10 @@ export class LionInputStepper extends LionInput {
    * @private
    */
   __increment() {
-    const { step, max } = this.values;
+    const { step, min, max } = this.values;
     const newValue = this.currentValue + step;
     if (newValue <= max || max === Infinity) {
-      this.value = `${newValue}`;
+      this.value = newValue < min && min !== Infinity ? `${min}` : `${newValue}`;
       this.__toggleSpinnerButtonsState();
       this._proxyInputEvent();
     }
@@ -215,10 +237,10 @@ export class LionInputStepper extends LionInput {
    * @private
    */
   __decrement() {
-    const { step, min } = this.values;
+    const { step, min, max } = this.values;
     const newValue = this.currentValue - step;
     if (newValue >= min || min === Infinity) {
-      this.value = `${newValue}`;
+      this.value = newValue > max && max !== Infinity ? `${max}` : `${newValue}`;
       this.__toggleSpinnerButtonsState();
       this._proxyInputEvent();
     }
@@ -301,9 +323,8 @@ export class LionInputStepper extends LionInput {
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__decrement}
         @blur=${this.__boundOnLeaveButton}
-        tabindex="-1"
         type="button"
-        aria-label="decrement"
+        aria-label="${this.msgLit('lion-input-stepper:decrease')}"
       >
         ${this._decrementorSignTemplate()}
       </button>
@@ -321,9 +342,8 @@ export class LionInputStepper extends LionInput {
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__increment}
         @blur=${this.__boundOnLeaveButton}
-        tabindex="-1"
         type="button"
-        aria-label="increment"
+        aria-label="${this.msgLit('lion-input-stepper:increase')}"
       >
         ${this._incrementorSignTemplate()}
       </button>

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

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+  switch (locale) {
+    case 'bg-BG':
+      return import('@lion/ui/input-stepper-translations/bg-BG.js');
+    case 'bg':
+      return import('@lion/ui/input-stepper-translations/bg.js');
+    case 'cs-CZ':
+      return import('@lion/ui/input-stepper-translations/cs-CZ.js');
+    case 'cs':
+      return import('@lion/ui/input-stepper-translations/cs.js');
+    case 'de-DE':
+      return import('@lion/ui/input-stepper-translations/de-DE.js');
+    case 'de':
+      return import('@lion/ui/input-stepper-translations/de.js');
+    case 'en-AU':
+      return import('@lion/ui/input-stepper-translations/en-AU.js');
+    case 'en-GB':
+      return import('@lion/ui/input-stepper-translations/en-GB.js');
+    case 'en-US':
+      return import('@lion/ui/input-stepper-translations/en-US.js');
+    case 'en-PH':
+    case 'en':
+      return import('@lion/ui/input-stepper-translations/en.js');
+    case 'es-ES':
+      return import('@lion/ui/input-stepper-translations/es-ES.js');
+    case 'es':
+      return import('@lion/ui/input-stepper-translations/es.js');
+    case 'fr-FR':
+      return import('@lion/ui/input-stepper-translations/fr-FR.js');
+    case 'fr-BE':
+      return import('@lion/ui/input-stepper-translations/fr-BE.js');
+    case 'fr':
+      return import('@lion/ui/input-stepper-translations/fr.js');
+    case 'hu-HU':
+      return import('@lion/ui/input-stepper-translations/hu-HU.js');
+    case 'hu':
+      return import('@lion/ui/input-stepper-translations/hu.js');
+    case 'it-IT':
+      return import('@lion/ui/input-stepper-translations/it-IT.js');
+    case 'it':
+      return import('@lion/ui/input-stepper-translations/it.js');
+    case 'nl-BE':
+      return import('@lion/ui/input-stepper-translations/nl-BE.js');
+    case 'nl-NL':
+      return import('@lion/ui/input-stepper-translations/nl-NL.js');
+    case 'nl':
+      return import('@lion/ui/input-stepper-translations/nl.js');
+    case 'pl-PL':
+      return import('@lion/ui/input-stepper-translations/pl-PL.js');
+    case 'pl':
+      return import('@lion/ui/input-stepper-translations/pl.js');
+    case 'ro-RO':
+      return import('@lion/ui/input-stepper-translations/ro-RO.js');
+    case 'ro':
+      return import('@lion/ui/input-stepper-translations/ro.js');
+    case 'ru-RU':
+      return import('@lion/ui/input-stepper-translations/ru-RU.js');
+    case 'ru':
+      return import('@lion/ui/input-stepper-translations/ru.js');
+    case 'sk-SK':
+      return import('@lion/ui/input-stepper-translations/sk-SK.js');
+    case 'sk':
+      return import('@lion/ui/input-stepper-translations/sk.js');
+    case 'uk-UA':
+      return import('@lion/ui/input-stepper-translations/uk-UA.js');
+    case 'uk':
+      return import('@lion/ui/input-stepper-translations/uk.js');
+    case 'zh-CN':
+    case 'zh':
+      return import('@lion/ui/input-stepper-translations/zh.js');
+    default:
+      return import('@lion/ui/input-stepper-translations/en.js');
+  }
+};

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

@@ -12,7 +12,11 @@ const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputStep
 const defaultInputStepper = html`
   <lion-input-stepper name="year" label="Years"></lion-input-stepper>
 `;
-const inputStepperWithAttrs = html`<lion-input-stepper min="100" max="200"></lion-input-stepper>`;
+const inputStepperWithAttrs = html`<lion-input-stepper
+  step="10"
+  min="100"
+  max="200"
+></lion-input-stepper>`;
 
 describe('<lion-input-stepper>', () => {
   describe('Stepper', () => {
@@ -20,9 +24,64 @@ describe('<lion-input-stepper>', () => {
       const el = await fixture(defaultInputStepper);
       expect(el._inputNode.type).to.equal('text');
     });
+
+    it('has a default min and max of Infinity', async () => {
+      const el = await fixture(defaultInputStepper);
+      expect(el.getAttribute('min')).to.equal('Infinity');
+      expect(el.getAttribute('max')).to.equal('Infinity');
+    });
+
+    it('has a default step of 1', async () => {
+      const el = await fixture(defaultInputStepper);
+      expect(el.getAttribute('step')).to.equal('1');
+    });
+
+    it('can set a step with which the value increases', async () => {
+      const el = await fixture(defaultInputStepper);
+      el.step = 10;
+      await el.updateComplete;
+      expect(el.value).to.equal('');
+      expect(el.getAttribute('step')).to.equal('10');
+
+      const incrementButton = el.querySelector('[slot=suffix]');
+      incrementButton?.dispatchEvent(new Event('click'));
+      expect(el.value).to.equal('10');
+    });
   });
 
   describe('User interaction', () => {
+    it('should increment the value to 1 on [ArrowUp]', async () => {
+      const el = await fixture(defaultInputStepper);
+      expect(el.value).to.equal('');
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      await el.updateComplete;
+      expect(el.value).to.equal('1');
+    });
+
+    it('should increment the value to minValue on [ArrowUp] if value is below min', async () => {
+      const el = await fixture(inputStepperWithAttrs);
+      expect(el.value).to.equal('');
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      await el.updateComplete;
+      expect(el.value).to.equal('100');
+    });
+
+    it('should decrement the value to -1 on [ArrowDown]', async () => {
+      const el = await fixture(defaultInputStepper);
+      expect(el.value).to.equal('');
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+      await el.updateComplete;
+      expect(el.value).to.equal('-1');
+    });
+
+    it('should increment the value to minValue on [ArrowDown] if value is below min', async () => {
+      const el = await fixture(inputStepperWithAttrs);
+      el.modelValue = 600;
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+      await el.updateComplete;
+      expect(el.value).to.equal('200');
+    });
+
     it('should increment the value to 1 on + button click', async () => {
       const el = await fixture(defaultInputStepper);
       expect(el.value).to.equal('');
@@ -174,14 +233,8 @@ describe('<lion-input-stepper>', () => {
       await expect(el).to.be.accessible();
     });
 
-    it('adds aria-valuemax and aria-valuemin when min and max are provided', async () => {
-      const el = await fixture(inputStepperWithAttrs);
-      expect(el).to.have.attribute('aria-valuemax', '200');
-      expect(el).to.have.attribute('aria-valuemin', '100');
-    });
-
     it('updates aria-valuenow when stepper is changed', async () => {
-      const el = await fixture(inputStepperWithAttrs);
+      const el = await fixture(defaultInputStepper);
       const incrementButton = el.querySelector('[slot=suffix]');
       incrementButton?.dispatchEvent(new Event('click'));
       expect(el).to.have.attribute('aria-valuenow', '1');

package/components/input-stepper/translations/bg-BG.js

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

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

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

package/components/input-stepper/translations/cs-CZ.js

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

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

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

package/components/input-stepper/translations/de-DE.js

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

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

@@ -0,0 +1,4 @@
+export default {
+  decrease: 'Verringern',
+  increase: 'Erhöhen',
+};

package/components/input-stepper/translations/en-AU.js

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

package/components/input-stepper/translations/en-GB.js

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

package/components/input-stepper/translations/en-US.js

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

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

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

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

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

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,
+};