@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

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

@@ -1,309 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,26 +0,0 @@
-/*
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,63 +0,0 @@
-/*
- * 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

@@ -1 +0,0 @@
-{"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/helper-text/helper-text.css

@@ -1,34 +0,0 @@
-/*
- * 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 {
-  display: block;
-}
-:host .bottom-text {
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 0.25rem;
-  margin-right: 0.25rem;
-}
-:host .text-icon {
-  margin: 0.125rem;
-}
-:host .text-icon.invalid {
-  color: var(--theme-helper-icon--color--invalid);
-}
-:host .text-icon.info {
-  color: var(--theme-helper-icon--color--info);
-}
-:host .text-icon.warning {
-  color: var(--theme-helper-icon--color--warning);
-}
-:host .text-icon.valid {
-  color: var(--theme-helper-icon--color--valid);
-}

package/dist/collection/components/helper-text/helper-text.js

@@ -1,179 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { checkFieldClasses, createClassMutationObserver, } from "../utils/field";
-import { renderHelperText } from "../field-wrapper/helper-text-util";
-export class HelperText {
-    constructor() {
-        this.observer = new MutationObserver(() => this.checkForRequired());
-        this.htmlFor = undefined;
-        this.helperText = undefined;
-        this.invalidText = undefined;
-        this.validText = undefined;
-        this.infoText = undefined;
-        this.warningText = undefined;
-        this.validationResults = {
-            isInfo: false,
-            isInvalid: false,
-            isValid: false,
-            isWarning: false,
-            isInvalidByRequired: false,
-        };
-    }
-    connectedCallback() {
-        this.observer.observe(window.document, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-    }
-    componentWillRender() {
-        this.checkForRequired();
-    }
-    async checkForRequired() {
-        if (!this.htmlFor) {
-            return;
-        }
-        const forElement = document.getElementById(this.htmlFor);
-        if (!forElement) {
-            return;
-        }
-        if (this.classObserver) {
-            this.classObserver.destroy();
-        }
-        this.classObserver = createClassMutationObserver(forElement, () => {
-            this.validationResults = checkFieldClasses(forElement);
-        });
-        this.validationResults = checkFieldClasses(forElement);
-    }
-    render() {
-        return (h(Host, { key: '3db11c77053d58bea53cb0be437354ebfda9f004' }, renderHelperText(Object.assign({ helperText: this.helperText, invalidText: this.invalidText, validText: this.validText, infoText: this.infoText, warningText: this.warningText }, this.validationResults))));
-    }
-    static get is() { return "ix-helper-text"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["helper-text.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["helper-text.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "htmlFor": {
-                "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",
-                "reflect": false
-            },
-            "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
-            },
-            "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
-            }
-        };
-    }
-    static get states() {
-        return {
-            "validationResults": {}
-        };
-    }
-    static get elementRef() { return "hostElement"; }
-}
-//# sourceMappingURL=helper-text.js.map

package/dist/collection/components/helper-text/helper-text.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"helper-text.js","sourceRoot":"","sources":["../../../src/components/helper-text/helper-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAIL,iBAAiB,EACjB,2BAA2B,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAQrE,MAAM,OAAO,UAAU;;QAwCb,aAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;;;;;;;iCARvB;YAC9C,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,KAAK;YAChB,mBAAmB,EAAE,KAAK;SAC3B;;IAKD,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE;YACrC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,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;IAED,mBAAmB;QACjB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CACxC,IAAI,CAAC,OAAO,CAC0B,CAAC;QACzC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAC/B,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,2BAA2B,CAAC,UAAU,EAAE,GAAG,EAAE;YAChE,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,gBAAgB,iBACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAC1B,IAAI,CAAC,iBAAiB,EACzB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  ClassMutationObserver,\n  HTMLIxFormComponentElement,\n  ValidationResults,\n  checkFieldClasses,\n  createClassMutationObserver,\n} from '../utils/field';\nimport { renderHelperText } from '../field-wrapper/helper-text-util';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-helper-text',\n  styleUrl: 'helper-text.scss',\n  shadow: true,\n})\nexport class HelperText implements IxComponent {\n  @Element() hostElement!: HTMLIxHelperTextElement;\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlFor?: string;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: 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  @State() validationResults: ValidationResults = {\n    isInfo: false,\n    isInvalid: false,\n    isValid: false,\n    isWarning: false,\n    isInvalidByRequired: false,\n  };\n\n  private observer = new MutationObserver(() => this.checkForRequired());\n  private classObserver?: ClassMutationObserver;\n\n  connectedCallback() {\n    this.observer.observe(window.document, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForRequired();\n  }\n\n  private async checkForRequired() {\n    if (!this.htmlFor) {\n      return;\n    }\n    const forElement = document.getElementById(\n      this.htmlFor\n    ) as HTMLIxFormComponentElement<unknown>;\n    if (!forElement) {\n      return;\n    }\n\n    if (this.classObserver) {\n      this.classObserver.destroy();\n    }\n    this.classObserver = createClassMutationObserver(forElement, () => {\n      this.validationResults = checkFieldClasses(forElement);\n    });\n    this.validationResults = checkFieldClasses(forElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        {renderHelperText({\n          helperText: this.helperText,\n          invalidText: this.invalidText,\n          validText: this.validText,\n          infoText: this.infoText,\n          warningText: this.warningText,\n          ...this.validationResults,\n        })}\n      </Host>\n    );\n  }\n}\n"]}