@lion/ui 0.15.2 → 0.15.4

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { ref } from 'lit/directives/ref.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { Required } from '@lion/ui/form-core.js';
 import { LionOptions } from '@lion/ui/listbox.js';
@@ -17,6 +18,7 @@ import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getListboxMembers } from '../../../exports/listbox-test-helpers.js';
 import { browserDetection } from '../../core/src/browserDetection.js';
+import { getCachedFixture } from '../../core/test-helpers/getCachedFixture.js';
 
 /**
  * @typedef {import('../src/LionListbox.js').LionListbox} LionListbox
@@ -589,6 +591,55 @@ export function runListboxMixinSuite(customConfig = {}) {
         el.reset();
         expect(el.activeIndex).to.equal(-1);
       });
+
+      it('clears modelValue on clear()', async () => {
+        const el = await fixture(html`
+          <${tag} has-no-default-selected>
+            <${optionTag} .choiceValue=${'10'}>Item 1</${optionTag}>
+            <${optionTag} .choiceValue=${'20'}>Item 2</${optionTag}>
+          </${tag}>
+        `);
+
+        el.setCheckedIndex(0);
+        await el.updateComplete;
+        expect(el.modelValue).to.deep.equal('10');
+
+        el.clear();
+        await el.updateComplete;
+        expect(el.modelValue).to.equal('');
+      });
+
+      it('clears modelValue on clear() when multiple-choice', async () => {
+        const el = await fixture(html`
+          <${tag} has-no-default-selected multiple-choice>
+            <${optionTag} .choiceValue=${'10'}>Item 1</${optionTag}>
+            <${optionTag} .choiceValue=${'20'}>Item 2</${optionTag}>
+          </${tag}>
+        `);
+        el.setCheckedIndex(0);
+        await el.updateComplete;
+        expect(el.modelValue).to.eql(['10']);
+
+        el.clear();
+        expect(el.modelValue).to.eql([]);
+      });
+
+      it('keeps interaction states on clear()', async () => {
+        const el = await fixture(html`
+          <${tag} has-no-default-selected>
+            <${optionTag} .choiceValue=${'10'}>Item 1</${optionTag}>
+            <${optionTag} .choiceValue=${'20'}>Item 2</${optionTag}>
+          </${tag}>
+        `);
+
+        el.setCheckedIndex(0);
+        await el.updateComplete;
+        expect(el.dirty).to.equal(true);
+
+        el.clear();
+        await el.updateComplete;
+        expect(el.dirty).to.equal(true);
+      });
     });
 
     describe('Interactions', () => {
@@ -1547,8 +1598,12 @@ export function runListboxMixinSuite(customConfig = {}) {
         expect(el.querySelector('[role=listbox]')).to.equal(_listboxNode);
 
         expect(el.formElements.length).to.equal(2);
-        expect(_listboxNode.children.length).to.equal(2);
-        expect(_listboxNode.children[0].tagName).to.equal(cfg.optionTagString.toUpperCase());
+        // When we use ScopedStylesController, lisboxNode can have style tag along with options
+        const childrenOtherThanStyle = Array.from(_listboxNode.children).filter(
+          child => child.nodeName !== 'STYLE',
+        );
+        expect(childrenOtherThanStyle.length).to.equal(2);
+        expect(childrenOtherThanStyle[0].tagName).to.equal(cfg.optionTagString.toUpperCase());
       });
     });
 
@@ -1735,6 +1790,20 @@ export function runListboxMixinSuite(customConfig = {}) {
         await el.updateComplete;
         expect(spy).to.have.been.calledTwice;
       });
+
+      it('does not calls "_onListboxContentChanged" during connect and disconnected', async () => {
+        const renderEl = /** @param {import('lit/directives/ref.js').Ref<any>} refObj */ refObj =>
+          html`<${wrappingTag} ${ref(refObj)}></${wrappingTag}>`;
+        const { el, show, hide } = await getCachedFixture(renderEl);
+        const typedEl = /** @type {MyEl} */ (el);
+        await typedEl?.listbox.registrationComplete;
+        // @ts-ignore [allow-protected] in test
+        const spy = sinon.spy(typedEl.listbox, '_onListboxContentChanged');
+        await hide();
+        await show();
+
+        expect(spy).not.to.have.been.called;
+      });
     });
   });
 }

package/components/overlays/src/OverlayController.js

