@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/esm/ix-animated-tab_2.entry.js

@@ -1,209 +0,0 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-7334ee80.js';
-import { a as anime } from './anime.es-185e9087.js';
-import { A as Animation } from './animation-268dce50.js';
-import { c as convertToAbbreviationString } from './rwd.util-cfc2ea72.js';
-
-const animatedTabCss = ".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";
-
-const AnimatedTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.count = undefined;
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-};
-AnimatedTab.style = animatedTabCss;
-
-const animatedTabsCss = ".sc-ix-animated-tabs-h{--animate-duration:300ms;display:flex;flex-direction:column;align-items:center;height:100%;width:100%;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs{display:flex;padding:0;margin:0;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs{display:flex;justify-content:center;width:5rem;height:4.5rem;cursor:pointer;padding-top:0.625rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.bottom.sc-ix-animated-tabs{padding-top:0.875rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background);border:solid 1px var(--theme-animated-tab-circle--border-color);display:flex;align-items:center;justify-content:center;border-radius:6.25rem;width:3rem;height:3rem;position:relative;transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover{background:var(--theme-animated-tab-circle--background--hover);border-color:var(--theme-animated-tab-circle--border-color--hover)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--hover) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active{background:var(--theme-animated-tab-circle--background--active);border-color:var(--theme-animated-tab-circle--border-color--active)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--active) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background--selected);border-color:var(--theme-animated-tab-circle--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs .count.sc-ix-animated-tabs{border-color:var(--theme-tab-pill--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.disabled.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs,.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:disabled ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--disabled) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.sc-ix-animated-tabs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);display:flex;align-items:center;height:1rem;position:absolute;background-color:var(--theme-pill-outline--background);bottom:-0.55rem;border:1px solid var(--theme-tab-pill--border-color);border-radius:6.25rem;color:var(--theme-pill-outline--color);padding:0 0.25rem;background:var(--theme-color-1);transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.bottom.sc-ix-animated-tabs{top:-0.55rem}.sc-ix-animated-tabs-h .content-container.sc-ix-animated-tabs{display:flex;flex-direction:row;height:calc(100% - 4.5rem);width:100%;overflow-y:auto;overflow-x:hidden}.sc-ix-animated-tabs-h .tab-active-underline.sc-ix-animated-tabs{background-color:var(--theme-animated-tab-indicator--background--selected);height:0.125rem;width:5rem;margin-top:-0.125rem;transition:150ms;position:absolute;top:4.5rem}.sc-ix-animated-tabs-h .tab-active-underline.bottom.sc-ix-animated-tabs{top:0;margin-top:0}";
-
-const AnimatedTabs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabClick = createEvent(this, "tabClick", 7);
-    this.easing = 'easeInOutSine';
-    this.firstRender = true;
-    this.tabs = undefined;
-    this.activeIndex = undefined;
-    this.disableAnimations = false;
-    this.selectedIndex = 0;
-    this.tabPlacement = 'top';
-  }
-  onTabSelectionChange(newSelectionIndex, oldSelectionIndex) {
-    this.updateTabAnimation(oldSelectionIndex, newSelectionIndex);
-  }
-  onMouseDown() {
-    this.activeIndex = undefined;
-  }
-  get animatedTabs() {
-    return Array.from(this.hostElement.querySelectorAll('ix-animated-tab'));
-  }
-  get tabsContainer() {
-    return this.hostElement.querySelector('.tabs-container');
-  }
-  get contentContainer() {
-    return this.hostElement.querySelector('.content-container');
-  }
-  componentWillLoad() {
-    this.tabs = this.animatedTabs;
-  }
-  componentDidLoad() {
-    this.onTabSelectionChange(this.selectedIndex, -1);
-    this.observer = new MutationObserver(() => {
-      // Will trigger a re-render even if only the count attribute of a child tab changed
-      this.tabs = this.animatedTabs;
-    });
-    this.observer.observe(this.contentContainer, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['count'],
-    });
-  }
-  //@ts-expect-error
-  disconnectCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  isSelected(tab) {
-    return this.tabs.indexOf(tab) === this.selectedIndex;
-  }
-  showTab(tab) {
-    if (this.isSelected(tab)) {
-      tab.classList.remove('d-none');
-    }
-  }
-  hideTab(tab) {
-    if (!this.isSelected(tab)) {
-      tab.classList.add('d-none');
-    }
-  }
-  slideOutLeft(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '-100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideOutRight(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideInLeft(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['-100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  slideInRight(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  updateTabAnimation(oldIndex, newIndex) {
-    var _a;
-    (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, tabIndex) => {
-      if (tabIndex === oldIndex) {
-        if (tabIndex < newIndex) {
-          this.slideOutLeft(tab);
-        }
-        else if (tabIndex > newIndex) {
-          this.slideOutRight(tab);
-        }
-      }
-      else if (tabIndex === newIndex) {
-        if (tabIndex < oldIndex) {
-          this.slideInLeft(tab);
-        }
-        else if (tabIndex > oldIndex) {
-          this.slideInRight(tab);
-        }
-      }
-      else {
-        tab.classList.add('d-none');
-      }
-    });
-  }
-  onTabClick(index) {
-    this.selectedIndex = index;
-    this.tabClick.emit(index);
-  }
-  onTabMouseDown(index) {
-    this.activeIndex = index;
-  }
-  render() {
-    return (h(Host, { class: { 'flex-column-reverse': this.tabPlacement === 'bottom' } }, h("ul", { class: "tabs-container" }, this.animatedTabs.map((element, index) => (h("li", { class: { bottom: this.tabPlacement === 'bottom' }, onClick: () => this.onTabClick(index), onMouseDown: () => this.onTabMouseDown(index) }, h("div", { class: {
-        'tab-container': true,
-        selected: this.selectedIndex === index,
-      } }, h("ix-icon", { name: element.icon }), element.count ? (h("span", { class: {
-        count: true,
-        bottom: this.tabPlacement === 'bottom',
-      } }, convertToAbbreviationString(element.count))) : (''))))), h("div", { class: {
-        'tab-active-underline': true,
-        bottom: this.tabPlacement === 'bottom',
-      }, style: { 'margin-left': `calc(${this.selectedIndex} * 5rem)` } })), h("div", { class: "content-container" }, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "selectedIndex": ["onTabSelectionChange"]
-  }; }
-};
-AnimatedTabs.style = animatedTabsCss;
-
-export { AnimatedTab as ix_animated_tab, AnimatedTabs as ix_animated_tabs };
-
-//# sourceMappingURL=ix-animated-tab_2.entry.js.map

package/dist/esm/ix-animated-tab_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"ix-animated-tab.ix-animated-tabs.entry.js","mappings":"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","names":[],"sources":["./src/components/animated-tab/animated-tab.scss?tag=ix-animated-tab&encapsulation=scoped","./src/components/animated-tab/animated-tab.tsx","./src/components/animated-tabs/animated-tabs.scss?tag=ix-animated-tabs&encapsulation=scoped","./src/components/animated-tabs/animated-tabs.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:host {\n  display: block;\n  height: 100%;\n  width: 100%;\n  position: absolute;\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, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-animated-tab',\n  styleUrl: 'animated-tab.scss',\n  scoped: true,\n})\nexport class AnimatedTab {\n  /**\n   * Icon of the tab\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification number\n   */\n  @Prop({ reflect: true }) count: number;\n\n  render() {\n    return (\n      <Host>\n        <slot></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@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n\n:host {\n  --animate-duration: #{$medium-time};\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  position: relative;\n\n  ul {\n    display: flex;\n    padding: 0;\n    margin: 0;\n    position: relative;\n\n    li {\n      display: flex;\n      justify-content: center;\n      width: 5rem;\n      height: 4.5rem;\n      cursor: pointer;\n      padding-top: 0.625rem;\n\n      &.bottom {\n        padding-top: 0.875rem;\n      }\n\n      .tab-container {\n        background: var(--theme-animated-tab-circle--background);\n        border: solid 1px var(--theme-animated-tab-circle--border-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 6.25rem;\n        width: 3rem;\n        height: 3rem;\n        position: relative;\n        transition: $default-time;\n\n        ix-icon {\n          color: var(--theme-animated-tab-icon--color) !important;\n        }\n\n        @include hover {\n          background: var(--theme-animated-tab-circle--background--hover);\n          border-color: var(--theme-animated-tab-circle--border-color--hover);\n\n          ix-icon {\n            color: var(--theme-animated-tab-icon--color--hover) !important;\n          }\n        }\n\n        @include active {\n          background: var(--theme-animated-tab-circle--background--active);\n          border-color: var(--theme-animated-tab-circle--border-color--active);\n\n          ix-icon {\n            color: var(--theme-animated-tab-icon--color--active) !important;\n          }\n        }\n\n        &.selected {\n          background: var(--theme-animated-tab-circle--background--selected);\n          border-color: var(\n            --theme-animated-tab-circle--border-color--selected\n          ) !important;\n\n          ix-icon {\n            color: var(--theme-animated-tab-icon--color--selected) !important;\n          }\n\n          .count {\n            border-color: var(\n              --theme-tab-pill--border-color--selected\n            ) !important;\n          }\n        }\n\n        // TODO\n        &.disabled,\n        &:disabled {\n          ix-icon {\n            color: var(--theme-animated-tab-icon--color--disabled) !important;\n          }\n        }\n\n        // TODO\n        @include focus-visible {\n          border-color: var(--theme-focus--border-color) !important;\n        }\n\n        .count {\n          @include text-caption-single;\n          display: flex;\n          align-items: center;\n          height: 1rem;\n          position: absolute;\n          background-color: var(--theme-pill-outline--background);\n          bottom: -0.55rem;\n          border: 1px solid var(--theme-tab-pill--border-color);\n          border-radius: 6.25rem;\n          color: var(--theme-pill-outline--color);\n          padding: 0 $tiny-space;\n          background: var(--theme-color-1);\n          transition: $default-time;\n\n          &.bottom {\n            top: -0.55rem;\n          }\n        }\n      }\n    }\n  }\n\n  .content-container {\n    display: flex;\n    flex-direction: row;\n    height: calc(100% - 4.5rem);\n    width: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  .tab-active-underline {\n    background-color: var(--theme-animated-tab-indicator--background--selected);\n    height: 0.125rem;\n    width: 5rem;\n    margin-top: -0.125rem;\n    transition: $default-time;\n    position: absolute;\n    top: 4.5rem;\n\n    &.bottom {\n      top: 0;\n      margin-top: 0;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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 anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { convertToAbbreviationString } from '../utils/rwd.util';\n\n@Component({\n  tag: 'ix-animated-tabs',\n  styleUrl: 'animated-tabs.scss',\n  scoped: true,\n})\nexport class AnimatedTabs {\n  @Element() hostElement: HTMLIxAnimatedTabsElement;\n\n  @State() tabs: HTMLIxAnimatedTabElement[];\n\n  @State() activeIndex: number;\n\n  /**\n   * @internal For debugging purposes only\n   */\n  @Prop() disableAnimations = false;\n\n  /**\n   * Current selected tab index\n   */\n  @Prop() selectedIndex = 0;\n\n  /**\n   * Placement of the tabs\n   */\n  @Prop() tabPlacement: 'top' | 'bottom' = 'top';\n\n  /**\n   * Tab navigated\n   */\n  @Event() tabClick: EventEmitter;\n\n  private easing = 'easeInOutSine';\n  private firstRender = true;\n  private observer: MutationObserver;\n\n  @Watch('selectedIndex')\n  onTabSelectionChange(newSelectionIndex: number, oldSelectionIndex: number) {\n    this.updateTabAnimation(oldSelectionIndex, newSelectionIndex);\n  }\n\n  @Listen('mouseup', { passive: true })\n  onMouseDown() {\n    this.activeIndex = undefined;\n  }\n\n  get animatedTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-animated-tab'));\n  }\n\n  get tabsContainer() {\n    return this.hostElement.querySelector('.tabs-container');\n  }\n\n  get contentContainer() {\n    return this.hostElement.querySelector('.content-container');\n  }\n\n  componentWillLoad() {\n    this.tabs = this.animatedTabs;\n  }\n\n  componentDidLoad() {\n    this.onTabSelectionChange(this.selectedIndex, -1);\n\n    this.observer = new MutationObserver(() => {\n      // Will trigger a re-render even if only the count attribute of a child tab changed\n      this.tabs = this.animatedTabs;\n    });\n\n    this.observer.observe(this.contentContainer, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['count'],\n    });\n  }\n\n  //@ts-expect-error\n  private disconnectCallback(): void {\n    this.observer?.disconnect();\n  }\n\n  private isSelected(tab: HTMLElement) {\n    return this.tabs.indexOf(tab as any) === this.selectedIndex;\n  }\n\n  private showTab(tab: HTMLElement) {\n    if (this.isSelected(tab)) {\n      tab.classList.remove('d-none');\n    }\n  }\n\n  private hideTab(tab: HTMLElement) {\n    if (!this.isSelected(tab)) {\n      tab.classList.add('d-none');\n    }\n  }\n\n  private slideOutLeft(tab: HTMLElement) {\n    if (this.disableAnimations) {\n      this.hideTab(tab);\n\n      return;\n    }\n\n    anime({\n      targets: tab,\n      duration: Animation.mediumTime,\n      opacity: [1, 0],\n      translateX: [0, '-100%'],\n      easing: this.easing,\n      complete: () => {\n        this.hideTab(tab);\n      },\n    });\n  }\n\n  private slideOutRight(tab: HTMLElement) {\n    if (this.disableAnimations) {\n      this.hideTab(tab);\n\n      return;\n    }\n\n    anime({\n      targets: tab,\n      duration: Animation.mediumTime,\n      opacity: [1, 0],\n      translateX: [0, '100%'],\n      easing: this.easing,\n      complete: () => {\n        this.hideTab(tab);\n      },\n    });\n  }\n\n  private slideInLeft(tab: HTMLElement) {\n    if (this.firstRender) {\n      tab.classList.remove('d-none');\n      this.firstRender = false;\n      return;\n    }\n\n    if (this.disableAnimations) {\n      this.showTab(tab);\n\n      return;\n    }\n\n    anime({\n      targets: tab,\n      duration: Animation.mediumTime,\n      opacity: [0, 1],\n      translateX: ['-100%', 0],\n      easing: this.easing,\n      begin: () => {\n        this.showTab(tab);\n      },\n    });\n  }\n\n  private slideInRight(tab: HTMLElement) {\n    if (this.firstRender) {\n      tab.classList.remove('d-none');\n      this.firstRender = false;\n      return;\n    }\n\n    if (this.disableAnimations) {\n      this.showTab(tab);\n\n      return;\n    }\n\n    anime({\n      targets: tab,\n      duration: Animation.mediumTime,\n      opacity: [0, 1],\n      translateX: ['100%', 0],\n      easing: this.easing,\n      begin: () => {\n        this.showTab(tab);\n      },\n    });\n  }\n\n  private updateTabAnimation(oldIndex: number, newIndex: number) {\n    this.tabs?.forEach((tab, tabIndex) => {\n      if (tabIndex === oldIndex) {\n        if (tabIndex < newIndex) {\n          this.slideOutLeft(tab);\n        } else if (tabIndex > newIndex) {\n          this.slideOutRight(tab);\n        }\n      } else if (tabIndex === newIndex) {\n        if (tabIndex < oldIndex) {\n          this.slideInLeft(tab);\n        } else if (tabIndex > oldIndex) {\n          this.slideInRight(tab);\n        }\n      } else {\n        tab.classList.add('d-none');\n      }\n    });\n  }\n\n  private onTabClick(index: number) {\n    this.selectedIndex = index;\n    this.tabClick.emit(index);\n  }\n\n  private onTabMouseDown(index: number) {\n    this.activeIndex = index;\n  }\n\n  render() {\n    return (\n      <Host class={{ 'flex-column-reverse': this.tabPlacement === 'bottom' }}>\n        <ul class=\"tabs-container\">\n          {this.animatedTabs.map((element, index) => (\n            <li\n              class={{ bottom: this.tabPlacement === 'bottom' }}\n              onClick={() => this.onTabClick(index)}\n              onMouseDown={() => this.onTabMouseDown(index)}\n            >\n              <div\n                class={{\n                  'tab-container': true,\n                  selected: this.selectedIndex === index,\n                }}\n              >\n                <ix-icon name={element.icon}></ix-icon>\n                {element.count ? (\n                  <span\n                    class={{\n                      count: true,\n                      bottom: this.tabPlacement === 'bottom',\n                    }}\n                  >\n                    {convertToAbbreviationString(element.count)}\n                  </span>\n                ) : (\n                  ''\n                )}\n              </div>\n            </li>\n          ))}\n          <div\n            class={{\n              'tab-active-underline': true,\n              bottom: this.tabPlacement === 'bottom',\n            }}\n            style={{ 'margin-left': `calc(${this.selectedIndex} * 5rem)` }}\n          ></div>\n        </ul>\n        <div class=\"content-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-index-button.entry.js

@@ -1,24 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
-
-const indexButtonCss = ".sc-ix-index-button-h{max-height:2rem}.sc-ix-index-button-h .btn.sc-ix-index-button{min-width:2rem;height:2rem}.sc-ix-index-button-h .btn.selected.sc-ix-index-button{background-color:var(--theme-btn-invisible-secondary--background--selected);color:var(--theme-btn-invisible-secondary--color--selected)}";
-
-const IxIndexButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = 'primary';
-    this.selected = undefined;
-  }
-  render() {
-    return (h(Host, null, h("button", { class: {
-        btn: true,
-        'btn-invisible-primary': this.variant === 'primary',
-        'btn-invisible-secondary': this.variant === 'secondary',
-        selected: this.selected,
-      } }, h("slot", null))));
-  }
-};
-IxIndexButton.style = indexButtonCss;
-
-export { IxIndexButton as ix_index_button };
-
-//# sourceMappingURL=ix-index-button.entry.js.map

package/dist/esm/ix-index-button.entry.js.map

@@ -1 +0,0 @@
-{"file":"ix-index-button.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,gTAAgT;;MCsB1T,aAAa;;;mBAIc,SAAS;;;EAO/C,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;QACT,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACN,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/index-button/index-button.scss?tag=ix-index-button&encapsulation=scoped","./src/components/index-button/index-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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\n:host {\n  max-height: $x-large-space;\n\n  .btn {\n    min-width: $x-large-space;\n    height: $x-large-space;\n\n    &.selected {\n      background-color: var(--theme-btn-invisible-secondary--background--selected);\n      color: var(--theme-btn-invisible-secondary--color--selected);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 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, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type IndexButtonVariant = ButtonVariant;\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-index-button',\n  styleUrl: 'index-button.scss',\n  scoped: true,\n})\nexport class IxIndexButton {\n  /**\n   * Button variant\n   */\n  @Prop() variant: IndexButtonVariant = 'primary';\n\n  /**\n   * Selection state\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': this.variant === 'primary',\n            'btn-invisible-secondary': this.variant === 'secondary',\n            selected: this.selected,\n          }}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/menu-service-b3076949.js

@@ -1,78 +0,0 @@
-import { T as TypedEvent } from './typed-event-a230184a.js';
-
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m") throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _MenuService_isPinned;
-class MenuService {
-  constructor() {
-    this.menuElement = null;
-    this.menuExpandChange = new TypedEvent();
-    _MenuService_isPinned.set(this, false);
-  }
-  register(menuElement) {
-    if (this.menuElement) {
-      console.warn('Menu already defined');
-      return;
-    }
-    this.menuElement = menuElement;
-    this.menuElement.addEventListener('expandChange', (event) => {
-      this.menuExpandChange.emit(event.detail);
-    });
-  }
-  setIsPinned(pinned) {
-    __classPrivateFieldSet(this, _MenuService_isPinned, pinned, "f");
-  }
-  async open() {
-    if (this.menuElement) {
-      this.menuElement.toggleMenu(true);
-      return true;
-    }
-    return false;
-  }
-  async close() {
-    if (this.menuElement) {
-      this.menuElement.toggleMenu(false);
-      return true;
-    }
-    return false;
-  }
-  async toggle() {
-    if (this.menuElement) {
-      this.menuElement.toggleMenu();
-      return true;
-    }
-    return false;
-  }
-  get nativeElement() {
-    return this.menuElement;
-  }
-  get expandChange() {
-    return this.menuExpandChange;
-  }
-  get isPinned() {
-    return __classPrivateFieldGet(this, _MenuService_isPinned, "f");
-  }
-}
-_MenuService_isPinned = new WeakMap();
-const menuController = new MenuService();
-
-export { menuController as m };
-
-//# sourceMappingURL=menu-service-b3076949.js.map

package/dist/esm/menu-service-b3076949.js.map

@@ -1 +0,0 @@
-{"file":"menu-service-b3076949.js","mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;IAC7C,gCAAY,KAAK,EAAC;GA0DnB;EAxDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B;MAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC1C,CACF,CAAC;GACH;EAEM,WAAW,CAAC,MAAe;IAChC,uBAAA,IAAI,yBAAa,MAAM,MAAA,CAAC;GACzB;EAEM,MAAM,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;GACzB;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;GAC9B;EAED,IAAI,QAAQ;IACV,OAAO,uBAAA,IAAI,6BAAU,CAAC;GACvB;CACF;;MAEY,cAAc,GAAG,IAAI,WAAW;;;;","names":[],"sources":["./src/components/utils/menu-service/menu-service.ts"],"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\nimport { TypedEvent } from '../typed-event';\n\nclass MenuService {\n  menuElement: HTMLIxMenuElement | null = null;\n  menuExpandChange = new TypedEvent<boolean>();\n  #isPinned = false;\n\n  register(menuElement: HTMLIxMenuElement) {\n    if (this.menuElement) {\n      console.warn('Menu already defined');\n      return;\n    }\n    this.menuElement = menuElement;\n    this.menuElement.addEventListener(\n      'expandChange',\n      (event: CustomEvent<boolean>) => {\n        this.menuExpandChange.emit(event.detail);\n      }\n    );\n  }\n\n  public setIsPinned(pinned: boolean) {\n    this.#isPinned = pinned;\n  }\n\n  public async open() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(true);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async close() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(false);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async toggle() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu();\n      return true;\n    }\n\n    return false;\n  }\n\n  get nativeElement() {\n    return this.menuElement;\n  }\n\n  get expandChange() {\n    return this.menuExpandChange;\n  }\n\n  get isPinned() {\n    return this.#isPinned;\n  }\n}\n\nexport const menuController = new MenuService();\n"],"version":3}

package/dist/esm/service-586129b5.js

@@ -1,143 +0,0 @@
-import { T as TypedEvent } from './typed-event-a230184a.js';
-
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-let supportedModes = ['small', 'medium', 'large'];
-const smallMediaQuery = `only screen and (max-width: 40em)`;
-const mediumMediaQuery = `only screen and (min-width: 40.063em) and (max-width: 64em)`;
-const largeMediaQuery = `only screen and (min-width: 64.063em)`;
-const setSupportedModes = (modes) => (supportedModes = modes);
-const createMediaQueryListener = (query, callback) => {
-  const listener = window.matchMedia(query);
-  const fn = (event) => {
-    callback(event);
-  };
-  listener.addEventListener('change', fn);
-  return {
-    matchMedia: listener,
-    dispose: () => {
-      listener.removeEventListener('change', fn);
-    },
-  };
-};
-const getFallbackMode = (modes, detectedMode) => {
-  if (modes.length === 1) {
-    return modes[0];
-  }
-  if (detectedMode === 'large' && !modes.includes(detectedMode)) {
-    return getFallbackMode(modes, 'medium');
-  }
-  if (detectedMode === 'medium' && !modes.includes(detectedMode)) {
-    return getFallbackMode(modes, 'large');
-  }
-  if (detectedMode === 'small' && !modes.includes(detectedMode)) {
-    return getFallbackMode(modes, 'medium');
-  }
-  return detectedMode;
-};
-const createModeListener = (modeChangeCallback) => {
-  const smallListener = createMediaQueryListener(smallMediaQuery, ({ matches }) => {
-    if (!matches) {
-      return;
-    }
-    modeChangeCallback(getFallbackMode(supportedModes, 'small'));
-  });
-  const mediumListener = createMediaQueryListener(mediumMediaQuery, ({ matches }) => {
-    if (!matches) {
-      return;
-    }
-    modeChangeCallback(getFallbackMode(supportedModes, 'medium'));
-  });
-  const largeListener = createMediaQueryListener(largeMediaQuery, ({ matches }) => {
-    if (!matches) {
-      return;
-    }
-    modeChangeCallback(getFallbackMode(supportedModes, 'large'));
-  });
-  const matchSmall = smallListener.matchMedia.matches;
-  const matchMedium = mediumListener.matchMedia.matches;
-  if (matchSmall) {
-    modeChangeCallback(getFallbackMode(supportedModes, 'small'));
-  }
-  else if (matchMedium) {
-    modeChangeCallback(getFallbackMode(supportedModes, 'medium'));
-  }
-  else {
-    modeChangeCallback(getFallbackMode(supportedModes, 'large'));
-  }
-  return {
-    dispose: () => {
-      smallListener.dispose();
-      mediumListener.dispose();
-      largeListener.dispose();
-    },
-    matchMedia: [
-      smallListener.matchMedia,
-      mediumListener.matchMedia,
-      largeListener.matchMedia,
-    ],
-  };
-};
-
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m") throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _ScreenMode_modeChangeListener, _ScreenMode_mode, _ScreenMode_isDetectionEnabled;
-class ScreenMode {
-  constructor() {
-    _ScreenMode_modeChangeListener.set(this, new TypedEvent());
-    _ScreenMode_mode.set(this, 'large');
-    _ScreenMode_isDetectionEnabled.set(this, true);
-    createModeListener((mode) => {
-      if (!__classPrivateFieldGet(this, _ScreenMode_isDetectionEnabled, "f")) {
-        return;
-      }
-      __classPrivateFieldGet(this, _ScreenMode_modeChangeListener, "f").emit(mode);
-      __classPrivateFieldSet(this, _ScreenMode_mode, mode, "f");
-    });
-  }
-  get mode() {
-    return __classPrivateFieldGet(this, _ScreenMode_mode, "f");
-  }
-  get onChange() {
-    return __classPrivateFieldGet(this, _ScreenMode_modeChangeListener, "f");
-  }
-  get isDetectionEnabled() {
-    return __classPrivateFieldGet(this, _ScreenMode_isDetectionEnabled, "f");
-  }
-  disableModeDetection() {
-    __classPrivateFieldSet(this, _ScreenMode_isDetectionEnabled, false, "f");
-  }
-  enableModeDetection() {
-    __classPrivateFieldSet(this, _ScreenMode_isDetectionEnabled, true, "f");
-  }
-  setMode(mode) {
-    __classPrivateFieldSet(this, _ScreenMode_mode, mode, "f");
-    __classPrivateFieldGet(this, _ScreenMode_modeChangeListener, "f").emit(mode);
-  }
-  setSupportedMods(modes) {
-    setSupportedModes(modes);
-    const mode = getFallbackMode(modes, __classPrivateFieldGet(this, _ScreenMode_mode, "f"));
-    this.setMode(mode);
-  }
-}
-_ScreenMode_modeChangeListener = new WeakMap(), _ScreenMode_mode = new WeakMap(), _ScreenMode_isDetectionEnabled = new WeakMap();
-const screenMode = new ScreenMode();
-
-export { screenMode as s };
-
-//# sourceMappingURL=service-586129b5.js.map

package/dist/esm/service-586129b5.js.map

@@ -1 +0,0 @@
-{"file":"service-586129b5.js","mappings":"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","names":[],"sources":["./src/components/utils/screen/mode.ts","./src/components/utils/screen/service.ts"],"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\nexport type Mode = 'large' | 'medium' | 'small';\n\nlet supportedModes: Mode[] = ['small', 'medium', 'large'];\n\nconst smallMediaQuery = `only screen and (max-width: 40em)`;\nconst mediumMediaQuery = `only screen and (min-width: 40.063em) and (max-width: 64em)`;\nconst largeMediaQuery = `only screen and (min-width: 64.063em)`;\n\nexport type MediaQueryListener = {\n  matchMedia: MediaQueryList;\n  dispose: () => void;\n};\n\nexport const setSupportedModes = (modes: Mode[]) => (supportedModes = modes);\n\nexport const createMediaQueryListener = (\n  query: string,\n  callback: (event: MediaQueryListEvent) => void\n): MediaQueryListener => {\n  const listener = window.matchMedia(query);\n  const fn = (event: MediaQueryListEvent) => {\n    callback(event);\n  };\n  listener.addEventListener('change', fn);\n\n  return {\n    matchMedia: listener,\n    dispose: () => {\n      listener.removeEventListener('change', fn);\n    },\n  };\n};\n\nexport const getFallbackMode = (modes: Mode[], detectedMode: Mode): Mode => {\n  if (modes.length === 1) {\n    return modes[0];\n  }\n\n  if (detectedMode === 'large' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'medium');\n  }\n  if (detectedMode === 'medium' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'large');\n  }\n  if (detectedMode === 'small' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'medium');\n  }\n  return detectedMode;\n};\n\nexport type ModeChangeCallback = (mode: Mode) => void;\n\nexport const createModeListener = (\n  modeChangeCallback: (mode: Mode) => void\n) => {\n  const smallListener = createMediaQueryListener(\n    smallMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'small'));\n    }\n  );\n\n  const mediumListener = createMediaQueryListener(\n    mediumMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'medium'));\n    }\n  );\n\n  const largeListener = createMediaQueryListener(\n    largeMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'large'));\n    }\n  );\n\n  const matchSmall = smallListener.matchMedia.matches;\n  const matchMedium = mediumListener.matchMedia.matches;\n\n  if (matchSmall) {\n    modeChangeCallback(getFallbackMode(supportedModes, 'small'));\n  } else if (matchMedium) {\n    modeChangeCallback(getFallbackMode(supportedModes, 'medium'));\n  } else {\n    modeChangeCallback(getFallbackMode(supportedModes, 'large'));\n  }\n\n  return {\n    dispose: () => {\n      smallListener.dispose();\n      mediumListener.dispose();\n      largeListener.dispose();\n    },\n    matchMedia: [\n      smallListener.matchMedia,\n      mediumListener.matchMedia,\n      largeListener.matchMedia,\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 */\nimport { TypedEvent } from '../typed-event';\nimport {\n  createModeListener,\n  getFallbackMode,\n  Mode,\n  setSupportedModes,\n} from './mode';\n\nclass ScreenMode {\n  #modeChangeListener = new TypedEvent<Mode>();\n  #mode: Mode = 'large';\n\n  #isDetectionEnabled = true;\n\n  constructor() {\n    createModeListener((mode) => {\n      if (!this.#isDetectionEnabled) {\n        return;\n      }\n\n      this.#modeChangeListener.emit(mode);\n      this.#mode = mode;\n    });\n  }\n\n  get mode() {\n    return this.#mode;\n  }\n\n  get onChange() {\n    return this.#modeChangeListener;\n  }\n\n  get isDetectionEnabled() {\n    return this.#isDetectionEnabled;\n  }\n\n  public disableModeDetection() {\n    this.#isDetectionEnabled = false;\n  }\n\n  public enableModeDetection() {\n    this.#isDetectionEnabled = true;\n  }\n\n  public setMode(mode: Mode) {\n    this.#mode = mode;\n    this.#modeChangeListener.emit(mode);\n  }\n\n  public setSupportedMods(modes: Mode[]) {\n    setSupportedModes(modes);\n    const mode = getFallbackMode(modes, this.#mode);\n\n    this.setMode(mode);\n  }\n}\n\nexport const screenMode = new ScreenMode();\n"],"version":3}

