@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/cjs/theme-switcher-bdbd0d30.js

@@ -1,94 +0,0 @@
-'use strict';
-
-const typedEvent = require('./typed-event-f0f051da.js');
-
-class ThemeSwitcher {
-  get themeChanged() {
-    return this._themeChanged;
-  }
-  hasVariantSuffix(className) {
-    return (className.endsWith(this.suffixDark) ||
-      className.endsWith(this.suffixLight));
-  }
-  isThemeClass(className) {
-    return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
-  }
-  setTheme(themeName) {
-    if (!this.isThemeClass(themeName)) {
-      throw Error(`Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`);
-    }
-    const oldThemes = [];
-    document.body.classList.forEach((className) => {
-      if (this.isThemeClass(className)) {
-        oldThemes.push(className);
-      }
-    });
-    document.body.classList.remove(...oldThemes);
-    document.body.classList.add(themeName);
-  }
-  toggleMode() {
-    const oldThemes = [];
-    document.body.classList.forEach((className) => {
-      if (this.isThemeClass(className)) {
-        oldThemes.push(className);
-      }
-    });
-    if (oldThemes.length === 0) {
-      document.body.classList.add(this.getOppositeMode(this.defaultTheme));
-      return;
-    }
-    oldThemes.forEach((themeName) => {
-      document.body.classList.replace(themeName, this.getOppositeMode(themeName));
-    });
-  }
-  getOppositeMode(themeName) {
-    if (themeName.endsWith(this.suffixDark)) {
-      return themeName.replace(/-dark$/g, this.suffixLight);
-    }
-    if (themeName.endsWith(this.suffixLight)) {
-      return themeName.replace(/-light$/g, this.suffixDark);
-    }
-  }
-  handleMutations(mutations) {
-    return mutations.forEach((mutation) => {
-      const { target } = mutation;
-      target.classList.forEach((className) => {
-        var _a;
-        if (this.isThemeClass(className) &&
-          !((_a = mutation.oldValue) === null || _a === void 0 ? void 0 : _a.includes(className))) {
-          this._themeChanged.emit(className);
-        }
-      });
-    });
-  }
-  registerMutationObserver() {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    if (!('MutationObserver' in window)) {
-      console.warn('ThemeSwitcher not supported by your browser. Missing MutationObserver API');
-      return;
-    }
-    this.mutationObserver = new MutationObserver((mutations) => {
-      this.handleMutations(mutations);
-    });
-    this.mutationObserver.observe(document.body, {
-      attributeFilter: ['class'],
-      attributeOldValue: true,
-    });
-  }
-  constructor() {
-    this.prefixTheme = 'theme-';
-    this.suffixLight = '-light';
-    this.suffixDark = '-dark';
-    this.defaultTheme = 'theme-classic-dark';
-    this._themeChanged = new typedEvent.TypedEvent();
-    this.registerMutationObserver();
-  }
-}
-const themeSwitcher = new ThemeSwitcher();
-
-exports.ThemeSwitcher = ThemeSwitcher;
-exports.themeSwitcher = themeSwitcher;
-
-//# sourceMappingURL=theme-switcher-bdbd0d30.js.map

package/dist/cjs/theme-switcher-bdbd0d30.js.map

@@ -1 +0,0 @@
-{"file":"theme-switcher-bdbd0d30.js","mappings":"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","names":["TypedEvent"],"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/collection/components/animated-tab/animated-tab.css

@@ -1,14 +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.
- */
-:host {
-  display: block;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-}

package/dist/collection/components/animated-tab/animated-tab.js

@@ -1,69 +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 { h, Host } from '@stencil/core';
-export class AnimatedTab {
-  constructor() {
-    this.icon = undefined;
-    this.count = undefined;
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get is() { return "ix-animated-tab"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["animated-tab.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["animated-tab.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon of the tab"
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "count": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show notification number"
-        },
-        "attribute": "count",
-        "reflect": true
-      }
-    };
-  }
-}
-//# sourceMappingURL=animated-tab.js.map

