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

package/components/input-range/src/LionInputRange.js

@@ -38,6 +38,14 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
         type: Boolean,
         attribute: 'no-min-max-labels',
       },
+      minLabel: {
+        type: String,
+        attribute: 'min-label',
+      },
+      maxLabel: {
+        type: String,
+        attribute: 'max-label',
+      },
     };
   }
 
@@ -84,6 +92,25 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     return /** @type {HTMLInputElement} */ (super._inputNode);
   }
 
+  /**
+   * Get the display info for the current value
+   * @protected
+   * @returns {{ text: string, showUnit: boolean }}
+   */
+  get _valueDisplay() {
+    const currentValue = parseFloat(/** @type {string} */ (this.formattedValue));
+
+    if (this.minLabel && currentValue === this.min) {
+      return { text: this.minLabel, showUnit: false };
+    }
+
+    if (this.maxLabel && currentValue === this.max) {
+      return { text: this.maxLabel, showUnit: false };
+    }
+
+    return { text: formatNumber(currentValue), showUnit: true };
+  }
+
   constructor() {
     super();
     /** @type {ScopedStylesController} */
@@ -94,6 +121,8 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     this.unit = '';
     this.type = 'range';
     this.noMinMaxLabels = false;
+    this.minLabel = '';
+    this.maxLabel = '';
     /**
      * @param {string} modelValue
      */
@@ -115,6 +144,16 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     if (changedProperties.has('step')) {
       this._inputNode.step = `${this.step}`;
     }
+
+    if (changedProperties.has('modelValue')) {
+      if (this.minLabel && this.modelValue === this.min) {
+        this._inputNode.setAttribute('aria-valuetext', `${this.minLabel}`);
+      } else if (this.maxLabel && this.modelValue === this.max) {
+        this._inputNode.setAttribute('aria-valuetext', `${this.maxLabel}`);
+      } else {
+        this._inputNode.removeAttribute('aria-valuetext');
+      }
+    }
   }
 
   /** @param {import('lit').PropertyValues } changedProperties */
