@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -1,214 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e56a1d39.js');
-const anime_es = require('./anime.es-8822f296.js');
-const animation = require('./animation-d5cc0bec.js');
-const rwd_util = require('./rwd.util-9480f0b5.js');
-
-const animatedTabCss = ".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";
-
-const AnimatedTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.count = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.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) {
-    index.registerInstance(this, hostRef);
-    this.tabClick = index.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_es.anime({
-      targets: tab,
-      duration: animation.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_es.anime({
-      targets: tab,
-      duration: animation.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_es.anime({
-      targets: tab,
-      duration: animation.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_es.anime({
-      targets: tab,
-      duration: animation.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 (index.h(index.Host, { class: { 'flex-column-reverse': this.tabPlacement === 'bottom' } }, index.h("ul", { class: "tabs-container" }, this.animatedTabs.map((element, index$1) => (index.h("li", { class: { bottom: this.tabPlacement === 'bottom' }, onClick: () => this.onTabClick(index$1), onMouseDown: () => this.onTabMouseDown(index$1) }, index.h("div", { class: {
-        'tab-container': true,
-        selected: this.selectedIndex === index$1,
-      } }, index.h("ix-icon", { name: element.icon }), element.count ? (index.h("span", { class: {
-        count: true,
-        bottom: this.tabPlacement === 'bottom',
-      } }, rwd_util.convertToAbbreviationString(element.count))) : (''))))), index.h("div", { class: {
-        'tab-active-underline': true,
-        bottom: this.tabPlacement === 'bottom',
-      }, style: { 'margin-left': `calc(${this.selectedIndex} * 5rem)` } })), index.h("div", { class: "content-container" }, index.h("slot", null))));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "selectedIndex": ["onTabSelectionChange"]
-  }; }
-};
-AnimatedTabs.style = animatedTabsCss;
-
-exports.ix_animated_tab = AnimatedTab;
-exports.ix_animated_tabs = AnimatedTabs;
-
-//# sourceMappingURL=ix-animated-tab_2.cjs.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-animated-tab.ix-animated-tabs.entry.cjs.js","mappings":"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","names":["h","Host","anime","Animation","index","convertToAbbreviationString"],"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/cjs/ix-avatar.cjs.entry.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e56a1d39.js');
-
-const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}";
-
-/*
- * 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.
- */
-function DefaultAvatar(props) {
-  const { initials } = props;
-  if (initials) {
-    return index.h("div", { class: 'avatar-initials' }, initials);
-  }
-  return (index.h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), index.h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))));
-}
-const Avatar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.image = undefined;
-    this.initials = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("li", { class: "avatar" }, this.image ? (index.h("img", { src: this.image, class: "avatar-image" })) : (index.h(DefaultAvatar, { initials: this.initials })))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-Avatar.style = avatarCss;
-
-exports.ix_avatar = Avatar;
-
-//# sourceMappingURL=ix-avatar.cjs.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2jBAA2jB;;ACA7kB;;;;;;;;AASA,SAAS,aAAa,CAAC,KAA4B;EACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAE3B,IAAI,QAAQ,EAAE;IACZ,OAAOA,iBAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;GACxD;EAED,QACEA,iBACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IAEnBA,eAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChCA,kBACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE,EACFA,kBACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,EACN;AACJ,CAAC;MAYY,MAAM;;;;;;EAejB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,gBAAI,KAAK,EAAC,QAAQ,IACf,IAAI,CAAC,KAAK,IACTA,iBAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,KAEjDA,QAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC3C,CACE,CACA,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","./src/components/avatar/avatar.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/text-truncation';\n@import 'mixins/hover';\n\n:host {\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-color-component-3);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-color-4);\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\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement: HTMLIxAvatarElement;\n\n  /**\n   * Display a avatar image\n   *\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials: string;\n\n  render() {\n    return (\n      <Host>\n        <li class=\"avatar\">\n          {this.image ? (\n            <img src={this.image} class=\"avatar-image\"></img>\n          ) : (\n            <DefaultAvatar initials={this.initials} />\n          )}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,156 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e56a1d39.js');
-const anime_es = require('./anime.es-8822f296.js');
-const mutationObserver = require('./mutation-observer-eaaa5399.js');
-
-const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.25rem;margin-inline-start:0.25rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}";
-
-const Breadcrumb = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.itemClick = index.createEvent(this, "itemClick", 7);
-    this.nextClick = index.createEvent(this, "nextClick", 7);
-    this.visibleItemCount = 9;
-    this.nextItems = [];
-    this.ghost = false;
-    this.previousButtonRef = undefined;
-    this.nextButtonRef = undefined;
-    this.items = [];
-  }
-  get breadcrumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
-  }
-  get crumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));
-  }
-  onItemClick(item) {
-    this.itemClick.emit(item);
-  }
-  componentDidLoad() {
-    this.mutationObserver = mutationObserver.createMutationObserver(() => {
-      const updatedItems = this.getItems();
-      const update = () => {
-        this.items = updatedItems;
-      };
-      if (updatedItems.length >= this.items.length) {
-        update();
-      }
-      else if (updatedItems.length < this.items.length) {
-        const last = this.crumbItems[this.crumbItems.length - 1];
-        this.animationFadeOut(last, () => update());
-      }
-    });
-    this.mutationObserver.observe(this.hostElement.querySelector('.crumb-items'), {
-      subtree: true,
-      childList: true,
-    });
-  }
-  componentWillLoad() {
-    this.items = this.getItems();
-  }
-  getItems() {
-    return this.breadcrumbItems.map((item) => {
-      return { label: item.label, icon: item.icon };
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  animationFadeOut(ref, complete) {
-    anime_es.anime({
-      targets: ref,
-      translateX: '-100%',
-      duration: 150,
-      opacity: [1, 0],
-      easing: 'linear',
-      complete: () => complete(),
-    });
-  }
-  animationFadeIn(ref) {
-    anime_es.anime({
-      targets: ref,
-      duration: 150,
-      opacity: [0, 1],
-      translateX: ['-100%', '0%'],
-      easing: 'linear',
-    });
-  }
-  handleLastButtonRef(ref, last) {
-    var _a;
-    if (last) {
-      this.animationFadeIn(ref);
-    }
-    if (last && ((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.nextButtonRef = ref;
-    }
-  }
-  sliceHiddenItems() {
-    let sliceIndex = 0;
-    if (this.items.length > this.visibleItemCount) {
-      sliceIndex = this.items.length - this.visibleItemCount;
-    }
-    return this.items.slice(sliceIndex);
-  }
-  clickItem(item, last) {
-    if (!last) {
-      this.onItemClick(item);
-    }
-  }
-  renderBreadcrumbItems() {
-    return this.sliceHiddenItems().map((item, index$1, array) => {
-      var _a;
-      const last = index$1 === array.length - 1;
-      const isLastItem = last && !((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length);
-      return (index.h("div", { ref: (ref) => this.handleLastButtonRef(ref, last), "data-breadcrumb": index$1, class: {
-          crumb: true,
-          clickable: true,
-          ghost: this.ghost,
-          btn: !this.ghost,
-          last: isLastItem,
-          'remove-hover': isLastItem,
-        }, onClick: () => this.clickItem(item.label, last), "data-testid": "item" }, index.h("span", { class: "crumb-text remove-anchor" }, item.icon ? index.h("ix-icon", { name: item.icon, size: "16" }) : '', index.h("span", { style: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        } }, item.label)), !isLastItem ? (index.h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
-    });
-  }
-  render() {
-    var _a, _b, _c;
-    return (index.h(index.Host, null, index.h("ix-dropdown", { trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
-        ? this.previousButtonRef
-        : null }, this.items
-      .slice(0, this.items.length - this.visibleItemCount)
-      .map((item) => (index.h("ix-dropdown-item", { label: item.label, onClick: () => this.onItemClick(item.label) })))), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (index.h("div", { class: "crumb crumb-dropdown", ref: (ref) => (this.previousButtonRef = ref) }, index.h("span", { class: "remove-anchor more-text" }, index.h("span", { class: "more-text-ellipsis" }, "..."), index.h("span", { class: "glyph glyph-16 glyph-chevron-right" })))) : null, index.h("div", { class: "crumb-items" }, this.renderBreadcrumbItems(), index.h("slot", null)), index.h("ix-dropdown", { trigger: this.nextButtonRef }, (_c = this.nextItems) === null || _c === void 0 ? void 0 : _c.map((item) => (index.h("ix-dropdown-item", { label: item, onClick: (e) => {
-        this.nextClick.emit({
-          event: e,
-          item,
-        });
-      } }))))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-Breadcrumb.style = breadcrumbCss;
-
-const breadcrumbItemCss = ".sc-ix-breadcrumb-item-h{display:block}";
-
-const BreadcrumbItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.label = undefined;
-    this.icon = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-};
-BreadcrumbItem.style = breadcrumbItemCss;
-
-exports.ix_breadcrumb = Breadcrumb;
-exports.ix_breadcrumb_item = BreadcrumbItem;
-
-//# sourceMappingURL=ix-breadcrumb_2.cjs.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-breadcrumb.ix-breadcrumb-item.entry.cjs.js","mappings":"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","names":["createMutationObserver","animejs","index","h","Host"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=scoped","./src/components/breadcrumb/breadcrumb.tsx","./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=scoped","./src/components/breadcrumb-item/breadcrumb-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/hover';\n@import 'mixins/text-truncation';\n\n@mixin crumb-hover($variant) {\n  @include hover {\n    background-color: var(--theme-breadcrumb-#{$variant}--background--hover);\n\n    .crumb-text,\n    .glyph {\n      color: var(--theme-breadcrumb-#{$variant}--color--hover);\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n    }\n  }\n\n  @include active {\n    background-color: var(--theme-breadcrumb-#{$variant}--background--active);\n\n    .crumb-text,\n    .glyph {\n      color: var(--theme-breadcrumb-#{$variant}--color--active);\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n    }\n  }\n}\n\n@mixin breadcrumb($variant) {\n  .crumb.#{$variant} {\n    background-color: var(--theme-breadcrumb-#{$variant}--background);\n    border: var(--theme-btn--#{$variant}-thickness) solid transparent;\n    transition: $default-time;\n\n    .crumb-text,\n    .glyph {\n      color: var(--theme-breadcrumb-#{$variant}--color);\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      color: var(--theme-breadcrumb-#{$variant}-arrow--color);\n    }\n\n    &.last .crumb-text {\n      color: var(--theme-breadcrumb-#{$variant}-last--color);\n    }\n\n    &.clickable:not(.remove-hover) {\n      @include hover {\n        background-color: var(\n          --theme-breadcrumb-#{$variant}--background--hover\n        );\n\n        .crumb-text,\n        .glyph {\n          color: var(--theme-breadcrumb-#{$variant}--color--hover);\n        }\n\n        .crumb-text + .glyph-chevron-right-small {\n          color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(\n          --theme-breadcrumb-#{$variant}--background--active\n        );\n\n        .crumb-text,\n        .glyph {\n          color: var(--theme-breadcrumb-#{$variant}--color--active);\n        }\n\n        .crumb-text + .glyph-chevron-right-small {\n          color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n        }\n      }\n    }\n  }\n}\n\n:host {\n  display: flex;\n  height: $large-control-height;\n  justify-content: flex-start;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  .crumb {\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    white-space: nowrap;\n    border-radius: var(--theme-breadcrumb--border-radius);\n    height: $default-control-height;\n    max-height: $default-control-height;\n    min-width: 0;\n    margin-inline-end: $tiny-space;\n    padding: $small-space 0 $small-space $tiny-space;\n    outline: none;\n    cursor: pointer;\n\n    @include crumb-hover('btn');\n\n    .crumb-text {\n      @include ellipsis;\n      display: flex;\n      align-items: center;\n      min-width: 0;\n      font-weight: $font-weight-bold;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      margin-inline-start: $tiny-space;\n      margin-inline-end: 0; // Overwrite global selector: .btn .glyph\n    }\n\n    &.last {\n      background-color: transparent !important;\n      cursor: default;\n      padding-inline-end: $tiny-space;\n    }\n\n    &.clickable:not(.remove-hover) {\n      @include focus-visible {\n        border-color: var(--theme-focus--border-color);\n      }\n    }\n\n    &:not(:last-of-type) {\n      flex-shrink: 0;\n      max-width: 14rem;\n    }\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n\n    .glyph::after {\n      display: none;\n    }\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: $font-weight-bold;\n    }\n\n    .glyph {\n      line-height: unset;\n    }\n  }\n\n  .crumb-items {\n    display: contents;\n  }\n\n  @include breadcrumb('btn');\n  @include breadcrumb('ghost');\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  State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  scoped: true,\n})\nexport class Breadcrumb {\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n  @State() previousButtonRef: HTMLElement;\n\n  @State() nextButtonRef: HTMLElement;\n\n  @Element() hostElement: HTMLIxBreadcrumbElement;\n\n  get breadcrumbItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  get crumbItems() {\n    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));\n  }\n\n  @State() items: { label: string; icon?: string }[] = [];\n\n  private mutationObserver: MutationObserver;\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() => {\n      const updatedItems = this.getItems();\n      const update = () => {\n        this.items = updatedItems;\n      };\n\n      if (updatedItems.length >= this.items.length) {\n        update();\n      } else if (updatedItems.length < this.items.length) {\n        const last = this.crumbItems[this.crumbItems.length - 1] as HTMLElement;\n        this.animationFadeOut(last, () => update());\n      }\n    });\n\n    this.mutationObserver.observe(\n      this.hostElement.querySelector('.crumb-items'),\n      {\n        subtree: true,\n        childList: true,\n      }\n    );\n  }\n\n  componentWillLoad() {\n    this.items = this.getItems();\n  }\n\n  private getItems() {\n    return this.breadcrumbItems.map((item) => {\n      return { label: item.label, icon: item.icon };\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private animationFadeOut(ref: HTMLElement, complete: () => void) {\n    animejs({\n      targets: ref,\n      translateX: '-100%',\n      duration: 150,\n      opacity: [1, 0],\n      easing: 'linear',\n      complete: () => complete(),\n    });\n  }\n\n  private animationFadeIn(ref: HTMLElement) {\n    animejs({\n      targets: ref,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  private handleLastButtonRef(ref: HTMLDivElement, last: boolean) {\n    if (last) {\n      this.animationFadeIn(ref);\n    }\n    if (last && this.nextItems?.length) {\n      this.nextButtonRef = ref;\n    }\n  }\n\n  private sliceHiddenItems() {\n    let sliceIndex = 0;\n\n    if (this.items.length > this.visibleItemCount) {\n      sliceIndex = this.items.length - this.visibleItemCount;\n    }\n\n    return this.items.slice(sliceIndex);\n  }\n\n  private clickItem(item: string, last: boolean) {\n    if (!last) {\n      this.onItemClick(item);\n    }\n  }\n\n  private renderBreadcrumbItems() {\n    return this.sliceHiddenItems().map((item, index, array) => {\n      const last = index === array.length - 1;\n\n      const isLastItem = last && !this.nextItems?.length;\n      return (\n        <div\n          ref={(ref) => this.handleLastButtonRef(ref, last)}\n          data-breadcrumb={index}\n          class={{\n            crumb: true,\n            clickable: true,\n            ghost: this.ghost,\n            btn: !this.ghost,\n            last: isLastItem,\n            'remove-hover': isLastItem,\n          }}\n          onClick={() => this.clickItem(item.label, last)}\n          data-testid=\"item\"\n        >\n          <span class=\"crumb-text remove-anchor\">\n            {item.icon ? <ix-icon name={item.icon} size=\"16\"></ix-icon> : ''}\n            <span\n              style={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n              }}\n            >\n              {item.label}\n            </span>\n          </span>\n          {!isLastItem ? (\n            <span class=\"glyph glyph-18 glyph-chevron-right-small text-default-text\"></span>\n          ) : null}\n        </div>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef\n              : null\n          }\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => (\n              <ix-dropdown-item\n                label={item.label}\n                onClick={() => this.onItemClick(item.label)}\n              ></ix-dropdown-item>\n            ))}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <div\n            class=\"crumb crumb-dropdown\"\n            ref={(ref) => (this.previousButtonRef = ref)}\n          >\n            <span class=\"remove-anchor more-text\">\n              <span class=\"more-text-ellipsis\">...</span>\n              <span class=\"glyph glyph-16 glyph-chevron-right\"></span>\n            </span>\n          </div>\n        ) : null}\n        <div class=\"crumb-items\">\n          {this.renderBreadcrumbItems()}\n          <slot></slot>\n        </div>\n        <ix-dropdown trigger={this.nextButtonRef}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\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, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  scoped: true,\n})\nexport class BreadcrumbItem {\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}