npm - @siemens/ix - Versions diffs - 3.0.0 → 3.1.0 - Mend

@siemens/ix 3.0.0 → 3.1.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 (737) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"button.ct.js","sourceRoot":"","sources":["../../../../src/components/button/test/button.ct.ts"],"names":[],"mappings":"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","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 { iconRocket } from '@siemens/ix-icons/icons';\nimport { regressionTest } from '@utils/test';\n\ndeclare global {\n interface Window {\n submitCount: number;\n }\n}\n\nregressionTest('renders', async ({ mount, page }) => {\n await mount(`<ix-button>Content</ix-button>`);\n const button = page.locator('ix-button');\n await expect(button).toHaveClass(/hydrated/);\n});\n\nregressionTest('show icon', async ({ mount, page }) => {\n await mount(`<ix-button icon=\"rocket\">Content</ix-button>`, {\n icons: { iconRocket },\n });\n const button = page.locator('ix-button');\n await expect(button.locator('ix-icon')).toBeVisible();\n});\n\nregressionTest('show spinner while loading', async ({ mount, page }) => {\n await mount(`<ix-button>Content</ix-button>`);\n const button = page.locator('ix-button');\n\n await expect(button.locator('ix-spinner')).not.toBeVisible();\n await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n await expect(button.locator('ix-spinner')).toBeVisible();\n});\n\nregressionTest(\n 'replace icon with spinner while loading',\n async ({ mount, page }) => {\n await mount(`<ix-button icon=\"rocket\">Content</ix-button>`, {\n icons: { iconRocket },\n });\n const button = page.locator('ix-button');\n\n await expect(button.locator('ix-spinner')).not.toBeVisible();\n await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n await expect(button.locator('ix-spinner')).toBeVisible();\n await expect(button.locator('ix-icon')).not.toBeVisible();\n }\n);\n\nregressionTest(\n 'should not fire event when disabled',\n async ({ mount, page }) => {\n await mount(`<ix-button disabled>Content</ix-button>`);\n const button = page.locator('ix-button');\n\n await expect(button).toHaveClass(/hydrated/);\n await expect(button).toHaveCSS('pointer-events', 'none');\n }\n);\n\nregressionTest.describe('A11y', () => {\n regressionTest('disabled', async ({ mount, page }) => {\n await mount('<ix-button disabled>Content</ix-button>');\n const button = page.locator('button');\n await expect(button).toHaveAttribute('aria-disabled');\n await page.locator('ix-button').evaluate((btn: HTMLButtonElement) => {\n btn.disabled = false;\n });\n await expect(button).not.toHaveAttribute('aria-disabled');\n });\n});\n\nregressionTest(\n 'form can be submitted multiple times',\n async ({ mount, page }) => {\n await mount(`\n <form id=\"test-form\">\n <input type=\"text\" name=\"test-input\" required minlength=\"1\">\n <ix-button type=\"submit\">Submit</ix-button>\n </form>\n `);\n\n await page.evaluate(() => {\n const form = document.getElementById('test-form');\n form?.addEventListener('submit', (e) => {\n e.preventDefault();\n window.submitCount = (window.submitCount \|\| 0) + 1;\n });\n });\n\n const button = page.locator('ix-button');\n const input = page.locator('input[name=\"test-input\"]');\n\n for (let i = 0; i < 3; i++) {\n await input.fill('test');\n await button.click();\n const submitCount = await page.evaluate(() => window.submitCount);\n expect(submitCount).toBe(i + 1);\n await page.waitForTimeout(100);\n }\n\n await expect(button).not.toHaveAttribute('disabled');\n await expect(button).not.toHaveClass(/loading/);\n }\n);\n"]}
1	+ {"version":3,"file":"button.ct.js","sourceRoot":"","sources":["../../../../src/components/button/test/button.ct.ts"],"names":[],"mappings":"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","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 { iconRocket } from '@siemens/ix-icons/icons';\nimport { regressionTest } from '@utils/test';\n\ndeclare global {\n interface Window {\n submitCount: number;\n isFormSubmitted: boolean;\n }\n}\n\nregressionTest('renders', async ({ mount, page }) => {\n await mount(`<ix-button>Content</ix-button>`);\n const button = page.locator('ix-button');\n await expect(button).toHaveClass(/hydrated/);\n});\n\nregressionTest('show icon', async ({ mount, page }) => {\n await mount(`<ix-button icon=\"rocket\">Content</ix-button>`, {\n icons: { iconRocket },\n });\n const button = page.locator('ix-button');\n await expect(button.locator('ix-icon')).toBeVisible();\n});\n\nregressionTest('show spinner while loading', async ({ mount, page }) => {\n await mount(`<ix-button>Content</ix-button>`);\n const button = page.locator('ix-button');\n\n await expect(button.locator('ix-spinner')).not.toBeVisible();\n await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n await expect(button.locator('ix-spinner')).toBeVisible();\n});\n\nregressionTest(\n 'replace icon with spinner while loading',\n async ({ mount, page }) => {\n await mount(`<ix-button icon=\"rocket\">Content</ix-button>`, {\n icons: { iconRocket },\n });\n const button = page.locator('ix-button');\n\n await expect(button.locator('ix-spinner')).not.toBeVisible();\n await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n await expect(button.locator('ix-spinner')).toBeVisible();\n await expect(button.locator('ix-icon')).not.toBeVisible();\n }\n);\n\nregressionTest(\n 'should not fire event when disabled',\n async ({ mount, page }) => {\n await mount(`<ix-button disabled>Content</ix-button>`);\n const button = page.locator('ix-button');\n\n await expect(button).toHaveClass(/hydrated/);\n await expect(button).toHaveCSS('pointer-events', 'none');\n }\n);\n\nregressionTest.describe('A11y', () => {\n regressionTest('disabled', async ({ mount, page }) => {\n await mount('<ix-button disabled>Content</ix-button>');\n const button = page.locator('button');\n await expect(button).toHaveAttribute('aria-disabled');\n await page.locator('ix-button').evaluate((btn: HTMLButtonElement) => {\n btn.disabled = false;\n });\n await expect(button).not.toHaveAttribute('aria-disabled');\n });\n});\n\nregressionTest(\n 'form can be submitted multiple times',\n async ({ mount, page }) => {\n await mount(`\n <form id=\"test-form\">\n <input type=\"text\" name=\"test-input\" required minlength=\"1\">\n <ix-button type=\"submit\">Submit</ix-button>\n </form>\n `);\n\n await page.evaluate(() => {\n const form = document.getElementById('test-form');\n form?.addEventListener('submit', (e) => {\n e.preventDefault();\n window.submitCount = (window.submitCount \|\| 0) + 1;\n });\n });\n\n const button = page.locator('ix-button');\n const input = page.locator('input[name=\"test-input\"]');\n\n for (let i = 0; i < 3; i++) {\n await input.fill('test');\n await button.click();\n const submitCount = await page.evaluate(() => window.submitCount);\n expect(submitCount).toBe(i + 1);\n await page.waitForTimeout(100);\n }\n\n await expect(button).not.toHaveAttribute('disabled');\n await expect(button).not.toHaveClass(/loading/);\n }\n);\n\nregressionTest(\n 'should not submit form when form attribute is not set',\n async ({ mount, page }) => {\n await mount(`\n <form id=\"test-form\">\n <input type=\"text\" name=\"test-input\">\n </form>\n <ix-button type=\"submit\">Submit</ix-button>\n `);\n\n await page.evaluate(() => {\n window.isFormSubmitted = false;\n const form = document.getElementById('test-form');\n if (!form) {\n return;\n }\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n window.isFormSubmitted = true;\n });\n });\n\n const button = page.locator('ix-button');\n await button.click();\n\n const formSubmitted = await page.evaluate(() => window.isFormSubmitted);\n expect(formSubmitted).toBe(false);\n }\n);\n\nregressionTest(\n 'should not submit if form attribute is invalid',\n async ({ mount, page }) => {\n await mount(`\n <form id=\"test-form\">\n <input type=\"text\" name=\"test-input\">\n </form>\n <ix-button type=\"submit\" form=\"invalid-form\">Submit</ix-button>\n `);\n\n await page.evaluate(() => {\n window.isFormSubmitted = false;\n const form = document.getElementById('test-form');\n\n if (!form) {\n return;\n }\n\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n window.isFormSubmitted = true;\n });\n });\n\n const button = page.locator('ix-button');\n await button.click();\n\n const isFormSubmitted = await page.evaluate(() => window.isFormSubmitted);\n expect(isFormSubmitted).toBe(false);\n }\n);\n\nregressionTest(\n 'should submit form when form attribute is set',\n async ({ mount, page }) => {\n await mount(`\n <form id=\"test-form\">\n <input type=\"text\" name=\"test-input\">\n </form>\n <ix-button type=\"submit\" form=\"test-form\">Submit</ix-button>\n `);\n\n await page.evaluate(() => {\n window.isFormSubmitted = false;\n const form = document.getElementById('test-form');\n\n if (!form) {\n return;\n }\n\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n window.isFormSubmitted = true;\n });\n });\n\n const button = page.locator('ix-button');\n\n await button.click();\n\n const formSubmitted = await page.evaluate(() => window.isFormSubmitted);\n expect(formSubmitted).toBe(true);\n }\n);\n"]}

