@siemens/ix 2.6.1 → 2.7.0

package/components/ix-flip-tile.js

@@ -13,11 +13,12 @@ const FlipTile = /*@__PURE__*/ proxyCustomElement(class FlipTile extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.ANIMATION_DURATION = 150;
+        this.contentItems = [];
         this.state = undefined;
         this.height = 15.125;
         this.width = 16;
         this.index = 0;
-        this.isFlipAnimationActive = undefined;
+        this.isFlipAnimationActive = false;
     }
     componentDidLoad() {
         this.observer = createMutationObserver(() => this.updateContentItems());
@@ -60,26 +61,26 @@ const FlipTile = /*@__PURE__*/ proxyCustomElement(class FlipTile extends HTMLEle
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (h(Host, { key: '3c909b998962bd8d8882a8bdeffa657a588da20e', style: {
+        return (h(Host, { key: '753ce805c8792b014e40343df15d1a257ed1c8a1', style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: '0d19a6d08a9743693af22f8a58d9360bb8be347f', class: {
+            } }, h("div", { key: 'e5ff1efdabea6b280f84b9090fed970cab6bcbee', class: {
                 'flip-tile-container': true,
                 info: this.state === FlipTileState.Info,
                 warning: this.state === FlipTileState.Warning,
                 alarm: this.state === FlipTileState.Alarm,
                 primary: this.state === FlipTileState.Primary,
                 'flip-animation-active': this.isFlipAnimationActive,
-            } }, h("div", { key: '2bef4a357ce8884aac9b9d108bc8923b78246d7f', class: "flip-tile-header" }, h("div", { key: '80ea0fabee17ce15ac65e76359c32663df1d23e3', class: "header-slot-container text-l-title" }, h("slot", { key: '7fce430f5db26512891764c054a8508665fc1902', name: "header" })), h("ix-icon-button", { key: 'cd8f7eb45dbf997a3b3844cc574fa34ab7560baa', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: 'ecf67fbdb00a79cf14cbf601ed0b73951acc3b77', class: "content-container" }, h("slot", { key: 'a37af70dc48c04af0831801f50be9d3f3ea43c84' })), h("div", { key: 'fff7efb3a2c93d9bde909d99f08812a3af6b3ba0', class: {
+            } }, h("div", { key: 'd69567c1f8068684d8047c11ecbc2c698d416ca8', class: "flip-tile-header" }, h("div", { key: '5a7f749bb17f00f34ce0c1c15a8c17aa9c026b69', class: "header-slot-container text-l-title" }, h("slot", { key: '1d5422159ca027167360cf3b8294b6a5f8808404', name: "header" })), h("ix-icon-button", { key: '239410d1f28ee549b192a3576429daa12685c32c', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '3578e5d085f50aee7c0dd7e94fdc9b8a3d2506eb', class: "content-container" }, h("slot", { key: 'adb2148071277964c31a15c5fd17b00992a8c21c' })), h("div", { key: '34bbfaf3907aa77d59afe7b0a6d148fa9da37074', class: {
                 footer: true,
                 'contrast-light': this.state === FlipTileState.Warning,
                 'contrast-dark': this.state === FlipTileState.Info ||
                     this.state === FlipTileState.Alarm,
-            } }, h("slot", { key: 'd5306fe3d6bef7d4c2b721a97f49131f6ba79ac0', name: "footer" })))));
+            } }, h("slot", { key: '2649e545cf492d73e15c3a8c216767d6352a6529', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return IxFlipTileStyle0; }

package/components/ix-flip-tile.js.map

@@ -1 +1 @@
-{"file":"ix-flip-tile.js","mappings":"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","names":[],"sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.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\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  @State() index = 0;\n  @State() isFlipAnimationActive: boolean;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement>;\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.updateContentVisibility(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={'eye'}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-flip-tile.js","mappings":"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","names":[],"sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.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\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state?: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  @State() index = 0;\n  @State() isFlipAnimationActive: boolean = false;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement> = [];\n  private observer?: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.updateContentVisibility(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={'eye'}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-group.js

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

package/components/ix-group.js.map

@@ -1 +1 @@
-{"file":"ix-group.js","mappings":"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","names":[],"sources":["src/components/group/group.scss?tag=ix-group&encapsulation=shadow","src/components/group/group.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\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 19.75rem;\n  min-width: 12rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    flex-basis: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n        padding-right: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\n    display: none;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header?: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index?: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup!: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem!: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged!: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  @Watch('selected')\n  selectedChanged(newSelected: boolean) {\n    if (newSelected === false) {\n      this.changeItemIndex();\n    }\n  }\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot?.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    const oldCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n    const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n\n    if (defaultPrevented) {\n      this.collapsed = oldCollapsed;\n    }\n  }\n\n  private onHeaderClick(event: Event) {\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n      return;\n    }\n\n    this.changeHeaderSelection(!this.selected);\n    this.changeItemIndex();\n  }\n\n  private changeHeaderSelection(newSelection: boolean) {\n    const oldIsHeaderSelected = this.selected;\n    const newIsHeaderSelected = newSelection;\n    this.selected = newIsHeaderSelected;\n    const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n    if (defaultPrevented) {\n      this.selected = oldIsHeaderSelected;\n      return;\n    }\n  }\n\n  private changeItemIndex(index?: number) {\n    const oldIndex = this.index;\n    const newIndex = index === this.index ? undefined : index;\n\n    if (this.index === newIndex) {\n      return;\n    }\n\n    this.index = newIndex;\n    const { defaultPrevented } = this.selectItem.emit(newIndex);\n    if (defaultPrevented) {\n      this.index = oldIndex;\n      return;\n    }\n\n    const items = this.groupItems;\n    items.forEach((item, i) => {\n      item.selected = i === this.index;\n    });\n\n    this.itemSelected = items.some((item) => item.selected);\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot?.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n    if (!this.groupContent) {\n      return;\n    }\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Listen('selectedChanged')\n  onItemClicked(event: CustomEvent) {\n    if (event.target instanceof HTMLElement) {\n      const item = event.target as HTMLIxGroupItemElement;\n      const index = this.groupItems.indexOf(item);\n      this.changeItemIndex(index);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot?.querySelector(\n                    'slot:not([name])'\n                  );\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-group.js","mappings":"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","names":[],"sources":["src/components/group/group.scss?tag=ix-group&encapsulation=shadow","src/components/group/group.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\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 19.75rem;\n  min-width: 12rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    flex-basis: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n        padding-right: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\n    display: none;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header?: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index?: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup!: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem!: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged!: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  @Watch('selected')\n  selectedChanged(newSelected: boolean) {\n    if (newSelected === false) {\n      this.changeItemIndex();\n    }\n  }\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot?.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    const oldCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n    const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n\n    if (defaultPrevented) {\n      this.collapsed = oldCollapsed;\n    }\n  }\n\n  private onHeaderClick(event: Event) {\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n      return;\n    }\n\n    this.changeHeaderSelection(!this.selected);\n    this.changeItemIndex();\n  }\n\n  private changeHeaderSelection(newSelection: boolean) {\n    const oldIsHeaderSelected = this.selected;\n    const newIsHeaderSelected = newSelection;\n    this.selected = newIsHeaderSelected;\n    const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n    if (defaultPrevented) {\n      this.selected = oldIsHeaderSelected;\n      return;\n    }\n  }\n\n  private changeItemIndex(index?: number) {\n    const oldIndex = this.index;\n    const newIndex = index === this.index ? undefined : index;\n\n    if (this.index === newIndex) {\n      return;\n    }\n\n    this.index = newIndex;\n    const { defaultPrevented } = this.selectItem.emit(newIndex);\n    if (defaultPrevented) {\n      this.index = oldIndex;\n      return;\n    }\n\n    const items = this.groupItems;\n    items.forEach((item, i) => {\n      item.selected = i === this.index;\n    });\n\n    this.itemSelected = items.some((item) => item.selected);\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot?.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n    if (!this.groupContent) {\n      return;\n    }\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Listen('selectedChanged')\n  onItemClicked(event: CustomEvent) {\n    if (event.target instanceof HTMLElement) {\n      const item = event.target as HTMLIxGroupItemElement;\n      const index = this.groupItems.indexOf(item);\n      this.changeItemIndex(index);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(event: Event) => this.onExpandClick(event)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot?.querySelector(\n                    'slot:not([name])'\n                  );\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-helper-text.js

@@ -57,7 +57,7 @@ const HelperText = /*@__PURE__*/ proxyCustomElement(class HelperText extends HTM
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (h(Host, { key: 'a15c6af1db5a3723e8f2facd899a513c56f034af' }, renderHelperText(Object.assign({ helperText: this.helperText, invalidText: this.invalidText, validText: this.validText, infoText: this.infoText, warningText: this.warningText }, this.validationResults))));
+        return (h(Host, { key: '26c1e2ad753fca25d4095e38d9fbb646c0305db7' }, renderHelperText(Object.assign({ helperText: this.helperText, invalidText: this.invalidText, validText: this.validText, infoText: this.infoText, warningText: this.warningText }, this.validationResults))));
     }
     get hostElement() { return this; }
     static get style() { return IxHelperTextStyle0; }

package/components/ix-icon-toggle-button.js

@@ -70,7 +70,7 @@ const IconToggleButton = /*@__PURE__*/ proxyCustomElement(class IconToggleButton
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (h(Host, { key: '99ab49dda5fcdc55bbbaff72b2af203317cb56c0', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '7ba2608c0e1ac7d8e9e02966037f7b7a4facc66d' }, baseButtonProps))));
+        return (h(Host, { key: '588ebac02e4d670f5dd68986da1b6f2916e3fe18', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '701cb0fa92d957479f6f65846856149e3b0a6e60' }, baseButtonProps))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-icon-toggle-button.js.map

@@ -1 +1 @@
-{"file":"ix-icon-toggle-button.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,y7tBAAy7tB,CAAC;AACt9tB,iCAAe,mBAAmB;;MC+BrB,gBAAgB;;;;;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;KACH;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzC,EAAC,cAAc,qEAAK,eAAe,EAAmB,CACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-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\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\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  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-icon-toggle-button.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,y7tBAAy7tB,CAAC;AACt9tB,iCAAe,mBAAmB;;MC+BrB,gBAAgB;;;;;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;KACH;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzC,EAAC,cAAc,qEAAK,eAAe,EAAmB,CACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-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\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\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  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-input-group.js

@@ -123,7 +123,7 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
         return width;
     }
     render() {
-        return (h(Host, { key: '14b39750443afa04ff5aec92500f1caadae7c999', class: { disabled: this.disabled } }, h("div", { key: '3fc82d83edf57457c7caf29b525d417008d59793', class: "group group-start" }, h("slot", { key: '4233fcfc1a643c6c3ade5ee07c3895a3175f91a5', name: "input-start" })), h("slot", { key: '21a780e71bb8ff5380656ed91fdc3d657f906edb' }), h("div", { key: '97daccc51ac8756c816820da74ea0027a88602e8', class: "group group-end" }, h("slot", { key: 'be5edf58af140972c314a14ff3d88da1fdeb5de9', name: "input-end" }))));
+        return (h(Host, { key: '672090bc95ebe5316373e8059a4d9832d7803360', class: { disabled: this.disabled } }, h("div", { key: 'eeb2ff4eb6dde0a76819db2c59961bd2a60f21dd', class: "group group-start" }, h("slot", { key: 'e9e29a9630a75fe02dc4b9f1e1618f409d9bf79f', name: "input-start" })), h("slot", { key: 'ba879afb3daf79d47ccc144bb15dde19066a6b0b' }), h("div", { key: 'd4ff700431fb7ae6fec3b3994afd1a7baeb405c1', class: "group group-end" }, h("slot", { key: '33b5dd1e62b79372656b1c22e9e9cc77fd4252c8', name: "input-end" }))));
     }
     get hostElement() { return this; }
     static get style() { return IxInputGroupStyle0; }

package/components/ix-input-group.js.map

@@ -1 +1 @@
-{"file":"ix-input-group.js","mappings":"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","names":[],"sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.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 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\n    }\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 { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-input-group.js","mappings":"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","names":[],"sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.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 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\n    }\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 { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      'slot[name=\"input-start\"]'\n    )!;\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      'slot[name=\"input-end\"]'\n    )!;\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-input.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { m as iconEye, n as iconEyeCancelled } from './index3.js';
 import { H as HookValidationLifecycle } from './validation.js';
 import { m as makeRef } from './make-ref.js';
-import { m as mapValidationResult, a as adjustPaddingForStartAndEnd, S as SlotStart, I as InputElement, c as checkAllowedKeys, o as onInputBlur, b as SlotEnd, g as getAriaAttributesForInput } from './input.util.js';
+import { m as mapValidationResult, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotStart, I as InputElement, d as checkAllowedKeys, o as onInputBlur, c as SlotEnd, g as getAriaAttributesForInput } from './input.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';
@@ -10,7 +10,7 @@ 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 inputCss = "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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,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) !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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,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) !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 .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}: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) !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}:host .password-eye.eye-hidden{display:none}";
+const inputCss = "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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,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{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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}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) !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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,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{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.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){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.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){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-radius:0;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-radius:0;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,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}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) !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 .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}: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) !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}:host .password-eye.eye-hidden{display:none}";
 const IxInputStyle0 = inputCss;
 
 /*
@@ -80,12 +80,17 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.updateFormInternalValue(this.value);
         this.inputType = this.type;
     }
-    componentDidRender() {
-        this.updatePaddings();
+    connectedCallback() {
+        this.disposableChangesAndVisibilityObservers =
+            addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
     }
     updatePaddings() {
         adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disposableChangesAndVisibilityObservers) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     updateFormInternalValue(value) {
         this.formInternals.setFormValue(value);
         this.value = value;
@@ -113,10 +118,10 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
     render() {
         var _a;
         const inputAria = getAriaAttributesForInput(this);
-        return (h(Host, { key: 'f625dc7d2ed058f53940ccda73db408a3d7017a5', class: {
+        return (h(Host, { key: 'a6d40be91cda9c61dacb10c47cb3c1de128b595c', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: 'c018215d637253e021247473c35701ff94d3f028', htmlForLabel: this.inputId, 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("div", { key: 'cc9ee3d23a14d0e10351f294fae72aeec82fbf64', class: "input-wrapper" }, h(SlotStart, { key: 'f32e50c55492dc1423b91f05209c1e9914b50f28', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'ca17d2fee580dbe2e8d176018d0e55565bef5f33', id: this.inputId, 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(SlotEnd, { key: '5664747770d85defa36d460b4aa3e497a802bca2', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: 'f680b65ba0355746be49646d25a2074cc4a9caac', color: "color-weak-text", class: {
+            } }, h("ix-field-wrapper", { key: 'e920830918a1b52ae71373c6b09460282840d996', htmlForLabel: this.inputId, 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("div", { key: '683a76fa9cf8bdb266d202b3d2977415f7940374', class: "input-wrapper" }, h(SlotStart, { key: '93835b09dd2c87cf4c027afdf8b2e5ac54446ce6', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '9d75e41be3064ed775dc6adea268681d33d4114b', id: this.inputId, 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(SlotEnd, { key: 'edc365019e67448855bd73f2fd6324e6b0784e80', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: '22075d37959ab4d9a45e8792c62b0595e02d23d9', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password',
             }, ghost: true, icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
@@ -125,7 +130,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'baa09803b87cd3efce3cce29cb735b5d0a290832', class: "bottom-text", slot: "bottom-right", color: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
+            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '4b2dab4589a0191a9097db3075e1e10dfcab3476', class: "bottom-text", slot: "bottom-right", color: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
             _a.length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }