@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522

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

@@ -0,0 +1,309 @@
+import { Host, h } from "@stencil/core";
+import { makeRef } from "../utils/make-ref";
+import { renderHelperText } from "./helper-text-util";
+/** @internal */
+export class FieldWrapper {
+    constructor() {
+        this.slotRef = makeRef();
+        this.helperText = undefined;
+        this.label = undefined;
+        this.invalidText = undefined;
+        this.validText = undefined;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.showTextAsTooltip = false;
+        this.required = false;
+        this.htmlForLabel = undefined;
+        this.controlRef = undefined;
+    }
+    render() {
+        const textOptions = {
+            invalidText: this.invalidText,
+            isInvalid: this.isInvalid,
+            isValid: this.isValid,
+            validText: this.validText,
+            isWarning: this.isWarning,
+            warningText: this.warningText,
+            isInfo: this.isInfo,
+            infoText: this.infoText,
+            helperText: this.helperText,
+        };
+        return (h(Host, { key: 'abac5f314a561b000189c733e3f91a371dc3e4b7' }, h("div", { key: '007488d9b928ee7b5ad2f56a80860d32306ec77f', class: "field-top" }, this.label && (h("ix-field-label", { key: '13267ade8d55d0233160e9f796616d2e65999a34', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef }, this.label)), h("slot", { key: '6b7c58e1ff035f8f3cfa4e0b7b0d7f9cbbd9c572', name: "label" }), h("slot", { key: 'f174f3f66045d74ad4e31d44dca9bf05f4e33db4', name: "top-right" })), h("div", { key: '08216ad8711e4df6df1177392fba6445b31fab87', class: {
+                'slot-wrapper': true,
+            }, ref: this.slotRef }, h("slot", { key: '10222a8ce126fadcf97e41610fc0b72f52330bd0' })), h("div", { key: '942bfe9452312713d3d63d56c4eede5711af4fde', class: 'field-bottom' }, !this.showTextAsTooltip && renderHelperText(textOptions), h("div", { key: '9ec72ec64106298218deb4d5be627a325e579936', class: "bottom-right" }, h("slot", { key: '5ec6a10b820193843cb29d1b09c77d3793799b35', name: "bottom-right" }))), this.showTextAsTooltip === true && (h("ix-tooltip", { key: '93eb798d342a4187e521f1072cf34f1e5cb9b5da', for: this.slotRef.waitForCurrent(), showDelay: 500 }, renderHelperText(textOptions)))));
+    }
+    static get is() { return "ix-field-wrapper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["field-wrapper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["field-wrapper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show text below the field component"
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the field component"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text for the field component"
+                },
+                "attribute": "invalid-text",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valid text for the field component"
+                },
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Info text for the field component"
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Warning text for the field component"
+                },
+                "attribute": "warning-text",
+                "reflect": false
+            },
+            "isInvalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is the field component invalid"
+                },
+                "attribute": "is-invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isValid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is the field component valid"
+                },
+                "attribute": "is-valid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isInfo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is the field component info"
+                },
+                "attribute": "is-info",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isWarning": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is the field component warning"
+                },
+                "attribute": "is-warning",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show helper, error, info, warning text as tooltip"
+                },
+                "attribute": "show-text-as-tooltip",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show label as required"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "htmlForLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the form element that the label is associated with"
+                },
+                "attribute": "html-for-label",
+                "reflect": false
+            },
+            "controlRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MakeRef<HTMLElement>",
+                    "resolved": "{ (ref: HTMLElement): void; current: HTMLElement; waitForCurrent(): Promise<HTMLElement>; }",
+                    "references": {
+                        "MakeRef": {
+                            "location": "import",
+                            "path": "../utils/make-ref",
+                            "id": "src/components/utils/make-ref.ts::MakeRef"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The control element that the label is associated with"
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=field-wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-wrapper.js","sourceRoot":"","sources":["../../../src/components/field-wrapper/field-wrapper.tsx"],"names":[],"mappings":"AAAA,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,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,gBAAgB;AAMhB,MAAM,OAAO,YAAY;;QAyEf,YAAO,GAAG,OAAO,EAAkB,CAAC;;;;;;;yBArCf,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;YACH,4DAAK,KAAK,EAAC,WAAW;gBACnB,IAAI,CAAC,KAAK,IAAI,CACb,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,UAAU,EAAE,IAAI,CAAC,UAAU,IAE1B,IAAI,CAAC,KAAK,CACI,CAClB;gBACD,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,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;YACL,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,CAClC,mEAAY,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,IAC3D,gBAAgB,CAAC,WAAW,CAAC,CACnB,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/field';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { 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 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        <div class=\"field-top\">\n          {this.label && (\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n            >\n              {this.label}\n            </ix-field-label>\n          )}\n          <slot name=\"label\"></slot>\n          <slot name=\"top-right\"></slot>\n        </div>\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        {this.showTextAsTooltip === true && (\n          <ix-tooltip for={this.slotRef.waitForCurrent()} showDelay={500}>\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/field-wrapper/helper-text-util.js

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h } from "@stencil/core";
+import { iconError, iconInfo, iconSuccess, iconWarning, } from "@siemens/ix-icons/icons";
+export function renderHelperText({ isInvalid, invalidText, isWarning, warningText, isInfo, infoText, isValid, validText, helperText, }) {
+    if (isInvalid && invalidText !== undefined) {
+        return (h("ix-typography", { color: "alarm", class: "bottom-text" }, h("ix-icon", { class: "text-icon invalid", name: iconError, size: "16" }), invalidText));
+    }
+    if (isWarning && warningText !== undefined) {
+        return (h("ix-typography", { color: "std", class: "bottom-text" }, h("ix-icon", { class: "text-icon warning", name: iconWarning, size: "16" }), warningText));
+    }
+    if (isInfo && infoText !== undefined) {
+        return (h("ix-typography", { color: "std", class: "bottom-text" }, h("ix-icon", { class: "text-icon info", name: iconInfo, size: "16" }), infoText));
+    }
+    if (isValid && validText !== undefined) {
+        return (h("ix-typography", { color: "std", class: "bottom-text" }, h("ix-icon", { class: "text-icon valid", name: iconSuccess, size: "16" }), validText));
+    }
+    return (helperText && (h("ix-typography", { class: "bottom-text", color: "soft" }, helperText)));
+}
+//# sourceMappingURL=helper-text-util.js.map

package/dist/collection/components/field-wrapper/helper-text-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper-text-util.js","sourceRoot":"","sources":["../../../src/components/field-wrapper/helper-text-util.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAEjC,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,GAWX;IACC,IAAI,SAAS,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC3C,OAAO,CACL,qBAAe,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,aAAa;YAC9C,eAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,GAAW;YAEvE,WAAW,CACE,CACjB,CAAC;IACJ,CAAC;IAED,IAAI,SAAS,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC3C,OAAO,CACL,qBAAe,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;YAC5C,eACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,IAAI,GACA;YACV,WAAW,CACE,CACjB,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QACrC,OAAO,CACL,qBAAe,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;YAC5C,eAAS,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAW;YACnE,QAAQ,CACK,CACjB,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QACvC,OAAO,CACL,qBAAe,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;YAC5C,eAAS,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC,IAAI,GAAW;YACvE,SAAS,CACI,CACjB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,UAAU,IAAI,CACZ,qBAAe,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,MAAM,IAC5C,UAAU,CACG,CACjB,CACF,CAAC;AACJ,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 { h } from '@stencil/core';\nimport {\n  iconError,\n  iconInfo,\n  iconSuccess,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\n\nexport function renderHelperText({\n  isInvalid,\n  invalidText,\n  isWarning,\n  warningText,\n  isInfo,\n  infoText,\n  isValid,\n  validText,\n  helperText,\n}: {\n  isInvalid: boolean;\n  invalidText?: string;\n  isWarning: boolean;\n  warningText?: string;\n  isInfo: boolean;\n  infoText?: string;\n  isValid: boolean;\n  validText?: string;\n  helperText?: string;\n}) {\n  if (isInvalid && invalidText !== undefined) {\n    return (\n      <ix-typography color=\"alarm\" class=\"bottom-text\">\n        <ix-icon class=\"text-icon invalid\" name={iconError} size=\"16\"></ix-icon>\n\n        {invalidText}\n      </ix-typography>\n    );\n  }\n\n  if (isWarning && warningText !== undefined) {\n    return (\n      <ix-typography color=\"std\" class=\"bottom-text\">\n        <ix-icon\n          class=\"text-icon warning\"\n          name={iconWarning}\n          size=\"16\"\n        ></ix-icon>\n        {warningText}\n      </ix-typography>\n    );\n  }\n\n  if (isInfo && infoText !== undefined) {\n    return (\n      <ix-typography color=\"std\" class=\"bottom-text\">\n        <ix-icon class=\"text-icon info\" name={iconInfo} size=\"16\"></ix-icon>\n        {infoText}\n      </ix-typography>\n    );\n  }\n\n  if (isValid && validText !== undefined) {\n    return (\n      <ix-typography color=\"std\" class=\"bottom-text\">\n        <ix-icon class=\"text-icon valid\" name={iconSuccess} size=\"16\"></ix-icon>\n        {validText}\n      </ix-typography>\n    );\n  }\n\n  return (\n    helperText && (\n      <ix-typography class=\"bottom-text\" color=\"soft\">\n        {helperText}\n      </ix-typography>\n    )\n  );\n}\n"]}

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

@@ -0,0 +1,63 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+import { test } from "../../../tests/utils/test/index";
+test('renders', async ({ mount, page }) => {
+    await mount(`
+    <ix-field-wrapper helper-text="Helper text">
+      <div style="position: relative; width: 100%; height: 2rem; background: red;">Content</div>
+    </ix-field-wrapper>
+    `);
+    const fieldWrapperElement = page.locator('ix-field-wrapper');
+    await expect(fieldWrapperElement).toHaveClass(/hydrated/);
+    await expect(fieldWrapperElement
+        .locator('.field-bottom')
+        .locator('ix-typography.bottom-text')
+        .filter({ hasText: 'Helper text' })).toHaveText('Helper text');
+});
+test('show text dependent on provided state', async ({ mount, page }) => {
+    await mount(`
+    <ix-field-wrapper helper-text="Helper text" invalid-text="invalid text" is-invalid>
+      <div style="position: relative; width: 100%; height: 2rem; background: red;">Content</div>
+    </ix-field-wrapper>
+    `);
+    const fieldWrapperElement = page.locator('ix-field-wrapper');
+    await expect(fieldWrapperElement).toHaveClass(/hydrated/);
+    await expect(fieldWrapperElement
+        .locator('.field-bottom')
+        .locator('ix-typography.bottom-text')
+        .filter({ hasText: 'invalid text' })).toHaveText('invalid text');
+});
+test('show text by tooltip', async ({ mount, page }) => {
+    await mount(`
+    <ix-field-wrapper helper-text="Helper text" invalid-text="invalid text" show-text-as-tooltip>
+      <div style="position: relative; width: 100%; height: 2rem; background: red;">Content</div>
+    </ix-field-wrapper>
+    `);
+    const fieldWrapperElement = page.locator('ix-field-wrapper');
+    await expect(fieldWrapperElement).toHaveClass(/hydrated/);
+    await page.mouse.move(10, 10);
+    const tooltip = fieldWrapperElement.locator('ix-tooltip');
+    await expect(tooltip).toBeVisible();
+    await expect(tooltip).toContainText('Helper text');
+});
+test('show text by tooltip invalid', async ({ mount, page }) => {
+    await mount(`
+    <ix-field-wrapper helper-text="Helper text" invalid-text="invalid text" is-invalid show-text-as-tooltip>
+      <div style="position: relative; width: 100%; height: 2rem; background: red;">Content</div>
+    </ix-field-wrapper>
+    `);
+    const fieldWrapperElement = page.locator('ix-field-wrapper');
+    await expect(fieldWrapperElement).toHaveClass(/hydrated/);
+    await page.mouse.move(10, 10);
+    const tooltip = fieldWrapperElement.locator('ix-tooltip');
+    await expect(tooltip).toBeVisible();
+    await expect(tooltip).toContainText('invalid text');
+});
+//# sourceMappingURL=field-wrapper.ct.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-wrapper.ct.js","sourceRoot":"","sources":["../../../../src/components/field-wrapper/tests/field-wrapper.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,CACT;;;;KAIC,CACF,CAAC;IACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,MAAM,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1D,MAAM,MAAM,CACV,mBAAmB;SAChB,OAAO,CAAC,eAAe,CAAC;SACxB,OAAO,CAAC,2BAA2B,CAAC;SACpC,MAAM,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CACtC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,uCAAuC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACtE,MAAM,KAAK,CACT;;;;KAIC,CACF,CAAC;IACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,MAAM,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1D,MAAM,MAAM,CACV,mBAAmB;SAChB,OAAO,CAAC,eAAe,CAAC;SACxB,OAAO,CAAC,2BAA2B,CAAC;SACpC,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CACvC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACrD,MAAM,KAAK,CACT;;;;KAIC,CACF,CAAC;IACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,MAAM,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE1D,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAE9B,MAAM,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;IACpC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;AACrD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,8BAA8B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7D,MAAM,KAAK,CACT;;;;KAIC,CACF,CAAC;IACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,MAAM,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE1D,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAE9B,MAAM,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;IACpC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AACtD,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(\n    `\n    <ix-field-wrapper helper-text=\"Helper text\">\n      <div style=\"position: relative; width: 100%; height: 2rem; background: red;\">Content</div>\n    </ix-field-wrapper>\n    `\n  );\n  const fieldWrapperElement = page.locator('ix-field-wrapper');\n  await expect(fieldWrapperElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldWrapperElement\n      .locator('.field-bottom')\n      .locator('ix-typography.bottom-text')\n      .filter({ hasText: 'Helper text' })\n  ).toHaveText('Helper text');\n});\n\ntest('show text dependent on provided state', async ({ mount, page }) => {\n  await mount(\n    `\n    <ix-field-wrapper helper-text=\"Helper text\" invalid-text=\"invalid text\" is-invalid>\n      <div style=\"position: relative; width: 100%; height: 2rem; background: red;\">Content</div>\n    </ix-field-wrapper>\n    `\n  );\n  const fieldWrapperElement = page.locator('ix-field-wrapper');\n  await expect(fieldWrapperElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldWrapperElement\n      .locator('.field-bottom')\n      .locator('ix-typography.bottom-text')\n      .filter({ hasText: 'invalid text' })\n  ).toHaveText('invalid text');\n});\n\ntest('show text by tooltip', async ({ mount, page }) => {\n  await mount(\n    `\n    <ix-field-wrapper helper-text=\"Helper text\" invalid-text=\"invalid text\" show-text-as-tooltip>\n      <div style=\"position: relative; width: 100%; height: 2rem; background: red;\">Content</div>\n    </ix-field-wrapper>\n    `\n  );\n  const fieldWrapperElement = page.locator('ix-field-wrapper');\n  await expect(fieldWrapperElement).toHaveClass(/hydrated/);\n\n  await page.mouse.move(10, 10);\n\n  const tooltip = fieldWrapperElement.locator('ix-tooltip');\n  await expect(tooltip).toBeVisible();\n  await expect(tooltip).toContainText('Helper text');\n});\n\ntest('show text by tooltip invalid', async ({ mount, page }) => {\n  await mount(\n    `\n    <ix-field-wrapper helper-text=\"Helper text\" invalid-text=\"invalid text\" is-invalid show-text-as-tooltip>\n      <div style=\"position: relative; width: 100%; height: 2rem; background: red;\">Content</div>\n    </ix-field-wrapper>\n    `\n  );\n  const fieldWrapperElement = page.locator('ix-field-wrapper');\n  await expect(fieldWrapperElement).toHaveClass(/hydrated/);\n\n  await page.mouse.move(10, 10);\n\n  const tooltip = fieldWrapperElement.locator('ix-tooltip');\n  await expect(tooltip).toBeVisible();\n  await expect(tooltip).toContainText('invalid text');\n});\n"]}

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

@@ -73,6 +73,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -18,7 +18,7 @@ export class FilterChip {
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: 'ab9555b6ab060074b79e61b6262821ce545e9e62', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '889e241f3ea192f23452f499934c4d0e7aee2cde', class: "slot-container" }, h("slot", { key: 'd48aea2e83bf484d77d13240dec464bac3a483fa' })), !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: 'bf35dffa46aa0bada710873d7c0c5fbf4d43f990', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '15ab4708d5b565fc01f9669749b5a69b195b5246', class: "slot-container" }, h("slot", { key: 'aaa388917c566ffa54b320a28eb9001ef3de8aa7' })), !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"; }

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