package/dist/collection/components/card-list/card-list.js CHANGED Viewed

@@ -190,7 +190,7 @@ export class CardList {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -272,7 +272,7 @@ export class CardList {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/category-filter/category-filter.css CHANGED Viewed

@@ -237,7 +237,7 @@
 :host .btn-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -251,7 +251,7 @@
 :host .btn-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled):hover {
+:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-danger--border-color--hover);
   background-color: var(--theme-btn-danger--background--hover);
   color: var(--theme-btn-danger--color--hover);
@@ -299,7 +299,7 @@
 :host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -313,7 +313,7 @@
 :host .btn-outline-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-danger--border-color--hover);
   background-color: var(--theme-btn-outline-danger--background--hover);
   color: var(--theme-btn-outline-danger--color--hover);
@@ -359,7 +359,7 @@
 :host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -373,7 +373,7 @@
 :host .btn-invisible-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-danger--background--hover);
   color: var(--theme-btn-invisible-danger--color--hover);
 }
@@ -418,7 +418,7 @@
 :host .btn-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -432,7 +432,7 @@
 :host .btn-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-primary--border-color--hover);
   background-color: var(--theme-btn-primary--background--hover);
   color: var(--theme-btn-primary--color--hover);
@@ -480,7 +480,7 @@
 :host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -494,7 +494,7 @@
 :host .btn-outline-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-primary--border-color--hover);
   background-color: var(--theme-btn-outline-primary--background--hover);
   color: var(--theme-btn-outline-primary--color--hover);
