@siemens/ix 2.0.3 → 2.0.4

package/dist/collection/components/input-group/tests/input-group.ct.js

@@ -83,4 +83,70 @@ test('update padding end', async ({ mount, page }) => {
   await expect(input).toHaveCSS('padding-left', '55px');
   await expect(input).toHaveCSS('padding-right', '65px');
 });
+test('validation padding', async ({ mount, page }) => {
+  await mount(`
+    <form class="needs-validation" noValidation>
+      <ix-input-group>
+        <input type="text" required />
+      </ix-input-group>
+
+      <ix-button type="submit">Submit</ix-button>
+    </form>
+  `);
+  const form = page.locator('form');
+  await form.evaluate((form) => form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    form.classList.add('was-validated');
+  }));
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+  const input = group.locator('input');
+  const button = page.locator('ix-button');
+  await button.click();
+  await expect(input).toHaveCSS('background-position-x', '8px');
+});
+test('validation padding with input-start slot', async ({ mount, page }) => {
+  await mount(`
+    <form class="needs-validation" noValidation>
+      <ix-input-group>
+        <ix-icon name="eye" size="12" slot="input-start"></ix-icon>
+        <input type="text" required />
+      </ix-input-group>
+
+      <ix-button type="submit">Submit</ix-button>
+    </form>
+  `);
+  const form = page.locator('form');
+  await form.evaluate((form) => form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    form.classList.add('was-validated');
+  }));
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+  const input = group.locator('input');
+  const button = page.locator('ix-button');
+  await button.click();
+  await expect(input).toHaveCSS('background-position-x', '27px');
+  await expect(input).toHaveCSS('padding-left', '59px');
+});
+test('validation with class padding with input-start slot', async ({ mount, page, }) => {
+  await mount(`
+    <form class="needs-validation" noValidation>
+      <ix-input-group>
+        <ix-icon name="eye" size="12" slot="input-start"></ix-icon>
+        <input type="text" class="is-invalid" />
+      </ix-input-group>
+    </form>
+  `);
+  const form = page.locator('form');
+  await form.evaluate((form) => form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    form.classList.add('was-validated');
+  }));
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('background-position-x', '27px');
+  await expect(input).toHaveCSS('padding-left', '59px');
+});
 //# sourceMappingURL=input-group.ct.js.map

