@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/esm/ix-event-list_2.entry.js

@@ -1,154 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-7334ee80.js';
-import { c as createMutationObserver } from './mutation-observer-7d01bbea.js';
-import { a as convertToRemString } from './rwd.util-cfc2ea72.js';
-
-const eventListCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ul{list-style:none;padding:0;margin-bottom:0}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}";
-
-const EventList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
-    this.itemHeight = 'S';
-    this.compact = false;
-    this.animated = true;
-    this.chevron = undefined;
-  }
-  watchChevron(chevron) {
-    this.handleChevron(chevron);
-  }
-  componentDidLoad() {
-    if (this.animated) {
-      this.triggerFadeIn();
-    }
-    if (!Number.isNaN(Number(this.itemHeight))) {
-      const height = convertToRemString(this.itemHeight);
-      this.hostElement
-        .querySelectorAll('ix-event-list-item')
-        .forEach((item) => {
-        this.setCustomHeight(item, height);
-      });
-    }
-    this.handleChevron(this.chevron);
-    this.mutationObserver.observe(this.hostElement, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  onMutation(mutationRecords) {
-    this.triggerFadeOut().then(() => {
-      if (typeof this.itemHeight === 'number') {
-        const height = convertToRemString(this.itemHeight);
-        mutationRecords
-          .filter((mutation) => mutation.type === 'childList')
-          .forEach((mutation) => mutation.addedNodes.forEach((item) => {
-          const itemHtml = item;
-          this.setCustomHeight(itemHtml, height);
-        }));
-      }
-      this.handleChevron(this.chevron);
-      this.triggerFadeIn();
-    });
-  }
-  setCustomHeight(item, height) {
-    item.style.setProperty('--event-list-item-height', height);
-  }
-  triggerFadeOut() {
-    if (!this.animated) {
-      return Promise.resolve();
-    }
-    const keyframes = [
-      {
-        opacity: 1,
-        easing: 'ease-in',
-      },
-      { opacity: 0 },
-    ];
-    const listElement = this.hostElement.shadowRoot.querySelector('ul');
-    return listElement.animate(keyframes, {
-      duration: EventList.fadeOutDuration,
-    }).finished;
-  }
-  triggerFadeIn() {
-    if (!this.animated) {
-      return;
-    }
-    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');
-    listItems.forEach((e, i) => {
-      const delay = i * 80;
-      const offset = delay / (delay + EventList.fadeInDuration);
-      const keyframes = [
-        { opacity: 0 },
-        { opacity: 0, easing: 'ease-out', offset },
-        { opacity: 1 },
-      ];
-      const options = {
-        duration: EventList.fadeInDuration + delay,
-        iterations: 1,
-      };
-      e.animate(keyframes, options);
-    });
-  }
-  handleChevron(chevron) {
-    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');
-    listItems.forEach((e) => {
-      if (chevron) {
-        e.setAttribute('chevron', 'true');
-      }
-      else if (chevron !== undefined) {
-        e.removeAttribute('chevron');
-      }
-    });
-  }
-  render() {
-    return (h(Host, { class: {
-        'item-size-s': this.itemHeight === 'S',
-        'item-size-l': this.itemHeight === 'L',
-        compact: this.compact,
-      } }, h("ul", null, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "chevron": ["watchChevron"]
-  }; }
-};
-EventList.fadeOutDuration = 50;
-EventList.fadeInDuration = 150;
-EventList.style = eventListCss;
-
-const eventListItemCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}:host(.disabled){pointer-events:none}";
-
-const EventListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.itemClick = createEvent(this, "itemClick", 7);
-    this.color = undefined;
-    this.selected = undefined;
-    this.disabled = undefined;
-    this.chevron = undefined;
-    this.opacity = 1;
-  }
-  handleItemClick() {
-    this.itemClick.emit();
-  }
-  render() {
-    var _a;
-    const color = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
-      ? `var(${this.color})`
-      : `var(--theme-${this.color})`;
-    return (h(Host, { class: {
-        disabled: this.disabled,
-      } }, h("div", { class: {
-        'event-list-item': true,
-        selected: this.selected,
-        disabled: this.disabled,
-      } }, h("div", { class: `indicator ${!this.color ? 'indicator-empty' : ''}`, style: {
-        'background-color': this.color ? color : 'inherit',
-        opacity: `${this.disabled ? 0.4 : this.opacity}`,
-      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron && (h("ix-icon", { name: "chevron-right", size: "16", class: "chevron-icon" }))))));
-  }
-};
-EventListItem.style = eventListItemCss;
-
-export { EventList as ix_event_list, EventListItem as ix_event_list_item };
-
-//# sourceMappingURL=ix-event-list_2.entry.js.map

package/dist/esm/ix-event-list_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"ix-event-list.ix-event-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","./src/components/event-list/event-list.tsx","./src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","./src/components/event-list-item/event-list-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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  ul {\n    list-style: none;\n    padding: 0;\n    margin-bottom: 0;\n  }\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';\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: boolean;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.handleChevron(this.chevron);\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<any> {\n    if (!this.animated) {\n      return Promise.resolve();\n    }\n\n    const keyframes = [\n      {\n        opacity: 1,\n        easing: 'ease-in',\n      },\n      { opacity: 0 },\n    ];\n    const listElement = this.hostElement.shadowRoot.querySelector('ul');\n    return listElement.animate(keyframes, {\n      duration: EventList.fadeOutDuration,\n    }).finished;\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      const keyframes = [\n        { opacity: 0 },\n        { opacity: 0, easing: 'ease-out', offset },\n        { opacity: 1 },\n      ];\n      const options = {\n        duration: EventList.fadeInDuration + delay,\n        iterations: 1,\n      };\n      e.animate(keyframes, options);\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        <ul>\n          <slot></slot>\n        </ul>\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@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n@import 'common-variables';\n\n$default-event-list-item-height: 2.5rem;\n\n:host {\n  @include ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(--event-list-item-border-radius, $default-border-radius);\n    background-color: var(--theme-event-item--background);\n    overflow: hidden;\n    transition: $default-time;\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, $small-space);\n\n    .indicator {\n      height: 100%;\n      width: $small-space;\n      max-width: $small-space;\n      min-width: $small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      @include ellipsis;\n\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{$default-space} + #{$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--theme-event-item--border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-left: none;\n      padding-left: $default-space;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: $small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover {\n        background-color: var(--theme-event-item--background--hover);\n      }\n\n      @include active {\n        background-color: var(--theme-event-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover {\n          border-color: var(--theme-event-item--border--hover);\n        }\n\n        @include active {\n          border-color: var(--theme-event-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--theme-event-item--background--disabled);\n        border-color: var(--theme-event-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @see https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    const color = this.color?.startsWith('--theme')\n      ? `var(${this.color})`\n      : `var(--theme-${this.color})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : this.opacity}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name=\"chevron-right\"\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-filter-chip.entry.js

@@ -1,25 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7334ee80.js';
-
-const filterChipCss = ":host{display: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 .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(: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) {
-    registerInstance(this, hostRef);
-    this.closeClick = createEvent(this, "closeClick", 7);
-    this.disabled = false;
-  }
-  onCloseClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.closeClick.emit();
-  }
-  render() {
-    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("ix-icon-button", { ghost: true, oval: true, icon: "close-small", size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })));
-  }
-  get el() { return getElement(this); }
-};
-FilterChip.style = filterChipCss;
-
-export { FilterChip as ix_filter_chip };
-
-//# sourceMappingURL=ix-filter-chip.entry.js.map