@@ -540,7 +540,7 @@
 :host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -554,7 +554,7 @@
 :host .btn-invisible-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-primary--background--hover);
   color: var(--theme-btn-invisible-primary--color--hover);
 }
@@ -599,7 +599,7 @@
 :host .btn-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -613,7 +613,7 @@
 :host .btn-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-secondary--border-color--hover);
   background-color: var(--theme-btn-secondary--background--hover);
   color: var(--theme-btn-secondary--color--hover);
@@ -661,7 +661,7 @@
 :host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -675,7 +675,7 @@
 :host .btn-outline-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-secondary--border-color--hover);
   background-color: var(--theme-btn-outline-secondary--background--hover);
   color: var(--theme-btn-outline-secondary--color--hover);
@@ -721,7 +721,7 @@
 :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -735,7 +735,7 @@
 :host .btn-invisible-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-secondary--background--hover);
   color: var(--theme-btn-invisible-secondary--color--hover);
 }
@@ -875,7 +875,7 @@
 .dropdown-item:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-.dropdown-item:not(.disabled):not(:disabled):hover, .dropdown-item:not(.disabled):not(:disabled):hover {
+.dropdown-item:not(.disabled):not(:disabled):hover, .dropdown-item:not(.disabled):not(:disabled).hover {
   color: var(--theme-menu-item--color--hover);
   background-color: var(--theme-menu-item--background--hover);
 }
@@ -1010,14 +1010,14 @@ button.dropdown-toggle::after {
 .ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover {
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
   cursor: auto;
 }
-.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,
 .ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
-.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover {
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
   cursor: auto;

package/dist/collection/components/category-filter/category-filter.js CHANGED Viewed

@@ -583,7 +583,7 @@ export class CategoryFilter {
                 "mutable": false,
                 "complexType": {
                     "original": "FilterState",
-                    "resolved": "FilterState",
+                    "resolved": "FilterState | undefined",
                     "references": {
                         "FilterState": {
                             "location": "import",
@@ -607,7 +607,7 @@ export class CategoryFilter {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -626,7 +626,7 @@ export class CategoryFilter {
                 "mutable": false,
                 "complexType": {
                     "original": "{\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  }",
-                    "resolved": "{ [id: string]: { label: string; options: string[]; }; }",
+                    "resolved": "undefined | { [id: string]: { label: string; options: string[]; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -644,7 +644,7 @@ export class CategoryFilter {
                 "mutable": false,
                 "complexType": {
                     "original": "{\n    [id: string]: string;\n  }",
-                    "resolved": "{ [id: string]: string; }",
+                    "resolved": "undefined | { [id: string]: string; }",
                     "references": {}
                 },
                 "required": false,
@@ -663,7 +663,7 @@ export class CategoryFilter {
                 "mutable": false,
                 "complexType": {
                     "original": "string[]",
-                    "resolved": "string[]",
+                    "resolved": "string[] | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -681,7 +681,7 @@ export class CategoryFilter {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -720,7 +720,7 @@ export class CategoryFilter {
                 "mutable": false,
                 "complexType": {
                     "original": "LogicalFilterOperator",
-                    "resolved": "LogicalFilterOperator.EQUAL | LogicalFilterOperator.NOT_EQUAL",
+                    "resolved": "LogicalFilterOperator.EQUAL | LogicalFilterOperator.NOT_EQUAL | undefined",
                     "references": {
                         "LogicalFilterOperator": {
                             "location": "import",

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

@@ -123,7 +123,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -162,7 +162,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -341,7 +341,7 @@ export class Checkbox {
                             "id": "global::HTMLFormElement"
                         }
                     },
-                    "return": "Promise<HTMLFormElement>"
+                    "return": "Promise<HTMLFormElement | null>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/checkbox-group/checkbox-group.js CHANGED Viewed

@@ -79,10 +79,10 @@ export class CheckboxGroup {
         return Promise.resolve(this.checkboxElements.some((checkbox) => checkbox.checked));
     }
     render() {
-        return (h(Host, { key: '77b87f092dc2a4d95adbd496cbbbc22eb0c923c3', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: 'b0a0db7727ff7bd6cd554a8ef14afea3ed4ff46a', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: '7bcf7ecacfe94c995a335f72b78f01f554a3d469', class: {
+        return (h(Host, { key: '4ab181cf7fba9b6a236cbd48484ad3b1548d2fd9', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: '060fe61374a5e9adf6f3b0c96b6a2bc554dab720', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: 'b3c31feb168bc2cf955aad05c9a16598fa96f247', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '416117ca60b21153342224b27261faa3f81f87a2' })))));
+            } }, h("slot", { key: '5546027947171c20a58eda63ea95c1c08919d5ad' })))));
     }
     static get is() { return "ix-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +104,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -123,7 +123,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -162,7 +162,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -181,7 +181,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -200,7 +200,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -219,7 +219,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/checkbox-group/checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../src/components/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,uBAAuB,GAGxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAmBE;;WAEG;QACK,cAAS,GAAqB,QAAQ,CAAC;QAoB/C;;WAEG;QACK,sBAAiB,GAAG,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEhB,cAAS,GAAG,KAAK,CAAC;QAClB,WAAM,GAAG,KAAK,CAAC;QACf,YAAO,GAAG,KAAK,CAAC;QAChB,cAAS,GAAG,KAAK,CAAC;QAEnB,YAAO,GAAG,KAAK,CAAC;QACP,aAAQ,GAAG,OAAO,~~EAA8B~~,CAAC;~~QAMjD~~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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport {\n FieldWrapperInterface,\n HookValidationLifecycle,\n IxFormValidationState,\n ValidationResults,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { makeRef } from '../utils/make-ref';\n\n/*\n @form-ready\n /\n@Component({\n tag: 'ix-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n shadow: true,\n})\nexport class CheckboxGroup\n implements FieldWrapperInterface, IxFormValidationState, IxComponent\n{\n @Element() hostElement!: HTMLIxCheckboxGroupElement;\n /\n Optional helper text displayed below the checkbox group\n /\n @Prop() helperText?: string;\n\n /\n Label for the checkbox group\n /\n @Prop() label?: string;\n\n /\n Alignment of the checkboxes in the group\n /\n @Prop() direction: 'row' \| 'column' = 'column';\n\n /\n Error text for the checkbox group\n /\n @Prop() invalidText?: string;\n\n /\n Info text for the checkbox group\n /\n @Prop() infoText?: string;\n /\n Valid text for the checkbox group\n /\n @Prop() validText?: string;\n /\n Warning text for the checkbox group\n /\n @Prop() warningText?: string;\n\n /\n Show helper, info, warning, error and valid text as tooltip\n /\n @Prop() showTextAsTooltip = false;\n\n /\n @internal\n /\n @Prop() required = false;\n\n @State() isInvalid = false;\n @State() isInfo = false;\n @State() isValid = false;\n @State() isWarning = false;\n\n private touched = false;\n private readonly groupRef = makeRef<~~HTMLIxCheckboxGroupElement~~>();\n\n get checkboxElements(): HTMLIxCheckboxElement[] {\n return Array.from(this.hostElement.querySelectorAll('ix-checkbox'));\n }\n\n private readonly observer = new MutationObserver(() => {\n this.checkForRequiredCheckbox();\n });\n\n private checkForRequiredCheckbox() {\n this.required = this.checkboxElements.some((checkbox) => checkbox.required);\n }\n\n connectedCallback(): void {\n this.observer.observe(this.hostElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['checked', 'required'],\n });\n }\n\n componentWillLoad(): void \| Promise<void> {\n this.checkForRequiredCheckbox();\n }\n\n disconnectedCallback(): void {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n @HookValidationLifecycle({\n includeChildren: true,\n })\n onClassFieldUpdate({\n isInvalid,\n isInvalidByRequired,\n isInfo,\n isValid,\n isWarning,\n }: ValidationResults) {\n this.isInvalid = isInvalid \|\| isInvalidByRequired;\n this.isInfo = isInfo;\n this.isValid = isValid;\n this.isWarning = isWarning;\n }\n\n /\n @internal\n /\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n /\n @internal\n */\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(\n this.checkboxElements.some((checkbox) => checkbox.checked)\n );\n }\n\n render() {\n return (\n <Host ref={this.groupRef} onIxBlur={() => (this.touched = true)}>\n <ix-field-wrapper\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n validText={this.validText}\n warningText={this.warningText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isInfo={this.isInfo}\n isValid={this.isValid}\n isWarning={this.isWarning}\n controlRef={this.groupRef}\n >\n <div\n class={{\n 'checkbox-container': true,\n 'row-layout': this.direction === 'row',\n }}\n >\n <slot></slot>\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../src/components/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport {\n FieldWrapperInterface,\n HookValidationLifecycle,\n IxFormValidationState,\n ValidationResults,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { makeRef } from '../utils/make-ref';\n\n/*\n @form-ready\n /\n@Component({\n tag: 'ix-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n shadow: true,\n})\nexport class CheckboxGroup\n implements FieldWrapperInterface, IxFormValidationState, IxComponent\n{\n @Element() hostElement!: HTMLIxCheckboxGroupElement;\n /\n Optional helper text displayed below the checkbox group\n /\n @Prop() helperText?: string;\n\n /\n Label for the checkbox group\n /\n @Prop() label?: string;\n\n /\n Alignment of the checkboxes in the group\n /\n @Prop() direction: 'row' \| 'column' = 'column';\n\n /\n Error text for the checkbox group\n /\n @Prop() invalidText?: string;\n\n /\n Info text for the checkbox group\n /\n @Prop() infoText?: string;\n /\n Valid text for the checkbox group\n /\n @Prop() validText?: string;\n /\n Warning text for the checkbox group\n /\n @Prop() warningText?: string;\n\n /\n Show helper, info, warning, error and valid text as tooltip\n /\n @Prop() showTextAsTooltip = false;\n\n /\n @internal\n /\n @Prop() required = false;\n\n @State() isInvalid = false;\n @State() isInfo = false;\n @State() isValid = false;\n @State() isWarning = false;\n\n private touched = false;\n private readonly groupRef = makeRef<HTMLElement>();\n\n get checkboxElements(): HTMLIxCheckboxElement[] {\n return Array.from(this.hostElement.querySelectorAll('ix-checkbox'));\n }\n\n private readonly observer = new MutationObserver(() => {\n this.checkForRequiredCheckbox();\n });\n\n private checkForRequiredCheckbox() {\n this.required = this.checkboxElements.some((checkbox) => checkbox.required);\n }\n\n connectedCallback(): void {\n this.observer.observe(this.hostElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['checked', 'required'],\n });\n }\n\n componentWillLoad(): void \| Promise<void> {\n this.checkForRequiredCheckbox();\n }\n\n disconnectedCallback(): void {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n @HookValidationLifecycle({\n includeChildren: true,\n })\n onClassFieldUpdate({\n isInvalid,\n isInvalidByRequired,\n isInfo,\n isValid,\n isWarning,\n }: ValidationResults) {\n this.isInvalid = isInvalid \|\| isInvalidByRequired;\n this.isInfo = isInfo;\n this.isValid = isValid;\n this.isWarning = isWarning;\n }\n\n /\n @internal\n /\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n /\n @internal\n */\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(\n this.checkboxElements.some((checkbox) => checkbox.checked)\n );\n }\n\n render() {\n return (\n <Host ref={this.groupRef} onIxBlur={() => (this.touched = true)}>\n <ix-field-wrapper\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n validText={this.validText}\n warningText={this.warningText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isInfo={this.isInfo}\n isValid={this.isValid}\n isWarning={this.isWarning}\n controlRef={this.groupRef}\n >\n <div\n class={{\n 'checkbox-container': true,\n 'row-layout': this.direction === 'row',\n }}\n >\n <slot></slot>\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"]}

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

@@ -115,11 +115,6 @@
 .container .with-icon {
   margin-right: 0.25rem;
 }
-.container .hidden {
-  display: none;
-  width: 0;
-  margin-right: 0;
-}
 .container .close-button-container {
   display: inline-flex;
   margin-left: auto;
@@ -134,6 +129,24 @@
 .container.outline.icon {
   padding-left: calc(0.75rem - 1px);
 }
+.container.outline.icon.alarm .with-icon {
+  color: var(--theme-color-alarm);
+}
+.container.outline.icon.critical .with-icon {
+  color: var(--theme-color-critical);
+}
+.container.outline.icon.warning .with-icon {
+  color: var(--theme-color-warning);
+}
+.container.outline.icon.info .with-icon {
+  color: var(--theme-color-info);
+}
+.container.outline.icon.neutral .with-icon {
+  color: var(--theme-color-neutral);
+}
+.container.outline.icon.success .with-icon {
+  color: var(--theme-color-success);
+}
 .container.outline:not(.icon) {
   padding-left: calc(0.5rem - 1px);
 }
@@ -186,13 +199,16 @@
 }
 .container.primary.outline {
-  color: var(--theme-chip-primary-outline--color);
+  color: var(--theme-chip-outline--color);
   background-color: transparent;
   border: solid 1px var(--theme-chip-primary-outline--border-color);
 }
 .container.primary.outline .close-button {
-  color: var(--theme-chip-primary-outline--color);
-  --ix-icon-button-color: var(--theme-chip-primary-outline--color);
+  color: var(--theme-chip-outline--color);
+  --ix-icon-button-color: var(--theme-chip-outline--color);
+}
+.container.primary.outline .with-icon {
+  color: var(--theme-color-primary);
 }
 .container.primary.outline:hover {
   background-color: var(--theme-chip-primary-outline--background--hover);

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

@@ -82,10 +82,11 @@ export class Chip {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '904f4f03b99a5777696d4fb16e731660b965168d', class: {
+            } }, this.icon && (h("ix-icon", { key: '33e9f9070943d1ec93da391b0573cf0ca6f1fe01', class: {
                 'with-icon': true,
-                hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: '2163059e60b87e55ba0e961bc3c9a10ab4fe2f0e', class: "slot-container" }, h("slot", { key: '905355f990900be5cb82ddab1ef8ddd68598d9f1' })), isInactive === false && this.closable ? this.getCloseButton() : null), this.getTooltip()));
+            }, name: this.icon, size: '24', style: this.variant === 'custom'
+                ? { color: this.outline ? this.background : this.chipColor }
+                : undefined })), h("span", { key: '9d99f68cec5413c92f8077b9dc515e0fd152f5c5', class: "slot-container" }, h("slot", { key: '43d2e60889312f0b86a73781aa43abeba2064f12' })), isInactive === false && this.closable ? this.getCloseButton() : null), this.getTooltip()));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -167,7 +168,7 @@ export class Chip {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -186,7 +187,7 @@ export class Chip {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -205,7 +206,7 @@ export class Chip {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACsB,YAAO,GAQjB,SAAS,CAAC;QAEzB;;;WAGG;QACK,WAAM,GAAG,IAAI,CAAC;QAEtB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAmBzB;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;;;;WAKG;QACK,gBAAW,GAAqB,KAAK,CAAC;QAO7B,wBAAmB,GAAG,OAAO,EAAe,CAAC;~~KAsG~~/D;~~IApGS~~,cAAc;QACpB,OAAO,CACL,WAAK,KAAK,EAAC,wBAAwB;YACjC,sBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,cAAc,EACpB,IAAI,QACJ,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EACjE,KAAK,QACL,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;gBAC1B,CAAC,GACe,CACd,CACP,CAAC;IACJ,CAAC;IAEO,UAAU;;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;YACxE,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,IAAI,GACR,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;YAC7D,CAAC,CAAC,IAAI,CAAC,WAAW;YAClB,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC;QAE3C,OAAO,CACL,kBAAY,GAAG,EAAE,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,IACvD,IAAI,CACM,CACd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC;QAEzC,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,WAAW,GAAG;gBACZ,KAAK,EAAE,IAAI,CAAC,SAAS;gBACrB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;aACpE,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;aACrB,EACD,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACvB,CAAC,CAAC;oBACE,wBAAwB,EAAE,IAAI,CAAC,SAAS;iBACzC;gBACH,CAAC,CAAC,EAAE;YAGR,4DACE,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAC7B,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;oBACL,SAAS,EAAE,IAAI;oBACf,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;oBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;oBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;oBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;oBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;oBACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;iBAClB;~~gBAED~~,gEACE,KAAK,EAAE;wBACL,WAAW,EAAE,IAAI;~~wBACjB~~,~~MAAM~~,EAAE,CAAC,IAAI,~~CAAC~~,IAAI~~;qBACnB~~,~~EACD~~,IAAI,EAAE,IAAI,CAAC,IAAI,~~EACf~~,IAAI,EAAE,~~IAAI~~,~~GACV~~;~~gBACF~~,6DAAM,KAAK,EAAC,gBAAgB;oBAC1B,8DAAa,CACR;gBACN,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CACjE;YACL,IAAI,CAAC,UAAU,EAAE,CACb,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 /\n\nimport { iconCloseSmall } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-chip',\n styleUrl: 'chip.scss',\n shadow: true,\n})\nexport class Chip {\n @Element() hostElement!: HTMLIxChipElement;\n\n /\n Chip variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n * will be possible and also the close button will not be present.\n /\n @Prop() active = true;\n\n /\n Show close icon\n /\n @Prop() closable = false;\n\n /\n Show icon\n /\n @Prop() icon?: string;\n\n /\n Custom background color.\n * Only has an effect on chips with `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font and icon color.\n * Only has an effect on chips with `variant='custom'`\n /\n @Prop() chipColor: string \| undefined;\n\n /\n Show chip with outline style\n /\n @Prop() outline = false;\n\n /\n Display a tooltip. By default, no tooltip will be displayed.\n * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.\n \n @since 3.0.0\n /\n @Prop() tooltipText: string \| boolean = false;\n\n /\n Fire event if close button is clicked\n */\n @Event() closeChip!: EventEmitter;\n\n private readonly containerElementRef = makeRef<HTMLElement>();\n\n private getCloseButton() {\n return (\n <div class=\"close-button-container\">\n <ix-icon-button\n type=\"button\"\n variant=\"secondary\"\n icon={iconCloseSmall}\n class=\"close-button\"\n oval\n size=\"16\"\n style={this.variant === 'custom' ? { color: this.chipColor } : {}}\n ghost\n onClick={(event) => {\n this.closeChip.emit(event);\n event.stopPropagation();\n }}\n ></ix-icon-button>\n </div>\n );\n }\n\n private getTooltip() {\n if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {\n return null;\n }\n\n const text =\n typeof this.tooltipText === 'string' && this.tooltipText.trim()\n ? this.tooltipText\n : this.hostElement.textContent?.trim();\n\n return (\n <ix-tooltip for={this.containerElementRef.waitForCurrent()}>\n {text}\n </ix-tooltip>\n );\n }\n\n render() {\n const isInactive = this.active === false;\n\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.chipColor,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n\n return (\n <Host\n tabIndex=\"-1\"\n class={{\n inactive: isInactive,\n }}\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.chipColor,\n }\n : {}\n }\n >\n <div\n ref={this.containerElementRef}\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: isInactive,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n custom: this.variant === 'custom',\n closable: this.closable,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n ~~hidden: !this.icon,\n~~ }}\n name={this.icon}\n size={'24'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n {isInactive === false && this.closable ? this.getCloseButton() : null}\n </div>\n {this.getTooltip()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"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 /\n\nimport { iconCloseSmall } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-chip',\n styleUrl: 'chip.scss',\n shadow: true,\n})\nexport class Chip {\n @Element() hostElement!: HTMLIxChipElement;\n\n /\n Chip variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n * will be possible and also the close button will not be present.\n /\n @Prop() active = true;\n\n /\n Show close icon\n /\n @Prop() closable = false;\n\n /\n Show icon\n /\n @Prop() icon?: string;\n\n /\n Custom background color.\n * Only has an effect on chips with `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font and icon color.\n * Only has an effect on chips with `variant='custom'`\n /\n @Prop() chipColor: string \| undefined;\n\n /\n Show chip with outline style\n /\n @Prop() outline = false;\n\n /\n Display a tooltip. By default, no tooltip will be displayed.\n * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.\n \n @since 3.0.0\n /\n @Prop() tooltipText: string \| boolean = false;\n\n /\n Fire event if close button is clicked\n */\n @Event() closeChip!: EventEmitter;\n\n private readonly containerElementRef = makeRef<HTMLElement>();\n\n private getCloseButton() {\n return (\n <div class=\"close-button-container\">\n <ix-icon-button\n type=\"button\"\n variant=\"secondary\"\n icon={iconCloseSmall}\n class=\"close-button\"\n oval\n size=\"16\"\n style={this.variant === 'custom' ? { color: this.chipColor } : {}}\n ghost\n onClick={(event) => {\n this.closeChip.emit(event);\n event.stopPropagation();\n }}\n ></ix-icon-button>\n </div>\n );\n }\n\n private getTooltip() {\n if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {\n return null;\n }\n\n const text =\n typeof this.tooltipText === 'string' && this.tooltipText.trim()\n ? this.tooltipText\n : this.hostElement.textContent?.trim();\n\n return (\n <ix-tooltip for={this.containerElementRef.waitForCurrent()}>\n {text}\n </ix-tooltip>\n );\n }\n\n render() {\n const isInactive = this.active === false;\n\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.chipColor,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n\n return (\n <Host\n tabIndex=\"-1\"\n class={{\n inactive: isInactive,\n }}\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.chipColor,\n }\n : {}\n }\n >\n <div\n ref={this.containerElementRef}\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: isInactive,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n custom: this.variant === 'custom',\n closable: this.closable,\n icon: !!this.icon,\n }}\n >\n {this.icon && (\n <ix-icon\n class={{\n 'with-icon': true,\n }}\n name={this.icon}\n size={'24'}\n style={\n this.variant === 'custom'\n ? { color: this.outline ? this.background : this.chipColor }\n : undefined\n }\n />\n )}\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n {isInactive === false && this.closable ? this.getCloseButton() : null}\n </div>\n {this.getTooltip()}\n </Host>\n );\n }\n}\n"]}

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

@@ -82,7 +82,7 @@ export class Col {
                 "mutable": false,
                 "complexType": {
                     "original": "ColumnSize",
-                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\" | undefined",
                     "references": {
                         "ColumnSize": {
                             "location": "local",
@@ -107,7 +107,7 @@ export class Col {
                 "mutable": false,
                 "complexType": {
                     "original": "ColumnSize",
-                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\" | undefined",
                     "references": {
                         "ColumnSize": {
                             "location": "local",
@@ -132,7 +132,7 @@ export class Col {
                 "mutable": false,
                 "complexType": {
                     "original": "ColumnSize",
-                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\" | undefined",
                     "references": {
                         "ColumnSize": {
                             "location": "local",
@@ -157,7 +157,7 @@ export class Col {
                 "mutable": false,
                 "complexType": {
                     "original": "ColumnSize",
-                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+                    "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\" | undefined",
                     "references": {
                         "ColumnSize": {
                             "location": "local",