package/dist/collection/components/input-group/tests/input-group.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.ct.js","sourceRoot":"","sources":["../../../../src/components/input-group/tests/input-group.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 thi  s source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\ntest('initial padding start', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <span slot=\"input-start\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '31px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\ntest('initial padding end', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <span slot=\"input-start\">\n          <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n        </span>\n        <span slot=\"input-end\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '31px');\n  await expect(input).toHaveCSS('padding-right', '31px');\n});\n\ntest('update padding end', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const startElement = document.createElement('DIV');\n    startElement.style.height = '1px';\n    startElement.style.width = '40px';\n    startElement.slot = 'input-start';\n    group.appendChild(startElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '55px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const endElement = document.createElement('DIV');\n    endElement.style.height = '1px';\n    endElement.style.width = '50px';\n    endElement.slot = 'input-end';\n    group.appendChild(endElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '55px');\n  await expect(input).toHaveCSS('padding-right', '65px');\n});\n"]}
+{"version":3,"file":"input-group.ct.js","sourceRoot":"","sources":["../../../../src/components/input-group/tests/input-group.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;EACxC,MAAM,KAAK,CAAC;;;;GAIX,CAAC,CAAC;EAEH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;EACrD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACtD,MAAM,KAAK,CAAC;;;;;;;GAOX,CAAC,CAAC;EAEH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;EACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qBAAqB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACpD,MAAM,KAAK,CAAC;;;;;;;;;;GAUX,CAAC,CAAC;EAEH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;EACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACnD,MAAM,KAAK,CAAC;;;;GAIX,CAAC,CAAC;EAEH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;EACrD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;EAEvD,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAkB,EAAE,EAAE;IAC1C,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnD,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IAClC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IAClC,YAAY,CAAC,IAAI,GAAG,aAAa,CAAC;IAClC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;EAClC,CAAC,CAAC,CAAC;EAEH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;EACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;EAEvD,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAkB,EAAE,EAAE;IAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IAChC,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IAChC,UAAU,CAAC,IAAI,GAAG,WAAW,CAAC;IAC9B,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EAEH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;EACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACnD,MAAM,KAAK,CAAC;;;;;;;;GAQX,CAAC,CAAC;EAEH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;IACpC,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;EACtC,CAAC,CAAC,CACH,CAAC;EAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;EAErB,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;AAChE,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0CAA0C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACzE,MAAM,KAAK,CAAC;;;;;;;;;GASX,CAAC,CAAC;EAEH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;IACpC,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;EACtC,CAAC,CAAC,CACH,CAAC;EAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;EAErB,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;EAC/D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACxD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qDAAqD,EAAE,KAAK,EAAE,EACjE,KAAK,EACL,IAAI,GACL,EAAE,EAAE;EACH,MAAM,KAAK,CAAC;;;;;;;GAOX,CAAC,CAAC;EAEH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;IACpC,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;EACtC,CAAC,CAAC,CACH,CAAC;EAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EAErC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;EAC/D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACxD,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 thi  s source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\ntest('initial padding start', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <span slot=\"input-start\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '31px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\ntest('initial padding end', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <span slot=\"input-start\">\n          <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n        </span>\n        <span slot=\"input-end\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '31px');\n  await expect(input).toHaveCSS('padding-right', '31px');\n});\n\ntest('update padding end', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const startElement = document.createElement('DIV');\n    startElement.style.height = '1px';\n    startElement.style.width = '40px';\n    startElement.slot = 'input-start';\n    group.appendChild(startElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '55px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const endElement = document.createElement('DIV');\n    endElement.style.height = '1px';\n    endElement.style.width = '50px';\n    endElement.slot = 'input-end';\n    group.appendChild(endElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '55px');\n  await expect(input).toHaveCSS('padding-right', '65px');\n});\n\ntest('validation padding', async ({ mount, page }) => {\n  await mount(`\n    <form class=\"needs-validation\" noValidation>\n      <ix-input-group>\n        <input type=\"text\" required />\n      </ix-input-group>\n\n      <ix-button type=\"submit\">Submit</ix-button>\n    </form>\n  `);\n\n  const form = page.locator('form');\n  await form.evaluate((form) =>\n    form.addEventListener('submit', (e) => {\n      e.preventDefault();\n      form.classList.add('was-validated');\n    })\n  );\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  const button = page.locator('ix-button');\n\n  await button.click();\n\n  await expect(input).toHaveCSS('background-position-x', '8px');\n});\n\ntest('validation padding with input-start slot', async ({ mount, page }) => {\n  await mount(`\n    <form class=\"needs-validation\" noValidation>\n      <ix-input-group>\n        <ix-icon name=\"eye\" size=\"12\" slot=\"input-start\"></ix-icon>\n        <input type=\"text\" required />\n      </ix-input-group>\n\n      <ix-button type=\"submit\">Submit</ix-button>\n    </form>\n  `);\n\n  const form = page.locator('form');\n  await form.evaluate((form) =>\n    form.addEventListener('submit', (e) => {\n      e.preventDefault();\n      form.classList.add('was-validated');\n    })\n  );\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  const button = page.locator('ix-button');\n\n  await button.click();\n\n  await expect(input).toHaveCSS('background-position-x', '27px');\n  await expect(input).toHaveCSS('padding-left', '59px');\n});\n\ntest('validation with class padding with input-start slot', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n    <form class=\"needs-validation\" noValidation>\n      <ix-input-group>\n        <ix-icon name=\"eye\" size=\"12\" slot=\"input-start\"></ix-icon>\n        <input type=\"text\" class=\"is-invalid\" />\n      </ix-input-group>\n    </form>\n  `);\n\n  const form = page.locator('form');\n  await form.evaluate((form) =>\n    form.addEventListener('submit', (e) => {\n      e.preventDefault();\n      form.classList.add('was-validated');\n    })\n  );\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n\n  await expect(input).toHaveCSS('background-position-x', '27px');\n  await expect(input).toHaveCSS('padding-left', '59px');\n});\n"]}