package/dist/esm/ix-filter-chip.entry.js.map

@@ -1 +0,0 @@
-{"file":"ix-filter-chip.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,y7CAAy7C;;MCwBl8C,UAAU;;;;oBAMF,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,IAClE,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAa,CACT,EACN,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,CACb,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","./src/components/filter-chip/filter-chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);\n  border-radius: $x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  .slot-container {\n    @include 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: $large-space;\n    margin-left: $tiny-space;\n\n    @include focus-visible {\n      outline: none;\n    }\n  }\n}\n\n@include 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 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 host-focus-visible {\n    outline: var(--theme-color-focus-bdr) solid 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 {\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() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\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 class={{ disabled: this.disabled }} title={this.el.textContent}>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        <ix-icon-button\n          ghost\n          oval\n          icon=\"close-small\"\n          size=\"16\"\n          tabindex={this.disabled ? -1 : 0}\n          variant=\"primary\"\n          disabled={this.disabled}\n          onClick={(e) => this.onCloseClick(e)}\n        ></ix-icon-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-flip-tile_2.entry.js

@@ -1,88 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7334ee80.js';
-import { F as FlipTileState } from './flip-tile-state-db31345f.js';
-
-const flipTileCss = "@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}.sc-ix-flip-tile-h{display:flex;flex-direction:column;perspective:1000px}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile .header-slot-container.sc-ix-flip-tile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}.sc-ix-flip-tile-h .content-container.sc-ix-flip-tile{flex-grow:1;margin:1rem}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}.sc-ix-flip-tile-h .flip-tile-container.flip-animation-active.sc-ix-flip-tile{animation:flip-animation 300ms, ease-in-out}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile .sc-ix-flip-tile:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}.sc-ix-flip-tile-h .flip-tile-container .sc-ix-flip-tile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile{border-color:var(--theme-color-primary)}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile{border-color:var(--theme-color-info)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile{border-color:var(--theme-color-warning)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile{border-color:var(--theme-color-alarm)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}.sc-ix-flip-tile-h:hover .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile ix-icon.sc-ix-flip-tile{color:var(--theme-color-std-text)}";
-
-const FlipTile = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ANIMATION_DURATION = 150;
-    this.index = 0;
-    this.isFlipAnimationActive = undefined;
-    this.state = undefined;
-    this.footer = undefined;
-    this.height = 15.125;
-    this.width = 16;
-  }
-  componentDidLoad() {
-    this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
-    this.contentItems.forEach((_, index) => {
-      if (index !== this.index) {
-        this.toggleContentItem(index);
-      }
-    });
-  }
-  toggleIndex() {
-    this.doFlipAnimation();
-  }
-  toggleContentItem(index) {
-    const item = this.contentItems[index];
-    item.classList.toggle('d-none');
-  }
-  doFlipAnimation() {
-    this.isFlipAnimationActive = true;
-    setTimeout(() => {
-      this.toggleContentItem(this.index);
-      if (this.index >= this.contentItems.length - 1) {
-        this.index = 0;
-      }
-      else {
-        this.index++;
-      }
-      this.toggleContentItem(this.index);
-    }, this.ANIMATION_DURATION);
-    setTimeout(() => {
-      this.isFlipAnimationActive = false;
-    }, 2 * this.ANIMATION_DURATION);
-  }
-  render() {
-    return (h(Host, { style: {
-        height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
-        'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
-        'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
-        width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-        'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-        'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-      } }, h("div", { class: {
-        'flip-tile-container': true,
-        info: this.state === FlipTileState.Info,
-        warning: this.state === FlipTileState.Warning,
-        alarm: this.state === FlipTileState.Alarm,
-        primary: this.state === FlipTileState.Primary,
-        'flip-animation-active': this.isFlipAnimationActive,
-      } }, h("div", { class: "flip-tile-header" }, h("div", { class: "header-slot-container text-l-title" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "eye", variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, h("slot", null)), h("div", { class: {
-        footer: true,
-        'contrast-light': this.state === FlipTileState.Warning,
-        'contrast-dark': this.state === FlipTileState.Info ||
-          this.state === FlipTileState.Alarm,
-      } }, h("slot", { name: "footer" })))));
-  }
-  get hostElement() { return getElement(this); }
-};
-FlipTile.style = flipTileCss;
-
-const flipTileContentCss = ":host{display:block}";
-
-const FlipTileContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-};
-FlipTileContent.style = flipTileContentCss;
-
-export { FlipTile as ix_flip_tile, FlipTileContent as ix_flip_tile_content };
-
-//# sourceMappingURL=ix-flip-tile_2.entry.js.map

