@siemens/ix 0.0.0-pr-2166-20251001134702 → 0.0.0-pr-2212-20251017115125

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

@@ -23,9 +23,9 @@ const EventList = class {
          */
         this.compact = false;
         /**
-         * Animate state change transitions. Defaults to 'false'.
+         * Animate state change transitions. Defaults to 'true'.
          */
-        this.animated = false;
+        this.animated = true;
         /**
          * Display a chevron icon in list items. Defaults to 'false'
          */
@@ -126,11 +126,11 @@ const EventList = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '700b662ebfba2754f0c4c0d3bf09e95c5277760d', class: {
+        return (index.h(index.Host, { key: '754948a81d85157177bfff7afeee4f4851540c4d', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, index.h("div", { key: 'ebfed96ff53b21d49c9b9464978c79faa22210e0', role: "list" }, index.h("slot", { key: '4df468a4c4cc9643dae0b13f7b88df3402e3beaf' }))));
+            } }, index.h("div", { key: '27c68dcf3eeddc91e31bd1bb3abd3f933aa3cbdf', role: "list" }, index.h("slot", { key: '828bb7c4b9b39cfb6aff66f0cbe35b0705ae6419' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  position: relative;\n\n  @include component.ix-component;\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 { animate } 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 'false'.\n   */\n  @Prop() animated = false;\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 listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n      animate(listElement!, {\n        opacity: [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }],\n        duration: EventList.fadeOutDuration,\n        onComplete: () => {\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      animate(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","animate","h","Host"],"mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,i/BAAi/B;;MCmBz/B,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMmB,QAAA,IAAA,CAAA,gBAAgB,GAAGA,uCAAsB,CACxD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAC3B;AAOD;;;;;AAKG;AACK,QAAA,IAAU,CAAA,UAAA,GAAuB,GAAG;AAE5C;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEvB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAmIxB;AAhIC,IAAA,YAAY,CAAC,OAA4B,EAAA;AACvC,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;;IAG7B,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE;;AAGtB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE;YAC1C,MAAM,MAAM,GAAGC,2BAAkB,CAAC,IAAI,CAAC,UAAoB,CAAC;AAC5D,YAAA,IAAI,CAAC;iBACF,gBAAgB,CAAC,oBAAoB;AACrC,iBAAA,OAAO,CAAC,CAAC,IAAI,KAAI;AAChB,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAmB,EAAE,MAAM,CAAC;AACnD,aAAC,CAAC;;AAGN,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;QAEhC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;AAC9C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;;AAGI,IAAA,UAAU,CAAC,eAAsC,EAAA;AACvD,QAAA,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,MAAK;AAC9B,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE;gBAC1C,MAAM,MAAM,GAAGA,2BAAkB,CAAC,IAAI,CAAC,UAAoB,CAAC;gBAC5D,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC;AAC/D,gBAAA,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;;AAGtE,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,SAAC,CAAC;;AAGI,IAAA,kBAAkB,CAAC,eAAiC,EAAA;QAC1D,MAAM,cAAc,GAAkB,EAAE;AAExC,QAAA,eAAe,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AACnC,YAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;gBACjC;;YAGF,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;gBACnC,MAAM,OAAO,GAAG,IAAmB;AAEnC,gBAAA,IAAI,OAAO,CAAC,OAAO,KAAK,oBAAoB,EAAE;AAC5C,oBAAA,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;;AAEhC,aAAC,CAAC;AACJ,SAAC,CAAC;AAEF,QAAA,OAAO,cAAc;;IAGf,eAAe,CAAC,IAAiB,EAAE,MAAc,EAAA;QACvD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,MAAM,CAAC;;IAGpD,cAAc,GAAA;AACpB,QAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AAC7B,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,OAAO,EAAE;;AAGX,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,IAAI,CAAC;YAEpEC,iBAAO,CAAC,WAAY,EAAE;AACpB,gBAAA,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;gBAC/D,QAAQ,EAAE,SAAS,CAAC,eAAe;gBACnC,UAAU,EAAE,MAAK;AACf,oBAAA,OAAO,EAAE;iBACV;AACF,aAAA,CAAC;AACJ,SAAC,CAAC;;IAGI,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB;;QAGF,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;QACzE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACzB,YAAA,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,KAAK,IAAI,KAAK,GAAG,SAAS,CAAC,cAAc,CAAC;YACzDA,iBAAO,CAAC,CAAC,EAAE;AACT,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,KAAK;AAC1C,gBAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,gBAAA,MAAM,EAAE,eAAe;AACvB,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC;AACJ,SAAC,CAAC;;AAGI,IAAA,aAAa,CAAC,OAA4B,EAAA;QAChD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;AAEzE,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;YACtB,IAAI,OAAO,EAAE;AACX,gBAAA,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC;;AAC5B,iBAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AAChC,gBAAA,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC;;AAEhC,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI,CAAC,UAAU,KAAK,GAAG;AACtC,gBAAA,aAAa,EAAE,IAAI,CAAC,UAAU,KAAK,GAAG;gBACtC,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,aAAA,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACdA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;AA1Ja,SAAe,CAAA,eAAA,GAAG,EAAH;AACf,SAAc,CAAA,cAAA,GAAG,GAAH;;;;;"}
+{"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@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  position: relative;\n\n  @include component.ix-component;\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 { animate } 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 listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n      animate(listElement!, {\n        opacity: [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }],\n        duration: EventList.fadeOutDuration,\n        onComplete: () => {\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      animate(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","animate","h","Host"],"mappings":"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"}

package/dist/cjs/ix-filter-chip.ix-select-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-filter-chip.ix-select-item.entry.cjs.js","sources":["src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","src/components/filter-chip/filter-chip.tsx","src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-item.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@use './common-variables' as vars;\n@use 'mixins/hover';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  height: vars.$large-space;\n  padding-left: vars.$small-space;\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-chip-primary-outline--border-color);\n  border-radius: vars.$x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  @include component.ix-component;\n\n  .slot-container {\n    @include text-truncation.ellipsis;\n\n    :host-context(.disabled) {\n      background-color: var(--theme-color-ghost);\n      border-color: var(--theme-color-component-4);\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  ix-icon-button {\n    height: vars.$large-space;\n    margin-left: 0.25rem;\n\n    @include hover.focus-visible {\n      outline: none;\n    }\n  }\n}\n\n:host(.disabled) {\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-color-component-4);\n  color: var(--theme-color-weak-text);\n  padding-right: vars.$small-space;\n\n  cursor: default;\n}\n\n:host(.readonly) {\n  padding-right: vars.$small-space;\n}\n\n@include hover.host-hover {\n  background-color: var(--theme-color-ghost-primary--hover);\n  border-color: var(--theme-chip-primary-outline--border-color--hover);\n  color: var(--theme-chip-primary-outline--color--hover);\n}\n\n@include hover.host-active {\n  background-color: var(--theme-color-ghost-primary--active);\n  border-color: var(--theme-chip-primary-outline--border-color--active);\n  color: var(--theme-chip-primary-outline--color--active);\n}\n\n@include hover.host-focus-visible {\n  outline: var(--theme-color-focus-bdr) solid\n    var(--theme-focus--border-thickness);\n  outline-offset: -0.125rem;\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 { iconCloseSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() hostElement!: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * ARIA label for the close icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelCloseIconButton?: string;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick!: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.hostElement.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            variant=\"tertiary\"\n            oval\n            icon={iconCloseSmall}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n            aria-label={this.ariaLabelCloseIconButton}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n\nexport class IxSelectItemValueChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:valueChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  ix-dropdown-item {\n    color: var(--theme-color-std-text);\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.display-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  IxSelectItemLabelChangeEvent,\n  IxSelectItemValueChangeEvent,\n} from './events';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The value of the item.\n   * Important: The select component uses string values to handle selection and will call toString() on this value.\n   * Therefor a string should be passed to value to prevent unexpected behavior.\n   */\n  @Prop({ reflect: true }) value!: string;\n\n  /**\n   * Flag indicating whether the item is selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  private componentLoaded = false;\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement(): Promise<HTMLIxDropdownItemElement> {\n    return this.dropdownItem!;\n  }\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  get dropdownItem() {\n    return this.hostElement.querySelector('ix-dropdown-item');\n  }\n\n  componentDidRender() {\n    if (this.value === undefined || this.value === null) {\n      console.warn('ix-select-item must have a `value` property');\n    }\n    this.componentLoaded = true;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemValueChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemLabelChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","iconCloseSmall"],"mappings":"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"}
+{"version":3,"file":"ix-filter-chip.ix-select-item.entry.cjs.js","sources":["src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","src/components/filter-chip/filter-chip.tsx","src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-item.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@use './common-variables' as vars;\n@use 'mixins/hover';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  height: vars.$large-space;\n  padding-left: vars.$small-space;\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-chip-primary-outline--border-color);\n  border-radius: vars.$x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  @include component.ix-component;\n\n  .slot-container {\n    @include text-truncation.ellipsis;\n    line-height: vars.$large-space;\n\n    :host-context(.disabled) {\n      background-color: var(--theme-color-ghost);\n      border-color: var(--theme-color-component-4);\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  ix-icon-button {\n    height: vars.$large-space;\n    margin-left: 0.25rem;\n\n    @include hover.focus-visible {\n      outline: none;\n    }\n  }\n}\n\n:host(.disabled) {\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-color-component-4);\n  color: var(--theme-color-weak-text);\n  padding-right: vars.$small-space;\n\n  cursor: default;\n}\n\n:host(.readonly) {\n  padding-right: vars.$small-space;\n}\n\n@include hover.host-hover {\n  background-color: var(--theme-color-ghost-primary--hover);\n  border-color: var(--theme-chip-primary-outline--border-color--hover);\n  color: var(--theme-chip-primary-outline--color--hover);\n}\n\n@include hover.host-active {\n  background-color: var(--theme-color-ghost-primary--active);\n  border-color: var(--theme-chip-primary-outline--border-color--active);\n  color: var(--theme-chip-primary-outline--color--active);\n}\n\n@include hover.host-focus-visible {\n  outline: var(--theme-color-focus-bdr) solid\n    var(--theme-focus--border-thickness);\n  outline-offset: -0.125rem;\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 { iconCloseSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() hostElement!: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * ARIA label for the close icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelCloseIconButton?: string;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick!: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.hostElement.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            variant=\"tertiary\"\n            oval\n            icon={iconCloseSmall}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n            aria-label={this.ariaLabelCloseIconButton}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n\nexport class IxSelectItemValueChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:valueChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  ix-dropdown-item {\n    color: var(--theme-color-std-text);\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.display-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  IxSelectItemLabelChangeEvent,\n  IxSelectItemValueChangeEvent,\n} from './events';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The value of the item.\n   * Important: The select component uses string values to handle selection and will call toString() on this value.\n   * Therefor a string should be passed to value to prevent unexpected behavior.\n   */\n  @Prop({ reflect: true }) value!: string;\n\n  /**\n   * Flag indicating whether the item is selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  private componentLoaded = false;\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement(): Promise<HTMLIxDropdownItemElement> {\n    return this.dropdownItem!;\n  }\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  get dropdownItem() {\n    return this.hostElement.querySelector('ix-dropdown-item');\n  }\n\n  componentDidRender() {\n    if (this.value === undefined || this.value === null) {\n      console.warn('ix-select-item must have a `value` property');\n    }\n    this.componentLoaded = true;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemValueChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemLabelChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","iconCloseSmall"],"mappings":"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"}

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

@@ -3,7 +3,7 @@
 var index = require('./index-DuDLgBnw.js');
 var index$1 = require('./index-Dyz3z1FD.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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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}";
+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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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;line-height:1.5rem}: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}";
 
 const FilterChip = class {
     constructor(hostRef) {

package/dist/cjs/ix-group-context-menu.ix-group-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-group-context-menu.ix-group-item.entry.cjs.js","sources":["src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","src/components/group/group-context-menu.tsx","src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=shadow","src/components/group-item/group-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n:host {\n  display: block;\n  position: relative;\n\n  height: 2rem;\n  width: 2rem;\n\n  margin-block-start: 0.3125rem;\n  margin-inline-end: 0.3125rem;\n  margin-inline-start: auto;\n\n  .hide {\n    visibility: collapse;\n  }\n\n  ::slotted(ix-dropdown) {\n    cursor: default;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          variant=\"subtle-tertiary\"\n          icon={iconContextMenu}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/shadow-dom/hover';\n@use 'mixins/shadow-dom/component';\n@use 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n\n  @include component.ix-component;\n\n  > button,\n  > .group-footer {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    justify-content: flex-start;\n    position: relative;\n    outline: none;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid transparent;\n    color: var(--theme-color-std-text);\n    cursor: pointer;\n\n    padding-left: 2.5rem;\n\n    &:focus-visible {\n      border: $focusBorderWidth solid var(--theme-color-focus-bdr);\n    }\n\n    &:disabled {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n\n  .group-footer {\n    cursor: default;\n    border: none;\n  }\n\n  ix-icon {\n    margin-right: vars.$tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: -#{$focusBorderWidth};\n    height: calc(100% + #{$focusBorderWidth * 2});\n    width: vars.$tiny-space;\n  }\n\n  .group-entry-text {\n    @include fonts.text-default;\n    @include text-truncation.ellipsis();\n  }\n\n  .group-entry-text-secondary {\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n\n    &,\n    span {\n      @include fonts.text-default;\n      @include text-truncation.ellipsis;\n    }\n  }\n}\n\n:host(.selected) {\n  border-top-width: 0.062rem !important;\n  background-color: var(--theme-color-ghost--selected);\n\n  .group-entry-selection-indicator {\n    background-color: var(--theme-group-item-indicator--background--selected);\n  }\n}\n\n:host(:not(.suppress-mouse-states):hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n  border-color: var(--theme-group-item--border-color--hover);\n}\n\n:host(:not(.suppress-mouse-states).selected:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:not(.suppress-mouse-states):active):not(.suppress-mouse-states) {\n  background-color: var(--theme-color-ghost--selected-active);\n  border-color: var(--theme-group-item--border-color--active);\n}\n\n:host(:not(.suppress-mouse-states).selected:active):not(\n    .suppress-mouse-states\n  ) {\n  background-color: var(--theme-color-ghost--selected-active);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  color: var(--theme-color-weak-text);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * ARIA label for the icon\n   */\n  @Prop() ariaLabelIcon?: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText?: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * @internal\n   * Item represents the footer of the group\n   */\n  @Prop() groupFooter = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Disable the group item.\n   * The elements tabindex attribute will get set accordingly.\n   *\n   * If false tabindex will be 0, -1 otherwise.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged!: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index?: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection || this.disabled) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    if (this.groupFooter) {\n      return (\n        <Host class=\"suppress-mouse-states\">\n          <div class=\"group-footer\">\n            <slot></slot>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.disabled ? -1 : 0} disabled={this.disabled}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? (\n            <ix-icon\n              size=\"16\"\n              name={this.icon}\n              aria-label={this.ariaLabelIcon}\n            ></ix-icon>\n          ) : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":["getSlottedElements","h","Host","iconContextMenu"],"mappings":"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"}
+{"version":3,"file":"ix-group-context-menu.ix-group-item.entry.cjs.js","sources":["src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","src/components/group/group-context-menu.tsx","src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=shadow","src/components/group-item/group-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n:host {\n  display: block;\n  position: relative;\n\n  height: 2rem;\n  width: 2rem;\n\n  margin-block-start: 0.3125rem;\n  margin-inline-end: 0.3125rem;\n  margin-inline-start: auto;\n\n  .hide {\n    visibility: collapse;\n  }\n\n  ::slotted(ix-dropdown) {\n    cursor: default;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          variant=\"subtle-tertiary\"\n          icon={iconContextMenu}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/shadow-dom/hover';\n@use 'mixins/shadow-dom/component';\n@use 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n\n  @include component.ix-component;\n\n  > button {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    justify-content: flex-start;\n    position: relative;\n    outline: none;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid transparent;\n    color: var(--theme-color-std-text);\n    cursor: pointer;\n\n    padding-left: 2.5rem;\n\n    &:focus-visible {\n      border: $focusBorderWidth solid var(--theme-color-focus-bdr);\n    }\n  }\n\n  ix-icon {\n    margin-right: vars.$tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: -#{$focusBorderWidth};\n    height: calc(100% + #{$focusBorderWidth * 2});\n    width: vars.$tiny-space;\n  }\n\n  .group-entry-text {\n    @include fonts.text-default;\n    @include text-truncation.ellipsis();\n  }\n\n  .group-entry-text-secondary {\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n\n    &,\n    span {\n      @include fonts.text-default;\n      @include text-truncation.ellipsis;\n    }\n  }\n}\n\n:host(.selected) {\n  border-top-width: 0.062rem !important;\n  background-color: var(--theme-color-ghost--selected);\n\n  .group-entry-selection-indicator {\n    background-color: var(--theme-group-item-indicator--background--selected);\n  }\n}\n\n:host(:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n  border-color: var(--theme-group-item--border-color--hover);\n}\n\n:host(.selected:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:active) {\n  background-color: var(--theme-color-ghost--selected-active);\n  border-color: var(--theme-group-item--border-color--active);\n}\n\n:host(.selected:active) {\n  background-color: var(--theme-color-ghost--selected-active);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * ARIA label for the icon\n   */\n  @Prop() ariaLabelIcon?: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText?: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged!: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index?: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? (\n            <ix-icon\n              size=\"16\"\n              name={this.icon}\n              aria-label={this.ariaLabelIcon}\n            ></ix-icon>\n          ) : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":["getSlottedElements","h","Host","iconContextMenu"],"mappings":"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"}

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

@@ -42,7 +42,7 @@ const GroupContextMenu = class {
 };
 GroupContextMenu.style = groupContextMenuCss;
 
-const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host>button,:host>.group-footer{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}:host>button:focus-visible,:host>.group-footer:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host>button:disabled,:host>.group-footer:disabled{cursor:default;pointer-events:none}:host .group-footer{cursor:default;border:none}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:not(.suppress-mouse-states):hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(:not(.suppress-mouse-states).selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:not(.suppress-mouse-states):active):not(.suppress-mouse-states){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(:not(.suppress-mouse-states).selected:active):not(.suppress-mouse-states){background-color:var(--theme-color-ghost--selected-active)}:host([disabled]){pointer-events:none;color:var(--theme-color-weak-text)}";
+const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host>button{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}:host>button:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(.selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(.selected:active){background-color:var(--theme-color-ghost--selected-active)}";
 
 const GroupItem = class {
     constructor(hostRef) {
@@ -52,36 +52,23 @@ const GroupItem = class {
          * Supress the selection of the group
          */
         this.suppressSelection = false;
-        /**
-         * @internal
-         * Item represents the footer of the group
-         */
-        this.groupFooter = false;
         /**
          * Show selected state
          */
         this.selected = false;
         /**
-         * Disable the group item.
          * The elements tabindex attribute will get set accordingly.
-         *
-         * If false tabindex will be 0, -1 otherwise.
+         * If true tabindex will be 0, -1 otherwise.
          */
-        this.disabled = false;
+        this.focusable = true;
     }
     clickListen() {
-        if (this.suppressSelection || this.disabled) {
-            return;
-        }
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        if (this.groupFooter) {
-            return (index.h(index.Host, { class: "suppress-mouse-states" }, index.h("div", { class: "group-footer" }, index.h("slot", null))));
-        }
-        return (index.h(index.Host, { class: {
+        return (index.h(index.Host, { key: '149648f824aeee11a3877fec7dba0b45ccef6ba1', class: {
                 selected: this.selected && !this.suppressSelection,
-            } }, index.h("button", { tabindex: this.disabled ? -1 : 0, disabled: this.disabled }, index.h("div", { class: "group-entry-selection-indicator" }), this.icon ? (index.h("ix-icon", { size: "16", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, this.text ? (index.h("span", { class: "group-entry-text" }, index.h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (index.h("span", { class: "group-entry-text-secondary" }, index.h("span", { title: this.secondaryText }, this.secondaryText))) : null, index.h("slot", null))));
+            } }, index.h("button", { key: 'e367df0d5ea0af27e88a572f96b0ce151b5f02db', tabindex: this.focusable ? 0 : -1 }, index.h("div", { key: '589e2774a57f474ed9b77639b262f9d0fa607473', class: "group-entry-selection-indicator" }), this.icon ? (index.h("ix-icon", { size: "16", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, this.text ? (index.h("span", { class: "group-entry-text" }, index.h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (index.h("span", { class: "group-entry-text-secondary" }, index.h("span", { title: this.secondaryText }, this.secondaryText))) : null, index.h("slot", { key: '9cebb9c4a0383c77e935f6c5937c86445f4c28ec' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -5,22 +5,22 @@ var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
 var shadowDom = require('./shadow-dom-DT01VwcB.js');
 var index$1 = require('./index-Dyz3z1FD.js');
 
-const groupCss = ":host{display:flex;flex-direction:column;position:relative;width:19.75rem;min-width:12rem;border-color:var(--theme-group-item--border-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover,:host .group-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected,:host .group-header:not(.disabled):not(:disabled).hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{height:calc(4rem - 2px);min-height:calc(4rem - 2px);border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-selection-indicator{width:calc(0.25rem - 1px)}:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-content{padding:calc(0.5rem - 1px) calc(0.5rem - 1px) calc(0.5rem - 1px) 0}:host .group-header:not(.disabled):not(:disabled):focus-visible .btn-expand-header{margin-top:calc(0.5rem - 1px);margin-bottom:calc(0.5rem - 1px)}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{display:flex;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{min-width:0;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-subheader{height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";
+const groupCss = ":host{display:flex;flex-direction:column;position:relative;width:19.75rem;min-width:12rem;border-color:var(--theme-group-item--border-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover,:host .group-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected,:host .group-header:not(.disabled):not(:disabled).hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{display:flex;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{min-width:0;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-subheader{height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";
 
 const Group = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.selectGroup = index.createEvent(this, "selectGroup", 7);
         this.selectItem = index.createEvent(this, "selectItem", 7);
-        this.expandedChanged = index.createEvent(this, "expandedChanged", 7);
+        this.collapsedChanged = index.createEvent(this, "collapsedChanged", 7);
         /**
          * Prevent header from being selectable
          */
         this.suppressHeaderSelection = false;
         /**
-         * Whether the group is expanded or collapsed. Defaults to false.
+         * Whether the group is collapsed or expanded. Defaults to true.
          */
-        this.expanded = false;
+        this.collapsed = true;
         /**
          * Whether the group is selected.
          */
@@ -52,12 +52,12 @@ const Group = class {
         return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
     }
     onExpandClick(event) {
-        const oldExpanded = this.expanded;
-        this.expanded = !this.expanded;
-        const { defaultPrevented } = this.expandedChanged.emit(this.expanded);
+        const oldCollapsed = this.collapsed;
+        this.collapsed = !this.collapsed;
+        const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);
         event.stopPropagation();
         if (defaultPrevented) {
-            this.expanded = oldExpanded;
+            this.collapsed = oldCollapsed;
         }
     }
     onHeaderClick(event) {
@@ -138,27 +138,27 @@ const Group = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3f0490f98871cd258f1a7735587c5c994787b5f3' }, index.h("div", { key: '85a820e8677768ac5952862d6860bf67ddddd06b', class: {
+        return (index.h(index.Host, { key: '58701d250c8e595737fa95f9981e788298e26c2a' }, index.h("div", { key: '0f754f0be1fe8278e882447cd95f84384b82c467', class: {
                 'group-header': true,
-                expand: this.expanded,
+                expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, index.h("div", { key: 'eb02896f695cf74d19a0c17e732886ba2791cae8', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: '6c361a6e2bb2b9e9614f726c72d943bb540c6e6f', class: {
+            }, tabindex: "0" }, index.h("div", { key: 'b15eddf0aa21c1f392c49974624c4d66f7ca441f', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: '5987826be949fabd86fe4ab2d5da9f6ee92becde', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), index.h("div", { key: '957fddd2512cb0004889bb8627dca06a24172678', class: "btn-expand-header" }, index.h("ix-icon", { key: '5e6d9f54bd16530b6ee35be0ae2429075574f7af', "data-testid": "expand-collapsed-icon", class: {
+            } }), index.h("div", { key: 'fb364b83a2dff3fcacbd661e6093ce8b975e3930', class: "btn-expand-header" }, index.h("ix-icon", { key: 'd308f69c7d8e12d34d3442ce9a318a91b67c2033', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? index$1.iconChevronUpSmall : index$1.iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), index.h("div", { key: '7afbcddcae71944c3d89f4671c52faec405072da', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: '434daedde0c193250cc55ecef24a648427d93521', name: "header" }))), this.hasDropdown && (index.h("ix-group-context-menu", { key: '4c3e93b8fe830a7d3e40c9560b5821a44e82a076' }, index.h("slot", { key: '509f13fadad10aa375da8d823692c869031e51c5', name: "dropdown" })))), index.h("div", { key: '1fbc03459ee2ce55b44f2393898ced6fd8d767ca', class: {
+            }, name: this.collapsed ? index$1.iconChevronDownSmall : index$1.iconChevronUpSmall, onClick: (event) => this.onExpandClick(event) })), index.h("div", { key: 'c5bad9a9cb3d025b5ea2bf1b85f471687959c69b', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: '2b7b1d241e9a33609d5b28653aaeeb4a51bb64af', name: "header" }))), this.hasDropdown && (index.h("ix-group-context-menu", { key: 'eb3c896e413299db1b9ce93173b9d926d938e3e1' }, index.h("slot", { key: '35670588a1f87409787c75fc32d34bfa9355d160', name: "dropdown" })))), index.h("div", { key: '11254313bc4e541b69f38071c027cdfd0ef735f5', class: {
                 'group-content': true,
-            } }, index.h("div", { key: 'e5c7ab27d286eb9a3e56d906cff40009fcd9c317', style: {
-                display: this.expanded ? 'contents' : 'none',
-            } }, index.h("slot", { key: '270b3877b50ad67ad95ef1bf6ac28aa7a6bfc1ae', onSlotchange: () => {
+            } }, index.h("div", { key: '0c24d4903f217ded9c6330b349de13abc77b464b', style: {
+                display: this.collapsed ? 'none' : 'contents',
+            } }, index.h("slot", { key: '45e1064fa54bb32ad27ac9f502cb4ec9a38963bf', onSlotchange: () => {
                 var _a;
                 const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = shadowDom.hasSlottedElements(slot);
-            } }), index.h("ix-group-item", { key: '1a44451e3855c4e7fa22d1aefa4df34692dc3453', class: {
+            } }), index.h("ix-group-item", { key: '81b3018f3cbafbcaf8c7ec0bad46b538944423b0', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, index.h("slot", { key: '221292d8be0d15548275e6a24e4f3fcbccd3d2dc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, index.h("slot", { key: 'e39c3a323325c7b6b1a2bc02c3c3fa47ad421a5d', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

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

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

@@ -50,7 +50,7 @@ const HelperText = class {
         this.validationResults = validation.checkFieldClasses(forElement);
     }
     render() {
-        return (index.h(index.Host, { key: 'fc7c96b79fcbff2f9bcf9b45345f16dba5a404c6' }, index.h(helperTextUtil.HelperText, Object.assign({ key: '9e6d2c5fa00aa658c5fa9ae1393537b6255e42f4', helperText: this.helperText,
+        return (index.h(index.Host, { key: '9fa836439e6423067e2da4328bfaeefbe898109a' }, index.h(helperTextUtil.HelperText, Object.assign({ key: '86d6666e919b9c80fd85e40a7b27dbbdeebd4a2c', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,

package/dist/cjs/ix-icon-button.ix-spinner.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-icon-button.ix-spinner.entry.cjs.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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@use './icon-button-mixin.scss';\n\n@include icon-button-mixin.base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport {\n  getFallbackLabelFromIconName,\n  a11yHostAttributes,\n} from '../utils/a11y';\nimport type { IconButtonVariant } from './icon-button.types';\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @deprecated Set the native `aria-label` on the ix-icon-button host element. Will be removed in 5.0.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'subtle-primary';\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label':\n          a11y['aria-label'] ??\n          this.a11yLabel ??\n          getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n","/*\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@use 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    display: block;\n    position: relative;\n\n    @include component.ix-component;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":["a11y","a11yHostAttributes","getFallbackLabelFromIconName","h","Host","BaseIconButton"],"mappings":"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"}
+{"version":3,"file":"ix-icon-button.ix-spinner.entry.cjs.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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@use './icon-button-mixin.scss';\n\n@include icon-button-mixin.base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport {\n  getFallbackLabelFromIconName,\n  a11yHostAttributes,\n} from '../utils/a11y';\nimport type { IconButtonVariant } from './icon-button.types';\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @deprecated Set the native `aria-label` on the ix-icon-button host element\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'subtle-primary';\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label':\n          a11y['aria-label'] ??\n          this.a11yLabel ??\n          getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n","/*\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@use 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    display: block;\n    position: relative;\n\n    @include component.ix-component;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    //TODO(IX-3400): Replace track color with proper CSS variables when available\n    border: $track-size solid var(--theme-color-component-3);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":["a11y","a11yHostAttributes","getFallbackLabelFromIconName","h","Host","BaseIconButton"],"mappings":"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"}