@@ -1081,6 +1081,9 @@ export class OverlayController extends EventTarget {
       case 'hide':
         this.manager.requestToEnableScroll();
         break;
+      case 'teardown':
+        this.manager.requestToEnableScroll(this);
+        break;
       /* no default */
     }
   }

package/components/overlays/src/OverlaysManager.js

@@ -184,8 +184,15 @@ export class OverlaysManager {
     }
   }
 
-  requestToEnableScroll() {
-    const hasOpenSiblingThatPreventsScroll = this.shownList.some(
+  /**
+   * @param {OverlayController} [currentController]
+   */
+  requestToEnableScroll(currentController) {
+    const openedSiblings = currentController
+      ? this.shownList.filter(ctrl => ctrl !== currentController)
+      : this.shownList;
+
+    const hasOpenSiblingThatPreventsScroll = openedSiblings.some(
       ctrl => ctrl.preventsScroll === true,
     );
     if (hasOpenSiblingThatPreventsScroll) {

package/components/overlays/test/OverlayController.test.js

@@ -353,14 +353,17 @@ describe('OverlayController', () => {
             normalizeOverlayContentWapper(ctrl.contentWrapperNode);
 
             // The total dom structure created...
-            expect(el).shadowDom.to.equal(`
+            expect(el).shadowDom.to.equal(
+              `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
                   <slot name="content">
                   </slot>
                 </div>
               </dialog>
-            `);
+            `,
+              { ignoreAttributes: ['closedby'] },
+            );
 
             expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
           });
@@ -380,13 +383,16 @@ describe('OverlayController', () => {
             normalizeOverlayContentWapper(ctrl.contentWrapperNode);
 
             // The total dom structure created...
-            expect(el).lightDom.to.equal(`
+            expect(el).lightDom.to.equal(
+              `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
                   <div id="content">non projected</div>
                 </div>
               </dialog>
-          `);
+          `,
+              { ignoreAttributes: ['closedby'] },
+            );
           });
         });
 
@@ -421,13 +427,16 @@ describe('OverlayController', () => {
             normalizeOverlayContentWapper(ctrl.contentWrapperNode);
 
             // The total dom structure created...
-            expect(el).shadowDom.to.equal(`
+            expect(el).shadowDom.to.equal(
+              `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
                   <slot name="content"></slot>
                 </div>
               </dialog>
-            `);
+            `,
+              { ignoreAttributes: ['closedby'] },
+            );
           });
 
           it("uses the .contentWrapperNode as container for Popper's arrow", async () => {
@@ -464,14 +473,17 @@ describe('OverlayController', () => {
             normalizeOverlayContentWapper(ctrl.contentWrapperNode);
 
             // The total dom structure created...
-            expect(el).shadowDom.to.equal(`
+            expect(el).shadowDom.to.equal(
+              `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
                   <div id="arrow"></div>
                   <slot name="content"></slot>
                 </div>
               </dialog>
-            `);
+            `,
+              { ignoreAttributes: ['closedby'] },
+            );
           });
         });
       });
@@ -540,6 +552,7 @@ describe('OverlayController', () => {
             </div>
           </dialog>
         `,
+          { ignoreAttributes: ['closedby'] },
         );
       });
     });
@@ -800,7 +813,7 @@ describe('OverlayController', () => {
           await mimicEscapePress(childOverlay.contentNode);
 
           // without this line, the test is unstable on FF sometimes
-          await aTimeout(0);
+          await aTimeout(100);
 
           expect(parentOverlay.isShown).to.be.false;
           expect(childOverlay.isShown).to.be.true;

package/components/overlays/test/OverlaysManager.test.js

@@ -163,6 +163,22 @@ describe('OverlaysManager', () => {
           'overlays-scroll-lock-ios-fix',
         );
       });
+      it('remove class "overlays-scroll-lock-ios-fix" after teardown', async () => {
+        mockIOS();
+        const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        await dialog.show();
+
+        await dialog.teardown();
+
+        expect(
+          Array.from(document.body.classList).filter(cls =>
+            ['overlays-scroll-lock', 'overlays-scroll-lock-ios-fix'].includes(cls),
+          ),
+        ).to.be.empty;
+        expect(Array.from(document.documentElement.classList)).to.not.contain(
+          'overlays-scroll-lock-ios-fix',
+        );
+      });
     });
   });
 });

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.',