@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/siemens-ix/p-ff17104c.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a,H as i,c as e,g as s}from"./p-b899b25b.js";import{a as n}from"./p-810b5232.js";import{A as o}from"./p-3b97bb69.js";import{c as r}from"./p-21aa3602.js";const c=".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";const d=class{constructor(a){t(this,a);this.icon=undefined;this.count=undefined}render(){return a(i,null,a("slot",null))}};d.style=c;const b=".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 l=class{constructor(a){t(this,a);this.tabClick=e(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(t,a){this.updateTabAnimation(a,t)}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((()=>{this.tabs=this.animatedTabs}));this.observer.observe(this.contentContainer,{childList:true,subtree:true,attributes:true,attributeFilter:["count"]})}disconnectCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}isSelected(t){return this.tabs.indexOf(t)===this.selectedIndex}showTab(t){if(this.isSelected(t)){t.classList.remove("d-none")}}hideTab(t){if(!this.isSelected(t)){t.classList.add("d-none")}}slideOutLeft(t){if(this.disableAnimations){this.hideTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[1,0],translateX:[0,"-100%"],easing:this.easing,complete:()=>{this.hideTab(t)}})}slideOutRight(t){if(this.disableAnimations){this.hideTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[1,0],translateX:[0,"100%"],easing:this.easing,complete:()=>{this.hideTab(t)}})}slideInLeft(t){if(this.firstRender){t.classList.remove("d-none");this.firstRender=false;return}if(this.disableAnimations){this.showTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[0,1],translateX:["-100%",0],easing:this.easing,begin:()=>{this.showTab(t)}})}slideInRight(t){if(this.firstRender){t.classList.remove("d-none");this.firstRender=false;return}if(this.disableAnimations){this.showTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[0,1],translateX:["100%",0],easing:this.easing,begin:()=>{this.showTab(t)}})}updateTabAnimation(t,a){var i;(i=this.tabs)===null||i===void 0?void 0:i.forEach(((i,e)=>{if(e===t){if(e<a){this.slideOutLeft(i)}else if(e>a){this.slideOutRight(i)}}else if(e===a){if(e<t){this.slideInLeft(i)}else if(e>t){this.slideInRight(i)}}else{i.classList.add("d-none")}}))}onTabClick(t){this.selectedIndex=t;this.tabClick.emit(t)}onTabMouseDown(t){this.activeIndex=t}render(){return a(i,{class:{"flex-column-reverse":this.tabPlacement==="bottom"}},a("ul",{class:"tabs-container"},this.animatedTabs.map(((t,i)=>a("li",{class:{bottom:this.tabPlacement==="bottom"},onClick:()=>this.onTabClick(i),onMouseDown:()=>this.onTabMouseDown(i)},a("div",{class:{"tab-container":true,selected:this.selectedIndex===i}},a("ix-icon",{name:t.icon}),t.count?a("span",{class:{count:true,bottom:this.tabPlacement==="bottom"}},r(t.count)):"")))),a("div",{class:{"tab-active-underline":true,bottom:this.tabPlacement==="bottom"},style:{"margin-left":`calc(${this.selectedIndex} * 5rem)`}})),a("div",{class:"content-container"},a("slot",null)))}get hostElement(){return s(this)}static get watchers(){return{selectedIndex:["onTabSelectionChange"]}}};l.style=b;export{d as ix_animated_tab,l as ix_animated_tabs};
-//# sourceMappingURL=p-ff17104c.entry.js.map

package/dist/siemens-ix/p-ff17104c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["animatedTabCss","AnimatedTab","render","h","Host","animatedTabsCss","AnimatedTabs","this","easing","firstRender","onTabSelectionChange","newSelectionIndex","oldSelectionIndex","updateTabAnimation","onMouseDown","activeIndex","undefined","animatedTabs","Array","from","hostElement","querySelectorAll","tabsContainer","querySelector","contentContainer","componentWillLoad","tabs","componentDidLoad","selectedIndex","observer","MutationObserver","observe","childList","subtree","attributes","attributeFilter","disconnectCallback","_a","disconnect","isSelected","tab","indexOf","showTab","classList","remove","hideTab","add","slideOutLeft","disableAnimations","anime","targets","duration","Animation","mediumTime","opacity","translateX","complete","slideOutRight","slideInLeft","begin","slideInRight","oldIndex","newIndex","forEach","tabIndex","onTabClick","index","tabClick","emit","onTabMouseDown","class","tabPlacement","map","element","bottom","onClick","selected","name","icon","count","convertToAbbreviationString","style"],"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"],"mappings":"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"}