package/dist/esm/ix-flip-tile_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"ix-flip-tile.ix-flip-tile-content.entry.js","mappings":"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","names":[],"sources":["./src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=scoped","./src/components/flip-tile/flip-tile.tsx","./src/components/flip-tile-content/flip-tile-content.css?tag=ix-flip-tile-content&encapsulation=shadow","./src/components/flip-tile-content/flip-tile-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  scoped: true,\n})\nexport class FlipTile {\n  private readonly ANIMATION_DURATION = 150;\n  private contentContainerElement: HTMLDivElement;\n  private contentItems: NodeList;\n\n  @Element() hostElement: HTMLIxFlipTileElement;\n\n  @State() index = 0;\n\n  @State() isFlipAnimationActive: boolean;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Tmp property name\n   * @deprecated Will be removed in 2.0.0. Setting this property has no effect\n   */\n  @Prop() footer: string;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  componentDidLoad() {\n    this.contentItems = this.contentContainerElement.querySelectorAll(\n      'ix-flip-tile-content'\n    );\n    this.contentItems.forEach((_, index) => {\n      if (index !== this.index) {\n        this.toggleContentItem(index);\n      }\n    });\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private toggleContentItem(index: number) {\n    const item = this.contentItems[index] as HTMLElement;\n    item.classList.toggle('d-none');\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.toggleContentItem(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.toggleContentItem(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon=\"eye\"\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div\n            class=\"content-container\"\n            ref={(el) => (this.contentContainerElement = el)}\n          >\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\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}\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, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-flip-tile-content',\n  styleUrl: 'flip-tile-content.css',\n  shadow: true,\n})\nexport class FlipTileContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-group-context-menu.entry.js

@@ -1,44 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7334ee80.js';
-import { g as getSlottedElements } from './shadow-dom-6860b1c4.js';
-
-const groupContextMenuCss = ":host{display:block;position:relative;height:2rem;width:2rem;-webkit-margin-before:0.3125rem;margin-block-start:0.3125rem;-webkit-margin-end:0.3125rem;margin-inline-end:0.3125rem;-webkit-margin-start:auto;margin-inline-start:auto}:host .hide{visibility:collapse}";
-
-const GroupContextMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.showContextMenu = false;
-  }
-  getTrigger() {
-    return this.hostElement;
-  }
-  configureDropdown(dropdownElement, triggerElement) {
-    dropdownElement.positioningStrategy = 'fixed';
-    dropdownElement.trigger = triggerElement;
-  }
-  onSlotChange() {
-    const slot = this.hostElement.shadowRoot.querySelector('slot');
-    if (!slot) {
-      return;
-    }
-    const elements = getSlottedElements(slot);
-    this.showContextMenu = elements.length !== 0;
-    const dropdownElement = elements.find((elm) => elm.tagName === 'IX-DROPDOWN');
-    const triggerElement = this.getTrigger();
-    if (!triggerElement) {
-      return;
-    }
-    if (!dropdownElement) {
-      return;
-    }
-    this.configureDropdown(dropdownElement, triggerElement);
-  }
-  render() {
-    return (h(Host, null, h("ix-icon-button", { class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: "context-menu" }), h("slot", { onSlotchange: () => this.onSlotChange() })));
-  }
-  get hostElement() { return getElement(this); }
-};
-GroupContextMenu.style = groupContextMenuCss;
-
-export { GroupContextMenu as ix_group_context_menu };
-
-//# sourceMappingURL=ix-group-context-menu.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-group-context-menu.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,wQAAwQ;;MCiBvR,gBAAgB;;;2BAGA,KAAK;;EAExB,UAAU;IAChB,OAAO,IAAI,CAAC,WAAW,CAAC;GACzB;EAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;IAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;IAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;GAC1C;EAEO,YAAY;IAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,IAAI,CAAC,IAAI,EAAE;MACT,OAAO;KACR;IACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,KAAK,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;IAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAEzC,IAAI,CAAC,cAAc,EAAE;MACnB,OAAO;KACR;IAED,IAAI,CAAC,eAAe,EAAE;MACpB,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;GACzD;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,sBACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,cAAc,GACH,EAClB,YAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","./src/components/group/group-context-menu.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: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","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-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          ghost={true}\n          icon=\"context-menu\"\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-group_2.entry.js

