@lion/ui 0.15.2 → 0.15.3

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

@@ -1,4 +1,5 @@
 import { expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
+import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 import sinon from 'sinon';
 import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
@@ -17,6 +18,7 @@ const inputStepperWithAttrs = html`<lion-input-stepper
   step="10"
   min="100"
   max="200"
+  label="Label"
 ></lion-input-stepper>`;
 
 describe('<lion-input-stepper>', () => {
@@ -177,31 +179,6 @@ describe('<lion-input-stepper>', () => {
       expect(counter).to.equal(1);
     });
 
-    it('fires a leave event ("blur") on button clicks', async () => {
-      const blurSpy = sinon.spy();
-      const el = await fixture(html`
-        <lion-input-stepper @blur=${blurSpy} name="year" label="Years"></lion-input-stepper>
-      `);
-
-      expect(el.value).to.equal('');
-      const decrementButton = el.querySelector('[slot=prefix]');
-      decrementButton?.dispatchEvent(new Event('focus'));
-      decrementButton?.dispatchEvent(new Event('click'));
-      decrementButton?.dispatchEvent(new Event('blur'));
-      expect(el.value).to.equal('−1');
-      expect(blurSpy.calledOnce).to.be.true;
-      expect(el.touched).to.be.true;
-
-      el.touched = false;
-      const incrementButton = el.querySelector('[slot=suffix]');
-      incrementButton?.dispatchEvent(new Event('focus'));
-      incrementButton?.dispatchEvent(new Event('click'));
-      incrementButton?.dispatchEvent(new Event('blur'));
-      expect(el.value).to.equal('0');
-      expect(blurSpy.calledTwice).to.be.true;
-      expect(el.touched).to.be.true;
-    });
-
     it('should update min and max attributes when min and max property change', async () => {
       const el = await fixture(inputStepperWithAttrs);
       el.min = 100;
@@ -358,6 +335,251 @@ describe('<lion-input-stepper>', () => {
         await el.updateComplete;
         expect(el.modelValue).to.equal(-13, 'Fail - : (-23 > 100 by 10; val 55)'); // -23 > -13 > -3 > 7
       });
+
+      it('handles decimal step values correctly', async () => {
+        // Test with decimal step 0.1
+        let el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="5.55"></lion-input-stepper>`,
+        );
+
+        // Test increment with decimal step
+        let incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(5.6, 'Fail + : (0 > 9 by 0.1; val 5.55)');
+
+        // Test decrement with decimal step
+        let decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(5.5, 'Fail - : (0 > 9 by 0.1; val 5.6)');
+
+        // Test with value that needs alignment
+        el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="3.27"></lion-input-stepper>`,
+        );
+
+        // Should align to next step when incrementing
+        incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(3.3, 'Fail + alignment: (0 > 9 by 0.1; val 3.27)');
+
+        // Reset and test decrement alignment
+        el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="3.27"></lion-input-stepper>`,
+        );
+
+        // Should align to previous step when decrementing
+        decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(3.2, 'Fail - alignment: (0 > 9 by 0.1; val 3.27)');
+      });
+    });
+  });
+
+  describe('_destroyOutputContent method', () => {
+    beforeEach(() => {
+      // Ensure clean state for each test
+      sinon.restore();
+    });
+
+    it('should clear existing timer before setting a new one', async () => {
+      const el = await fixture(defaultInputStepper);
+      const clearTimeoutSpy = sinon.spy(window, 'clearTimeout');
+
+      // Set an initial timer
+      el.timer = setTimeout(() => {}, 1000);
+      const initialTimer = el.timer;
+
+      // Call _destroyOutputContent
+      el._destroyOutputContent();
+
+      expect(clearTimeoutSpy.calledWith(initialTimer)).to.be.true;
+      clearTimeoutSpy.restore();
+    });
+
+    it('should set __valueText to nothing and request update after timeout', async () => {
+      const el = await fixture(defaultInputStepper);
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+      const clock = sinon.useFakeTimers();
+
+      // Set initial value text
+      el.__valueText = 'test value';
+
+      // Call _destroyOutputContent
+      el._destroyOutputContent();
+
+      // Fast forward time by 2000ms (default timeout)
+      clock.tick(2000);
+
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should use custom timeout from data-self-destruct attribute', async () => {
+      const el = await fixture(html`
+        <lion-input-stepper name="test" label="Test"> </lion-input-stepper>
+      `);
+
+      await el.updateComplete;
+
+      // Get the output element and set custom self-destruct value
+      const outputElement = /** @type {HTMLElement} */ (
+        el.shadowRoot?.querySelector('.input-stepper__value')
+      );
+      if (outputElement) {
+        outputElement.dataset.selfDestruct = '5000';
+      }
+
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+      el._destroyOutputContent();
+
+      // Should not trigger after default 2000ms
+      clock.tick(2000);
+      await expect(el.__valueText).to.equal('test value');
+      expect(requestUpdateSpy.called).to.be.false;
+
+      // Should trigger after custom 5000ms
+      clock.tick(3000); // Total 5000ms
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should handle invalid data-self-destruct value by using default timeout', async () => {
+      const el = await fixture(html`
+        <lion-input-stepper name="test" label="Test"> </lion-input-stepper>
+      `);
+
+      await el.updateComplete;
+
+      // Get the output element and set invalid self-destruct value
+      const outputElement = /** @type {HTMLElement} */ (
+        el.shadowRoot?.querySelector('.input-stepper__value')
+      );
+      if (outputElement) {
+        outputElement.dataset.selfDestruct = 'invalid';
+      }
+
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+      el._destroyOutputContent();
+
+      // Should use default 2000ms when invalid value is provided
+      clock.tick(2000);
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should not set timeout if output element does not exist', async () => {
+      const el = await fixture(defaultInputStepper);
+      const setTimeoutSpy = sinon.spy(window, 'setTimeout');
+
+      // Mock shadowRoot to return null for querySelector
+      const originalQuerySelector = el.shadowRoot?.querySelector;
+      if (el.shadowRoot) {
+        el.shadowRoot.querySelector = () => null;
+      }
+
+      el._destroyOutputContent();
+
+      expect(setTimeoutSpy.called).to.be.false;
+
+      // Restore original querySelector
+      if (el.shadowRoot && originalQuerySelector) {
+        el.shadowRoot.querySelector = originalQuerySelector;
+      }
+      setTimeoutSpy.restore();
+    });
+
+    it('should only execute timeout callback if output element still has parent', async () => {
+      const el = await fixture(defaultInputStepper);
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+      el._destroyOutputContent();
+
+      // Remove the output element from DOM before timeout
+      const outputElement = el.shadowRoot?.querySelector('.input-stepper__value');
+      if (outputElement && outputElement.parentNode) {
+        outputElement.parentNode.removeChild(outputElement);
+      }
+
+      // Fast forward time
+      clock.tick(2000);
+
+      // Should not have updated since element was removed
+      expect(requestUpdateSpy.called).to.be.false;
+      expect(el.__valueText).to.equal('test value');
+
+      clock.restore();
+      requestUpdateSpy.restore();
+    });
+
+    it('should be called when increment button is clicked', async () => {
+      const el = await fixture(defaultInputStepper);
+      const destroyOutputSpy = sinon.spy(el, '_destroyOutputContent');
+
+      const incrementButton = el.querySelector('[slot=suffix]');
+      incrementButton?.dispatchEvent(new Event('click'));
+
+      expect(destroyOutputSpy.calledOnce).to.be.true;
+      destroyOutputSpy.restore();
+    });
+
+    it('should be called when decrement button is clicked', async () => {
+      const el = await fixture(defaultInputStepper);
+      const destroyOutputSpy = sinon.spy(el, '_destroyOutputContent');
+
+      const decrementButton = el.querySelector('[slot=prefix]');
+      decrementButton?.dispatchEvent(new Event('click'));
+
+      expect(destroyOutputSpy.calledOnce).to.be.true;
+      destroyOutputSpy.restore();
+    });
+
+    it('should handle multiple rapid calls by clearing previous timers', async () => {
+      const el = await fixture(defaultInputStepper);
+      const clock = sinon.useFakeTimers();
+      const requestUpdateSpy = sinon.spy(el, 'requestUpdate');
+
+      el.__valueText = 'test value';
+
+      // Call _destroyOutputContent multiple times rapidly
+      el._destroyOutputContent();
+      clock.tick(1000); // 1 second
+
+      el._destroyOutputContent(); // This should clear the previous timer
+      clock.tick(1000); // Total 2 seconds from first call, 1 second from second call
+
+      // Should not have triggered yet since second call reset the timer
+      expect(el.__valueText).to.equal('test value');
+      expect(requestUpdateSpy.called).to.be.false;
+
+      clock.tick(1000); // Total 2 seconds from second call
+
+      // Should trigger now
+      await expect(el.__valueText).to.equal(nothing);
+      expect(requestUpdateSpy.calledOnce).to.be.true;
+
+      clock.restore();
+      requestUpdateSpy.restore();
     });
   });
 
@@ -448,30 +670,20 @@ describe('<lion-input-stepper>', () => {
       expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('1000');
     });
 
-    it('when decrease button gets focus, it sets aria-live to input-stepper__value', async () => {
+    it('decrease button should have aria-label with the component label', async () => {
       const el = await fixture(inputStepperWithAttrs);
-      const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
       const decrementButton = el.querySelector('[slot=prefix]');
 
-      decrementButton?.dispatchEvent(new Event('focus'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
-      expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
-
-      decrementButton?.dispatchEvent(new Event('blur'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
+      expect(decrementButton?.hasAttribute('aria-label')).to.be.true;
+      expect(decrementButton?.getAttribute('aria-label')).to.equal('Decrease Label');
     });
 
-    it('when increase button gets focus, it sets aria-live to input-stepper__value', async () => {
+    it('increase button should have aria-label with the component label', async () => {
       const el = await fixture(inputStepperWithAttrs);
-      const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
       const incrementButton = el.querySelector('[slot=suffix]');
 
-      incrementButton?.dispatchEvent(new Event('focus'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
-      expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
-
-      incrementButton?.dispatchEvent(new Event('blur'));
-      expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
+      expect(incrementButton?.hasAttribute('aria-label')).to.be.true;
+      expect(incrementButton?.getAttribute('aria-label')).to.equal('Increase Label');
     });
   });
 });

package/components/pagination/src/LionPagination.js

@@ -196,7 +196,8 @@ export class LionPagination extends LocalizeMixin(LitElement) {
     const finish = this.count;
     // If there are more pages then we want to display we have to redo the list each time
     // Else we can just return the same list every time.
-    if (this.count > this.__visiblePages) {
+    // Allow up to 2 extra pages without ellipsis (e.g., count=6 or count=7 when visiblePages=5)
+    if (this.count > this.__visiblePages + 2) {
       // Calculate left side of current page and right side
       const pos3 = this.current - 1;
       const pos4 = this.current;

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

@@ -164,4 +164,45 @@ describe('Pagination', () => {
       expect(buttons[3].getAttribute('aria-current')).to.equal('false');
     });
   });
+
+  describe('Ellipsis display', () => {
+    it('should not show ellipsis when count is visiblePages + 1 (count=6, visiblePages=5)', async () => {
+      const el = await fixture(html` <lion-pagination count="6" current="1"></lion-pagination> `);
+      const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li'));
+      // Check that no ellipsis is rendered (no <span> elements with '...')
+      const spans = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
+      );
+      expect(spans.length).to.equal(0);
+
+      // There should be 8 nav items: previous button + 6 page buttons + next button
+      expect(navItems.length).to.equal(8);
+    });
+
+    it('should not show ellipsis when count is visiblePages + 2 (count=7, visiblePages=5)', async () => {
+      const el = await fixture(html` <lion-pagination count="7" current="1"></lion-pagination> `);
+      // Check that no ellipsis is rendered (no <span> elements with '...')
+      const spans = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
+      );
+      expect(spans.length).to.equal(0);
+
+      // There should be 9 nav items: previous button + 7 page buttons + next button
+      const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li'));
+      expect(navItems.length).to.equal(9);
+    });
+
+    it('should show ellipsis when count is visiblePages + 3 (count=8, visiblePages=5)', async () => {
+      const el = await fixture(html` <lion-pagination count="8" current="1"></lion-pagination> `);
+      // Check that ellipsis is rendered (should have <span> elements with '...')
+      const spans = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
+      );
+      expect(spans.length).to.be.greaterThan(0);
+
+      // Verify the ellipsis contains '...'
+      const ellipsisText = Array.from(spans).map(span => span.textContent);
+      expect(ellipsisText).to.include('...');
+    });
+  });
 });

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

@@ -18,7 +18,7 @@ export default {
     MaxDate: 'Inserire un(a) {fieldName} prima di {params, date, YYYYMMDD}.',
     MinMaxDate:
       'Inserire un(a) {fieldName} tra {params.min, date, YYYYMMDD} e {params.max, date, YYYYMMDD}.',
-    IsDateDisabled: "ТQuesta data non è disponibile, sceglierne un'altra.",
+    IsDateDisabled: "Questa data non è disponibile, sceglierne un'altra.",
     IsEmail: 'Inserire un valore valido per {fieldName} nel formato "name@example.com".',
     MatchesOption:
       'Nessun risultato corrispondente. Provare con una parola chiave o una categoria diversa.',
@@ -41,7 +41,7 @@ export default {
     MaxDate: 'Inserire un(a) {fieldName} prima di {params, date, YYYYMMDD}.',
     MinMaxDate:
       'Inserire un(a) {fieldName} tra {params.min, date, YYYYMMDD} e {params.max, date, YYYYMMDD}.',
-    IsDateDisabled: "ТQuesta data non è disponibile, sceglierne un'altra.",
+    IsDateDisabled: "Questa data non è disponibile, sceglierne un'altra.",
     IsEmail: 'Inserire un valore valido per {fieldName} nel formato "name@example.com".',
     MatchesOption:
       'Nessun risultato corrispondente. Provare con una parola chiave o una categoria diversa.',