@siemens/ix 2.6.0 → 2.7.0

package/dist/collection/components/field-label/tests/field-label.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-label.ct.js","sourceRoot":"","sources":["../../../../src/components/field-label/tests/field-label.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACzD,MAAM,MAAM,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACxD,MAAM,MAAM,CACV,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAC5D,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAClC,MAAM,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CACxE,UAAU,CACX,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzC,MAAM,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AACrD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;IAE3B,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;AAC3C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAChC,CAAC,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,aAAa,CAAC,CAAC,OAAO,CACrE,CAAC,QAAQ,EAAE,EAAE;QACX,IAAI,CAAC,SAAS,QAAQ,0BAA0B,EAAE,KAAK,EAAE,EACvD,KAAK,EACL,IAAI,GACL,EAAE,EAAE;YACH,MAAM,KAAK,CAAC;;WAET,QAAQ,iBAAiB,QAAQ;OACrC,CAAC,CAAC;YACD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;YACpD,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;YAE3B,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACzC,MAAM,YAAY,GAChB,QAAQ,KAAK,aAAa;gBACxB,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;gBAC5B,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YACpC,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,QAAQ,0BAA0B,EAAE,KAAK,EAAE,EACvD,KAAK,EACL,IAAI,GACL,EAAE,EAAE;YACH,MAAM,KAAK,CAAC;WACT,QAAQ,sBAAsB,QAAQ;OAC1C,CAAC,CAAC;YAED,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACzC,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAEhD,MAAM,YAAY,GAAG,SAAS;iBAC3B,OAAO,CAAC,kBAAkB,CAAC;iBAC3B,OAAO,CAAC,gBAAgB,CAAC,CAAC;YAE7B,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;YAE3B,MAAM,YAAY,GAChB,QAAQ,KAAK,aAAa;gBACxB,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;gBAC5B,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAEpC,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5C,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;IAE3D,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7D,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CACjE,OAAO,EACP,sCAAsC,CACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9C,MAAM,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAExE,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACzD,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CACjE,OAAO,EACP,uCAAuC,CACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,KAAK,CAAC;;GAEX,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAEnE,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CACjE,OAAO,EACP,sCAAsC,CACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,uCAAuC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACtE,MAAM,KAAK,CAAC;;GAEX,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAE/D,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CACjE,OAAO,EACP,uCAAuC,CACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,uCAAuC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACtE,MAAM,KAAK,CAAC;;GAEX,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAEnE,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CACjE,OAAO,EACP,sCAAsC,CACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,2CAA2C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1E,MAAM,KAAK,CAAC;;GAEX,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAEnE,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CACjE,OAAO,EACP,uCAAuC,CACxC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-field-label>My Label</ix-field-label>`);\n  const fieldLabelElement = page.locator('ix-field-label');\n  await expect(fieldLabelElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldLabelElement.locator('label').locator('ix-typography')\n  ).toHaveClass(/typography-label/);\n  await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText(\n    'My Label'\n  );\n});\n\ntest('required', async ({ mount, page }) => {\n  await mount(`<ix-field-label required>MyLabel</ix-field-label>`);\n  const labelElement = page.locator('ix-field-label');\n  await expect(labelElement).toHaveText('MyLabel *');\n});\n\ntest('focus native input by label click', async ({ mount, page }) => {\n  await mount(`\n    <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n    <input data-testid=\"input\" id=\"input\" />\n  `);\n  const labelElement = page.locator('ix-field-label');\n  await labelElement.click();\n\n  const inputElement = page.getByTestId('input');\n  await expect(inputElement).toBeFocused();\n});\n\ntest.describe('click label', () => {\n  ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach(\n    (selector) => {\n      test(`focus ${selector} by external label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n        <${selector} id=\"input\"></${selector}>\n      `);\n        const labelElement = page.locator('ix-field-label');\n        await labelElement.click();\n\n        const component = page.locator(selector);\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n        await expect(focusElement).toBeFocused();\n      });\n\n      test(`focus ${selector} by embedded label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <${selector} label=\"MyLabel\"></${selector}>\n      `);\n\n        const component = page.locator(selector);\n        await expect(component).toHaveClass(/hydrated/);\n\n        const labelElement = component\n          .locator('ix-field-wrapper')\n          .locator('ix-field-label');\n\n        await labelElement.click();\n\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n\n        await expect(focusElement).toBeFocused();\n      });\n    }\n  );\n});\n\ntest('valid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label>LabelValid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).not.toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"label text\">valid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"invalid label text\" required>invalid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"label text\">valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"invalid label text\" required>valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n"]}
+{"version":3,"file":"field-label.ct.js","sourceRoot":"","sources":["../../../../src/components/field-label/tests/field-label.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-field-label>My Label</ix-field-label>`);\n  const fieldLabelElement = page.locator('ix-field-label');\n  await expect(fieldLabelElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldLabelElement.locator('label').locator('ix-typography')\n  ).toHaveClass(/typography-label/);\n  await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText(\n    'My Label'\n  );\n});\n\ntest('required', async ({ mount, page }) => {\n  await mount(`<ix-field-label required>MyLabel</ix-field-label>`);\n  const labelElement = page.locator('ix-field-label');\n  await expect(labelElement).toHaveText('MyLabel *');\n});\n\ntest('focus native input by label click', async ({ mount, page }) => {\n  await mount(`\n    <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n    <input data-testid=\"input\" id=\"input\" />\n  `);\n  const labelElement = page.locator('ix-field-label');\n  await labelElement.click();\n\n  const inputElement = page.getByTestId('input');\n  await expect(inputElement).toBeFocused();\n});\n\ntest.describe('click label', () => {\n  ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach(\n    (selector) => {\n      test(`focus ${selector} by external label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n        <${selector} id=\"input\"></${selector}>\n      `);\n        const labelElement = page.locator('ix-field-label');\n        await labelElement.click();\n\n        const component = page.locator(selector);\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n        await expect(focusElement).toBeFocused();\n      });\n\n      test(`focus ${selector} by embedded label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <${selector} label=\"MyLabel\"></${selector}>\n      `);\n\n        const component = page.locator(selector);\n        await expect(component).toHaveClass(/hydrated/);\n\n        const labelElement = component\n          .locator('ix-field-wrapper')\n          .locator('ix-field-label');\n\n        await labelElement.click();\n\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n\n        await expect(focusElement).toBeFocused();\n      });\n    }\n  );\n});\n\ntest('valid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label>LabelValid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).not.toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"label text\">valid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"invalid label text\" required>invalid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"label text\">valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"invalid label text\" required>invalid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n"]}