package/dist/collection/components/animated-tab/animated-tab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-tab.js","sourceRoot":"","sources":["../../../src/components/animated-tab/animated-tab.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;;;;EAWtB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { 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"]}

package/dist/collection/components/animated-tabs/animated-tabs.css

@@ -1,158 +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.
- */
-/*
- * 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.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
-/*
- * 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.
- */
-/*
- * 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.
- */
-:host {
-  --animate-duration: 300ms;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-:host ul {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  position: relative;
-}
-:host ul li {
-  display: flex;
-  justify-content: center;
-  width: 5rem;
-  height: 4.5rem;
-  cursor: pointer;
-  padding-top: 0.625rem;
-}
-:host ul li.bottom {
-  padding-top: 0.875rem;
-}
-:host ul li .tab-container {
-  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;
-}
-:host ul li .tab-container ix-icon {
-  color: var(--theme-animated-tab-icon--color) !important;
-}
-:host ul li .tab-container:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host ul li .tab-container:not(.disabled):not(:disabled):hover {
-  background: var(--theme-animated-tab-circle--background--hover);
-  border-color: var(--theme-animated-tab-circle--border-color--hover);
-}
-:host ul li .tab-container:not(.disabled):not(:disabled):hover ix-icon {
-  color: var(--theme-animated-tab-icon--color--hover) !important;
-}
-:host ul li .tab-container:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host ul li .tab-container:not(.disabled):not(:disabled):active {
-  background: var(--theme-animated-tab-circle--background--active);
-  border-color: var(--theme-animated-tab-circle--border-color--active);
-}
-:host ul li .tab-container:not(.disabled):not(:disabled):active ix-icon {
-  color: var(--theme-animated-tab-icon--color--active) !important;
-}
-:host ul li .tab-container.selected {
-  background: var(--theme-animated-tab-circle--background--selected);
-  border-color: var(--theme-animated-tab-circle--border-color--selected) !important;
-}
-:host ul li .tab-container.selected ix-icon {
-  color: var(--theme-animated-tab-icon--color--selected) !important;
-}
-:host ul li .tab-container.selected .count {
-  border-color: var(--theme-tab-pill--border-color--selected) !important;
-}
-:host ul li .tab-container.disabled ix-icon, :host ul li .tab-container:disabled ix-icon {
-  color: var(--theme-animated-tab-icon--color--disabled) !important;
-}
-:host ul li .tab-container:not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--theme-focus--border-color) !important;
-}
-:host ul li .tab-container .count {
-  -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;
-}
-:host ul li .tab-container .count.bottom {
-  top: -0.55rem;
-}
-:host .content-container {
-  display: flex;
-  flex-direction: row;
-  height: calc(100% - 4.5rem);
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-:host .tab-active-underline {
-  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;
-}
-:host .tab-active-underline.bottom {
-  top: 0;
-  margin-top: 0;
-}

package/dist/collection/components/animated-tabs/animated-tabs.js

@@ -1,303 +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 { h, Host, } from '@stencil/core';
-import anime from 'animejs';
-import Animation from '../utils/animation';
-import { convertToAbbreviationString } from '../utils/rwd.util';
-export class AnimatedTabs {
-  constructor() {
-    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))));
-  }
-  static get is() { return "ix-animated-tabs"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["animated-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["animated-tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "disableAnimations": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "For debugging purposes only"
-            }],
-          "text": ""
-        },
-        "attribute": "disable-animations",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selectedIndex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Current selected tab index"
-        },
-        "attribute": "selected-index",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "tabPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'top' | 'bottom'",
-          "resolved": "\"bottom\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placement of the tabs"
-        },
-        "attribute": "tab-placement",
-        "reflect": false,
-        "defaultValue": "'top'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "activeIndex": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabClick",
-        "name": "tabClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Tab navigated"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "selectedIndex",
-        "methodName": "onTabSelectionChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "mouseup",
-        "method": "onMouseDown",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
-//# sourceMappingURL=animated-tabs.js.map

package/dist/collection/components/animated-tabs/animated-tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-tabs.js","sourceRoot":"","sources":["../../../src/components/animated-tabs/animated-tabs.tsx"],"names":[],"mappings":"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","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 {\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"]}