@lion/ui 0.15.1 → 0.15.3

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -111,6 +111,63 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(el.opened).to.be.false;
     });
 
+    /**
+     * In case OverlayMixin has a handler for Escape which sets `opened` to `false`,
+     * make sure it does not conflict with the Escape handler in OverlayController.
+     * */
+    it('syncs opened between overlayController and OverlayMixin on Escape', async () => {
+      const config = { hidesOnEsc: true };
+      const el = /** @type {OverlayEl} */ (
+        await fixture(html`
+        <${tag} id="main-dialog" .config="${config}">
+          <div slot="content" id="mainContent">
+            open nested overlay:
+            <${tag} id="sub-dialog" .config="${config}">
+              <div slot="content" id="nestedContent">
+                <input id="nestedContentInput">
+              </div>
+              <button slot="invoker" id="nestedInvoker">nested invoker button</button>
+            </${tag}>
+          </div>
+          <button slot="invoker" id="mainInvoker">invoker button</button>
+        </${tag}>
+      `)
+      );
+      await el.updateComplete;
+      const subDialog = /** @type {OverlayEl} */ (el.querySelector('#sub-dialog'));
+      const nestedContentInput = /** @type {OverlayEl} */ (el.querySelector('#nestedContentInput'));
+
+      // Note, OverlayController has Escape key listener added to "#nestedContent".
+      // And the sub-dialog adds the Escape key listener to "#nestedContentInput" which is a child evelement of "#nestedContent"
+      // In this case when "#nestedContentInput" is focused and Escape is pressed, the listener of "#nestedContentInput"
+      // is always called before the listener set for "#nestedContent" inside OverlayController.
+      // This way we check the scenario when OverlayController's `hide()` is called first from
+      // The OverlayMixin and it does not prevent OverlayController `hidesOnEsc` handler from being called
+      nestedContentInput?.addEventListener('keyup', (/** @type {* & KeyboardEvent} */ event) => {
+        if (event.key === 'Escape') {
+          subDialog.opened = false;
+        }
+      });
+
+      el.opened = true;
+      await el.updateComplete;
+      await el._overlayCtrl._showComplete;
+      expect(el.opened).to.be.true;
+      expect(el._overlayCtrl.isShown).to.be.true;
+
+      subDialog.opened = true;
+      await subDialog.updateComplete;
+      await subDialog._overlayCtrl._showComplete;
+      expect(subDialog.opened).to.be.true;
+      expect(subDialog._overlayCtrl.isShown).to.be.true;
+
+      await mimicEscapePress(nestedContentInput);
+      expect(subDialog.opened).to.be.false;
+      expect(subDialog._overlayCtrl.isShown).to.be.false;
+      expect(el.opened).to.be.true;
+      expect(el._overlayCtrl.isShown).to.be.true;
+    });
+
     // TODO: put this tests in OverlayController.test.js instead?
     it('does not change the body size when opened', async () => {
       const parentNode = document.createElement('div');

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

package/custom-elements.json

@@ -100522,6 +100522,11 @@
               },
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "_destroyOutputContent",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_dispatchInitialModelValueChangedEvent",
@@ -101055,19 +101060,6 @@
                 "module": "components/form-core/src/LionField.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "_onEnterButton",
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "privacy": "protected"
-            },
             {
               "kind": "method",
               "name": "_onLabelClick",
@@ -101077,20 +101069,6 @@
                 "module": "components/form-core/src/LionField.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "_onLeaveButton",
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Redispatch leave event on host when catching leave event\non the incrementor and decrementor button.\n\nThis redispatched leave event will be caught by\nInteractionStateMixin to set \"touched\" state to true.\n\nInteracting with the buttons is \"user interactions\"\nthe same way as focusing + blurring the field (native input)",
-              "privacy": "protected"
-            },
             {
               "kind": "method",
               "name": "_onModelValueChanged",
@@ -102120,148 +102098,6 @@
               }
             }
           ],
-          "events": [
-            {
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "model-value-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "user-input-changed",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "focus",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "blur",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "focusin",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "focusout",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "form-element-name-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "form-element-register",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "touched-changed",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "dirty-changed",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "showsFeedbackForChanged",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "shouldShowFeedbackForChanged",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            },
-            {
-              "name": "validate-performed",
-              "type": {
-                "text": "Event"
-              },
-              "description": "private event that should be listened to by LionFieldSet",
-              "inheritedFrom": {
-                "name": "LionField",
-                "module": "components/form-core/src/LionField.js"
-              }
-            }
-          ],
           "attributes": [
             {
               "name": "min",
@@ -102560,7 +102396,149 @@
             "package": "@lion/ui/input.js"
           },
           "tagName": "lion-input-stepper",
-          "customElement": true
+          "customElement": true,
+          "events": [
+            {
+              "name": "model-value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "user-input-changed",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "focus",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "blur",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "focusin",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "focusout",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "form-element-name-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "form-element-register",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "touched-changed",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "dirty-changed",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "showsFeedbackForChanged",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "shouldShowFeedbackForChanged",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            },
+            {
+              "name": "validate-performed",
+              "type": {
+                "text": "Event"
+              },
+              "description": "private event that should be listened to by LionFieldSet",
+              "inheritedFrom": {
+                "name": "LionField",
+                "module": "components/form-core/src/LionField.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -123690,6 +123668,16 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "__escKeyHandlerCalled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The property is used to skip `__escKeyHandler` handler for overlays that have been closed\nby `__escKeyHandlerCalled` previously.\n`__escKeyHandlerCalled` is set to `false` right before overlay show up\n`__escKeyHandlerCalled` is set to `true` when `__escKeyHandler` is called at least one time\nafter each 'show' phase",
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "__eventListeners",

package/dist-types/components/dialog/test/lion-dialog.integration.test.d.ts

@@ -0,0 +1,3 @@
+export type LionDialog = import('../src/LionDialog.js').LionDialog;
+export type TemplateResult = import('lit').TemplateResult;
+//# sourceMappingURL=lion-dialog.integration.test.d.ts.map

package/dist-types/components/dialog/test/lion-dialog.integration.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lion-dialog.integration.test.d.ts","sourceRoot":"","sources":["../../../../components/dialog/test/lion-dialog.integration.test.js"],"names":[],"mappings":"yBAea,OAAO,sBAAsB,EAAE,UAAU;6BACzC,OAAO,KAAK,EAAE,cAAc"}

package/dist-types/components/form-core/test-suites/ValidateMixin.suite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidateMixin.suite.d.ts","sourceRoot":"","sources":["../../../../components/form-core/test-suites/ValidateMixin.suite.js"],"names":[],"mappings":"AAwBA;;GAEG;AAEH;;GAEG;AACH;;;qBAkjDC;wBAxjDY,OAAO,uBAAuB,EAAE,SAAS"}
+{"version":3,"file":"ValidateMixin.suite.d.ts","sourceRoot":"","sources":["../../../../components/form-core/test-suites/ValidateMixin.suite.js"],"names":[],"mappings":"AAwBA;;GAEG;AAEH;;GAEG;AACH;;;qBA8jDC;wBApkDY,OAAO,uBAAuB,EAAE,SAAS"}

package/dist-types/components/input-amount-dropdown/src/localizeNamespaceLoader.d.ts

@@ -1,2 +1,2 @@
-export function localizeNamespaceLoader(locale: string): Promise<typeof import("../translations/en.js")>;
+export function localizeNamespaceLoader(locale: string): Promise<typeof import("../translations/bg.js")>;
 //# sourceMappingURL=localizeNamespaceLoader.d.ts.map

package/dist-types/components/input-amount-dropdown/src/localizeNamespaceLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"localizeNamespaceLoader.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/src/localizeNamespaceLoader.js"],"names":[],"mappings":"AACO,gDAA4C,MAAM,mDAKxD"}
+{"version":3,"file":"localizeNamespaceLoader.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/src/localizeNamespaceLoader.js"],"names":[],"mappings":"AACO,gDAA4C,MAAM,mDA0DxD"}

package/dist-types/components/input-amount-dropdown/translations/bg.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=bg.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/bg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bg.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/bg.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/cs.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=cs.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/cs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/cs.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/de.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=de.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/de.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/de.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/es.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=es.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/es.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/es.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/fr.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=fr.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/fr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/fr.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/hu.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=hu.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/hu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hu.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/hu.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/id.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=id.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/id.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/it.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=it.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/it.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"it.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/it.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/nl.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=nl.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/nl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nl.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/nl.js"],"names":[],"mappings":""}

package/dist-types/components/input-amount-dropdown/translations/pl.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    const allCurrencies: string;
+    const selectCurrency: string;
+    const suggestedCurrencies: string;
+}
+export default _default;
+//# sourceMappingURL=pl.d.ts.map

package/dist-types/components/input-amount-dropdown/translations/pl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pl.d.ts","sourceRoot":"","sources":["../../../../components/input-amount-dropdown/translations/pl.js"],"names":[],"mappings":""}