@@ -240,6 +240,12 @@ a {
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -59,26 +59,26 @@ export class FlipTile {
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (h(Host, { key: '0b942337cb77e1cb7727d016e3a9a571f86582de', style: {
+        return (h(Host, { key: '0153ae67288afb83571582bee8701e55429a0720', 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: '3c2b6418b48c676358608e08cd878f912327aa8a', class: {
+            } }, h("div", { key: 'ef31335be04716f2065115102920ae4fb1679b94', 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: 'bc46de76725d49e89f0d0b3fb30908bd84918b1b', class: "flip-tile-header" }, h("div", { key: 'c42c692b8f5e1d03eaa3b02c0344fc3766754522', class: "header-slot-container text-l-title" }, h("slot", { key: 'b382eb85bb86f8026aefb1e1679278ab36d3a141', name: "header" })), h("ix-icon-button", { key: 'a7fbd03314c3fc5973c84656265114aca26458ce', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '2902c41ee142c4185af4f01dfb9fd18a2180769e', class: "content-container" }, h("slot", { key: 'abe7abe1590d698591ce64b9072cb26e16935fab' })), h("div", { key: 'f265f08af13cac0f5a52750d45fd0d51e1d5fb52', class: {
+            } }, h("div", { key: '8498d95f84640bf2399f8d6c5356585415f4d5db', class: "flip-tile-header" }, h("div", { key: '474301d6d45c780d4eb6b4d0ab05b0cfe002924b', class: "header-slot-container text-l-title" }, h("slot", { key: '0c06ddeb0acfd559c203c58114dc3fdd44a2131f', name: "header" })), h("ix-icon-button", { key: '72af19152a7818b4935f158a2218161adabbc4c8', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '5079b00eed32d315d50fcfb9bdeb933306d7cf97', class: "content-container" }, h("slot", { key: '6b4f5b11016603866da6259000411875bb0577a7' })), h("div", { key: '18d2f316237de09f7c80f29c562fc815d5269103', class: {
                 footer: true,
                 'contrast-light': this.state === FlipTileState.Warning,
                 'contrast-dark': this.state === FlipTileState.Info ||
                     this.state === FlipTileState.Alarm,
-            } }, h("slot", { key: 'f95f6d923988154f23faef4780cfc34a332cb31b', name: "footer" })))));
+            } }, h("slot", { key: 'a54bb5bb92e8236a321c8bcb22560a0e680e8d51', name: "footer" })))));
     }
     static get is() { return "ix-flip-tile"; }
     static get encapsulation() { return "shadow"; }

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: '42fe2007b429b2791c5f0a43758d55d4429c3255' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: '28136d898c52eff8a891fcce92586c7dd1c1b369' }, this.contentVisible ? h("slot", null) : null);
     }
     static get is() { return "ix-flip-tile-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/layout-grid.js

@@ -17,12 +17,12 @@ export class LayoutGrid {
         this.columns = 12;
     }
     render() {
-        return (h(Host, { key: 'e04816c23d075d12ae1cf1cd935322b48c24e249', class: {
+        return (h(Host, { key: '93fd37b24ae81e5ac1cb1dd1c2ddb8a65875d41f', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: '5068a91f517f248963912a57ff0a0890cfee9410' })));
+            } }, h("slot", { key: '88e68a69f86b2a0998d1ac87a42614759349296a' })));
     }
     static get is() { return "ix-layout-grid"; }
     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: '288d46637e80e99a79a01e071d69a77582edf051' }, h("ix-icon-button", { key: '7c9ad1282215761c6d160799971114cc3533e30a', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: 'c80375c5028e87d03c5af3b3deaa45fa2958e11f', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: '91faa519a271c40f61260874a328628727a4e16b' }, h("ix-icon-button", { key: 'b167218e0cdf54bf73caa35140f62669661e4780', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '3992d4aeeacc8531d9d36c86c66d5da6584c5591', onSlotchange: () => this.onSlotChange() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,26 +101,26 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: '6b775c7d0b0184c3d33c46c2401b378c3b6c4c08' }, h("div", { key: '9a3c57add7b086b0223e8957e7863e0f0caa5c0b', class: {
+        return (h(Host, { key: '4888d4f143eae41b22c735d7e70675e4cc98a263' }, h("div", { key: 'f4322c8c7cb228fbd7b4e79595596490ec3a0247', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'ff7b3e3b0dd048cac13a13d892abaf3d9b12de08', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '1b60a84b9c98de13a498ab54e88f72c54fa3d35c', class: {
+            }, tabindex: "0" }, h("div", { key: 'cc68e18a9228791f448cd60181afe781761a8ded', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '99870dd564733e145fb6228694ac286a730519d7', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: 'bc128ad0a4fa2af31cbd03cb67fd8785f605bac1', class: "btn-expand-header" }, h("ix-icon", { key: '8fbfe095e0d37b74804e67c174b347cca9471f60', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: '9170c91393b766da346fefefe356fe5657238683', class: "btn-expand-header" }, h("ix-icon", { key: '866b6eff0a895c44d6e3c6005211aea9c631a7ab', "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: '78551a007fe0e0919f556742020a9d2d510d2fb0', 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: 'ad99eba2934c2a910e5260ac8f8c62f43319b674', name: "header" }))), h("ix-group-context-menu", { key: 'b4203f23bc8c19bd45ad088c6314c5bb03187932' }, h("slot", { key: '9b77656e2282afdfe7836c54bc970effb2c351f7', name: "dropdown" }))), h("div", { key: 'a26dd0dfac3d432920ba566dc5d2dc5776ea7fce', class: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: '0b9d6871de96105e22426005fa03e53e950b784b', 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: '7089ae587bbf2536284d3cf74db50d3fc712a6ec', name: "header" }))), h("ix-group-context-menu", { key: '37d26968c2abed424565271f08ab528f733ddf34' }, h("slot", { key: '2c60499cd925ac086af65874716dfb76316441e9', name: "dropdown" }))), h("div", { key: '7ba8e4d16530b794a08c7c9943d69582076b39d0', class: {
                 'group-content': true,
-            } }, h("div", { key: 'ba7fd9e27461fe30ed804e03d0e7b99b377f0dff', style: {
+            } }, h("div", { key: '6adcd8abe99fb17a26227762e9a34d674c7652be', style: {
                 display: this.collapsed ? 'none' : 'contents',
-            } }, h("slot", { key: 'e4ce555634eae2b89f64d18ce2220d6ec677baf1', onSlotchange: () => {
+            } }, h("slot", { key: '084b2acd63bda77dcf926859ab0186d3fb43ca2b', onSlotchange: () => {
                 const slot = this.hostElement.shadowRoot.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '1f50e8d0639ad719f84dd938e8c30f28856a2ee3', suppressSelection: true, focusable: false, class: {
+            } }), h("ix-group-item", { key: '426b49f0df0bc32c0bdd550ebc22bfc4608e70f5', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, h("slot", { key: '96a102b08e08ff95f0f56ddf06b6ff47efdbb89c', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, h("slot", { key: '91972d021ae8a52f38815eafbd532df1217de5ca', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,6 +75,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -24,10 +24,10 @@ export class GroupItem {
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'ec30959a56062acbad4443b9ca91fb8c99125b03', class: {
+        return (h(Host, { key: 'b4760747ee4ee151144eb9053c8513b4f4793ce5', class: {
                 selected: this.selected && !this.suppressSelection,
                 'suppress-selection': this.suppressSelection,
-            } }, h("button", { key: 'e29e098d709f657d5109ff840d54e84b7c645d28', tabindex: this.focusable ? 0 : -1 }, h("div", { key: 'd82048e82f3a9de77f1acb19f9500c475f400147', 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: '1cde0aba243ca5f3537ce589be9e44d3ba9e2494' }))));
+            } }, h("button", { key: '4b15db955d4b86689adeea7d250dc6aa50892a79', tabindex: this.focusable ? 0 : -1 }, h("div", { key: 'bd1b475fb73766ebeba146cae8f387af513db318', 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: 'a9c6d0549435095079fadf6275f08d71136206d5' }))));
     }
     static get is() { return "ix-group-item"; }
     static get encapsulation() { return "shadow"; }