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

package/components/ix-split-button.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './dropdown.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
-const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
+const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}: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 .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
 const IxSplitButtonStyle0 = splitButtonCss;
 
 const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends HTMLElement {
@@ -14,6 +14,7 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
         this.__attachShadow();
         this.buttonClick = createEvent(this, "buttonClick", 7);
         this.variant = 'primary';
+        this.closeBehavior = 'both';
         this.outline = false;
         this.ghost = false;
         this.label = undefined;
@@ -41,12 +42,13 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
                 'left-button-border': !this.outline,
             },
         };
-        return (h(Host, { key: '72cef252b92343974f54030d735d9add93a1ce50' }, h("div", { key: 'e3b90f79ffc667a96f14ce5f32f91844acba8503', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({ key: '02d9964f46c960e19045135e63212cba857c99df' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { key: '62f7410479325fa1f20b08baef68d0b83f41e03a', ref: (r) => (this.dropdownElement = r) }, h("slot", { key: 'dbf07a44f0596567676905abc4bc156560ddcd1d' }))));
+        return (h(Host, { key: '8738cbea2949228256a0d14cd3864e89725f0836' }, h("div", { key: '8b8cd05374defceea7a5e7dedbfce2e98acdd4df', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({ key: '303efc36a9e39a7cb2e29630c5d25c1634b23135' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { key: 'aea82c1fa78923f362c4c47f5ff2825b560f3882', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, h("slot", { key: 'b30c7ce0b9c62a55d92cb6a3a3dd311a4760b23b' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxSplitButtonStyle0; }
 }, [1, "ix-split-button", {
         "variant": [1],
+        "closeBehavior": [8, "close-behavior"],
         "outline": [4],
         "ghost": [4],
         "label": [1],

package/components/ix-split-button.js.map

@@ -1 +1 @@
-{"file":"ix-split-button.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,oxCAAoxC,CAAC;AAC5yC,4BAAe,cAAc;;MC4BhB,WAAW;;;;;;uBAMgB,SAAS;uBAK7B,KAAK;qBAKP,KAAK;;oBAUN,EAAE;yBAKG,cAAc;wBAKf,KAAK;yBAKc,cAAc;sBAElC,KAAK;;IAUf,cAAc;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;YAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;SACpD;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;aACpC;SACF,CAAC;QACF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC3D,IAAI,CAAC,KAAK,IACT,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAEvC,IAAI,CAAC,KAAK,CACD,KAEZ,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,CACnB,EACD,uFACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd,EAEN,oEAAa,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IACjD,8DAAa,CACD,CACT,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'legacy/components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-split-button.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,g7CAAg7C,CAAC;AACx8C,4BAAe,cAAc;;MC6BhB,WAAW;;;;;;uBAMgB,SAAS;6BAMR,MAAM;uBAK3B,KAAK;qBAKP,KAAK;;oBAUN,EAAE;yBAKG,cAAc;wBAKf,KAAK;yBAKc,cAAc;sBAElC,KAAK;;IAUf,cAAc;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;YAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;SACpD;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;aACpC;SACF,CAAC;QACF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC3D,IAAI,CAAC,KAAK,IACT,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAEvC,IAAI,CAAC,KAAK,CACD,KAEZ,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,CACnB,EACD,uFACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd,EAEN,oEACE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,EACtC,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,8DAAa,CACD,CACT,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'legacy/components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * @since 2.3.0\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown\n          ref={(r) => (this.dropdownElement = r)}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-text-field.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxTextField extends Components.IxTextField, HTMLElement {}
+export const IxTextField: {
+    prototype: IxTextField;
+    new (): IxTextField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-text-field.js

@@ -0,0 +1,223 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as iconEye, d as iconEyeCancelled } from './helper-text-util.js';
+import { H as HookValidationLifecycle } from './validation.js';
+import { m as makeRef } from './make-ref.js';
+import { m as mapValidationResult, c as applyPostfixPadding, P as PrefixSlot, I as InputElement, d as checkAllowedKeys, o as onInputBlur, b as PostfixSlot, g as getAriaAttributesForInput } from './text-field.util.js';
+import { d as defineCustomElement$7 } from './field-label.js';
+import { d as defineCustomElement$6 } from './field-wrapper.js';
+import { d as defineCustomElement$5 } from './icon-button.js';
+import { d as defineCustomElement$4 } from './spinner.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const textFieldCss = "label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}: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 .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .prefix-container,:host .postfix-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .prefix-container{left:0.5rem}:host .postfix-container{right:0.5rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host .password-eye{margin-left:0.125rem;color:red}";
+const IxTextFieldStyle0 = textFieldCss;
+
+/*
+ * 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.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let textFieldIds = 0;
+const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.validityStateChange = createEvent(this, "validityStateChange", 7);
+        this.ixBlur = createEvent(this, "ixBlur", 7);
+        this.formInternals = this.attachInternals();
+        this.inputRef = makeRef();
+        this.postfixRef = makeRef();
+        this.prefixRef = makeRef();
+        this.textFieldId = `text-field-${textFieldIds++}`;
+        this.type = 'text';
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.helperText = undefined;
+        this.infoText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.validText = undefined;
+        this.warningText = undefined;
+        this.label = undefined;
+        this.invalidText = undefined;
+        this.pattern = undefined;
+        this.maxLength = undefined;
+        this.minLength = undefined;
+        this.allowedCharactersPattern = undefined;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.isInvalidByRequired = false;
+        this.inputType = 'text';
+    }
+    updateClassMappings(result) {
+        mapValidationResult(this, result);
+    }
+    updateInputType() {
+        this.inputType = this.type;
+    }
+    componentWillLoad() {
+        this.updateFormInternalValue(this.value);
+        this.inputType = this.type;
+    }
+    componentDidRender() {
+        setTimeout(() => this.updatePaddings());
+    }
+    updatePaddings() {
+        var _a, _b;
+        const prefixBoundingRect = (_a = this.prefixRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const postfixBoundingRect = (_b = this.postfixRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        if (prefixBoundingRect) {
+            applyPostfixPadding(this.inputRef.current, prefixBoundingRect.width, {
+                postfix: false,
+            });
+        }
+        if (postfixBoundingRect) {
+            applyPostfixPadding(this.inputRef.current, postfixBoundingRect.width, {
+                postfix: true,
+            });
+        }
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value);
+        this.value = value;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /**
+     * Returns the native input element used in the text field.
+     */
+    getNativeInputElement() {
+        return this.inputRef.waitForCurrent();
+    }
+    render() {
+        var _a;
+        const inputAria = getAriaAttributesForInput(this);
+        return (h(Host, { key: '69e94d66d7a3739e875d03bcdfd919ac92e7cf67', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: '76b8f9940fa9e3f326bdbef1f75c24b9465dfc24', htmlForLabel: this.textFieldId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("slot", { key: 'be76706fe20f7ac88ff99884456f93f6dcbd96b4', name: "label", slot: "label" }), h("div", { key: '4f0381e2bc0c52b45058b9985b4a1b9c25e3791f', class: "input-wrapper" }, h(PrefixSlot, { key: 'b1811ecb3b2a26d80bfcee41ed91e25ff700c33f', prefixRef: this.prefixRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '615ddcda6868bd0015bea4f4d2a2c7ee66cdc85c', id: this.textFieldId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), h(PostfixSlot, { key: '6a0651d8aa7ce74e93f9ab4b50783f2fac888666', postfixRef: this.postfixRef, onSlotChange: () => this.updatePaddings() }, this.type === 'password' && (h("ix-icon-button", { key: '576f6283a6c05faa6ddae9c622ea358b2c026b0c', color: "color-weak-text", class: 'password-eye', ghost: true, icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
+                if (this.inputType === 'password') {
+                    this.inputType = 'text';
+                    return;
+                }
+                this.inputType = 'password';
+            } })))), this.maxLength && (h("ix-typography", { key: '09455f93522242114026a1bad75f7afc68229446', slot: "bottom-right", color: "weak" }, (_a = this.value) === null || _a === void 0 ? void 0 :
+            _a.length, "/", this.maxLength)))));
+    }
+    static get formAssociated() { return true; }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "type": ["updateInputType"]
+    }; }
+    static get style() { return IxTextFieldStyle0; }
+}, [65, "ix-text-field", {
+        "type": [1],
+        "name": [513],
+        "placeholder": [513],
+        "value": [1537],
+        "required": [516],
+        "disabled": [516],
+        "readonly": [516],
+        "helperText": [1, "helper-text"],
+        "infoText": [1, "info-text"],
+        "showTextAsTooltip": [4, "show-text-as-tooltip"],
+        "validText": [1, "valid-text"],
+        "warningText": [1, "warning-text"],
+        "label": [513],
+        "invalidText": [1, "invalid-text"],
+        "pattern": [1],
+        "maxLength": [2, "max-length"],
+        "minLength": [2, "min-length"],
+        "allowedCharactersPattern": [1, "allowed-characters-pattern"],
+        "isInvalid": [32],
+        "isValid": [32],
+        "isInfo": [32],
+        "isWarning": [32],
+        "isInvalidByRequired": [32],
+        "inputType": [32],
+        "getAssociatedFormElement": [64],
+        "hasValidValue": [64],
+        "getNativeInputElement": [64]
+    }, undefined, {
+        "type": ["updateInputType"]
+    }]);
+__decorate([
+    HookValidationLifecycle()
+], TextField.prototype, "updateClassMappings", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-text-field", "ix-field-label", "ix-field-wrapper", "ix-icon-button", "ix-spinner", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-text-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TextField);
+            }
+            break;
+        case "ix-field-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ix-field-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxTextField = TextField;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxTextField, defineCustomElement };
+
+//# sourceMappingURL=ix-text-field.js.map

package/components/ix-text-field.js.map

@@ -0,0 +1 @@
+{"file":"ix-text-field.js","mappings":";;;;;;;;;;;;AAAA,MAAM,YAAY,GAAG,qr6BAAqr6B,CAAC;AAC3s6B,0BAAe,YAAY;;ACD3B;;;;;;;;;;;;;;;;;;AAuCA,IAAI,YAAY,GAAG,CAAC,CAAC;MAYR,SAAS;;;;;;;;;QAqHZ,aAAQ,GAAG,OAAO,EAAoB,CAAC;QACvC,eAAU,GAAG,OAAO,EAAkB,CAAC;QACvC,cAAS,GAAG,OAAO,EAAkB,CAAC;QAEtC,gBAAW,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;oBAlHP,MAAM;;;qBAeI,EAAE;wBAKb,KAAK;wBAKL,KAAK;wBAKL,KAAK;;;;;;;;;;;;yBAwE7B,KAAK;uBACP,KAAK;sBACN,KAAK;yBACF,KAAK;mCACK,KAAK;yBAEf,MAAM;;IAS3B,mBAAmB,CAAC,MAAyB;QAC3C,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACnC;IAGD,eAAe;QACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;KAC5B;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;KAC5B;IAED,kBAAkB;QAChB,UAAU,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;KACzC;IAEO,cAAc;;QACpB,MAAM,kBAAkB,GAAG,MAAA,IAAI,CAAC,SAAS,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;QAC3E,MAAM,mBAAmB,GACvB,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;QAEnD,IAAI,kBAAkB,EAAE;YACtB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,kBAAkB,CAAC,KAAK,EAAE;gBACnE,OAAO,EAAE,KAAK;aACf,CAAC,CAAC;SACJ;QAED,IAAI,mBAAmB,EAAE;YACvB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC,KAAK,EAAE;gBACpE,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;SACJ;KACF;IAED,uBAAuB,CAAC,KAAa;QACnC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;;IAID,MAAM,wBAAwB;QAC5B,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;KAChC;;IAID,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;;;;IAMD,qBAAqB;QACnB,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;KACvC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAmB,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAElE,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,yEACE,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,QAAQ,IAEzB,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,EACvC,4DAAK,KAAK,EAAC,eAAe,IACxB,EAAC,UAAU,qDACT,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,GAC7B,EACd,EAAC,YAAY,qDACX,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,CAAC,KAAK,KAAK,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,EACpD,WAAW,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EACpD,uBAAuB,EAAE,CAAC,KAAK,KAC7B,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAErC,MAAM,EAAE,MAAM,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EACtD,cAAc,EAAE,SAAS,GACX,EAChB,EAAC,WAAW,qDACV,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAExC,IAAI,CAAC,IAAI,KAAK,UAAU,KACvB,uEACE,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,cAAc,EACrB,KAAK,QACL,IAAI,EACF,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,OAAO,GAAG,gBAAgB,EAE5D,OAAO,EAAE;gBACP,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;oBACjC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;oBACxB,OAAO;iBACR;gBAED,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;aAC7B,GACe,CACnB,CACW,CACV,EACL,IAAI,CAAC,SAAS,KACb,sEAAe,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,IAC5C,MAAA,IAAI,CAAC,KAAK;eAAE,MAAM,OAAG,IAAI,CAAC,SAAS,CACtB,CACjB,CACgB,CACd,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlJD;IADC,uBAAuB,EAAE;oDAGzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/text-field/text-field.scss?tag=ix-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'components/form/input';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/validation/form-component';\n@import './text-field.mixins.scss';\n\n@include input-field;\n\n:host {\n  .password-eye {\n    margin-left: 0.125rem;\n    color: red;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/field';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, PostfixSlot, PrefixSlot } from './input.fc';\nimport {\n  applyPostfixPadding,\n  checkAllowedKeys,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './text-field.util';\n\nlet textFieldIds = 0;\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n  tag: 'ix-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class TextField implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxTextFieldElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private inputRef = makeRef<HTMLInputElement>();\n  private postfixRef = makeRef<HTMLDivElement>();\n  private prefixRef = makeRef<HTMLDivElement>();\n\n  private textFieldId = `text-field-${textFieldIds++}`;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  componentDidRender() {\n    setTimeout(() => this.updatePaddings());\n  }\n\n  private updatePaddings() {\n    const prefixBoundingRect = this.prefixRef.current?.getBoundingClientRect();\n    const postfixBoundingRect =\n      this.postfixRef.current?.getBoundingClientRect();\n\n    if (prefixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, prefixBoundingRect.width, {\n        postfix: false,\n      });\n    }\n\n    if (postfixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, postfixBoundingRect.width, {\n        postfix: true,\n      });\n    }\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.textFieldId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n          <div class=\"input-wrapper\">\n            <PrefixSlot\n              prefixRef={this.prefixRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></PrefixSlot>\n            <InputElement\n              id={this.textFieldId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.inputRef.current)}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <PostfixSlot\n              postfixRef={this.postfixRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              {this.type === 'password' && (\n                <ix-icon-button\n                  color=\"color-weak-text\"\n                  class={'password-eye'}\n                  ghost\n                  icon={\n                    this.inputType === 'password' ? iconEye : iconEyeCancelled\n                  }\n                  onClick={() => {\n                    if (this.inputType === 'password') {\n                      this.inputType = 'text';\n                      return;\n                    }\n\n                    this.inputType = 'password';\n                  }}\n                ></ix-icon-button>\n              )}\n            </PostfixSlot>\n          </div>\n          {this.maxLength && (\n            <ix-typography slot=\"bottom-right\" color=\"weak\">\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-textarea-field.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxTextareaField extends Components.IxTextareaField, HTMLElement {}
+export const IxTextareaField: {
+    prototype: IxTextareaField;
+    new (): IxTextareaField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-textarea-field.js

@@ -0,0 +1,177 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { H as HookValidationLifecycle } from './validation.js';
+import { m as makeRef } from './make-ref.js';
+import { m as mapValidationResult, T as TextareaElement, o as onInputBlur } from './text-field.util.js';
+import { d as defineCustomElement$5 } from './field-label.js';
+import { d as defineCustomElement$4 } from './field-wrapper.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const textareaFieldCss = "label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}: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 .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .prefix-container,:host .postfix-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .prefix-container{left:0.5rem}:host .postfix-container{right:0.5rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea:hover{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea{border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea:active{border-color:var(--theme-input--border-color--invalid--active) !important}";
+const IxTextareaFieldStyle0 = textareaFieldCss;
+
+/*
+ * 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.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const TextareaField = /*@__PURE__*/ proxyCustomElement(class TextareaField extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.validityStateChange = createEvent(this, "validityStateChange", 7);
+        this.ixBlur = createEvent(this, "ixBlur", 7);
+        this.formInternals = this.attachInternals();
+        this.textAreaRef = makeRef();
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.helperText = undefined;
+        this.infoText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.validText = undefined;
+        this.warningText = undefined;
+        this.label = undefined;
+        this.invalidText = undefined;
+        this.textareaHeight = '300px';
+        this.textareaWidth = '100%';
+        this.textareaRows = '5';
+        this.textareaCols = '20';
+        this.resizeBehavior = 'rowsCols';
+        this.maxLength = undefined;
+        this.minLength = undefined;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.isInvalidByRequired = false;
+    }
+    updateClassMappings(result) {
+        mapValidationResult(this, result);
+    }
+    componentWillLoad() {
+        this.updateFormInternalValue(this.value);
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value);
+        this.value = value;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /**
+     * Get the native textarea element.
+     */
+    getNativeInputElement() {
+        return this.textAreaRef.waitForCurrent();
+    }
+    getSizeValue(behavior, value) {
+        return this.resizeBehavior === behavior ? value : undefined;
+    }
+    render() {
+        return (h(Host, { key: '456ca522d8ab0a0a79f0adea7145705865d86a09', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: '2032747da520d9d61539f4b984ded07cfeffde69', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, h("slot", { key: '5592740e78354735847f8b21156ceeec315b16f9', name: "label", slot: "label" }), this.maxLength && (h("ix-typography", { key: '11af96c2f18a16b948fbb90f6ea500e8c11796eb', slot: "bottom-right", color: "weak" }, this.value.length, "/", this.maxLength)), h("div", { key: '0604f5d438affa47574e819705d7bbfe52e8487f', class: {
+                'input-wrapper': true,
+            } }, h(TextareaElement, { key: '2c9f32df3c5ed09c1ecc15dad1b7367e3569da4c', minLength: this.minLength, maxLength: this.maxLength, textareaHeight: this.getSizeValue('dimensions', this.textareaHeight), textareaWidth: this.getSizeValue('dimensions', this.textareaWidth), textareaCols: this.getSizeValue('rowsCols', this.textareaCols), textareaRows: this.getSizeValue('rowsCols', this.textareaRows), readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.textAreaRef.current) })))));
+    }
+    static get formAssociated() { return true; }
+    get hostElement() { return this; }
+    static get style() { return IxTextareaFieldStyle0; }
+}, [65, "ix-textarea-field", {
+        "name": [513],
+        "placeholder": [513],
+        "value": [1537],
+        "required": [516],
+        "disabled": [4],
+        "readonly": [4],
+        "helperText": [1, "helper-text"],
+        "infoText": [1, "info-text"],
+        "showTextAsTooltip": [4, "show-text-as-tooltip"],
+        "validText": [1, "valid-text"],
+        "warningText": [1, "warning-text"],
+        "label": [513],
+        "invalidText": [1, "invalid-text"],
+        "textareaHeight": [1, "textarea-height"],
+        "textareaWidth": [1, "textarea-width"],
+        "textareaRows": [1, "textarea-rows"],
+        "textareaCols": [513, "textarea-cols"],
+        "resizeBehavior": [1, "resize-behavior"],
+        "maxLength": [2, "max-length"],
+        "minLength": [2, "min-length"],
+        "isInvalid": [32],
+        "isValid": [32],
+        "isInfo": [32],
+        "isWarning": [32],
+        "isInvalidByRequired": [32],
+        "getAssociatedFormElement": [64],
+        "hasValidValue": [64],
+        "getNativeInputElement": [64]
+    }]);
+__decorate([
+    HookValidationLifecycle()
+], TextareaField.prototype, "updateClassMappings", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-textarea-field", "ix-field-label", "ix-field-wrapper", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-textarea-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TextareaField);
+            }
+            break;
+        case "ix-field-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-field-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxTextareaField = TextareaField;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxTextareaField, defineCustomElement };
+
+//# sourceMappingURL=ix-textarea-field.js.map