@@ -1,154 +0,0 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-7334ee80.js';
-import { c as createMutationObserver } from './mutation-observer-7d01bbea.js';
-import { h as hasSlottedElements } from './shadow-dom-6860b1c4.js';
-
-const groupCss = ":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}: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{background-color:var(--theme-group-item--background--hover)}: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{background-color:var(--theme-group-item--background--active)}: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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;padding:0.5rem;padding-left:0}: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>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;-webkit-margin-end:0.25rem;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) {
-    registerInstance(this, hostRef);
-    this.selectGroup = createEvent(this, "selectGroup", 7);
-    this.selectItem = createEvent(this, "selectItem", 7);
-    this.collapsedChanged = createEvent(this, "collapsedChanged", 7);
-    this.suppressHeaderSelection = false;
-    this.header = undefined;
-    this.subHeader = undefined;
-    this.collapsed = true;
-    this.selected = undefined;
-    this.index = undefined;
-    this.expandOnHeaderClick = false;
-    this.itemSelected = false;
-    this.dropdownTriggerRef = undefined;
-    this.slotSize = this.groupItems.length;
-    this.footerVisible = false;
-  }
-  get dropdownItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
-  }
-  get groupItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
-  }
-  get groupContent() {
-    return this.hostElement.shadowRoot.querySelector('.group-content');
-  }
-  onExpandClick(event) {
-    this.collapsed = !this.collapsed;
-    this.collapsedChanged.emit(this.collapsed);
-    event.stopPropagation();
-  }
-  onHeaderClick(event) {
-    this.setGroupSelection(!this.selected);
-    if (this.suppressHeaderSelection) {
-      this.onExpandClick(event);
-    }
-  }
-  onItemClick(index) {
-    if (index === this.index) {
-      this.index = undefined;
-      this.selectItem.emit(undefined);
-    }
-    else {
-      this.index = index;
-      this.selectItem.emit(index);
-    }
-    if (this.index >= 0) {
-      this.itemSelected = true;
-    }
-    else
-      this.itemSelected = false;
-    this.setGroupSelection(false);
-  }
-  setGroupSelection(selection) {
-    if (!this.suppressHeaderSelection) {
-      this.selected = selection;
-      this.selectGroup.emit(this.selected);
-    }
-  }
-  onSlotChange() {
-    const slot = this.hostElement.shadowRoot.querySelector('slot[name="footer"]');
-    if (slot) {
-      this.footerVisible = hasSlottedElements(slot);
-    }
-  }
-  componentWillRender() {
-    this.groupItems.forEach((item, index) => {
-      if (this.selected === true) {
-        item.selected = false;
-        this.index = undefined;
-        this.itemSelected = false;
-        return;
-      }
-      item.selected = index === this.index;
-      item.index = index;
-    });
-  }
-  componentDidLoad() {
-    this.observer = createMutationObserver(() => {
-      this.slotSize = this.groupItems.length;
-    });
-    this.observer.observe(this.groupContent, {
-      childList: true,
-    });
-    this.groupContent.addEventListener('selectedChanged', (evt) => {
-      this.onItemClick(evt.detail.index);
-    });
-  }
-  disconnectedCallback() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'group-header': true,
-        expand: !this.collapsed,
-        selected: this.selected,
-      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: {
-        'group-header-selection-indicator': true,
-        'group-header-selection-indicator-item-selected': this.itemSelected,
-      } }), h("div", { class: "btn-expand-header" }, h("ix-icon", { class: {
-        hidden: this.slotSize === 0,
-      }, name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) })), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("ix-group-context-menu", null, h("slot", { name: "dropdown" }))), h("div", { class: {
-        'group-content': true,
-      } }, !this.collapsed ? (h(Fragment, null, h("slot", null), h("ix-group-item", { suppressSelection: true, focusable: false, class: {
-        footer: true,
-        'footer-visible': this.footerVisible,
-      } }, h("slot", { name: "footer", onSlotchange: () => this.onSlotChange() })))) : null)));
-  }
-  get hostElement() { return getElement(this); }
-};
-Group.style = groupCss;
-
-const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}: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);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{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);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{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);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-selection):hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(:not(.suppress-selection).selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:not(.suppress-selection):active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(:not(.suppress-selection).selected:active){background-color:var(--theme-color-ghost--selected-active)}";
-
-const GroupItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selectedChanged = createEvent(this, "selectedChanged", 7);
-    this.icon = undefined;
-    this.text = undefined;
-    this.secondaryText = undefined;
-    this.suppressSelection = false;
-    this.selected = undefined;
-    this.focusable = true;
-    this.index = undefined;
-  }
-  clickListen() {
-    if (this.suppressSelection) {
-      return;
-    }
-    this.selectedChanged.emit(this.hostElement);
-  }
-  render() {
-    return (h(Host, { class: {
-        selected: this.selected && !this.suppressSelection,
-        'suppress-selection': this.suppressSelection,
-      } }, h("button", { tabindex: this.focusable ? 0 : -1 }, h("div", { class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-};
-GroupItem.style = groupItemCss;
-
-export { Group as ix_group, GroupItem as ix_group_item };
-
-//# sourceMappingURL=ix-group_2.entry.js.map

package/dist/esm/ix-group_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"ix-group.ix-group-item.entry.js","mappings":"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","names":[],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=shadow","./src/components/group/group.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: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 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  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\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() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  private observer: MutationObserver;\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    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\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                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          {!this.collapsed ? (\n            <Fragment>\n              <slot></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            </Fragment>\n          ) : null}\n        </div>\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@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/shadow-dom/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n  @include ix-component;\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\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\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: $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: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include text-default;\n    @include ellipsis();\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include text-default;\n      @include ellipsis;\n    }\n\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\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-selection):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-selection).selected:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:not(.suppress-selection):active) {\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-selection).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   * 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;\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    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : 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"],"version":3}