@@ -130,12 +169,12 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
 
   /** @protected */
   _inputGroupTemplate() {
+    const display = this._valueDisplay;
+
     return html`
       <div>
-        <span class="input-range__value"
-          >${formatNumber(parseFloat(/** @type {string} */ (this.formattedValue)))}</span
-        >
-        <span class="input-range__unit">${this.unit}</span>
+        <span class="input-range__value">${display.text}</span>
+        ${display.showUnit ? html`<span class="input-range__unit">${this.unit}</span>` : ''}
       </div>
       <div class="input-group">
         ${this._inputGroupBeforeTemplate()}
@@ -157,12 +196,16 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
           ? html`
               <div class="input-range__limits">
                 <div>
-                  <span class="sr-only">${this.msgLit('lion-input-range:minimum')} </span
-                  >${formatNumber(this.min)}
+                  <span class="sr-only">${this.msgLit('lion-input-range:minimum')} </span>${this
+                    .minLabel
+                    ? this.minLabel
+                    : formatNumber(this.min)}
                 </div>
                 <div>
-                  <span class="sr-only">${this.msgLit('lion-input-range:maximum')} </span
-                  >${formatNumber(this.max)}
+                  <span class="sr-only">${this.msgLit('lion-input-range:maximum')} </span>${this
+                    .maxLabel
+                    ? this.maxLabel
+                    : formatNumber(this.max)}
                 </div>
               </div>
             `

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

@@ -84,4 +84,118 @@ describe('<lion-input-range>', () => {
     const el = await fixture(`<lion-input-range label="range" disabled></lion-input-range>`);
     await expect(el).to.be.accessible();
   });
+
+  describe('Custom min/max labels', () => {
+    it('displays custom minLabel in the limits when provided', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${50}></lion-input-range>
+      `);
+      const minDiv = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[0]
+      );
+      expect(minDiv.textContent?.trim()).to.equal('Minimum Low');
+    });
+
+    it('displays custom maxLabel in the limits when provided', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" max-label="High" .modelValue=${50}></lion-input-range>
+      `);
+      const maxDiv = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[1]
+      );
+      expect(maxDiv.textContent?.trim()).to.equal('Maximum High');
+    });
+
+    it('displays custom minLabel as value display when value equals min', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${0}></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      expect(valueSpan.innerText).to.equal('Low');
+    });
+
+    it('displays custom maxLabel as value display when value equals max', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" max-label="High" .modelValue=${100}></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      expect(valueSpan.innerText).to.equal('High');
+    });
+
+    it('displays formatted number when value is between min and max', async () => {
+      const el = await fixture(html`
+        <lion-input-range
+          min="0"
+          max="100"
+          min-label="Low"
+          max-label="High"
+          .modelValue=${50}
+        ></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      expect(valueSpan.innerText).to.equal('50');
+    });
+
+    it('maintains numeric modelValue even when displaying custom label', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${0}></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      // Display shows custom label
+      expect(valueSpan.innerText).to.equal('Low');
+      // But modelValue is still the number
+      expect(el.modelValue).to.equal(0);
+      expect(typeof el.modelValue).to.equal('number');
+    });
+
+    it('sets aria-valuetext to minLabel when modelValue equals min', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${50}></lion-input-range>
+      `);
+
+      el.modelValue = 0;
+      await nextFrame();
+
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
+    });
+
+    it('sets aria-valuetext to maxLabel when modelValue equals max', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" max-label="High" .modelValue=${50}></lion-input-range>
+      `);
+
+      el.modelValue = 100;
+      await nextFrame();
+
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('High');
+    });
+
+    it('removes aria-valuetext when modelValue is between min and max', async () => {
+      const el = await fixture(html`
+        <lion-input-range
+          min="0"
+          max="100"
+          min-label="Low"
+          max-label="High"
+          .modelValue=${0}
+        ></lion-input-range>
+      `);
+
+      await nextFrame();
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
+
+      el.modelValue = 50;
+      await nextFrame();
+
+      expect(el._inputNode.hasAttribute('aria-valuetext')).to.equal(false);
+    });
+  });
 });

package/components/input-stepper/test-suites/lion-input-stepper.integration.suite.js

@@ -1,8 +1,8 @@
-import { defineCE } from '@open-wc/testing';
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
+import { defineCE } from '@open-wc/testing';
 import { LionInputStepper } from '../src/LionInputStepper.js';
 
 export const runInputStepperIntegrationSuite = (klass = LionInputStepper) => {

package/components/input-tel/src/LionInputTel.js

@@ -137,6 +137,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   constructor() {
     super();
+    this.autocomplete = 'tel';
 
     /**
      * Determines what the formatter output should look like.
@@ -192,7 +193,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
-
     // This will trigger the right keyboard on mobile
     this._inputNode.inputMode = 'tel';
   }

package/components/input-tel/test-suites/LionInputTel.suite.js

@@ -222,6 +222,13 @@ export function runInputTelSuite({ klass = LionInputTel } = {}) {
         expect(el._inputNode.inputMode).to.equal('tel');
       });
 
+      it('sets autocomplete to "tel"', async () => {
+        const el = await fixture(html` <${tag}></${tag}> `);
+        await el.updateComplete;
+        // @ts-expect-error [allow-protected] inside tests
+        expect(el._inputNode.getAttribute('autocomplete')).to.equal('tel');
+      });
+
       it('formats according to locale', async () => {
         const el = await fixture(
           html` <${tag} .modelValue="${'+31612345678'}" .allowedRegions="${['NL']}"></${tag}> `,

package/components/localize/test/date/formatDate.test.js

@@ -210,7 +210,6 @@ describe('formatDate', () => {
           locale,
         };
         const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
-        // @ts-ignore - dynamic locale key access
         expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
       });
     });