@siemens/ix 3.0.0-alpha.3 → 3.0.0-alpha.4

package/dist/cjs/ix-event-list.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
 var rwd_util = require('./rwd.util-GTn-vgCJ.js');
 var anime_es = require('./anime.es-CgS5X9-e.js');
@@ -54,19 +54,30 @@ const EventList = class {
     }
     onMutation(mutationRecords) {
         this.triggerFadeOut().then(() => {
-            if (typeof this.itemHeight === 'number') {
+            if (!Number.isNaN(Number(this.itemHeight))) {
                 const height = rwd_util.convertToRemString(this.itemHeight);
-                mutationRecords
-                    .filter((mutation) => mutation.type === 'childList')
-                    .forEach((mutation) => mutation.addedNodes.forEach((item) => {
-                    const itemHtml = item;
-                    this.setCustomHeight(itemHtml, height);
-                }));
+                const eventListItems = this.findEventListItems(mutationRecords);
+                eventListItems.forEach((item) => this.setCustomHeight(item, height));
             }
             this.handleChevron(this.chevron);
             this.triggerFadeIn();
         });
     }
+    findEventListItems(mutationRecords) {
+        const eventListItems = [];
+        mutationRecords.forEach((mutation) => {
+            if (mutation.type !== 'childList') {
+                return;
+            }
+            mutation.addedNodes.forEach((node) => {
+                const element = node;
+                if (element.tagName === 'IX-EVENT-LIST-ITEM') {
+                    eventListItems.push(element);
+                }
+            });
+        });
+        return eventListItems;
+    }
     setCustomHeight(item, height) {
         item.style.setProperty('--event-list-item-height', height);
     }
@@ -118,11 +129,11 @@ const EventList = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '1f76181a73b8720c0488893e24fb570d6cab0122', class: {
+        return (index.h(index.Host, { key: '98a84af85d5d0a37f5caeec2f7894cda5bc4435c', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, index.h("div", { key: '16339473f805eee2ca37fe4f8b3bbbfc7eb6dd48', role: "list" }, index.h("slot", { key: 'c542a35c05eada1c9ed14622108ddf31731977d7' }))));
+            } }, index.h("div", { key: '7640c1d218f130ab36b0b9f41b5695ffc9c25a87', role: "list" }, index.h("slot", { key: 'f910dc47a5015d4110325b78279e0b01679fa980' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-event-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-event-list.entry.cjs.js","mappings":"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","names":["createMutationObserver","convertToRemString","anime","h","Host"],"sources":["src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","src/components/event-list/event-list.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.item-size-l) {\n  --event-list-item-height: 6.5rem;\n  --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n  --event-list-item-border-radius: 0;\n  --event-list-item-margin-bottom: 0;\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, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  shadow: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() hostElement!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron = false;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.handleChevron(this.chevron);\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this.animated) {\n        resolve();\n      }\n\n      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];\n\n      const listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n      anime({\n        targets: listElement,\n        opacity: keyframes,\n        duration: EventList.fadeOutDuration,\n        complete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      anime({\n        targets: e,\n        offset: offset,\n        duration: EventList.fadeInDuration + delay,\n        opacity: [0, 1],\n        easing: 'easeInOutSine',\n        delay: delay,\n        autoplay: true,\n      });\n    });\n  }\n\n  private handleChevron(chevron: boolean | undefined): void {\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n    listItems.forEach((e) => {\n      if (chevron) {\n        e.setAttribute('chevron', 'true');\n      } else if (chevron !== undefined) {\n        e.removeAttribute('chevron');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n        }}\n      >\n        <div role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-event-list.entry.cjs.js","mappings":"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","names":["createMutationObserver","convertToRemString","anime","h","Host"],"sources":["src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","src/components/event-list/event-list.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.item-size-l) {\n  --event-list-item-height: 6.5rem;\n  --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n  --event-list-item-border-radius: 0;\n  --event-list-item-margin-bottom: 0;\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, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  shadow: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() hostElement!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron = false;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (!Number.isNaN(Number(this.itemHeight))) {\n        const height = convertToRemString(this.itemHeight as number);\n        const eventListItems = this.findEventListItems(mutationRecords);\n        eventListItems.forEach((item) => this.setCustomHeight(item, height));\n      }\n\n      this.handleChevron(this.chevron);\n      this.triggerFadeIn();\n    });\n  }\n\n  private findEventListItems(mutationRecords: MutationRecord[]): HTMLElement[] {\n    const eventListItems: HTMLElement[] = [];\n\n    mutationRecords.forEach((mutation) => {\n      if (mutation.type !== 'childList') {\n        return;\n      }\n\n      mutation.addedNodes.forEach((node) => {\n        const element = node as HTMLElement;\n\n        if (element.tagName === 'IX-EVENT-LIST-ITEM') {\n          eventListItems.push(element);\n        }\n      });\n    });\n\n    return eventListItems;\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this.animated) {\n        resolve();\n      }\n\n      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];\n\n      const listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n      anime({\n        targets: listElement,\n        opacity: keyframes,\n        duration: EventList.fadeOutDuration,\n        complete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      anime({\n        targets: e,\n        offset: offset,\n        duration: EventList.fadeInDuration + delay,\n        opacity: [0, 1],\n        easing: 'easeInOutSine',\n        delay: delay,\n        autoplay: true,\n      });\n    });\n  }\n\n  private handleChevron(chevron: boolean | undefined): void {\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n    listItems.forEach((e) => {\n      if (chevron) {\n        e.setAttribute('chevron', 'true');\n      } else if (chevron !== undefined) {\n        e.removeAttribute('chevron');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n        }}\n      >\n        <div role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-event-list.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-event-list.entry.cjs.js","sources":["src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","src/components/event-list/event-list.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.item-size-l) {\n  --event-list-item-height: 6.5rem;\n  --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n  --event-list-item-border-radius: 0;\n  --event-list-item-margin-bottom: 0;\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, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  shadow: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() hostElement!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron = false;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.handleChevron(this.chevron);\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this.animated) {\n        resolve();\n      }\n\n      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];\n\n      const listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n      anime({\n        targets: listElement,\n        opacity: keyframes,\n        duration: EventList.fadeOutDuration,\n        complete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      anime({\n        targets: e,\n        offset: offset,\n        duration: EventList.fadeInDuration + delay,\n        opacity: [0, 1],\n        easing: 'easeInOutSine',\n        delay: delay,\n        autoplay: true,\n      });\n    });\n  }\n\n  private handleChevron(chevron: boolean | undefined): void {\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n    listItems.forEach((e) => {\n      if (chevron) {\n        e.setAttribute('chevron', 'true');\n      } else if (chevron !== undefined) {\n        e.removeAttribute('chevron');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n        }}\n      >\n        <div role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["createMutationObserver","convertToRemString","anime","h","Host"],"mappings":"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"}
+{"version":3,"file":"ix-event-list.entry.cjs.js","sources":["src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","src/components/event-list/event-list.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.item-size-l) {\n  --event-list-item-height: 6.5rem;\n  --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n  --event-list-item-border-radius: 0;\n  --event-list-item-margin-bottom: 0;\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, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  shadow: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() hostElement!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron = false;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (!Number.isNaN(Number(this.itemHeight))) {\n        const height = convertToRemString(this.itemHeight as number);\n        const eventListItems = this.findEventListItems(mutationRecords);\n        eventListItems.forEach((item) => this.setCustomHeight(item, height));\n      }\n\n      this.handleChevron(this.chevron);\n      this.triggerFadeIn();\n    });\n  }\n\n  private findEventListItems(mutationRecords: MutationRecord[]): HTMLElement[] {\n    const eventListItems: HTMLElement[] = [];\n\n    mutationRecords.forEach((mutation) => {\n      if (mutation.type !== 'childList') {\n        return;\n      }\n\n      mutation.addedNodes.forEach((node) => {\n        const element = node as HTMLElement;\n\n        if (element.tagName === 'IX-EVENT-LIST-ITEM') {\n          eventListItems.push(element);\n        }\n      });\n    });\n\n    return eventListItems;\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this.animated) {\n        resolve();\n      }\n\n      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];\n\n      const listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n      anime({\n        targets: listElement,\n        opacity: keyframes,\n        duration: EventList.fadeOutDuration,\n        complete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      anime({\n        targets: e,\n        offset: offset,\n        duration: EventList.fadeInDuration + delay,\n        opacity: [0, 1],\n        easing: 'easeInOutSine',\n        delay: delay,\n        autoplay: true,\n      });\n    });\n  }\n\n  private handleChevron(chevron: boolean | undefined): void {\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n    listItems.forEach((e) => {\n      if (chevron) {\n        e.setAttribute('chevron', 'true');\n      } else if (chevron !== undefined) {\n        e.removeAttribute('chevron');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n        }}\n      >\n        <div role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["createMutationObserver","convertToRemString","anime","h","Host"],"mappings":"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"}

package/dist/cjs/ix-expanding-search.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 var index$1 = require('./index-DIFIjYrm.js');
 
 const expandingSearchCss = ".ix-form-control,.ix-form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]{text-align:right}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative;}: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-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}";

package/dist/cjs/ix-field-label.ix-field-wrapper.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-field-label.ix-field-wrapper.entry.cjs.js","sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.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 */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  updateFormInternalValue(value: T): void;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  ixBlur: EventEmitter<void>;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\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\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\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 { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>&nbsp;*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","a11yHostAttributes","createClassMutationObserver","h","Host","renderHelperText","hasAnyText"],"mappings":"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"}
+{"version":3,"file":"ix-field-label.ix-field-wrapper.entry.cjs.js","sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.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 */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  updateFormInternalValue(value: T): void | Promise<void>;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  ixBlur: EventEmitter<void>;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\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\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\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 { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","a11yHostAttributes","createClassMutationObserver","h","Host","renderHelperText","hasAnyText"],"mappings":"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"}

package/dist/cjs/ix-field-label_2.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 var a11y = require('./a11y-B_6chCvu.js');
 var makeRef = require('./make-ref-BaH6_YJk.js');
-var validation = require('./validation-CAJ2gTIK.js');
-var helperTextUtil = require('./helper-text-util-x8PVAsbI.js');
+var validation = require('./validation-B-wzGaWF.js');
+var helperTextUtil = require('./helper-text-util-Dk2i8B86.js');
 require('./index-DIFIjYrm.js');
 
 function isIxInputFieldComponent(obj) {
@@ -121,7 +121,7 @@ const FormFieldLabel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4b00ea62a90eae362b7236d82a08f031c075c10d', onClick: () => this.focusOnClick() }, index.h("label", Object.assign({ key: '1c3e406baa6b6414cacf17961279bcd7ad1545ca', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), index.h("ix-typography", { key: '54c5e7cbd6c505edbe2c37a20ecbecd91deb441b', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, index.h("slot", { key: '9638a38954088cff1cd539f1b49ef70778b4ff21' }), this.required && index.h("span", { key: 'b30063403d1e99121191ce945665781cba7ba34b' }, "\u00A0*")))));
+        return (index.h(index.Host, { key: '4b00ea62a90eae362b7236d82a08f031c075c10d', onClick: () => this.focusOnClick() }, index.h("label", Object.assign({ key: '1c3e406baa6b6414cacf17961279bcd7ad1545ca', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), index.h("ix-typography", { key: '54c5e7cbd6c505edbe2c37a20ecbecd91deb441b', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, index.h("slot", { key: '9638a38954088cff1cd539f1b49ef70778b4ff21' }), this.required && index.h("span", { key: 'b30063403d1e99121191ce945665781cba7ba34b' }, "*")))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-field-label_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-field-label.ix-field-wrapper.entry.cjs.js","mappings":"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","names":["makeRef","a11yHostAttributes","createClassMutationObserver","h","Host","renderHelperText","hasAnyText"],"sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.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 */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  updateFormInternalValue(value: T): void;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  ixBlur: EventEmitter<void>;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\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\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\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 { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>&nbsp;*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-field-label.ix-field-wrapper.entry.cjs.js","mappings":"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","names":["makeRef","a11yHostAttributes","createClassMutationObserver","h","Host","renderHelperText","hasAnyText"],"sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.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 */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  updateFormInternalValue(value: T): void | Promise<void>;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  ixBlur: EventEmitter<void>;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\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\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\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 { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-filter-chip_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 var index$1 = require('./index-DIFIjYrm.js');
 
 const filterChipCss = ":host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";

package/dist/cjs/ix-flip-tile-content.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 
 const flipTileContentCss = ":host{display:block}";
 

package/dist/cjs/ix-flip-tile.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
 var flipTileState = require('./flip-tile-state-bDVEEzk4.js');
 var index$1 = require('./index-DIFIjYrm.js');

package/dist/cjs/ix-group-context-menu_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 var shadowDom = require('./shadow-dom-DT01VwcB.js');
 var index$1 = require('./index-DIFIjYrm.js');
 

package/dist/cjs/ix-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
+var index = require('./index-CnXGUOZU.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
 var shadowDom = require('./shadow-dom-DT01VwcB.js');
 var index$1 = require('./index-DIFIjYrm.js');

package/dist/cjs/ix-helper-text.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
-var validation = require('./validation-CAJ2gTIK.js');
-var helperTextUtil = require('./helper-text-util-x8PVAsbI.js');
+var index = require('./index-CnXGUOZU.js');
+var validation = require('./validation-B-wzGaWF.js');
+var helperTextUtil = require('./helper-text-util-Dk2i8B86.js');
 require('./index-DIFIjYrm.js');
 
 const helperTextCss = ":host{display:block}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}";

package/dist/cjs/ix-icon-button_2.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DUl1Kp3_.js');
-var baseIconButton = require('./base-icon-button-D0j4OzyN.js');
+var index = require('./index-CnXGUOZU.js');
+var baseIconButton = require('./base-icon-button-BOVJplyV.js');
 var a11y = require('./a11y-B_6chCvu.js');
-require('./base-button-CqhWuxXr.js');
+require('./base-button-CAt4UMAy.js');
 
 const iconButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}: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 button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}";