npm - @siemens/ix - Versions diffs - 2.6.0 → 2.7.0 - Mend

@siemens/ix 2.6.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1228) hide show

package/dist/collection/components/modal/test/modal.ct.js CHANGED Viewed

@@ -8,26 +8,47 @@
  */
 import { expect } from "@playwright/test";
 import { test } from "../../../tests/utils/test/index";
-test('closes on Escape key down', async ({ mount, page }) => {
-    await mount(``);
+async function setupModalEnvironment(page) {
     await page.evaluate(() => {
         return new Promise((resolve) => {
+            var _a;
             const script = document.createElement('script');
             script.type = 'module';
             script.innerHTML = `
         import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
         window.showModal = ix.showModal;
+        window.dismissModal = ix.dismissModal;
       `;
-            document.body.appendChild(script);
+            (_a = document.getElementById('mount')) === null || _a === void 0 ? void 0 : _a.appendChild(script);
             resolve();
         });
     });
+}
+async function createToggleExample(page) {
+    await page.evaluate(() => {
+        function createModalExample() {
+            const el = document.createElement('DIV');
+            el.style.display = 'contents';
+            el.innerHTML = `<ix-toggle id="toggle"></ix-toggle>`;
+            return el;
+        }
+        setTimeout(() => {
+            window.showModal({
+                content: createModalExample(),
+                closeOnBackdropClick: true,
+            });
+        }, 2000);
+    });
+}
+test('closes on Escape key down', async ({ mount, page }) => {
+    await mount(``);
+    await setupModalEnvironment(page);
     await page.waitForTimeout(1000);
     await page.evaluate(() => {
         const elm = document.createElement('ix-modal');
         elm.innerHTML = `
       <ix-modal-header>Title</ix-modal-header>
-      <ix-modal-content>Content</ix-modal-header>
+      <ix-modal-content>Content</ix-modal-content>
     `;
         window.showModal({
             content: elm,
@@ -44,30 +65,8 @@ test.describe('closeOnBackdropClick = true', () => {
         await mount(`
       <ix-button>Some background noise</ix-button>
     `);
-        await page.evaluate(() => {
-            return new Promise((resolve) => {
-                const script = document.createElement('script');
-                script.type = 'module';
-                script.innerHTML = `
-          import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
-          window.showModal = ix.showModal;
-        `;
-                document.getElementById('mount').appendChild(script);
-                function createModalExample() {
-                    const el = document.createElement('DIV');
-                    el.style.display = 'contents';
-                    el.innerHTML = `<ix-toggle id="toggle"></ix-toggle>`;
-                    return el;
-                }
-                setTimeout(() => {
-                    window.showModal({
-                        content: createModalExample(),
-                        closeOnBackdropClick: true,
-                    });
-                    resolve();
-                }, 2000);
-            });
-        });
+        await setupModalEnvironment(page);
+        await createToggleExample(page);
         // needed to skip fade out / in animation
         await page.waitForTimeout(500);
         const toggle = page.locator('#toggle');
@@ -81,30 +80,8 @@ test.describe('closeOnBackdropClick = true', () => {
         await mount(`
       <ix-button>Some background noise</ix-button>
     `);
-        await page.evaluate(() => {
-            return new Promise((resolve) => {
-                const script = document.createElement('script');
-                script.type = 'module';
-                script.innerHTML = `
-          import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
-          window.showModal = ix.showModal;
-        `;
-                document.getElementById('mount').appendChild(script);
-                function createModalExample() {
-                    const el = document.createElement('DIV');
-                    el.style.display = 'contents';
-                    el.innerHTML = `<ix-toggle id="toggle"></ix-toggle>`;
-                    return el;
-                }
-                setTimeout(() => {
-                    window.showModal({
-                        content: createModalExample(),
-                        closeOnBackdropClick: true,
-                    });
-                    resolve();
-                }, 2000);
-            });
-        });
+        await setupModalEnvironment(page);
+        await createToggleExample(page);
         // needed to skip fade out / in animation
         await page.waitForTimeout(500);
         const toggle = page.locator('#toggle');
@@ -117,24 +94,13 @@ test.describe('closeOnBackdropClick = true', () => {
 });
 test('emits one event on close', async ({ mount, page }) => {
     await mount(``);
-    await page.evaluate(() => {
-        return new Promise((resolve) => {
-            const script = document.createElement('script');
-            script.type = 'module';
-            script.innerHTML = `
-        import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
-        window.showModal = ix.showModal;
-      `;
-            document.body.appendChild(script);
-            resolve();
-        });
-    });
+    await setupModalEnvironment(page);
     await page.waitForTimeout(1000);
     await page.evaluate(() => {
         const elm = document.createElement('ix-modal');
         elm.innerHTML = `
       <ix-modal-header>Title</ix-modal-header>
-      <ix-modal-content>Content</ix-modal-header>
+      <ix-modal-content>Content</ix-modal-content>
     `;
         window
             .showModal({
@@ -161,4 +127,30 @@ test('emits one event on close', async ({ mount, page }) => {
     await expect(dialog).not.toBeVisible();
     expect(await page.evaluate(() => window.__counter)).toBe(1);
 });
+test('button receives focus on load', async ({ mount, page }) => {
+    await mount('');
+    await setupModalEnvironment(page);
+    await page.waitForTimeout(100);
+    await page.evaluate(() => {
+        const elm = document.createElement('ix-modal');
+        elm.innerHTML = `
+      <ix-modal-header>Title</ix-modal-header>
+      <ix-modal-footer>
+        <ix-button autofocus>OK</ix-button>
+      </ix-modal-footer>
+    `;
+        window.showModal({
+            content: elm,
+        });
+        const okButton = elm.querySelector('ix-button');
+        okButton === null || okButton === void 0 ? void 0 : okButton.addEventListener('click', () => {
+            window.dismissModal(elm);
+        });
+    });
+    await page.waitForTimeout(250);
+    const dialog = page.locator('ix-modal dialog');
+    await expect(dialog).toBeVisible();
+    await page.keyboard.press('Enter');
+    await expect(dialog).not.toBeVisible();
+});
 //# sourceMappingURL=modal.ct.js.map

package/dist/collection/components/modal/test/modal.ct.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.ct.js","sourceRoot":"","sources":["../../../../src/components/modal/test/modal.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\nimport { ModalInstance, showModal } from './../../utils/modal';\n\ndeclare global {\n interface Window {\n showModal: typeof showModal;\n __counter: number;\n }\n}\n\ntest('closes on Escape key down', async ({ mount, page }) => {\n await mount(``);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n document.body.appendChild(script);\n resolve();\n });\n });\n\n await page.waitForTimeout(1000);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-content>Content</ix-modal-header>\n `;\n window.showModal({\n content: elm,\n });\n });\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n await page.locator('ix-modal-content').click();\n await page.keyboard.down('Escape');\n\n await expect(dialog).not.toBeVisible();\n});\n\ntest.describe('closeOnBackdropClick = true', () => {\n test('should close modal on backdrop click', async ({ mount, page }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n\n document.getElementById('mount').appendChild(script);\n\n function createModalExample() {\n const el = document.createElement('DIV');\n el.style.display = 'contents';\n el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n return el;\n }\n\n setTimeout(() => {\n window.showModal({\n content: createModalExample(),\n closeOnBackdropClick: true,\n });\n\n resolve();\n }, 2000);\n });\n });\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await page.mouse.click(20, 20);\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).not.toBeVisible();\n });\n\n test('should stay open after interacting with input elements', async ({\n mount,\n page,\n }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n\n document.getElementById('mount').appendChild(script);\n\n function createModalExample() {\n const el = document.createElement('DIV');\n el.style.display = 'contents';\n el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n return el;\n }\n\n setTimeout(() => {\n window.showModal({\n content: createModalExample(),\n closeOnBackdropClick: true,\n });\n\n resolve();\n }, 2000);\n });\n });\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await toggle.locator('input').press('Space');\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).toBeVisible();\n });\n});\n\ntest('emits one event on close', async ({ mount, page }) => {\n await mount(``);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n document.body.appendChild(script);\n resolve();\n });\n });\n\n await page.waitForTimeout(1000);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-content>Content</ix-modal-header>\n `;\n\n window\n .showModal({\n content: elm,\n // Disable animation to get the direct animation end callback\n animation: false,\n })\n .then((instance: ModalInstance<unknown>) => {\n instance.onDismiss.on(() => {\n const counter = window.__counter;\n if (counter) {\n window.__counter = counter + 1;\n } else {\n window.__counter = 1;\n }\n });\n });\n });\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n const iconButton = page.locator('ix-icon-button');\n\n await iconButton.click();\n await expect(dialog).not.toBeVisible();\n\n expect(await page.evaluate(() => window.__counter)).toBe(1);\n});\n"]}
1	+ {"version":3,"file":"modal.ct.js","sourceRoot":"","sources":["../../../../src/components/modal/test/modal.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport { expect, Page } from '@playwright/test';\nimport { test } from '@utils/test';\nimport { dismissModal, ModalInstance, showModal } from './../../utils/modal';\n\ndeclare global {\n interface Window {\n dismissModal: typeof dismissModal;\n showModal: typeof showModal;\n __counter: number;\n }\n}\n\nasync function setupModalEnvironment(page: Page) {\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n window.dismissModal = ix.dismissModal;\n `;\n document.getElementById('mount')?.appendChild(script);\n resolve();\n });\n });\n}\n\nasync function createToggleExample(page: Page) {\n await page.evaluate(() => {\n function createModalExample() {\n const el = document.createElement('DIV');\n el.style.display = 'contents';\n el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n return el;\n }\n\n setTimeout(() => {\n window.showModal({\n content: createModalExample(),\n closeOnBackdropClick: true,\n });\n }, 2000);\n });\n}\n\ntest('closes on Escape key down', async ({ mount, page }) => {\n await mount(``);\n await setupModalEnvironment(page);\n await page.waitForTimeout(1000);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-content>Content</ix-modal-content>\n `;\n window.showModal({\n content: elm,\n });\n });\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n await page.locator('ix-modal-content').click();\n await page.keyboard.down('Escape');\n\n await expect(dialog).not.toBeVisible();\n});\n\ntest.describe('closeOnBackdropClick = true', () => {\n test('should close modal on backdrop click', async ({ mount, page }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await setupModalEnvironment(page);\n await createToggleExample(page);\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await page.mouse.click(20, 20);\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).not.toBeVisible();\n });\n\n test('should stay open after interacting with input elements', async ({\n mount,\n page,\n }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await setupModalEnvironment(page);\n await createToggleExample(page);\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await toggle.locator('input').press('Space');\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).toBeVisible();\n });\n});\n\ntest('emits one event on close', async ({ mount, page }) => {\n await mount(``);\n\n await setupModalEnvironment(page);\n await page.waitForTimeout(1000);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-content>Content</ix-modal-content>\n `;\n\n window\n .showModal({\n content: elm,\n // Disable animation to get the direct animation end callback\n animation: false,\n })\n .then((instance: ModalInstance<unknown>) => {\n instance.onDismiss.on(() => {\n const counter = window.__counter;\n if (counter) {\n window.__counter = counter + 1;\n } else {\n window.__counter = 1;\n }\n });\n });\n });\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n const iconButton = page.locator('ix-icon-button');\n\n await iconButton.click();\n await expect(dialog).not.toBeVisible();\n\n expect(await page.evaluate(() => window.__counter)).toBe(1);\n});\n\ntest('button receives focus on load', async ({ mount, page }) => {\n await mount('');\n await setupModalEnvironment(page);\n await page.waitForTimeout(100);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-footer>\n <ix-button autofocus>OK</ix-button>\n </ix-modal-footer>\n `;\n window.showModal({\n content: elm,\n });\n const okButton = elm.querySelector('ix-button');\n okButton?.addEventListener('click', () => {\n window.dismissModal(elm);\n });\n });\n\n await page.waitForTimeout(250);\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n\n await page.keyboard.press('Enter');\n\n await expect(dialog).not.toBeVisible();\n});\n"]}

package/dist/collection/components/modal-content/modal-content.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalContent {
     render() {
-        return (h(Host, { key: 'a9138b068e31e29e69d65a77ff670504fc80b99f' }, h("slot", { key: '3b97af0889d2b483ad0d3b9a37da195a5aba331a' })));
+        return (h(Host, { key: '84ebcbda08133eb94f2f5b60abb2b2b7bb5ab37a' }, h("slot", { key: '6c1fd9c108911fd724794555d9a0d47d951384c2' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-footer/modal-footer.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalFooter {
     render() {
-        return (h(Host, { key: 'c7f4f83eb9a081dca29aa1a69da40e54b9e63e56' }, h("slot", { key: '52059c4ca121a42916a378170f253ddd3155b4a2' })));
+        return (h(Host, { key: '30110febb8ef3da803f1772f079ac6e63de7043e' }, h("slot", { key: 'cff6b701cc25f408ded8b4b8b608f1de457e2b78' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-header/modal-header.js CHANGED Viewed

@@ -39,7 +39,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: 'eac3267570af0578a96e5d3f229c739e22b8f71e' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32" })) : null, h("div", { key: '824929ed3b5362eaf28084d84ae87a9837f44d57', class: "modal-title" }, h("ix-typography", { key: '97bd809f9ffd90d8d87bc6ee46c488892ae950b5', format: "h5" }, h("slot", { key: '52b95892d06e0247096362dc40e1afd296392170' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close" })) : null));
+        return (h(Host, { key: 'a1f7e00b9cd9f848fca485129d59ebfabecaee76' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32" })) : null, h("div", { key: '35e8529a8b4f5a7c934210a2ec7b86af9d4b5adc', class: "modal-title" }, h("ix-typography", { key: '624ca4d302a98fb86dda4356fd8e9936eadb4e5b', format: "h5" }, h("slot", { key: '8145c7dbcfafe35d9bd715aaaf671f579f298449' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close" })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +78,7 @@ export class ModalHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -95,7 +95,7 @@ export class ModalHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/modal-loading/modal-loading.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: 'bd68fba4e137831616045834723051c7a701a648' }, h("ix-spinner", { key: '4b2f2edc6fc6de13509479e3c2b6ebbb4b865e33', variant: "primary" }), h("span", { key: '0850ea7975ceb050d1391a5276e72c5111fd341d', class: 'loading-text' }, h("slot", { key: '7270d475269a996757077815c29ac00a26af56f9' }))));
+        return (h(Host, { key: '5539772ef91bc76d8f291f1b17cde3f6dded3819' }, h("ix-spinner", { key: 'd474cae29a140aeedba4ab43f1a59c1971fcb005', variant: "primary" }), h("span", { key: 'de639907ba000458876827978526b7e992cf6a28', class: 'loading-text' }, h("slot", { key: 'a5dd114932a5cec6afbd42dbdc4d81827f46121d' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class Pagination {
         this.advanced = false;
         this.itemCount = 15;
         this.showItemCount = true;
-        this.count = undefined;
+        this.count = 0;
         this.selectedPage = 0;
         this.i18nPage = 'Page';
         this.i18nOf = 'of';
@@ -124,10 +124,13 @@ export class Pagination {
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: '26c89fb826fd57be72c1dad05750c8ea5b3e740b' }, h("ix-icon-button", { key: '9d9a40a6064232632a35b27716e392d9cd9ba790', disabled: !this.count || this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
-                const index = Number.parseInt(e.target['value']);
-                this.selectPage(index - 1);
-            } }), h("span", { class: "total-count" }, h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'f07f5031a9a4638f03a1fc880950ed357533e06a', disabled: !this.count || this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { format: "body" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+        return (h(Host, { key: '8f28dce6f49cf4b71ac337d5b721b6a10091999a' }, h("ix-icon-button", { key: '838b447430b77ba147efe3721340a2a425f31f2c', disabled: !this.count || this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
+                const eventTarget = event.target;
+                if (eventTarget) {
+                    const index = Number.parseInt(eventTarget.value);
+                    this.selectPage(index - 1);
+                }
+            } }), h("span", { class: "total-count" }, h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'efcf14835418f853d90ba459372253ab213bf48d', disabled: !this.count || this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { format: "body" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
@@ -215,7 +218,8 @@ export class Pagination {
                     "text": "Total number of pages"
                 },
                 "attribute": "count",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "0"
             },
             "selectedPage": {
                 "type": "number",

package/dist/collection/components/pagination/pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2022 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 1.5.0\n /\n@Component({\n tag: 'ix-pagination',\n styleUrl: 'pagination.scss',\n shadow: true,\n})\nexport class Pagination {\n private readonly baseButtonConfig: BaseButtonProps = {\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n disabled: false,\n icon: '',\n loading: false,\n selected: false,\n type: 'button',\n extraClasses: {\n ['w-auto']: true,\n },\n };\n\n private readonly maxCountPages = 7;\n\n @Element() hostElement!: HTMLIxPaginationElement;\n\n /\n Advanced mode\n /\n @Prop() advanced = false;\n\n /\n Number of items shown at once.\n * Can only be changed in advaced mode.\n /\n @Prop() itemCount = 15;\n\n /\n Show item count in advanced mode\n /\n @Prop() showItemCount = true;\n\n /\n Total number of pages\n /\n @Prop() count: number;\n\n /\n Zero based index of currently selected page\n /\n @Prop({ mutable: true }) selectedPage = 0;\n\n /\n i18n\n /\n @Prop() i18nPage = 'Page';\n\n /\n i18n\n /\n @Prop() i18nOf = 'of';\n\n /\n /\n i18n\n /\n @Prop() i18nItems = 'Items';\n\n /\n Page selection event\n /\n @Event() pageSelected!: EventEmitter<number>;\n\n /\n Item count change event\n /\n @Event() itemCountChanged!: EventEmitter<number>;\n\n private selectPage(index: number) {\n if (index < 0) {\n this.selectedPage = 0;\n } else if (index > this.count - 1) {\n this.selectedPage = this.count - 1;\n } else {\n this.selectedPage = index;\n }\n\n this.pageSelected.emit(this.selectedPage);\n }\n\n private increase() {\n if (this.selectedPage === this.count - 1) {\n return;\n }\n\n this.selectPage(this.selectedPage + 1);\n }\n\n private decrease() {\n if (this.selectedPage === 0) {\n return;\n }\n\n this.selectPage(this.selectedPage - 1);\n }\n\n private getPageButton(index: number) {\n const baseButtonProps: BaseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => this.selectPage(index),\n selected: this.selectedPage === index,\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.selectedPage === index),\n },\n };\n\n return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n }\n\n private renderPageButtons() {\n const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n const hasOverflow = this.count > this.maxCountPages;\n const hasOverflowStart =\n hasOverflow && this.selectedPage > pagesBeforeOverflow;\n const hasOverflowEnd =\n hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n const pageButtons = [];\n\n let start = 0;\n let end = Math.min(this.count, this.maxCountPages);\n let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n if (hasOverflowStart) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowEnd) {\n this.selectPage(this.selectedPage - Math.max(0, 2 pageCount + 1));\n } else {\n this.selectPage(this.count - this.maxCountPages);\n }\n },\n };\n pageButtons.push(this.getPageButton(0));\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n if (hasOverflowEnd) {\n start = this.count - this.maxCountPages + 2;\n } else {\n start = this.count - this.maxCountPages + 2;\n end = this.count;\n }\n }\n\n if (hasOverflowEnd) {\n if (hasOverflowStart) {\n start = this.selectedPage - pageCount;\n end = this.selectedPage + pageCount + 1;\n } else {\n end = this.maxCountPages - 2;\n }\n }\n\n for (let i = start; i < end; i++) {\n pageButtons.push(this.getPageButton(i));\n }\n\n if (hasOverflowEnd) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowStart) {\n this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n } else {\n this.selectPage(this.maxCountPages - 1);\n }\n },\n };\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n pageButtons.push(this.getPageButton(this.count - 1));\n }\n\n return <span class=\"page-buttons\">{pageButtons}</span>;\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === 0}\n ghost\n icon={'chevron-left-small'}\n onClick={() => this.decrease()}\n ></ix-icon-button>\n\n {this.advanced ? (\n <div class=\"advanced-pagination\">\n <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n <input\n class=\"form-control page-selection\"\n type=\"number\"\n min=\"1\"\n max={this.count}\n value={this.selectedPage + 1}\n onChange={(e) => {\n const index = Number.parseInt(e.target['value']);\n this.selectPage(index - 1);\n }}\n />\n <span class=\"total-count\">\n <ix-typography format=\"body\">\n {this.i18nOf} {this.count}\n </ix-typography>\n </span>\n </div>\n ) : (\n <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n )}\n\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === this.count - 1}\n ghost\n icon={'chevron-right-small'}\n onClick={() => this.increase()}\n ></ix-icon-button>\n\n {this.advanced && this.showItemCount ? (\n <span class=\"item-count\">\n <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n <ix-select\n hideListHeader\n i18nPlaceholder=\"\"\n i18nSelectListHeader=\"\"\n value={`${this.itemCount}`}\n onValueChange={(e) => {\n const count = Number.parseInt(\n Array.isArray(e.detail) ? e.detail[0] : e.detail\n );\n\n this.itemCountChanged.emit(count);\n }}\n >\n <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n </ix-select>\n </span>\n ) : (\n ''\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2022 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 1.5.0\n /\n@Component({\n tag: 'ix-pagination',\n styleUrl: 'pagination.scss',\n shadow: true,\n})\nexport class Pagination {\n private readonly baseButtonConfig: BaseButtonProps = {\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n disabled: false,\n icon: '',\n loading: false,\n selected: false,\n type: 'button',\n extraClasses: {\n ['w-auto']: true,\n },\n };\n\n private readonly maxCountPages = 7;\n\n @Element() hostElement!: HTMLIxPaginationElement;\n\n /\n Advanced mode\n /\n @Prop() advanced = false;\n\n /\n Number of items shown at once.\n * Can only be changed in advaced mode.\n /\n @Prop() itemCount = 15;\n\n /\n Show item count in advanced mode\n /\n @Prop() showItemCount = true;\n\n /\n Total number of pages\n /\n @Prop() count: number = 0;\n\n /\n Zero based index of currently selected page\n /\n @Prop({ mutable: true }) selectedPage = 0;\n\n /\n i18n\n /\n @Prop() i18nPage = 'Page';\n\n /\n i18n\n /\n @Prop() i18nOf = 'of';\n\n /\n /\n i18n\n /\n @Prop() i18nItems = 'Items';\n\n /\n Page selection event\n /\n @Event() pageSelected!: EventEmitter<number>;\n\n /\n Item count change event\n /\n @Event() itemCountChanged!: EventEmitter<number>;\n\n private selectPage(index: number) {\n if (index < 0) {\n this.selectedPage = 0;\n } else if (index > this.count - 1) {\n this.selectedPage = this.count - 1;\n } else {\n this.selectedPage = index;\n }\n\n this.pageSelected.emit(this.selectedPage);\n }\n\n private increase() {\n if (this.selectedPage === this.count - 1) {\n return;\n }\n\n this.selectPage(this.selectedPage + 1);\n }\n\n private decrease() {\n if (this.selectedPage === 0) {\n return;\n }\n\n this.selectPage(this.selectedPage - 1);\n }\n\n private getPageButton(index: number) {\n const baseButtonProps: BaseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => this.selectPage(index),\n selected: this.selectedPage === index,\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.selectedPage === index),\n },\n };\n\n return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n }\n\n private renderPageButtons() {\n const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n const hasOverflow = this.count > this.maxCountPages;\n const hasOverflowStart =\n hasOverflow && this.selectedPage > pagesBeforeOverflow;\n const hasOverflowEnd =\n hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n const pageButtons = [];\n\n let start = 0;\n let end = Math.min(this.count, this.maxCountPages);\n let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n if (hasOverflowStart) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowEnd) {\n this.selectPage(this.selectedPage - Math.max(0, 2 pageCount + 1));\n } else {\n this.selectPage(this.count - this.maxCountPages);\n }\n },\n };\n pageButtons.push(this.getPageButton(0));\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n if (hasOverflowEnd) {\n start = this.count - this.maxCountPages + 2;\n } else {\n start = this.count - this.maxCountPages + 2;\n end = this.count;\n }\n }\n\n if (hasOverflowEnd) {\n if (hasOverflowStart) {\n start = this.selectedPage - pageCount;\n end = this.selectedPage + pageCount + 1;\n } else {\n end = this.maxCountPages - 2;\n }\n }\n\n for (let i = start; i < end; i++) {\n pageButtons.push(this.getPageButton(i));\n }\n\n if (hasOverflowEnd) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowStart) {\n this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n } else {\n this.selectPage(this.maxCountPages - 1);\n }\n },\n };\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n pageButtons.push(this.getPageButton(this.count - 1));\n }\n\n return <span class=\"page-buttons\">{pageButtons}</span>;\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === 0}\n ghost\n icon={'chevron-left-small'}\n onClick={() => this.decrease()}\n ></ix-icon-button>\n\n {this.advanced ? (\n <div class=\"advanced-pagination\">\n <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n <input\n class=\"form-control page-selection\"\n type=\"number\"\n min=\"1\"\n max={this.count}\n value={this.selectedPage + 1}\n onChange={(event: Event) => {\n const eventTarget = event.target as HTMLInputElement;\n if (eventTarget) {\n const index = Number.parseInt(eventTarget.value);\n this.selectPage(index - 1);\n }\n }}\n />\n <span class=\"total-count\">\n <ix-typography format=\"body\">\n {this.i18nOf} {this.count}\n </ix-typography>\n </span>\n </div>\n ) : (\n <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n )}\n\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === this.count - 1}\n ghost\n icon={'chevron-right-small'}\n onClick={() => this.increase()}\n ></ix-icon-button>\n\n {this.advanced && this.showItemCount ? (\n <span class=\"item-count\">\n <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n <ix-select\n hideListHeader\n i18nPlaceholder=\"\"\n i18nSelectListHeader=\"\"\n value={`${this.itemCount}`}\n onValueChange={(e) => {\n const count = Number.parseInt(\n Array.isArray(e.detail) ? e.detail[0] : e.detail\n );\n\n this.itemCountChanged.emit(count);\n }}\n >\n <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n </ix-select>\n </span>\n ) : (\n ''\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pagination/test/pagination.ct.js CHANGED Viewed

@@ -42,7 +42,7 @@ test('should dispatch items count change', async ({ mount, page }) => {
     const pagination = page.locator('ix-pagination');
     const itemChanged = pagination.evaluate((elm) => {
         return new Promise((resolve) => {
-            elm.addEventListener('itemCountChanged', (e) => resolve(e.detail));
+            elm.addEventListener('itemCountChanged', (event) => resolve(event.detail));
         });
     });
     await pagination.getByRole('button').nth(-1).click();

package/dist/collection/components/pagination/test/pagination.ct.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.ct.js","sourceRoot":"","sources":["../../../../src/components/pagination/test/pagination.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAE9C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAExD,MAAM,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAElD,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhD,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;AACvC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oCAAoC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACnE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE;QAC9C,OAAO,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;YACrC,GAAG,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,~~CAAc~~,EAAE,EAAE,~~CAC1D~~,OAAO,~~CAAC~~,~~CAAC~~,CAAC,MAAM,CAAC,~~CAClB~~,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAErD,MAAM,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAC5D,MAAM,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAElE,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACjD,MAAM,CAAC,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,CAAC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`\n <ix-pagination>\n </ix-pagination>\n `);\n const element = page.locator('ix-pagination');\n\n await expect(element).toHaveClass(/hydrated/);\n});\n\ntest('advanced', async ({ mount, page }) => {\n await mount(`\n <ix-pagination advanced>\n </ix-pagination>\n `);\n const element = page.locator('ix-pagination[advanced]');\n\n await expect(element).toHaveClass(/hydrated/);\n});\n\ntest('open show number of page dropdown', async ({ mount, page }) => {\n await mount(`\n <ix-pagination advanced>\n </ix-pagination>\n `);\n const element = page.locator('ix-pagination[advanced]');\n\n await element.getByRole('button').nth(-1).click();\n\n const dropdown = element.locator('ix-dropdown');\n\n await expect(dropdown).toBeVisible();\n});\n\ntest('should dispatch items count change', async ({ mount, page }) => {\n await mount(`\n <ix-pagination advanced>\n </ix-pagination>\n `);\n const pagination = page.locator('ix-pagination');\n\n const itemChanged = pagination.evaluate((elm) => {\n return new Promise<number>((resolve) => {\n elm.addEventListener('itemCountChanged', (~~e: CustomEvent~~) =>\n resolve(e.detail)\n );\n });\n });\n\n await pagination.getByRole('button').nth(-1).click();\n\n await pagination.locator('ix-dropdown-item').nth(3).click();\n await expect(pagination.locator('ix-dropdown')).not.toBeVisible();\n\n await expect(pagination).toHaveClass(/hydrated/);\n expect(await itemChanged).toBe(40);\n});\n"]}
1	+ {"version":3,"file":"pagination.ct.js","sourceRoot":"","sources":["../../../../src/components/pagination/test/pagination.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAE9C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAExD,MAAM,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAElD,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhD,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;AACvC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oCAAoC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACnE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE;QAC9C,OAAO,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;YACrC,GAAG,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,KAAK,EAAE,EAAE,CACjD,OAAO,CAAE,KAA6B,CAAC,MAAM,CAAC,CAC/C,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAErD,MAAM,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAC5D,MAAM,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAElE,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACjD,MAAM,CAAC,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,CAAC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`\n <ix-pagination>\n </ix-pagination>\n `);\n const element = page.locator('ix-pagination');\n\n await expect(element).toHaveClass(/hydrated/);\n});\n\ntest('advanced', async ({ mount, page }) => {\n await mount(`\n <ix-pagination advanced>\n </ix-pagination>\n `);\n const element = page.locator('ix-pagination[advanced]');\n\n await expect(element).toHaveClass(/hydrated/);\n});\n\ntest('open show number of page dropdown', async ({ mount, page }) => {\n await mount(`\n <ix-pagination advanced>\n </ix-pagination>\n `);\n const element = page.locator('ix-pagination[advanced]');\n\n await element.getByRole('button').nth(-1).click();\n\n const dropdown = element.locator('ix-dropdown');\n\n await expect(dropdown).toBeVisible();\n});\n\ntest('should dispatch items count change', async ({ mount, page }) => {\n await mount(`\n <ix-pagination advanced>\n </ix-pagination>\n `);\n const pagination = page.locator('ix-pagination');\n\n const itemChanged = pagination.evaluate((elm) => {\n return new Promise<number>((resolve) => {\n elm.addEventListener('itemCountChanged', (event) =>\n resolve((event as CustomEvent<number>).detail)\n );\n });\n });\n\n await pagination.getByRole('button').nth(-1).click();\n\n await pagination.locator('ix-dropdown-item').nth(3).click();\n await expect(pagination.locator('ix-dropdown')).not.toBeVisible();\n\n await expect(pagination).toHaveClass(/hydrated/);\n expect(await itemChanged).toBe(40);\n});\n"]}

package/dist/collection/components/pagination/test/pagination.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.spec.js","sourceRoot":"","sources":["../../../../src/components/pagination/test/pagination.spec.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,4CAA4C;SACnD,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,~~CAAC~~,CAAC;~~QAC3D~~,MAAM,MAAM,GAAG,UAAU,CAAC,~~UAAU~~,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;~~QACnE~~,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,~~CAAC~~,CAAC;~~QAC3D~~,MAAM,MAAM,GAAG,UAAU,CAAC,~~UAAU~~,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;~~QACnE~~,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,~~CAAC~~,CAAC;~~QAC3D~~,MAAM,MAAM,GAAG,UAAU,CAAC,~~UAAU~~,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;~~QACnE~~,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,~~CAAC~~,CAAC;~~QAC3D~~,MAAM,MAAM,GAAG,UAAU,CAAC,~~UAAU~~,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;~~QACnE~~,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2022 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { Pagination } from '../pagination';\n\ndescribe('ix-pagination', () => {\n it('overflow end select higher page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination');\n const button = pagination.shadowRoot.querySelectorAll('button')[5];\n button.click();\n expect(pagination.selectedPage).toBe(6);\n });\n\n it('overflow both select higher page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\" selected-page=\"4\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination');\n const button = pagination.shadowRoot.querySelectorAll('button')[6];\n button.click();\n expect(pagination.selectedPage).toBe(9);\n });\n\n it('overflow both select lower page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\" selected-page=\"5\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination');\n const button = pagination.shadowRoot.querySelectorAll('button')[1];\n button.click();\n expect(pagination.selectedPage).toBe(2);\n });\n\n it('overflow start select lower page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\" selected-page=\"9\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination');\n const button = pagination.shadowRoot.querySelectorAll('button')[1];\n button.click();\n expect(pagination.selectedPage).toBe(3);\n });\n});\n"]}
1	+ {"version":3,"file":"pagination.spec.js","sourceRoot":"","sources":["../../../../src/components/pagination/test/pagination.spec.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,4CAA4C;SACnD,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;QAC5D,MAAM,MAAM,GAAG,UAAU,CAAC,UAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;QAC5D,MAAM,MAAM,GAAG,UAAU,CAAC,UAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;QAC5D,MAAM,MAAM,GAAG,UAAU,CAAC,UAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;QAC5D,MAAM,MAAM,GAAG,UAAU,CAAC,UAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2022 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { Pagination } from '../pagination';\n\ndescribe('ix-pagination', () => {\n it('overflow end select higher page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination')!;\n const button = pagination.shadowRoot!.querySelectorAll('button')[5];\n button.click();\n expect(pagination.selectedPage).toBe(6);\n });\n\n it('overflow both select higher page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\" selected-page=\"4\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination')!;\n const button = pagination.shadowRoot!.querySelectorAll('button')[6];\n button.click();\n expect(pagination.selectedPage).toBe(9);\n });\n\n it('overflow both select lower page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\" selected-page=\"5\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination')!;\n const button = pagination.shadowRoot!.querySelectorAll('button')[1];\n button.click();\n expect(pagination.selectedPage).toBe(2);\n });\n\n it('overflow start select lower page', async () => {\n const page = await newSpecPage({\n components: [Pagination],\n html: `<ix-pagination count=\"10\" selected-page=\"9\"></ix-pagination>`,\n });\n const pagination = page.doc.querySelector('ix-pagination')!;\n const button = pagination.shadowRoot!.querySelectorAll('button')[1];\n button.click();\n expect(pagination.selectedPage).toBe(3);\n });\n});\n"]}

package/dist/collection/components/pane/pane.js CHANGED Viewed

@@ -475,7 +475,7 @@ export class Pane {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -606,7 +606,7 @@ export class Pane {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/pane-layout/pane-layout.js CHANGED Viewed

@@ -230,7 +230,7 @@ export class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '5ba8d72c60ff8d3d7cfd51b6dbe6e9e1f3e759ac' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: '0782cd76dbf14624b4d84b83251f6f65abad343e' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/dist/collection/components/pill/pill.css CHANGED Viewed

@@ -280,7 +280,20 @@
 :host .container {
   height: 100%;
   justify-content: center;
-  padding-right: 0.5rem !important;
+}
+:host .container .with-icon {
+  margin-right: 0;
+}
+:host .container.outline.icon {
+  padding-left: 0.4375rem;
+  padding-right: 0.4375rem;
+}
+:host .container:not(.outline).icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+:host .with-gap {
+  gap: 0.25rem;
 }
 :host(.align-left) .container {

package/dist/collection/components/pill/pill.js CHANGED Viewed

@@ -16,6 +16,15 @@ export class Pill {
         this.color = undefined;
         this.pillColor = undefined;
         this.alignLeft = false;
+        this.iconOnly = false;
+    }
+    componentWillLoad() {
+        this.checkIfContentAvailable();
+    }
+    checkIfContentAvailable() {
+        const hasChildren = this.hostElement.children.length > 0;
+        const hasTextContent = !!this.hostElement.textContent;
+        this.iconOnly = !hasChildren && !hasTextContent;
     }
     render() {
         var _a, _b;
@@ -26,13 +35,13 @@ export class Pill {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '1bbd11e090e378d36040a08ca0f6acc01bdfc2f7', style: this.variant === 'custom'
+        return (h(Host, { key: 'cf932b24a24c809c20ea8bc85cc71c6b2202c975', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {}, title: this.el.textContent, class: {
+                : {}, title: this.hostElement.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '185e005a8842833cfe55a19ec1c06dc45afa2647', style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '362019713872b5b86e0652ec6abaf839601812e0', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -46,10 +55,11 @@ export class Pill {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '256012d0b9ff2c19f0f5787453365f9c3a14d150', class: {
+                'with-gap': !this.iconOnly,
+            } }, h("ix-icon", { key: '1373ff2c8bdc7efb83c4b29f6ee33aec624f408d', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: '7e6df9c95355b084a795a5836ed1b2525e6792ea', class: "slot-container" }, h("slot", { key: '9a454c6e3b13bd688dff6ba53304ea04bc9aa5e6' })))));
+            }, name: this.icon, size: '16' }), h("span", { key: '29b1e6315c5a2a65c0c9fc35b86ead8e7f69bfe7', class: "slot-container" }, h("slot", { key: 'a43419e4efbdcdf54318fb261c1db932c1e08d92', onSlotchange: () => this.checkIfContentAvailable() })))));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }
@@ -106,7 +116,7 @@ export class Pill {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -123,7 +133,7 @@ export class Pill {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -140,7 +150,7 @@ export class Pill {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -160,7 +170,7 @@ export class Pill {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -192,6 +202,11 @@ export class Pill {
             }
         };
     }
-    static get elementRef() { return "el"; }
+    static get states() {
+        return {
+            "iconOnly": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=pill.js.map