package/dist/collection/components/kpi/kpi.css

@@ -108,8 +108,7 @@
   display: flex;
   height: 100%;
   width: 100%;
-  -webkit-border-after: 2px solid grey;
-          border-block-end: 2px solid grey;
+  border-block-end: 2px solid grey;
 }
 :host .kpi-container.alarm {
   border-block-end-color: var(--theme-color-alarm);
@@ -125,8 +124,7 @@
   flex-shrink: 9999;
 }
 :host .kpi-container .kpi-label ix-icon {
-  -webkit-margin-end: 0.25rem;
-          margin-inline-end: 0.25rem;
+  margin-inline-end: 0.25rem;
 }
 :host .kpi-container .kpi-value-container {
   display: flex;
@@ -143,14 +141,12 @@
   color: var(--theme-kpi-display-value--color);
 }
 :host .kpi-container .kpi-unit {
-  -webkit-margin-start: 0.5rem;
-          margin-inline-start: 0.5rem;
+  margin-inline-start: 0.5rem;
   color: var(--theme-kpi-display-units--color);
 }
 :host .kpi-container .kpi-label,
 :host .kpi-container .kpi-unit {
-  -webkit-margin-before: 0.125rem;
-          margin-block-start: 0.125rem;
+  margin-block-start: 0.125rem;
 }
 :host:not(.disabled):not(:disabled) {
   cursor: pointer;

package/dist/collection/components/map-navigation/map-navigation.css

@@ -107,8 +107,7 @@
   height: 100%;
   left: 4rem;
   background-color: var(--theme-map-navigation--background);
-  -webkit-border-end: 0.125rem solid var(--theme-map-navigation-separator--background);
-          border-inline-end: 0.125rem solid var(--theme-map-navigation-separator--background);
+  border-inline-end: 0.125rem solid var(--theme-map-navigation-separator--background);
   z-index: 99;
 }
 :host .map-nav-sidebar-content {

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.css

@@ -258,8 +258,7 @@ a {
   min-width: 0;
 }
 :host .overlay-header-content ix-icon {
-  -webkit-margin-start: 1rem;
-          margin-inline-start: 1rem;
+  margin-inline-start: 1rem;
   color: var(--theme-overlay-header--color);
 }
 :host .overlay-header-content .overlay-header-title {
@@ -274,8 +273,7 @@ a {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--theme-overlay-header--color);
-  -webkit-margin-start: 1rem;
-          margin-inline-start: 1rem;
+  margin-inline-start: 1rem;
 }
 :host .color-indicator {
   display: inline-block;
@@ -285,10 +283,8 @@ a {
   background-color: var(--theme-color-neutral);
 }
 :host .overlay-close {
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
-  -webkit-margin-end: 1rem;
-          margin-inline-end: 1rem;
+  margin-inline-start: auto;
+  margin-inline-end: 1rem;
 }
 :host .d-none {
   display: none;

package/dist/collection/components/menu/menu.css

@@ -1076,7 +1076,6 @@
   }
 }
 .animate__animated.animate__flip {
-  -webkit-backface-visibility: visible;
   backface-visibility: visible;
   animation-name: flip;
 }
@@ -1102,7 +1101,6 @@
   }
 }
 .animate__flipInX {
-  -webkit-backface-visibility: visible !important;
   backface-visibility: visible !important;
   animation-name: flipInX;
 }