package/dist/types/components/animated-tab/animated-tab.d.ts

@@ -1,11 +0,0 @@
-export declare class AnimatedTab {
-  /**
-   * Icon of the tab
-   */
-  icon: string;
-  /**
-   * Show notification number
-   */
-  count: number;
-  render(): any;
-}

package/dist/types/components/animated-tabs/animated-tabs.d.ts

@@ -1,44 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class AnimatedTabs {
-  hostElement: HTMLIxAnimatedTabsElement;
-  tabs: HTMLIxAnimatedTabElement[];
-  activeIndex: number;
-  /**
-   * @internal For debugging purposes only
-   */
-  disableAnimations: boolean;
-  /**
-   * Current selected tab index
-   */
-  selectedIndex: number;
-  /**
-   * Placement of the tabs
-   */
-  tabPlacement: 'top' | 'bottom';
-  /**
-   * Tab navigated
-   */
-  tabClick: EventEmitter;
-  private easing;
-  private firstRender;
-  private observer;
-  onTabSelectionChange(newSelectionIndex: number, oldSelectionIndex: number): void;
-  onMouseDown(): void;
-  get animatedTabs(): HTMLIxAnimatedTabElement[];
-  get tabsContainer(): Element;
-  get contentContainer(): Element;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  private disconnectCallback;
-  private isSelected;
-  private showTab;
-  private hideTab;
-  private slideOutLeft;
-  private slideOutRight;
-  private slideInLeft;
-  private slideInRight;
-  private updateTabAnimation;
-  private onTabClick;
-  private onTabMouseDown;
-  render(): any;
-}

package/dist/types/components/index-button/index-button.d.ts

@@ -1,16 +0,0 @@
-import { ButtonVariant } from '../button/button';
-export type IndexButtonVariant = ButtonVariant;
-/**
- * @internal
- */
-export declare class IxIndexButton {
-  /**
-   * Button variant
-   */
-  variant: IndexButtonVariant;
-  /**
-   * Selection state
-   */
-  selected: boolean;
-  render(): any;
-}

package/dist/types/components/utils/screen/context.d.ts

@@ -1,5 +0,0 @@
-export declare function isBasicNavigationLayout(element: HTMLElement): element is HTMLIxBasicNavigationElement;
-export declare const hostContext: (selector: string, element: HTMLElement) => HTMLIxBasicNavigationElement | HTMLIxMapNavigationElement;
-export declare const isHostedBy: (selector: string, element: HTMLElement) => boolean;
-export declare const getHostApplicationLayout: (element: HTMLElement) => HTMLIxBasicNavigationElement | HTMLIxMapNavigationElement;
-export declare const menuContext: (element: Element) => HTMLIxMenuElement;

package/dist/types/components/utils/screen/index.d.ts

@@ -1 +0,0 @@
-export { screenMode } from './service';

package/dist/types/components/utils/screen/mode.d.ts

@@ -1,13 +0,0 @@
-export type Mode = 'large' | 'medium' | 'small';
-export type MediaQueryListener = {
-  matchMedia: MediaQueryList;
-  dispose: () => void;
-};
-export declare const setSupportedModes: (modes: Mode[]) => Mode[];
-export declare const createMediaQueryListener: (query: string, callback: (event: MediaQueryListEvent) => void) => MediaQueryListener;
-export declare const getFallbackMode: (modes: Mode[], detectedMode: Mode) => Mode;
-export type ModeChangeCallback = (mode: Mode) => void;
-export declare const createModeListener: (modeChangeCallback: (mode: Mode) => void) => {
-  dispose: () => void;
-  matchMedia: MediaQueryList[];
-};

package/dist/types/components/utils/screen/service.d.ts

@@ -1,15 +0,0 @@
-import { TypedEvent } from '../typed-event';
-import { Mode } from './mode';
-declare class ScreenMode {
-  #private;
-  constructor();
-  get mode(): Mode;
-  get onChange(): TypedEvent<Mode>;
-  get isDetectionEnabled(): boolean;
-  disableModeDetection(): void;
-  enableModeDetection(): void;
-  setMode(mode: Mode): void;
-  setSupportedMods(modes: Mode[]): void;
-}
-export declare const screenMode: ScreenMode;
-export {};

package/scss/_fonts.scss