package/dist/esm/shadow-dom-6860b1c4.js.map

@@ -1 +0,0 @@
-{"file":"shadow-dom-6860b1c4.js","mappings":"AAAA;;;;;;;;SAegB,kBAAkB,CAAC,IAAS;EAC1C,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAClD,CAAC;SAEe,kBAAkB,CAAC,IAAS;EAC1C,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;AAC/D;;;;","names":[],"sources":["./src/components/utils/shadow-dom.ts"],"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 */\nexport function closestElement(selector: string, el: any) {\n  return (\n    el.closest(selector) ||\n    closestElement(selector, (el.getRootNode() as any).host)\n  );\n}\n\nexport function getSlottedElements(slot: any) {\n  return slot.assignedElements({ flatten: true });\n}\n\nexport function hasSlottedElements(slot: any) {\n  return slot.assignedElements({ flatten: true }).length !== 0;\n}\n"],"version":3}

package/dist/esm/theme-switcher-7498e4f2.js.map

@@ -1 +0,0 @@
-{"file":"theme-switcher-7498e4f2.js","mappings":"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","names":[],"sources":["./src/components/utils/theme-switcher.ts"],"sourcesContent":["import { TypedEvent } from './typed-event';\n\nexport class ThemeSwitcher {\n  readonly prefixTheme = 'theme-';\n  readonly suffixLight = '-light';\n  readonly suffixDark = '-dark';\n  readonly defaultTheme = 'theme-classic-dark';\n\n  mutationObserver: MutationObserver;\n  _themeChanged = new TypedEvent<string>();\n\n  public get themeChanged() {\n    return this._themeChanged;\n  }\n\n  private hasVariantSuffix(className: string) {\n    return (\n      className.endsWith(this.suffixDark) ||\n      className.endsWith(this.suffixLight)\n    );\n  }\n\n  private isThemeClass(className: string) {\n    return (\n      className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n    );\n  }\n\n  public setTheme(themeName: string) {\n    if (!this.isThemeClass(themeName)) {\n      throw Error(\n        `Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`\n      );\n    }\n\n    const oldThemes: string[] = [];\n\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    document.body.classList.remove(...oldThemes);\n    document.body.classList.add(themeName);\n  }\n\n  public toggleMode() {\n    const oldThemes: string[] = [];\n\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    if (oldThemes.length === 0) {\n      document.body.classList.add(this.getOppositeMode(this.defaultTheme));\n      return;\n    }\n\n    oldThemes.forEach((themeName) => {\n      document.body.classList.replace(\n        themeName,\n        this.getOppositeMode(themeName)\n      );\n    });\n  }\n\n  private getOppositeMode(themeName: string) {\n    if (themeName.endsWith(this.suffixDark)) {\n      return themeName.replace(/-dark$/g, this.suffixLight);\n    }\n\n    if (themeName.endsWith(this.suffixLight)) {\n      return themeName.replace(/-light$/g, this.suffixDark);\n    }\n  }\n\n  private handleMutations(mutations: MutationRecord[]) {\n    return mutations.forEach((mutation) => {\n      const { target } = mutation;\n      (target as HTMLElement).classList.forEach((className) => {\n        if (\n          this.isThemeClass(className) &&\n          !mutation.oldValue?.includes(className)\n        ) {\n          this._themeChanged.emit(className);\n        }\n      });\n    });\n  }\n\n  private registerMutationObserver() {\n    if (typeof (window as any) === 'undefined') {\n      return;\n    }\n\n    if (!('MutationObserver' in window)) {\n      console.warn(\n        'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n      );\n      return;\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      this.handleMutations(mutations);\n    });\n\n    this.mutationObserver.observe(document.body, {\n      attributeFilter: ['class'],\n      attributeOldValue: true,\n    });\n  }\n\n  public constructor() {\n    this.registerMutationObserver();\n  }\n}\n\nexport const themeSwitcher = new ThemeSwitcher();\n"],"version":3}