@@ -1128,7 +1126,6 @@
   }
 }
 .animate__flipInY {
-  -webkit-backface-visibility: visible !important;
   backface-visibility: visible !important;
   animation-name: flipInY;
 }
@@ -1149,7 +1146,6 @@
   animation-duration: 0.75s;
   animation-duration: calc(var(--animate-duration) * 0.75);
   animation-name: flipOutX;
-  -webkit-backface-visibility: visible !important;
   backface-visibility: visible !important;
 }
 @keyframes flipOutY {
@@ -1168,7 +1164,6 @@
 .animate__flipOutY {
   animation-duration: 0.75s;
   animation-duration: calc(var(--animate-duration) * 0.75);
-  -webkit-backface-visibility: visible !important;
   backface-visibility: visible !important;
   animation-name: flipOutY;
 }
@@ -1773,8 +1768,7 @@
   position: relative;
   width: 3.25rem;
   height: 100%;
-  -webkit-padding-after: 1rem;
-          padding-block-end: 1rem;
+  padding-block-end: 1rem;
   overflow: hidden;
   background-color: var(--theme-nav--background);
   transition: width var(--animate-duration) ease-in-out;

package/dist/collection/components/modal/modal.js

@@ -26,7 +26,7 @@ export class Modal {
   }
   slideInModal() {
     const duration = this.animation ? Animation.mediumTime : 0;
-    let transformY = this.centered ? '-50' : 40;
+    let transformY = this.centered ? '-50%' : 40;
     anime({
       targets: this.dialog,
       duration,
@@ -38,7 +38,7 @@ export class Modal {
   }
   slideOutModal(completeCallback) {
     const duration = this.animation ? Animation.mediumTime : 0;
-    let transformY = this.centered ? '-50' : 40;
+    let transformY = this.centered ? '-50%' : 40;
     anime({
       targets: this.dialog,
       duration,
@@ -110,7 +110,10 @@ export class Modal {
     return (h(Host, { class: {
         'no-backdrop': this.backdrop === false,
         'align-center': this.centered,
-      } }, h("div", { class: "dialog-backdrop" }, h("dialog", { "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: `modal modal-size-${this.size}`, onKeyDown: (e) => {
+      } }, h("div", { class: "dialog-backdrop" }, h("dialog", { "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+        modal: true,
+        [`modal-size-${this.size}`]: true,
+      }, onKeyDown: (e) => {
         if (e.key === 'Escape' && this.keyboard === false) {
           e.preventDefault();
         }

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss: EventEmitter;\n\n  get dialog() {\n    return this.hostElement.shadowRoot.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    const rect = this.dialog.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    setTimeout(() => this.dialog.showModal());\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={`modal modal-size-${this.size}`}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape' && this.keyboard === false) {\n                e.preventDefault();\n              }\n            }}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAkB,WAAW,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAW3C,MAAM,OAAO,KAAK;;IACR,mBAAc,GAAmB,EAAE,CAAC;gBAShB,KAAK;qBAKb,IAAI;oBAKL,IAAI;gCAOQ,KAAK;;oBAajB,KAAK;oBAKL,IAAI;;EAYvB,IAAI,MAAM;IACR,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;EAC7D,CAAC;EAEO,YAAY;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAE7C,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,MAAM;MACpB,QAAQ;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;MAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MAC5B,MAAM,EAAE,aAAa;KACtB,CAAC,CAAC;EACL,CAAC;EAEO,aAAa,CAAC,gBAA0B;IAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAE7C,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,MAAM;MACpB,QAAQ;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;MAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MAC5B,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,GAAG,EAAE;QACb,IAAI,gBAAgB,EAAE;UACpB,gBAAgB,EAAE,CAAC;SACpB;MACH,CAAC;KACF,CAAC,CAAC;EACL,CAAC;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;IACjD,MAAM,cAAc,GAClB,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO;MACzB,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;MACvC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO;MAC1B,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IAC1C,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAChD,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;EACH,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,SAAS;IACb,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC;EAC5C,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY,CAAU,MAAU;IACpC,IAAI,YAAY,GAAG,IAAI,CAAC;IAExB,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;MACpC,YAAY,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,YAAY,EAAE;MACjB,OAAO;KACR;IAED,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE;MACtB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;QACE,IAAI,EAAE,SAAS;QACf,MAAM;OACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;MAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;EACL,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,UAAU,CAAU,MAAS;IACjC,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE;MACtB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;QACE,IAAI,EAAE,OAAO;QACb,MAAM;OACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;MAEF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EAC7D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK;QACtC,cAAc,EAAE,IAAI,CAAC,QAAQ;OAC9B;MAED,WAAK,KAAK,EAAC,iBAAiB;QAC1B,4BACc,WAAW,CAAC,IAAI,CAAC,sBACX,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBACxC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvD,KAAK,EAAE;YACL,KAAK,EAAE,IAAI;YACX,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;WAClC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;cACjD,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;UACH,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;UACtB,CAAC;UAED,eAAa,CACN,CACL,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss: EventEmitter;\n\n  get dialog() {\n    return this.hostElement.shadowRoot.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    const rect = this.dialog.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    setTimeout(() => this.dialog.showModal());\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape' && this.keyboard === false) {\n                e.preventDefault();\n              }\n            }}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -17,11 +17,13 @@ export class ModalHeader {
     this.iconColor = undefined;
   }
   onIconChange(icon) {
-    if (icon) {
-      this.parentDialog.classList.add('with-icon');
-    }
-    else {
-      this.parentDialog.classList.remove('with-icon');
+    if (this.parentDialog) {
+      if (icon) {
+        this.parentDialog.classList.add('with-icon');
+      }
+      else {
+        this.parentDialog.classList.remove('with-icon');
+      }
     }
   }
   componentDidLoad() {

package/dist/collection/components/modal-header/modal-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header.js","sourceRoot":"","sources":["../../../src/components/modal-header/modal-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,WAAW;;qBAMF,KAAK;;;;EAOzB,YAAY,CAAC,IAAY;IACvB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAC9C;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACjD;EACH,CAAC;EAcD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/B,CAAC;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;MACjD,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,CACZ,CAAC,CAAC,CAAC,IAAI;MACR,qBAAe,OAAO,EAAE,eAAe;QACrC,eAAa,CACC;MACf,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,sBACE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,CACnB,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (icon) {\n      this.parentDialog.classList.add('with-icon');\n    } else {\n      this.parentDialog.classList.remove('with-icon');\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Close icon is clicked\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = this.hostElement.closest('ix-modal');\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal-header.js","sourceRoot":"","sources":["../../../src/components/modal-header/modal-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,WAAW;;qBAMF,KAAK;;;;EAOzB,YAAY,CAAC,IAAY;IACvB,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,IAAI,EAAE;QACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;OAC9C;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OACjD;KACF;EACH,CAAC;EAcD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/B,CAAC;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;MACjD,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,CACZ,CAAC,CAAC,CAAC,IAAI;MACR,qBAAe,OAAO,EAAE,eAAe;QACrC,eAAa,CACC;MACf,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,sBACE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,CACnB,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (this.parentDialog) {\n      if (icon) {\n        this.parentDialog.classList.add('with-icon');\n      } else {\n        this.parentDialog.classList.remove('with-icon');\n      }\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Close icon is clicked\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = this.hostElement.closest('ix-modal');\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pagination/pagination.css

@@ -82,10 +82,8 @@
   background-color: var(--theme-input--background);
   border: solid 1px var(--theme-input--border-color);
   box-shadow: var(--theme-input--box-shadow);
-  -webkit-padding-start: 0.5rem;
-          padding-inline-start: 0.5rem;
-  -webkit-padding-end: 0.5rem;
-          padding-inline-end: 0.5rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
 }
 .form-control::-moz-placeholder, .form-control-plaintext::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -145,12 +143,9 @@
 .form-control.readonly,
 .form-control[readonly] {
   background: transparent !important;
-  -webkit-border-before: none !important;
-          border-block-start: none !important;
-  -webkit-border-start: none !important;
-          border-inline-start: none !important;
-  -webkit-border-end: none !important;
-          border-inline-end: none !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
   border-radius: 0rem;
 }
 
@@ -186,12 +181,9 @@
 .form-control:disabled,
 .form-control.disabled {
   background: transparent !important;
-  -webkit-border-before: none !important;
-          border-block-start: none !important;
-  -webkit-border-start: none !important;
-          border-inline-start: none !important;
-  -webkit-border-end: none !important;
-          border-inline-end: none !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
   border-radius: 0rem;
   color: var(--theme-color-weak-text);
   border-color: var(--theme-input--border-color-bottom--disabled);
@@ -221,13 +213,11 @@
 .input-wrapper > .glyph {
   display: block;
   position: absolute;
-  -webkit-margin-start: 0.312rem;
-          margin-inline-start: 0.312rem;
+  margin-inline-start: 0.312rem;
   color: var(--theme-color-std-text);
 }
 .input-wrapper > input {
-  -webkit-padding-start: 2.2rem;
-          padding-inline-start: 2.2rem;
+  padding-inline-start: 2.2rem;
 }
 
 select.form-control {
@@ -238,17 +228,6 @@ textarea.form-control {
   padding: 0.375rem 0.5rem;
 }
 
-.was-validated .form-control:invalid,
-.was-validated .is-invalid {
-  background-color: var(--theme-input-error--background);
-  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
-  background-position: left calc(0.375em + 0.1875rem) center !important;
-  padding-right: 0.75rem;
-  padding-left: calc(1.5em + 0.75rem);
-  background-size: 18px;
-  background-repeat: no-repeat;
-}
-
 input.disabled, input:disabled {
   color: var(--theme-input--color--disabled);
 }
@@ -430,6 +409,9 @@ input:read-only, input.readonly {
 :host .content-start {
   width: 100%;
 }
+:host .icon {
+  pointer-events: none;
+}
 
 :host(.disabled) {
   cursor: default;
@@ -973,13 +955,11 @@ input:read-only, input.readonly {
 :host .item-count {
   flex-grow: 1;
   justify-content: flex-end;
-  -webkit-margin-start: 1.5rem;
-          margin-inline-start: 1.5rem;
+  margin-inline-start: 1.5rem;
 }
 :host .item-count ix-select {
   width: 4.5rem;
-  -webkit-margin-start: 1.5rem;
-          margin-inline-start: 1.5rem;
+  margin-inline-start: 1.5rem;
 }
 :host button {
   width: auto;
@@ -988,6 +968,5 @@ input:read-only, input.readonly {
   padding: 0 0.5rem;
 }
 :host button + button {
-  -webkit-margin-start: 0.125rem;
-          margin-inline-start: 0.125rem;
+  margin-inline-start: 0.125rem;
 }

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

@@ -53,7 +53,7 @@ test('should dispatch items count change', async ({ mount, page }) => {
     .filter({ hasText: 'chevron-down-small' })
     .click();
   await pagination.locator('ix-dropdown-item').nth(3).click();
-  expect(pagination.locator('ix-dropdown')).not.toBeVisible();
+  await expect(pagination.locator('ix-dropdown')).not.toBeVisible();
   await expect(pagination).toHaveClass(/hydrated/);
   expect(await itemChanged).toBe(40);
 });

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

@@ -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;EACxC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;EAE9C,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;EACzC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;EAExD,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;EAClE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;EAExD,MAAM,OAAO;KACV,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC;KACzC,KAAK,EAAE,CAAC;EAEX,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAEhD,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;EACnE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;EAEjD,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE;IAC9C,OAAO,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;MACrC,GAAG,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,CAAc,EAAE,EAAE,CAC1D,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAClB,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,MAAM,UAAU;KACb,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC;KACzC,KAAK,EAAE,CAAC;EAEX,MAAM,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;EAC5D,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAE5D,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EACjD,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\n    .getByRole('button')\n    .filter({ hasText: 'chevron-down-small' })\n    .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\n    .getByRole('button')\n    .filter({ hasText: 'chevron-down-small' })\n    .click();\n\n  await pagination.locator('ix-dropdown-item').nth(3).click();\n  expect(pagination.locator('ix-dropdown')).not.toBeVisible();\n\n  await expect(pagination).toHaveClass(/hydrated/);\n  expect(await itemChanged).toBe(40);\n});\n"]}
+{"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;EACxC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;EAE9C,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;EACzC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;EAExD,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;EAClE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;EAExD,MAAM,OAAO;KACV,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC;KACzC,KAAK,EAAE,CAAC;EAEX,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAEhD,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;EACnE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;EAEjD,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE;IAC9C,OAAO,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;MACrC,GAAG,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,CAAc,EAAE,EAAE,CAC1D,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAClB,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,MAAM,UAAU;KACb,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC;KACzC,KAAK,EAAE,CAAC;EAEX,MAAM,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;EAC5D,MAAM,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAElE,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EACjD,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\n    .getByRole('button')\n    .filter({ hasText: 'chevron-down-small' })\n    .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\n    .getByRole('button')\n    .filter({ hasText: 'chevron-down-small' })\n    .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/row/row.css

@@ -12,6 +12,5 @@
 }
 
 :host(:not(:first-of-type)) {
-  -webkit-margin-before: var(--ix-layout-grid-row-margin, 0);
-          margin-block-start: var(--ix-layout-grid-row-margin, 0);
+  margin-block-start: var(--ix-layout-grid-row-margin, 0);
 }

package/dist/collection/components/select/select.js

@@ -6,7 +6,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { h, Host, } from '@stencil/core';
+import { OnListener } from '../utils/listener';
 export class Select {
   constructor() {
     this.selectedIndices = undefined;
@@ -128,6 +139,7 @@ export class Select {
   }
   componentDidLoad() {
     this.inputRef.addEventListener('input', () => {
+      this.dropdownShow = true;
       this.inputChange.emit(this.inputRef.value);
     });
   }
@@ -225,6 +237,9 @@ export class Select {
   }
   filterItemsWithTypeahead() {
     this.inputFilterText = this.inputRef.value;
+    if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
+      return;
+    }
     if (this.inputFilterText) {
       this.items.forEach((item) => {
         item.classList.remove('d-none');
@@ -259,9 +274,7 @@ export class Select {
       return;
     }
     if (this.isSingleMode) {
-      if (this.dropdownShow && this.isDropdownEmpty) {
-        this.dropdownShow = false;
-      }
+      return;
     }
     if (!this.dropdownShow && this.mode !== 'multiple') {
       e.target['value'] = this.selectedLabels;
@@ -299,7 +312,9 @@ export class Select {
         } }, item.label)))
       : '', h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
         'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
-      }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onInput: () => this.filterItemsWithTypeahead() }), this.allowClear &&
+      }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
+        this.navigationItem = undefined;
+      }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
       (((_c = this.selectedLabels) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -677,13 +692,10 @@ export class Select {
         "target": undefined,
         "capture": false,
         "passive": false
-      }, {
-        "name": "keydown",
-        "method": "onKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
       }];
   }
 }
+__decorate([
+  OnListener('keydown', (self) => self.dropdownShow)
+], Select.prototype, "onKeyDown", null);
 //# sourceMappingURL=select.js.map