@@ -1,70 +0,0 @@
-/*
- * 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.
- */
-
-@import './mixins/fonts';
-
-.text-xs {
-  @include text-xs;
-}
-
-.text-s {
-  @include text-s;
-}
-
-.text-caption {
-  @include text-caption;
-}
-
-.text-caption-single {
-  @include text-caption-single;
-}
-
-.text-default {
-  @include text-default;
-}
-
-.text-default-single {
-  @include text-default-single;
-}
-
-.text-default-title {
-  @include text-default-title;
-}
-
-.text-default-title-single {
-  @include text-default-title-single;
-}
-
-.text-l {
-  @include text-l;
-}
-
-.text-l-single {
-  @include text-l-single;
-}
-
-.text-l-title {
-  @include text-l-title;
-}
-
-.text-l-title-single {
-  @include text-l-title-single;
-}
-
-.text-h2 {
-  @include text-h2;
-}
-
-.text-xl {
-  @include text-xl;
-}
-
-a {
-  color: var(--theme-color-primary);
-}

package/scss/components/_buttons.scss

@@ -1,179 +0,0 @@
-/*
- * 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.
- */
-
-@import './mixins/hover';
-@import './mixins/text-truncation';
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: $x-large-space;
-  font-size: $font-size-default;
-  font-weight: $font-weight-bold;
-  transition: $default-time;
-  padding: 0 $small-space;
-  min-width: 5rem;
-  gap: $tiny-space;
-
-  @include ellipsis;
-
-  .glyph {
-    margin-right: $tiny-space;
-    font-weight: $font-weight-normal;
-  }
-
-  &:focus-visible,
-  &.focus {
-    box-shadow: none;
-  }
-}
-
-$button-categories: (primary, secondary);
-
-@mixin btn($name, $enable-border: true) {
-  .btn-#{$name} {
-    border-radius: var(--theme-btn--border-radius);
-
-    @if $enable-border == false {
-      --bs-btn-border-width: 0px;
-      --bs-btn-active-border-color: none;
-    }
-
-    &,
-    &.focus,
-    &:focus-visible {
-      background-color: var(--theme-btn-#{$name}--background);
-      color: var(--theme-btn-#{$name}--color);
-
-      --ix-button-color: var(--theme-btn-#{$name}--color);
-
-      @if $enable-border {
-        border-width: var(--theme-btn--border-thickness);
-        border-color: var(--theme-btn-#{$name}--border-color);
-        border-style: solid;
-      } @else {
-        border-color: transparent;
-      }
-    }
-
-    @include focus-visible {
-      outline: 1px solid var(--theme-color-focus-bdr);
-      outline-offset: var(--theme-btn--focus--outline-offset);
-    }
-
-    &.selected {
-      background-color: var(--theme-btn-#{$name}--background--selected);
-    }
-
-    &.hover,
-    &:hover {
-      @if $enable-border {
-        border-color: var(--theme-btn-#{$name}--border-color--hover) !important;
-      }
-
-      background-color: var(--theme-btn-#{$name}--background--hover) !important;
-      color: var(--theme-btn-#{$name}--color--hover) !important;
-    }
-
-    &.selected {
-      &.hover,
-      &:hover {
-        background-color: var(--theme-btn-#{$name}--background--selected-hover);
-        color: var(--theme-btn-#{$name}--color--selected-hover);
-      }
-    }
-
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active,
-    .show > &.dropdown-toggle {
-      @if $enable-border {
-        border-color: var(
-          --theme-btn-#{$name}--border-color--active
-        ) !important;
-      }
-
-      background-color: var(
-        --theme-btn-#{$name}--background--active
-      ) !important;
-      color: var(--theme-btn-#{$name}--color--active) !important;
-    }
-
-    &.selected {
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
-        background-color: var(
-          --theme-btn-#{$name}--background--selected-active
-        );
-        color: var(--theme-btn-#{$name}--color--selected-active);
-      }
-    }
-
-    &.disabled,
-    &:disabled {
-      pointer-events: none;
-      cursor: initial;
-
-      @if $enable-border {
-        border-color: var(--theme-btn-#{$name}--border-color--disabled);
-      }
-
-      background-color: var(--theme-btn-#{$name}--background--disabled);
-      color: var(--theme-btn-#{$name}--color--disabled);
-      opacity: 1;
-
-      --ix-button-color: var(--theme-btn-#{$name}--color--disabled);
-    }
-  }
-}
-
-@each $category in $button-categories {
-  @include btn($category);
-  @include btn('outline-#{$category}');
-  @include btn('invisible-#{$category}', false);
-}
-
-.btn-oval,
-.btn-icon {
-  min-width: $x-large-space;
-  width: $x-large-space;
-
-  .glyph {
-    margin-right: 0;
-  }
-}
-
-.btn-oval {
-  border-radius: 6.25rem;
-  width: $default-control-height;
-}
-
-.btn-icon-xs,
-.btn-icon-12 {
-  height: $default-space;
-  width: $default-space;
-  min-width: $default-space;
-  min-height: $default-space;
-}
-
-.btn-icon-s,
-.btn-icon-16 {
-  height: $large-space;
-  width: $large-space;
-  min-width: $large-space;
-  min-height: $large-space;
-}
-
-.btn-icon-32 {
-  height: $x-large-space;
-  width: $x-large-space;
-  min-width: $x-large-space;
-  min-height: $x-large-space;
-}

package/scss/components/_dropdown.scss

@@ -1,170 +0,0 @@
-/*
- * 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.
- */
-
-@import '../mixins/hover';
-
-.dropdown-group {
-  margin: 0.687rem;
-  display: block;
-  position: relative;
-  width: 21.562rem;
-  border-radius: 0.25rem;
-  background-color: #f8f9fa;
-  border: solid 0.062rem rgba(0, 0, 0, 0.25);
-
-  .dropdown-group-title {
-    display: block;
-    position: relative;
-    font-size: 0.875rem;
-    text-align: left;
-    margin: 0.937rem 0 1.25rem 0.937rem;
-  }
-
-  .dropdown-group-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 11.562rem;
-    margin: 0.937rem 0 0.937rem 0.937rem;
-
-    > * {
-      margin-bottom: 1rem;
-    }
-  }
-}
-
-.dropdown-group-submit {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 0.687rem 0 0.687rem;
-}
-
-.dropdown-menu {
-  position: absolute;
-
-  background-color: var(--theme-menu--background);
-  @include text-default-single;
-  border: var(--theme-menu--border-thickness) solid
-    var(--theme-menu--border--color);
-  border-radius: var(--theme-menu--border-radius);
-  max-width: 100vw;
-  padding: $tiny-space 0;
-  transition: background-color $default-time;
-  box-shadow: var(--theme-menu--box-shadow);
-
-  &.xl > .dropdown-item {
-    height: 2.5rem;
-    line-height: 2.187rem;
-  }
-}
-
-.dropdown-header {
-  display: flex;
-  align-items: center;
-  height: $large-control-height;
-  color: var(--theme-menu-header--color);
-  padding: 0 $default-space;
-}
-
-.dropdown-buttons {
-  display: flex;
-  padding: $tiny-space $small-space;
-
-  ix-icon-button + ix-icon-button {
-    margin-inline-start: $small-space;
-  }
-}
-
-.dropdown-item {
-  display: flex;
-  height: 2.5rem;
-  position: relative;
-  align-items: center;
-  cursor: pointer;
-  padding: 0 $x-large-space;
-  border: 1px solid transparent;
-  color: var(--theme-menu-item--color);
-  background-color: transparent;
-
-  &:focus-visible {
-    background-color: var(--theme-menu-item--background);
-    color: var(--theme-menu-item--color);
-  }
-
-  &:focus-visible {
-    outline: none;
-    background-color: var(--theme-menu-item--background);
-    border-color: #119fff;
-    color: var(--theme-menu-item--color--focus);
-  }
-
-  @include hover {
-    color: var(--theme-menu-item--color--hover);
-    background-color: var(--theme-menu-item--background--hover);
-  }
-
-  @include active {
-    color: var(--theme-menu-item--color--active);
-    background-color: var(--theme-menu-item--background--active);
-  }
-
-  &.disabled,
-  &:disabled {
-    color: var(--theme-menu-item--color--disabled);
-    background-color: var(--theme-menu-item--background--disabled);
-  }
-
-  > a,
-  a:hover,
-  a:active {
-    color: var(--theme-color-std-text);
-  }
-
-  > .glyph {
-    color: var(--theme-menu-item-icon--color);
-
-    &.disabled {
-      color: var(--color-weak-text);
-    }
-
-    &.glyph-single-check {
-      color: var(--theme-menu-item-icon-check--color);
-    }
-
-    margin-inline-end: $small-space;
-  }
-}
-
-.dropdown-item {
-  > input[type='checkbox'] + label {
-    margin-bottom: 0px;
-
-    &::before {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.dropdown-divider {
-  border-top: 1px solid var(--theme-menu-separator--background);
-  margin: $tiny-space 0;
-}
-
-button.dropdown-toggle {
-  position: relative;
-  padding-right: 1.5rem;
-}
-
-button.dropdown-toggle::after {
-  position: absolute;
-  top: 45%;
-  right: 0.5rem;
-}