package/dist/siemens-ix/p-00f74fc9.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as e,H as n,g as a}from"./p-b899b25b.js";const i=':host{display:flex;position:relative;flex-direction:column;width:100%;height:2.5rem;max-height:2.5rem;transition:var(--theme-default-time) ease-in-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:not(.disabled):not(:disabled).hover,:host .expand-action:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .expand-action:not(.disabled):not(:disabled).active,:host .expand-action:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:"";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:flex;flex-direction:column;opacity:0;position:absolute;top:2.5rem;transition:var(--theme-default-time) ease-in-out;width:100%;height:0;max-height:20rem;background-color:var(--theme-color-component-1)}:host .expand-content.show{height:15rem;opacity:1}:host .expand-content.show .expand-content-body{display:none;overflow:hidden}:host .expand-content.show .expand-content-body{display:block;overflow:auto}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host(.show){height:calc(15rem + 2.5rem);max-height:calc(15rem + 2.5rem)}';let s=0;const r=(t="expand-content")=>[t,s++].join("-");const d=class{constructor(e){t(this,e);this.accordionExpand=o(this,"accordionExpand",7);this.expandContent=false}get expandedContent(){return this.hostElement.shadowRoot.querySelector(".expand-content")}onExpandActionClick(t){t.preventDefault();t.stopPropagation();this.expandContent=!this.expandContent;this.accordionExpand.emit({expand:this.expandContent,nativeEvent:t});if(this.expandContent){this.scrollExpandedContentIntoView()}}scrollExpandedContentIntoView(){setTimeout((()=>{const t=this.expandedContent.getBoundingClientRect();if(t.bottom>window.innerHeight){this.hostElement.shadowRoot.querySelector(".expand-content").scrollIntoView(false)}}),150)}render(){return e(n,{slot:"card-accordion",class:{show:this.expandContent}},e("button",{tabIndex:0,class:{"expand-action":true,show:this.expandContent},onClick:t=>this.onExpandActionClick(t),role:"button",type:"button","aria-expanded":this.expandContent,"aria-controls":r()},e("ix-icon",{name:"chevron-right-small",class:{"expand-icon":true,show:this.expandContent}})),e("div",{class:{"expand-content":true,show:this.expandContent}},e("div",{class:"expand-content-body"},e("slot",null)),e("div",{class:"expand-content-footer"})))}get hostElement(){return a(this)}};d.style=i;const c=":host{display:flex;position:relative;flex-direction:row;align-items:center;padding:0px;margin-bottom:0.5rem;gap:1rem;width:100%}:host .title-actions{display:flex;position:relative;flex-direction:row;gap:0.25rem;margin-left:auto;margin-right:0px}";const l=class{constructor(o){t(this,o)}render(){return e(n,null,e("slot",null),e("div",{class:"title-actions"},e("slot",{name:"title-actions"})))}};l.style=c;export{d as ix_card_accordion,l as ix_card_title};
-//# sourceMappingURL=p-00f74fc9.entry.js.map