package/dist/collection/components/field-wrapper/field-wrapper.js

@@ -40,9 +40,9 @@ export class FieldWrapper {
             infoText: this.infoText,
             helperText: this.helperText,
         };
-        return (h(Host, { key: '3a1885ca13c1de17fdbb33eb6cde695cbdb3469e' }, this.label && (h("div", { key: '9e8c0a96fe7014feb6ac76473137183ba92e2ad1', class: "field-top" }, h("ix-field-label", { key: '923dec87ac02cf550400aba0bf929b95d8a271ed', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), h("div", { key: 'a6694ebd1d18d2411565960ff5f1e6ee900491e8', class: {
+        return (h(Host, { key: 'e572687360d706dbe987ecb2552b573fe4c4d5d4' }, this.label && (h("div", { key: 'c6373751bc6d7d90d7927661332a7ebe07ebe32c', class: "field-top" }, h("ix-field-label", { key: '5c0f33a101ca7fe85307dfb1bcca00583f7af505', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), h("div", { key: 'a0537918a05ae6cdb31fec15593310fe567f7f29', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, h("slot", { key: '302fcd87bd9cba38a3057b9a6542dbaed9d16bbc' })), h("div", { key: '8f5c9836963e0df796388b8dac20db7289ea067e', class: 'field-bottom' }, !this.showTextAsTooltip && renderHelperText(textOptions), h("div", { key: '620bf3f6730971ee840744fce7b8a7de2d2f12a9', class: "bottom-right" }, h("slot", { key: '7cff3c8d8f550a88e4bccacf6b71547edb89b0a7', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: '9041af539fd29c6fd2e8e3e4a00daa8e2c15ed22', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, renderHelperText(textOptions)))));
+            }, ref: this.slotRef }, h("slot", { key: '9ac61601a8bb8486fb195007affb95efd38a16cc' })), h("div", { key: 'a2ce3a990499d4f44e908504e72e8e38ec6f9bf0', class: 'field-bottom' }, !this.showTextAsTooltip && renderHelperText(textOptions), h("div", { key: '83e807d409fdc1a85f0b4b5533d3f8925ff35fec', class: "bottom-right" }, h("slot", { key: '87702e1c61e5c242a6085bcc4db7f84ee325dacd', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: '66a20de650c5ea67e804f787bd729ac02078ed42', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, renderHelperText(textOptions)))));
     }
     static get is() { return "ix-field-wrapper"; }
     static get encapsulation() { return "shadow"; }
@@ -63,7 +63,7 @@ export class FieldWrapper {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -80,7 +80,7 @@ export class FieldWrapper {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -97,7 +97,7 @@ export class FieldWrapper {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -114,7 +114,7 @@ export class FieldWrapper {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -131,7 +131,7 @@ export class FieldWrapper {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -148,7 +148,7 @@ export class FieldWrapper {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -273,7 +273,7 @@ export class FieldWrapper {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -289,8 +289,8 @@ export class FieldWrapper {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "MakeRef<HTMLElement>",
-                    "resolved": "{ (ref: HTMLElement): void; current: HTMLElement; waitForCurrent(): Promise<HTMLElement>; }",
+                    "original": "| MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>",
+                    "resolved": "undefined | { (ref: HTMLElement | null | undefined): void; current: HTMLElement | null; waitForCurrent(): Promise<HTMLElement>; } | { (ref: HTMLInputElement | null | undefined): void; current: HTMLInputElement | null; waitForCurrent(): Promise<HTMLInputElement>; } | { (ref: HTMLTextAreaElement | null | undefined): void; current: HTMLTextAreaElement | null; waitForCurrent(): Promise<HTMLTextAreaElement>; }",
                     "references": {
                         "MakeRef": {
                             "location": "import",
@@ -300,6 +300,14 @@ export class FieldWrapper {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        },
+                        "HTMLTextAreaElement": {
+                            "location": "global",
+                            "id": "global::HTMLTextAreaElement"
                         }
                     }
                 },

package/dist/collection/components/field-wrapper/field-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.js","sourceRoot":"","sources":["../../../src/components/field-wrapper/field-wrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAW,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAElE,gBAAgB;AAMhB,MAAM,OAAO,YAAY;;QAyEN,YAAO,GAAG,OAAO,EAAkB,CAAC;;;;;;;yBArCxB,KAAK;uBAKP,KAAK;sBAKN,KAAK;yBAKF,KAAK;iCAKG,KAAK;wBAKd,KAAK;;;;IAcjC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC;QACF,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,CACb,4DAAK,KAAK,EAAC,WAAW;gBACpB,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,IAExB,IAAI,CAAC,KAAK,CACI,CACb,CACP;YACD,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;iBACrB,EACD,GAAG,EAAE,IAAI,CAAC,OAAO;gBAEjB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAE,cAAc;gBACvB,CAAC,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,WAAW,CAAC;gBACzD,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACF;YAEL,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,IAAI,CAC7D,mEACE,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,EAClC,SAAS,EAAE,GAAG,EACd,SAAS,EAAC,QAAQ,IAEjB,gBAAgB,CAAC,WAAW,CAAC,CACnB,CACd,CACI,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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?: MakeRef<HTMLElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"field-wrapper.js","sourceRoot":"","sources":["../../../src/components/field-wrapper/field-wrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAW,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAElE,gBAAgB;AAMhB,MAAM,OAAO,YAAY;;QA4EN,YAAO,GAAG,OAAO,EAAkB,CAAC;;;;;;;yBAxCxB,KAAK;uBAKP,KAAK;sBAKN,KAAK;yBAKF,KAAK;iCAKG,KAAK;wBAKd,KAAK;;;;IAiBjC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC;QACF,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,CACb,4DAAK,KAAK,EAAC,WAAW;gBACpB,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,IAExB,IAAI,CAAC,KAAK,CACI,CACb,CACP;YACD,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;iBACrB,EACD,GAAG,EAAE,IAAI,CAAC,OAAO;gBAEjB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAE,cAAc;gBACvB,CAAC,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,WAAW,CAAC;gBACzD,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACF;YAEL,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,IAAI,CAC7D,mEACE,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,EAClC,SAAS,EAAE,GAAG,EACd,SAAS,EAAC,QAAQ,IAEjB,gBAAgB,CAAC,WAAW,CAAC,CACnB,CACd,CACI,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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/filter-chip/filter-chip.js

@@ -18,7 +18,7 @@ export class FilterChip {
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: 'cdcaa5bf0debe46267e41dc32888abd11739b532', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '3ebd0c04ea93dff78d568bbec5b0c3d811953bc2', class: "slot-container" }, h("slot", { key: 'd549c6c2fb2d5f221a4bf9f2b1d55eaddffc85b4' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+        return (h(Host, { key: 'e2bd061568d76abd274b622bbee0ebe564ef3b62', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, h("div", { key: '95fcf42b92653882a9dfbc8fc221b46aeaef07b5', class: "slot-container" }, h("slot", { key: '6d8fc76fcae0910c59aa58a9147c1b625635b5e0' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
     }
     static get is() { return "ix-filter-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -93,6 +93,6 @@ export class FilterChip {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=filter-chip.js.map

package/dist/collection/components/filter-chip/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;wBAMF,KAAK;wBAML,KAAK;;IAOhB,YAAY,CAAC,KAAY;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW;YAE1B,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAa,CACT;YACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClC,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAE,aAAa,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,CACnB,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;IACJ,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} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   * @since 2.0.0\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.el.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon={'close-small'}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;wBAMF,KAAK;wBAML,KAAK;;IAOhB,YAAY,CAAC,KAAY;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW;YAEnC,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAa,CACT;YACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClC,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAE,aAAa,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,CACnB,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;IACJ,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} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() hostElement!: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   * @since 2.0.0\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick!: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.hostElement.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon={'close-small'}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-tile/flip-tile.js

@@ -12,11 +12,12 @@ import { FlipTileState } from "./flip-tile-state";
 export class FlipTile {
     constructor() {
         this.ANIMATION_DURATION = 150;
+        this.contentItems = [];
         this.state = undefined;
         this.height = 15.125;
         this.width = 16;
         this.index = 0;
-        this.isFlipAnimationActive = undefined;
+        this.isFlipAnimationActive = false;
     }
     componentDidLoad() {
         this.observer = createMutationObserver(() => this.updateContentItems());
@@ -59,26 +60,26 @@ export class FlipTile {
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (h(Host, { key: '3c909b998962bd8d8882a8bdeffa657a588da20e', style: {
+        return (h(Host, { key: '753ce805c8792b014e40343df15d1a257ed1c8a1', style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: '0d19a6d08a9743693af22f8a58d9360bb8be347f', class: {
+            } }, h("div", { key: 'e5ff1efdabea6b280f84b9090fed970cab6bcbee', class: {
                 'flip-tile-container': true,
                 info: this.state === FlipTileState.Info,
                 warning: this.state === FlipTileState.Warning,
                 alarm: this.state === FlipTileState.Alarm,
                 primary: this.state === FlipTileState.Primary,
                 'flip-animation-active': this.isFlipAnimationActive,
-            } }, h("div", { key: '2bef4a357ce8884aac9b9d108bc8923b78246d7f', class: "flip-tile-header" }, h("div", { key: '80ea0fabee17ce15ac65e76359c32663df1d23e3', class: "header-slot-container text-l-title" }, h("slot", { key: '7fce430f5db26512891764c054a8508665fc1902', name: "header" })), h("ix-icon-button", { key: 'cd8f7eb45dbf997a3b3844cc574fa34ab7560baa', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: 'ecf67fbdb00a79cf14cbf601ed0b73951acc3b77', class: "content-container" }, h("slot", { key: 'a37af70dc48c04af0831801f50be9d3f3ea43c84' })), h("div", { key: 'fff7efb3a2c93d9bde909d99f08812a3af6b3ba0', class: {
+            } }, h("div", { key: 'd69567c1f8068684d8047c11ecbc2c698d416ca8', class: "flip-tile-header" }, h("div", { key: '5a7f749bb17f00f34ce0c1c15a8c17aa9c026b69', class: "header-slot-container text-l-title" }, h("slot", { key: '1d5422159ca027167360cf3b8294b6a5f8808404', name: "header" })), h("ix-icon-button", { key: '239410d1f28ee549b192a3576429daa12685c32c', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '3578e5d085f50aee7c0dd7e94fdc9b8a3d2506eb', class: "content-container" }, h("slot", { key: 'adb2148071277964c31a15c5fd17b00992a8c21c' })), h("div", { key: '34bbfaf3907aa77d59afe7b0a6d148fa9da37074', class: {
                 footer: true,
                 'contrast-light': this.state === FlipTileState.Warning,
                 'contrast-dark': this.state === FlipTileState.Info ||
                     this.state === FlipTileState.Alarm,
-            } }, h("slot", { key: 'd5306fe3d6bef7d4c2b721a97f49131f6ba79ac0', name: "footer" })))));
+            } }, h("slot", { key: '2649e545cf492d73e15c3a8c216767d6352a6529', name: "footer" })))));
     }
     static get is() { return "ix-flip-tile"; }
     static get encapsulation() { return "shadow"; }
@@ -99,7 +100,7 @@ export class FlipTile {
                 "mutable": false,
                 "complexType": {
                     "original": "FlipTileState",
-                    "resolved": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning",
+                    "resolved": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning | undefined",
                     "references": {
                         "FlipTileState": {
                             "location": "import",
@@ -109,7 +110,7 @@ export class FlipTile {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Variation of the Flip"

package/dist/collection/components/flip-tile/flip-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-tile.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile.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 */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  @State() index = 0;\n  @State() isFlipAnimationActive: boolean;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement>;\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.updateContentVisibility(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={'eye'}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-tile.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile.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 */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state?: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  @State() index = 0;\n  @State() isFlipAnimationActive: boolean = false;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement> = [];\n  private observer?: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.updateContentVisibility(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={'eye'}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-tile-content/flip-tile-content.js

@@ -12,7 +12,7 @@ export class FlipTileContent {
         this.contentVisible = false;
     }
     render() {
-        return h(Host, { key: '80b53319120d77c589bdd273d29999df685e9aa9' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: '4de2b68fabbf622640f0b960d9e87aaa2254f623' }, this.contentVisible ? h("slot", null) : null);
     }
     static get is() { return "ix-flip-tile-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group-context-menu.js

@@ -37,7 +37,7 @@ export class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '8ca41b44ac2bc8963ddcb6ab826132358064d77f' }, h("ix-icon-button", { key: '4fbb61b89a762941489e4c279a5a38f84448d362', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '566ef77c6ed9e9d4281dc28cbb1bfb124335a806', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: 'd45b69098ce3f502ce7dd34ae16d83393d4bde9f' }, h("ix-icon-button", { key: '5dfb6b0781db8bc095145e77c20fd72fb8ed85af', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '0c0d0b119f95122c5b976f882ea9036f6598381a', onSlotchange: () => this.onSlotChange() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-context-menu.js","sourceRoot":"","sources":["../../../src/components/group/group-context-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;IAC3C,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,uEACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ;YAClB,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,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 { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon={'context-menu'}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"group-context-menu.js","sourceRoot":"","sources":["../../../src/components/group/group-context-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;IAC3C,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,uEACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ;YAClB,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,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 { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon={'context-menu'}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/group/group.js

@@ -121,27 +121,27 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: 'e3dc08bdd081992f3e104d2694289cffdd00e2d5' }, h("div", { key: 'dd9ae49a4772bca8c59b7dd30ae51bbfcf28e67a', class: {
+        return (h(Host, { key: 'ba5dacbded59627971ce06abe0536f1fb11e1ac6' }, h("div", { key: 'b8271e148a69c0dba1daa12f9fc3474c4dd7725c', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'bdd3e57474c382203ac92130db6aac7e5a091088', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'c53eeccfc402a6376b6ecd1130355428850af59b', class: {
+            }, tabindex: "0" }, h("div", { key: 'a7f328cbbd30054d7381e8164d73feb73232874a', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'ebb68beb1559541ba1324c10ca50bb978a8f1f30', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: 'f45b5cb472ac2842093e117eddebaa9f31cf4105', class: "btn-expand-header" }, h("ix-icon", { key: '50132cef721b918beacb9c94d6eb3536d8a35f56', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: 'd65309e476a3789116a87009238659d0c28f659b', class: "btn-expand-header" }, h("ix-icon", { key: 'bd37fc8491bc0a755755074ea5822c8bc68ef0ac', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: '274809a5b36d4a53aac997179490e61611b615e7', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '3d0437fc04c0153e5df963cd90372f18e2b26446', name: "header" }))), h("ix-group-context-menu", { key: '2de378c24367eeca11a58946021fad53f5b8dc81' }, h("slot", { key: '4a46b76d48333986d6ee3b76278fc7b4bb1c3242', name: "dropdown" }))), h("div", { key: '5fc1aa340e95af877901c53c2546fe094017da89', class: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (event) => this.onExpandClick(event) })), h("div", { key: '8bbba19917b63556b609479d3dc8a1e1fcf7526c', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '62d1ebdd6d3fce5c3847bdf90a71cdf2837010ce', name: "header" }))), h("ix-group-context-menu", { key: '34c18ddda5c2ca757fe89d4060fd6201e09ae15f' }, h("slot", { key: '97bf0c691865419cb13c25ab4c1eaa25dd79ac8b', name: "dropdown" }))), h("div", { key: '7e39df1d6867d596871a776e7c1b05c8d643078d', class: {
                 'group-content': true,
-            } }, h("div", { key: '7ba0a9e6189940dc954ce8d2a2727b1afcf73b92', style: {
+            } }, h("div", { key: '98cad46478ad8be987c6dc6e944a7b7f550badb4', style: {
                 display: this.collapsed ? 'none' : 'contents',
-            } }, h("slot", { key: '980f2fd4380a6921e1ce6a5a601b255bd816ef7c', onSlotchange: () => {
+            } }, h("slot", { key: '247e5fd3ad89462835d4dff5763861def669d6e2', onSlotchange: () => {
                 var _a;
                 const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '0d9ecd669ba5f14d219578289853b91133c4dc43', suppressSelection: true, focusable: false, class: {
+            } }), h("ix-group-item", { key: 'e058e81b85f5388522b9255bcc68398677d73e5a', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, h("slot", { key: '29d5b1440855ad87320fa79c60657f2b4c6e6a0c', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, h("slot", { key: 'a2c572c20cde75e922bd69f7c467b5f4109c2322', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }
@@ -180,7 +180,7 @@ export class Group {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -197,7 +197,7 @@ export class Group {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -250,7 +250,7 @@ export class Group {
                 "mutable": true,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -1 +1 @@
-{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header?: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index?: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup!: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem!: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged!: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  @Watch('selected')\n  selectedChanged(newSelected: boolean) {\n    if (newSelected === false) {\n      this.changeItemIndex();\n    }\n  }\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot?.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    const oldCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n    const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n\n    if (defaultPrevented) {\n      this.collapsed = oldCollapsed;\n    }\n  }\n\n  private onHeaderClick(event: Event) {\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n      return;\n    }\n\n    this.changeHeaderSelection(!this.selected);\n    this.changeItemIndex();\n  }\n\n  private changeHeaderSelection(newSelection: boolean) {\n    const oldIsHeaderSelected = this.selected;\n    const newIsHeaderSelected = newSelection;\n    this.selected = newIsHeaderSelected;\n    const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n    if (defaultPrevented) {\n      this.selected = oldIsHeaderSelected;\n      return;\n    }\n  }\n\n  private changeItemIndex(index?: number) {\n    const oldIndex = this.index;\n    const newIndex = index === this.index ? undefined : index;\n\n    if (this.index === newIndex) {\n      return;\n    }\n\n    this.index = newIndex;\n    const { defaultPrevented } = this.selectItem.emit(newIndex);\n    if (defaultPrevented) {\n      this.index = oldIndex;\n      return;\n    }\n\n    const items = this.groupItems;\n    items.forEach((item, i) => {\n      item.selected = i === this.index;\n    });\n\n    this.itemSelected = items.some((item) => item.selected);\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot?.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n    if (!this.groupContent) {\n      return;\n    }\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Listen('selectedChanged')\n  onItemClicked(event: CustomEvent) {\n    if (event.target instanceof HTMLElement) {\n      const item = event.target as HTMLIxGroupItemElement;\n      const index = this.groupItems.indexOf(item);\n      this.changeItemIndex(index);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot?.querySelector(\n                    'slot:not([name])'\n                  );\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,OAAO,KAAK;;QA4DR,aAAQ,GAAqB,IAAK,CAAC;uCAtDT,KAAK;;;yBAea,IAAI;wBAKL,KAAK;;mCAW1B,KAAK;4BAiBX,KAAK;wBACT,IAAI,CAAC,UAAU,CAAC,MAAM;6BACjB,KAAK;uCAEK,KAAK;;IAKxC,eAAe,CAAC,WAAoB;QAClC,IAAI,WAAW,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAC5D,CAAC;IACJ,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAChE,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;;QACd,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtE,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAChC,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB,CAAC,YAAqB;QACjD,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1C,MAAM,mBAAmB,GAAG,YAAY,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,mBAAmB,CAAC;QACpC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAExE,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,mBAAmB,CAAC;YACpC,OAAO;QACT,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAc;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;QAE1D,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5D,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1D,CAAC;IAEO,YAAY;;QAClB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CACrD,qBAAqB,CACtB,CAAC;QAEF,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,aAAa,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,GAAG,EAAE;YAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE;YACvC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,KAAkB;QAC9B,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE,CAAC;YACxC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAgC,CAAC;YACpD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,EACD,QAAQ,EAAC,GAAG;gBAEZ,4DACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;oBAErC,4DACE,KAAK,EAAE;4BACL,kCAAkC,EAAE,IAAI;4BACxC,gDAAgD,EAC9C,IAAI,CAAC,YAAY;yBACpB,GACI;oBACP,4DAAK,KAAK,EAAC,mBAAmB;wBAC5B,+EACc,uBAAuB,EACnC,KAAK,EAAE;gCACL,MAAM,EAAE,CAAC,IAAI,CAAC,uBAAuB;6BACtC,EACD,IAAI,EACF,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,EAE/D,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAC3C,CACP;oBAEN,4DAAK,KAAK,EAAC,sBAAsB;wBAC9B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACb,WAAK,KAAK,EAAC,8BAA8B;4BACvC,WAAK,KAAK,EAAC,oBAAoB;gCAC7B,YAAM,KAAK,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,MAAM,CAAQ,CAC1C;4BACN,WAAK,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,IAC/C,IAAI,CAAC,SAAS,CACX,CACF,CACP,CAAC,CAAC,CAAC,IAAI;wBACR,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;gBACN;oBACE,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACP,CACpB;YACN,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;iBACtB;gBAED,4DACE,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;qBAC9C;oBAED,6DACE,YAAY,EAAE,GAAG,EAAE;;4BACjB,MAAM,IAAI,GACR,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CACxC,kBAAkB,CACnB,CAAC;4BACJ,IAAI,CAAC,uBAAuB,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC1D,CAAC,GACK;oBACR,sEACE,iBAAiB,EAAE,IAAI,EACvB,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE;4BACL,MAAM,EAAE,IAAI;4BACZ,gBAAgB,EAAE,IAAI,CAAC,aAAa;yBACrC;wBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GACjC,CACM,CACZ,CACF,CACD,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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header?: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index?: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup!: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem!: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged!: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  @Watch('selected')\n  selectedChanged(newSelected: boolean) {\n    if (newSelected === false) {\n      this.changeItemIndex();\n    }\n  }\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot?.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    const oldCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n    const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n\n    if (defaultPrevented) {\n      this.collapsed = oldCollapsed;\n    }\n  }\n\n  private onHeaderClick(event: Event) {\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n      return;\n    }\n\n    this.changeHeaderSelection(!this.selected);\n    this.changeItemIndex();\n  }\n\n  private changeHeaderSelection(newSelection: boolean) {\n    const oldIsHeaderSelected = this.selected;\n    const newIsHeaderSelected = newSelection;\n    this.selected = newIsHeaderSelected;\n    const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n    if (defaultPrevented) {\n      this.selected = oldIsHeaderSelected;\n      return;\n    }\n  }\n\n  private changeItemIndex(index?: number) {\n    const oldIndex = this.index;\n    const newIndex = index === this.index ? undefined : index;\n\n    if (this.index === newIndex) {\n      return;\n    }\n\n    this.index = newIndex;\n    const { defaultPrevented } = this.selectItem.emit(newIndex);\n    if (defaultPrevented) {\n      this.index = oldIndex;\n      return;\n    }\n\n    const items = this.groupItems;\n    items.forEach((item, i) => {\n      item.selected = i === this.index;\n    });\n\n    this.itemSelected = items.some((item) => item.selected);\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot?.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n    if (!this.groupContent) {\n      return;\n    }\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Listen('selectedChanged')\n  onItemClicked(event: CustomEvent) {\n    if (event.target instanceof HTMLElement) {\n      const item = event.target as HTMLIxGroupItemElement;\n      const index = this.groupItems.indexOf(item);\n      this.changeItemIndex(index);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(event: Event) => this.onExpandClick(event)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot?.querySelector(\n                    'slot:not([name])'\n                  );\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/group-item/group-item.js

@@ -21,9 +21,9 @@ export class GroupItem {
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'dcd397f79a186587a57fc449ac788f41fa23d10b', class: {
+        return (h(Host, { key: 'bdade798c7b506d739029a27c9b73a90f101bc0e', class: {
                 selected: this.selected && !this.suppressSelection,
-            } }, h("button", { key: 'a0f56d039ab36de73b80f60ccca09ec8bb399bc0', tabindex: this.focusable ? 0 : -1 }, h("div", { key: 'b6b2d08cd9b58287baa2bfa37fa04ae70ee87cac', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '3bde77249566d9242e510dafcac7c57c4f6b2211' }))));
+            } }, h("button", { key: 'aa88b5a436cc197341a9afdf7a5cd0e522fd325a', tabindex: this.focusable ? 0 : -1 }, h("div", { key: 'c5e7c0aeadc32db6a8c6b0deb262620aaaff1fa1', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: 'a6fa0189ef24b3ce6c593ee99f2df83263b97053' }))));
     }
     static get is() { return "ix-group-item"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class GroupItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -61,7 +61,7 @@ export class GroupItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -78,7 +78,7 @@ export class GroupItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -149,7 +149,7 @@ export class GroupItem {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,