@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1,363 @@
+/*
+ * 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 { Host, h } from "@stencil/core";
+import { makeRef } from "../utils/make-ref";
+import { hasAnyText, renderHelperText } from "./helper-text-util";
+/** @internal */
+export class FieldWrapper {
+    constructor() {
+        /**
+         * Is the field component invalid
+         */
+        this.isInvalid = false;
+        /**
+         * Is the field component valid
+         */
+        this.isValid = false;
+        /**
+         * Is the field component info
+         */
+        this.isInfo = false;
+        /**
+         * Is the field component warning
+         */
+        this.isWarning = false;
+        /**
+         * Show helper, error, info, warning text as tooltip
+         */
+        this.showTextAsTooltip = false;
+        /**
+         * Show label as required
+         */
+        this.required = false;
+        this.slotRef = makeRef();
+    }
+    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: '2dd925820a3b4fa7529956e90ad8df1268bd59d9' }, this.label && (h("div", { key: 'f70725574cea826e7c541a95de2a0d373fcb67f7', class: "field-top" }, h("ix-field-label", { key: 'b589dc77ba975991962c4e53e6344bc4bf5ececb', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), h("div", { key: 'e79a3c3631908b280521dd9d86cf6e1a2b879b72', class: {
+                'slot-wrapper': true,
+            }, ref: this.slotRef }, h("slot", { key: '6ee9b4b8656d366e1792b0eebbcb88968e39dfcf' })), h("div", { key: '0cffa6f40dbcfed07670b2730aeab71d0b2a42fa', class: 'field-bottom' }, !this.showTextAsTooltip && renderHelperText(textOptions), h("div", { key: '9ddbc2218a776d6b8a9b0a82ca1903ceca3253f8', class: "bottom-right" }, h("slot", { key: 'e03a7d476ea203967beae72fe4f1296d0656da17', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: 'a735c861da75636163beb5484909b51271a46297', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, 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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "html-for-label",
+                "reflect": false
+            },
+            "controlRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "| MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>",
+                    "resolved": "{ (ref: HTMLElement): void; current: HTMLElement; waitForCurrent(): Promise<HTMLElement>; } | { (ref: HTMLInputElement): void; current: HTMLInputElement; waitForCurrent(): Promise<HTMLInputElement>; } | { (ref: HTMLTextAreaElement): void; current: HTMLTextAreaElement; waitForCurrent(): Promise<HTMLTextAreaElement>; }",
+                    "references": {
+                        "MakeRef": {
+                            "location": "import",
+                            "path": "../utils/make-ref",
+                            "id": "src/components/utils/make-ref.ts::MakeRef"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        },
+                        "HTMLTextAreaElement": {
+                            "location": "global",
+                            "id": "global::HTMLTextAreaElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The control element that the label is associated with"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    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;;;;;;;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;IALzB;QAsCE;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;QAEjC;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAEhC;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,sBAAiB,GAAY,KAAK,CAAC;QAE3C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAejB,YAAO,GAAG,OAAO,EAAkB,CAAC;KAuDtD;IArDC,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/field-wrapper/helper-text-util.js

@@ -0,0 +1,29 @@
+/*
+ * 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 hasAnyText({ invalidText, warningText, infoText, validText, helperText, }) {
+    return invalidText || warningText || infoText || validText || helperText;
+}
+export function renderHelperText({ isInvalid, invalidText, isWarning, warningText, isInfo, infoText, isValid, validText, helperText, }) {
+    if (isInvalid && invalidText !== undefined) {
+        return (h("ix-typography", { textColor: "alarm", class: "bottom-text" }, h("ix-icon", { class: "text-icon invalid", name: iconError, size: "16" }), invalidText));
+    }
+    if (isWarning && warningText !== undefined) {
+        return (h("ix-typography", { textColor: "std", class: "bottom-text" }, h("ix-icon", { class: "text-icon warning", name: iconWarning, size: "16" }), warningText));
+    }
+    if (isInfo && infoText !== undefined) {
+        return (h("ix-typography", { textColor: "std", class: "bottom-text" }, h("ix-icon", { class: "text-icon info", name: iconInfo, size: "16" }), infoText));
+    }
+    if (isValid && validText !== undefined) {
+        return (h("ix-typography", { textColor: "std", class: "bottom-text" }, h("ix-icon", { class: "text-icon valid", name: iconSuccess, size: "16" }), validText));
+    }
+    return (helperText && (h("ix-typography", { class: "bottom-text", textColor: "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,UAAU,CAAC,EACzB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,UAAU,GAOX;IACC,OAAO,WAAW,IAAI,WAAW,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,CAAC;AAC3E,CAAC;AAED,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,SAAS,EAAC,OAAO,EAAC,KAAK,EAAC,aAAa;YAClD,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,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;YAChD,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,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;YAChD,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,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;YAChD,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,SAAS,EAAC,MAAM,IAChD,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 hasAnyText({\n  invalidText,\n  warningText,\n  infoText,\n  validText,\n  helperText,\n}: {\n  invalidText?: string;\n  warningText?: string;\n  infoText?: string;\n  validText?: string;\n  helperText?: string;\n}) {\n  return invalidText || warningText || infoText || validText || helperText;\n}\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 textColor=\"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 textColor=\"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 textColor=\"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 textColor=\"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\" textColor=\"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: 2025 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 { regressionTest } from "../../../tests/utils/test/index";
+regressionTest('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');
+});
+regressionTest('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');
+});
+regressionTest('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).toHaveClass(/visible/);
+    await expect(tooltip).toContainText('Helper text');
+});
+regressionTest('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).toHaveClass(/visible/);
+    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;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,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,cAAc,CACZ,uCAAuC,EACvC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxB,MAAM,KAAK,CACT;;;;KAID,CACA,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,CACF,CAAC;AAEF,cAAc,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC/D,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,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;AACrD,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,8BAA8B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACvE,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,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AACtD,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest('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\nregressionTest(\n  'show text dependent on provided state',\n  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);\n\nregressionTest('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).toHaveClass(/visible/);\n  await expect(tooltip).toContainText('Helper text');\n});\n\nregressionTest('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).toHaveClass(/visible/);\n  await expect(tooltip).toContainText('invalid text');\n});\n"]}

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

@@ -0,0 +1,155 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 1.5rem;
+  padding-left: 0.5rem;
+  border: var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);
+  border-radius: 2rem;
+  background-color: var(--theme-color-ghost);
+  color: var(--theme-chip-primary-outline--color);
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+: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;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host .slot-container :host-context(.disabled) {
+  background-color: var(--theme-color-ghost);
+  border-color: var(--theme-color-component-4);
+  color: var(--theme-color-weak-text);
+}
+:host ix-icon-button {
+  height: 1.5rem;
+  margin-left: 0.25rem;
+}
+:host ix-icon-button:not(.disabled):not(:disabled):focus-visible {
+  outline: none;
+}
+
+:host(.disabled) {
+  border: var(--theme-focus--border-thickness) solid var(--theme-color-component-4);
+  color: var(--theme-color-weak-text);
+  padding-right: 0.5rem;
+  cursor: default;
+}
+
+:host(.readonly) {
+  padding-right: 0.5rem;
+}
+
+:host(:not(.disabled):not(:disabled)) {
+  cursor: pointer;
+}
+
+:host(:hover:not(.disabled):not(:disabled)) {
+  background-color: var(--theme-color-ghost-primary--hover);
+  border-color: var(--theme-chip-primary-outline--border-color--hover);
+  color: var(--theme-chip-primary-outline--color--hover);
+}
+
+:host(:not(.disabled):not(:disabled)) {
+  cursor: pointer;
+}
+
+:host(:active:not(.disabled):not(:disabled)) {
+  background-color: var(--theme-color-ghost-primary--active);
+  border-color: var(--theme-chip-primary-outline--border-color--active);
+  color: var(--theme-chip-primary-outline--color--active);
+}
+
+:host(:focus-visible:not(.disabled):not(:disabled)) {
+  outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);
+  outline-offset: -0.125rem;
+}