package/dist/siemens-ix/p-00f74fc9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardAccordionCss","accordionControlId","getAriaControlsId","prefix","join","CardAccordion","expandedContent","this","hostElement","shadowRoot","querySelector","onExpandActionClick","event","preventDefault","stopPropagation","expandContent","accordionExpand","emit","expand","nativeEvent","scrollExpandedContentIntoView","setTimeout","rect","getBoundingClientRect","bottom","window","innerHeight","scrollIntoView","render","h","Host","slot","class","show","tabIndex","onClick","role","type","name","cardTitleCss","CardHeader"],"sources":["./src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","./src/components/card-accordion/card-accordion.tsx","./src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","./src/components/card-title/card-title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$action-height: 2.5rem;\n$expand-content-height: 15rem;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  height: $action-height;\n  max-height: $action-height;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: $action-height;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n    @include ghost-hover-pressed();\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    position: absolute;\n    top: $action-height;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    height: 0;\n    max-height: 20rem;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    height: $expand-content-height;\n    opacity: 1;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n\n:host(.show) {\n  height: calc(#{$expand-content-height} + #{$action-height});\n  max-height: calc(#{$expand-content-height} + #{$action-height});\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"card-accordion\"\n        class={{\n          show: this.expandContent,\n        }}\n      >\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name=\"chevron-right-small\"\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class={'expand-content-body'}>\n            <slot></slot>\n          </div>\n          <div class={'expand-content-footer'}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  margin-bottom: $small-space;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAmB,isECUzB,IAAIC,EAAqB,EACzB,MAAMC,EAAoB,CAACC,EAAiB,mBACnC,CAACA,EAAQF,KAAsBG,KAAK,K,MAgBhCC,EAAa,M,6FAQC,K,CAErBC,sBACF,OAAOC,KAAKC,YAAYC,WAAWC,cAAc,kB,CAGnDC,oBAAoBC,GAClBA,EAAMC,iBACND,EAAME,kBACNP,KAAKQ,eAAiBR,KAAKQ,cAC3BR,KAAKS,gBAAgBC,KAAK,CACxBC,OAAQX,KAAKQ,cACbI,YAAaP,IAGf,GAAIL,KAAKQ,cAAe,CACtBR,KAAKa,+B,EAIDA,gCACNC,YAAW,KACT,MAAMC,EAAOf,KAAKD,gBAAgBiB,wBAClC,GAAID,EAAKE,OAASC,OAAOC,YAAa,CACpCnB,KAAKC,YAAYC,WACdC,cAAc,mBACdiB,eAAe,M,IAEnB,I,CAGLC,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,iBACLC,MAAO,CACLC,KAAM1B,KAAKQ,gBAGbc,EAAA,UACEK,SAAU,EACVF,MAAO,CAAE,gBAAiB,KAAMC,KAAM1B,KAAKQ,eAC3CoB,QAAUvB,GAAUL,KAAKI,oBAAoBC,GAC7CwB,KAAK,SACLC,KAAK,SAAQ,gBACE9B,KAAKQ,cAAa,gBAClBb,KAEf2B,EAAA,WACES,KAAK,sBACLN,MAAO,CACL,cAAe,KACfC,KAAM1B,KAAKQ,kBAIjBc,EAAA,OACEG,MAAO,CACL,iBAAkB,KAClBC,KAAM1B,KAAKQ,gBAGbc,EAAA,OAAKG,MAAO,uBACVH,EAAA,cAEFA,EAAA,OAAKG,MAAO,2B,8CCrGtB,MAAMO,EAAe,wP,MCYRC,EAAU,M,yBACrBZ,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,aACAA,EAAA,OAAKG,MAAM,iBACTH,EAAA,QAAMS,KAAK,mB"}

package/dist/siemens-ix/p-01c37ebe.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as s,g as c}from"./p-b899b25b.js";const n=".sc-ix-select-h{display:inline-block;position:relative;height:auto;border-radius:var(--theme-input--border-radius)}.sc-ix-select-h .d-none.sc-ix-select{display:none}.sc-ix-select-h .select.sc-ix-select{position:relative;display:flex;align-items:center;height:auto;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}.sc-ix-select-h .select.sc-ix-select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff !important;outline-offset:var(--theme-input--focus--outline-offset)}.sc-ix-select-h .select.readonly.sc-ix-select{box-shadow:none !important}.sc-ix-select-h .hidden.sc-ix-select{display:none !important}.sc-ix-select-h .trigger.sc-ix-select{display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-select-h .input-container.sc-ix-select{display:flex;position:relative;align-items:flex-start;width:100%}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select>ix-filter-chip.sc-ix-select{margin:0.1rem}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);background:transparent;height:1.75rem;width:100%}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:hover,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:focus-visible{border:none;outline:none}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::-moz-placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::-moz-placeholder{opacity:0}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::placeholder{opacity:0}.sc-ix-select-h .chevron-down-container.sc-ix-select{display:flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem}.sc-ix-select-h .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}.sc-ix-select-h .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):active{color:var(--theme-color-dynamic--hover)}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):hover{color:var(--theme-color-std-text);background-color:var(--theme-btn-invisible-secondary--background--hover)}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):active{color:var(--theme-color-std-text);background-color:var(--theme-btn-invisible-secondary--background--active)}.sc-ix-select-h .add-item.sc-ix-select{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}.sc-ix-select-h .select-list-header.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";const o=class{constructor(i){e(this,i);this.itemSelectionChange=t(this,"itemSelectionChange",7);this.inputChange=t(this,"inputChange",7);this.addItem=t(this,"addItem",7);this.selectedIndices=[];this.allowClear=false;this.mode="single";this.editable=false;this.disabled=false;this.readonly=false;this.i18nPlaceholder="Select an option";this.i18nPlaceholderEditable="Type of select option";this.i18nSelectListHeader="Please select an option";this.i18nNoMatches="No matches";this.hideListHeader=false;this.dropdownShow=false;this.value=undefined;this.dropdownWrapperRef=undefined;this.dropdownAnchor=undefined;this.isDropdownEmpty=false;this.hasFocus=false;this.navigationItem=undefined;this.inputFilterText=undefined;this.inputValue=undefined}get items(){return Array.from(this.hostElement.querySelectorAll("ix-select-item"))}get selectedItems(){return this.items.filter((e=>e.selected))}get addItemButton(){return this.hostElement.querySelector(".add-item")}get isSingleMode(){return this.mode==="single"}get isMultipleMode(){return this.mode==="multiple"}get isEveryDropdownItemHidden(){return this.items.every((e=>e.classList.contains("d-none")))}watchSelectedIndices(e){if(!e){this.selectValue([]);return}if(Array.isArray(e)){this.selectValue([...e]);return}this.selectValue([e])}onItemClicked(e){const t=e.detail;this.emitItemClick(t)}emitItemClick(e){if(this.isMultipleMode&&Array.isArray(this.selectedIndices)){if(this.selectedIndices.includes(e)){this.selectedIndices=this.selectedIndices.filter((t=>t!==e))}else{this.selectedIndices=[...this.selectedIndices,e]}}else{this.selectedIndices=[e]}this.selectValue(this.selectedIndices);this.itemSelectionChange.emit(this.selectedIndices)}emitAddItem(e){if(e.trim()===""){return}const t=document.createElement("ix-select-item");t.value=e;t.label=e;this.addItemRef.appendChild(t);this.clearInput();this.emitItemClick(e);this.addItem.emit(e)}selectValue(e){var t;this.items.forEach((t=>{t.selected=e.some((e=>e===t.value))}));this.value=this.selectedItems.map((e=>e.label));if(this.isSingleMode){this.inputValue=((t=this.value)===null||t===void 0?void 0:t.length)?this.value[0]:null;return}this.inputValue=null}componentDidLoad(){this.inputRef.addEventListener("input",(()=>{this.inputChange.emit(this.inputRef.value)}))}componentWillLoad(){if(this.selectedIndices){this.selectValue(Array.isArray(this.selectedIndices)?this.selectedIndices:[this.selectedIndices])}}onLabelChange(e){e.preventDefault();e.stopImmediatePropagation();this.selectValue(Array.isArray(this.selectedIndices)?this.selectedIndices:[this.selectedIndices])}disconnectedCallback(){if(this.labelMutationObserver){this.labelMutationObserver.disconnect()}}itemExists(e){return this.items.find((t=>t.label===e))}dropdownVisibilityChanged(e){this.dropdownShow=e.detail;this.hasFocus=e.detail;if(e.detail){this.inputRef.focus();this.inputRef.select();this.removeHiddenFromItems();this.isDropdownEmpty=this.isEveryDropdownItemHidden}else{this.navigationItem=undefined}}async onKeyDown(e){if(!this.dropdownShow){return}if(e.code==="ArrowDown"||e.code==="ArrowUp"){this.onArrowNavigation(e)}if(e.code==="Enter"||e.code==="NumpadEnter"){await this.onEnterNavigation()}if(e.code==="Escape"){this.dropdownShow=false}}async onEnterNavigation(){var e,t;if(this.isMultipleMode){return}if(this.editable&&!this.itemExists(this.inputFilterText)){this.emitAddItem(this.inputFilterText);this.navigationItem=this.items[this.items.length-1]}(e=this.navigationItem)===null||e===void 0?void 0:e.onItemClick();await((t=this.dropdownRef)===null||t===void 0?void 0:t.updatePosition());if(this.isSingleMode&&!this.editable){this.dropdownShow=false}}onArrowNavigation(e){e.stopPropagation();e.preventDefault();const t=this.items.find((e=>document.activeElement===e.querySelector("button")));this.navigationItem=t;const i=this.items.filter((e=>!e.classList.contains("d-none")));const s=i.indexOf(this.navigationItem);if(e.code==="ArrowDown"&&s<i.length-1){this.navigationItem=i[s+1]}else if(e.code==="ArrowUp"&&s>0){this.navigationItem=i[s-1]}this.setHoverEffectForNavigatedSelectItem()}setHoverEffectForNavigatedSelectItem(){var e;(e=this.navigationItem)===null||e===void 0?void 0:e.querySelector("button").focus()}filterItemsWithTypeahead(){this.inputFilterText=this.inputRef.value;if(this.inputFilterText){this.items.forEach((e=>{e.classList.remove("d-none");if(!e.label.toLowerCase().includes(this.inputFilterText.toLowerCase())){e.classList.add("d-none")}}))}else{this.removeHiddenFromItems()}this.isDropdownEmpty=this.isEveryDropdownItemHidden}removeHiddenFromItems(){this.items.forEach((e=>{e.classList.remove("d-none")}))}clearInput(){this.inputRef.value="";this.inputFilterText=""}clear(){this.clearInput();this.value=[];this.selectedIndices=[];this.itemSelectionChange.emit(null);this.dropdownShow=false}onInputBlur(e){if(this.editable){return}if(this.isSingleMode){if(this.dropdownShow&&this.isDropdownEmpty){this.dropdownShow=false}}if(!this.dropdownShow&&this.mode!=="multiple"){e.target["value"]=this.value}}placeholderValue(){if(this.editable){return this.i18nPlaceholderEditable}if(this.readonly){return""}return this.i18nPlaceholder}isAddItemVisible(){return!this.itemExists(this.inputFilterText)&&this.editable&&this.inputFilterText}render(){var e,t,c;return i(s,null,i("div",{class:{"form-control":true,select:true,focus:this.hasFocus,editable:this.editable,disabled:this.disabled,readonly:this.readonly},ref:e=>{this.dropdownAnchor=e;if(!this.editable)this.dropdownWrapperRef=e}},i("div",{class:"input-container"},i("div",{class:"chips"},this.isMultipleMode?(e=this.selectedItems)===null||e===void 0?void 0:e.map((e=>i("ix-filter-chip",{disabled:this.disabled||this.readonly,key:e.value,onCloseClick:t=>{t.preventDefault();t.stopPropagation();this.emitItemClick(e.value)}},e.label))):"",i("div",{class:"trigger"},i("input",{"data-testid":"input",disabled:this.disabled,readOnly:this.readonly,type:"text",class:{"allow-clear":this.allowClear&&!!((t=this.value)===null||t===void 0?void 0:t.length)},placeholder:this.placeholderValue(),value:this.inputValue,ref:e=>this.inputRef=e,onBlur:e=>this.onInputBlur(e),onInput:()=>this.filterItemsWithTypeahead()}),this.allowClear&&(((c=this.value)===null||c===void 0?void 0:c.length)||this.inputFilterText)?i("ix-icon-button",{class:"clear",icon:"clear",ghost:true,oval:true,size:"16",onClick:e=>{e.preventDefault();e.stopPropagation();this.clear()}}):null,this.disabled||this.readonly?null:i("div",{class:"chevron-down-container",ref:e=>{if(this.editable)this.dropdownWrapperRef=e}},i("ix-icon",{class:"chevron",name:"chevron-down-small"})))))),i("ix-dropdown",{ref:e=>this.dropdownRef=e,show:this.dropdownShow,closeBehavior:this.isMultipleMode?"outside":"both",class:{"d-none":this.disabled||this.readonly},anchor:this.dropdownAnchor,trigger:this.dropdownWrapperRef,onShowChanged:e=>this.dropdownVisibilityChanged(e),placement:"bottom-start",overwriteDropdownStyle:async()=>({minWidth:`${this.hostElement.clientWidth}px`})},i("div",{class:{"select-list-header":true,hidden:this.hideListHeader||this.isDropdownEmpty},title:this.i18nSelectListHeader},this.i18nSelectListHeader),i("slot",null),i("div",{ref:e=>this.addItemRef=e,class:"d-contents"}),this.isAddItemVisible()?i("ix-dropdown-item",{"data-testid":"add-item",icon:"plus",class:{"add-item":true},label:this.inputFilterText,onItemClick:e=>{e.preventDefault();e.stopPropagation();this.emitAddItem(this.inputFilterText)}}):null,this.isDropdownEmpty&&!this.editable?i("div",{class:"select-list-header"},this.i18nNoMatches):""))}get hostElement(){return c(this)}static get watchers(){return{selectedIndices:["watchSelectedIndices"]}}};o.style=n;class l extends CustomEvent{constructor(e){super("ix-select-item:labelChange",{bubbles:true,detail:e})}}const h=".sc-ix-select-item-h{display:block;position:relative}.sc-ix-select-item-h>ix-dropdown-item.sc-ix-select-item{width:100%}.sc-ix-select-item-h .select-item-checked.sc-ix-select-item{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}.d-none.sc-ix-select-item-h{display:none}";const r=class{constructor(i){e(this,i);this.itemClick=t(this,"itemClick",7);this.label=undefined;this.value=undefined;this.selected=false;this.hover=false}async onItemClick(e){e===null||e===void 0?void 0:e.preventDefault();e===null||e===void 0?void 0:e.stopPropagation();this.itemClick.emit(this.value)}componentDidRender(){if(!this.value){throw Error("ix-select-item must have a `value` property")}}labelChange(e,t){this.hostElement.dispatchEvent(new l({newValue:e,oldValue:t}))}render(){return i(s,null,i("ix-dropdown-item",{class:{"select-item-checked":this.selected},checked:this.selected,label:this.label?this.label:this.value,onItemClick:e=>this.onItemClick(e)}))}get hostElement(){return c(this)}static get watchers(){return{label:["labelChange"]}}};r.style=h;export{o as ix_select,r as ix_select_item};
-//# sourceMappingURL=p-01c37ebe.entry.js.map