@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/components/ix-action-card.js.map

@@ -1 +0,0 @@
-{"file":"ix-action-card.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,08HAA08H;;MCsBn9HA,cAAY;;;;;mBAIc,SAAS;gBAKX,SAAS;;;oBAezB,KAAK;;EAExB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,IAC9C,2BACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,KAE7D,EAAE,CACH,EACA,IAAI,CAAC,OAAO,IACX,qBAAe,OAAO,EAAC,aAAa,IACjC,IAAI,CAAC,OAAO,CACC,KAEhB,EAAE,CACH,EACA,IAAI,CAAC,UAAU,IACd,qBACE,OAAO,EAAC,sBAAsB,EAC9B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,eAAa,CACG,CACV,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IxActionCard"],"sources":["./src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","./src/components/action-card/action-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  min-width: 13.375rem;\n  width: 13.375rem;\n  height: 7.5rem;\n  min-height: 7.5rem;\n  cursor: pointer;\n\n  margin: 0.25rem 0;\n\n  ix-card {\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n\n:host(:hover) {\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n}\n\n:host(:active) {\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n\n:host(.selected) {\n  ix-card {\n    --ix-card-border-color: var(--theme-color-dynamic);\n  }\n\n  ix-card.card-insight {\n    --ix-card-background: var(--theme-color-ghost--selected);\n  }\n\n  ix-card.card-notification {\n    --ix-card-background: var(--theme-color-ghost--selected);\n  }\n\n  ix-card.card-alarm {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n        }}\n      >\n        <ix-card variant={this.variant} class={'pointer'}>\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n            ) : (\n              ''\n            )}\n            {this.heading ? (\n              <ix-typography variant=\"large-title\">\n                {this.heading}\n              </ix-typography>\n            ) : (\n              ''\n            )}\n            {this.subheading ? (\n              <ix-typography\n                variant=\"default-title-single\"\n                color={this.variant === 'insight' ? 'soft' : undefined}\n              >\n                {this.subheading}\n              </ix-typography>\n            ) : null}\n            <slot></slot>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxAnimatedTab extends Components.IxAnimatedTab, HTMLElement {}
-export const IxAnimatedTab: {
-  prototype: IxAnimatedTab;
-  new (): IxAnimatedTab;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,39 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const animatedTabCss = ".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";
-
-const AnimatedTab = /*@__PURE__*/ proxyCustomElement(class AnimatedTab extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.icon = undefined;
-    this.count = undefined;
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get style() { return animatedTabCss; }
-}, [6, "ix-animated-tab", {
-    "icon": [1],
-    "count": [514]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-animated-tab"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-animated-tab":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AnimatedTab);
-      }
-      break;
-  } });
-}
-
-const IxAnimatedTab = AnimatedTab;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxAnimatedTab, defineCustomElement };
-
-//# sourceMappingURL=ix-animated-tab.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-animated-tab.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+EAA+E;;MCgBzF,WAAW;;;;;;;EAWtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/animated-tab/animated-tab.scss?tag=ix-animated-tab&encapsulation=scoped","./src/components/animated-tab/animated-tab.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"],"version":3}

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

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxAnimatedTabs extends Components.IxAnimatedTabs, HTMLElement {}
-export const IxAnimatedTabs: {
-  prototype: IxAnimatedTabs;
-  new (): IxAnimatedTabs;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,224 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as anime } from './anime.es.js';
-import { A as Animation } from './animation.js';
-import { c as convertToAbbreviationString } from './rwd.util.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-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 = /*@__PURE__*/ proxyCustomElement(class AnimatedTabs extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.tabClick = createEvent(this, "tabClick", 7);
-    this.easing = 'easeInOutSine';
-    this.firstRender = true;
-    this.tabs = undefined;
-    this.activeIndex = undefined;
-    this.disableAnimations = false;
-    this.selectedIndex = 0;
-    this.tabPlacement = 'top';
-  }
-  onTabSelectionChange(newSelectionIndex, oldSelectionIndex) {
-    this.updateTabAnimation(oldSelectionIndex, newSelectionIndex);
-  }
-  onMouseDown() {
-    this.activeIndex = undefined;
-  }
-  get animatedTabs() {
-    return Array.from(this.hostElement.querySelectorAll('ix-animated-tab'));
-  }
-  get tabsContainer() {
-    return this.hostElement.querySelector('.tabs-container');
-  }
-  get contentContainer() {
-    return this.hostElement.querySelector('.content-container');
-  }
-  componentWillLoad() {
-    this.tabs = this.animatedTabs;
-  }
-  componentDidLoad() {
-    this.onTabSelectionChange(this.selectedIndex, -1);
-    this.observer = new MutationObserver(() => {
-      // Will trigger a re-render even if only the count attribute of a child tab changed
-      this.tabs = this.animatedTabs;
-    });
-    this.observer.observe(this.contentContainer, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['count'],
-    });
-  }
-  //@ts-expect-error
-  disconnectCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  isSelected(tab) {
-    return this.tabs.indexOf(tab) === this.selectedIndex;
-  }
-  showTab(tab) {
-    if (this.isSelected(tab)) {
-      tab.classList.remove('d-none');
-    }
-  }
-  hideTab(tab) {
-    if (!this.isSelected(tab)) {
-      tab.classList.add('d-none');
-    }
-  }
-  slideOutLeft(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '-100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideOutRight(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideInLeft(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['-100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  slideInRight(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  updateTabAnimation(oldIndex, newIndex) {
-    var _a;
-    (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, tabIndex) => {
-      if (tabIndex === oldIndex) {
-        if (tabIndex < newIndex) {
-          this.slideOutLeft(tab);
-        }
-        else if (tabIndex > newIndex) {
-          this.slideOutRight(tab);
-        }
-      }
-      else if (tabIndex === newIndex) {
-        if (tabIndex < oldIndex) {
-          this.slideInLeft(tab);
-        }
-        else if (tabIndex > oldIndex) {
-          this.slideInRight(tab);
-        }
-      }
-      else {
-        tab.classList.add('d-none');
-      }
-    });
-  }
-  onTabClick(index) {
-    this.selectedIndex = index;
-    this.tabClick.emit(index);
-  }
-  onTabMouseDown(index) {
-    this.activeIndex = index;
-  }
-  render() {
-    return (h(Host, { class: { 'flex-column-reverse': this.tabPlacement === 'bottom' } }, h("ul", { class: "tabs-container" }, this.animatedTabs.map((element, index) => (h("li", { class: { bottom: this.tabPlacement === 'bottom' }, onClick: () => this.onTabClick(index), onMouseDown: () => this.onTabMouseDown(index) }, h("div", { class: {
-        'tab-container': true,
-        selected: this.selectedIndex === index,
-      } }, h("ix-icon", { name: element.icon }), element.count ? (h("span", { class: {
-        count: true,
-        bottom: this.tabPlacement === 'bottom',
-      } }, convertToAbbreviationString(element.count))) : (''))))), h("div", { class: {
-        'tab-active-underline': true,
-        bottom: this.tabPlacement === 'bottom',
-      }, style: { 'margin-left': `calc(${this.selectedIndex} * 5rem)` } })), h("div", { class: "content-container" }, h("slot", null))));
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "selectedIndex": ["onTabSelectionChange"]
-  }; }
-  static get style() { return animatedTabsCss; }
-}, [6, "ix-animated-tabs", {
-    "disableAnimations": [4, "disable-animations"],
-    "selectedIndex": [2, "selected-index"],
-    "tabPlacement": [1, "tab-placement"],
-    "tabs": [32],
-    "activeIndex": [32]
-  }, [[1, "mouseup", "onMouseDown"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-animated-tabs", "ix-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-animated-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AnimatedTabs);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxAnimatedTabs = AnimatedTabs;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxAnimatedTabs, defineCustomElement };
-
-//# sourceMappingURL=ix-animated-tabs.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-animated-tabs.js","mappings":"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","names":[],"sources":["./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@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/components/ix-application-header.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxApplicationHeader extends Components.IxApplicationHeader, HTMLElement {}
-export const IxApplicationHeader: {
-  prototype: IxApplicationHeader;
-  new (): IxApplicationHeader;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-application-header.js

@@ -1,8 +0,0 @@
-import { A as ApplicationHeader, d as defineCustomElement$1 } from './application-header.js';
-
-const IxApplicationHeader = ApplicationHeader;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxApplicationHeader, defineCustomElement };
-
-//# sourceMappingURL=ix-application-header.js.map

package/dist/components/ix-application-header.js.map

@@ -1 +0,0 @@
-{"file":"ix-application-header.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-avatar.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxAvatar extends Components.IxAvatar, HTMLElement {}
-export const IxAvatar: {
-  prototype: IxAvatar;
-  new (): IxAvatar;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-avatar.js

@@ -1,8 +0,0 @@
-import { A as Avatar, d as defineCustomElement$1 } from './avatar.js';
-
-const IxAvatar = Avatar;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxAvatar, defineCustomElement };
-
-//# sourceMappingURL=ix-avatar.js.map

package/dist/components/ix-avatar.js.map

@@ -1 +0,0 @@
-{"file":"ix-avatar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-basic-navigation.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxBasicNavigation extends Components.IxBasicNavigation, HTMLElement {}
-export const IxBasicNavigation: {
-  prototype: IxBasicNavigation;
-  new (): IxBasicNavigation;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ix-basic-navigation.js

@@ -1,103 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { m as menuController } from './menu-service.js';
-import { s as screenMode } from './service.js';
-import { d as defineCustomElement$6 } from './application-header.js';
-import { d as defineCustomElement$5 } from './burger-menu.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-
-const basicNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .content{height:100%}:host(.mode-large) .content{margin-left:0rem}:host(.mode-small) .content{margin-left:0px;width:100%}";
-
-const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class BasicNavigation extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.applicationName = undefined;
-    this.hideHeader = false;
-    this.mode = 'large';
-  }
-  get menu() {
-    return this.hostElement.querySelector('ix-menu');
-  }
-  onContentClick() {
-    var _a;
-    if (menuController.isPinned) {
-      return;
-    }
-    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
-  }
-  componentWillLoad() {
-    if (this.hideHeader === false) {
-      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = screenMode.mode;
-    }
-  }
-  componentDidRender() {
-    if (this.menu) {
-      this.menu.applicationName = this.applicationName;
-    }
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-  }
-  render() {
-    return (h(Host, { "data-role": "", class: {
-        'hide-header': this.hideHeader,
-        [`mode-${this.mode}`]: true,
-      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName, mode: this.mode }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { class: "navigation-content" }, h("slot", { name: "menu" }), h("div", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
-  }
-  get hostElement() { return this; }
-  static get style() { return basicNavigationCss; }
-}, [1, "ix-basic-navigation", {
-    "applicationName": [1, "application-name"],
-    "hideHeader": [4, "hide-header"],
-    "mode": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-basic-navigation", "ix-application-header", "ix-burger-menu", "ix-icon", "ix-icon-button", "ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-basic-navigation":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, BasicNavigation);
-      }
-      break;
-    case "ix-application-header":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-burger-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxBasicNavigation = BasicNavigation;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxBasicNavigation, defineCustomElement };
-
-//# sourceMappingURL=ix-basic-navigation.js.map

package/dist/components/ix-basic-navigation.js.map

@@ -1 +0,0 @@
-{"file":"ix-basic-navigation.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,umBAAumB;;MCoBrnB,eAAe;;;;;;sBAWL,KAAK;gBAEJ,OAAO;;EAE7B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAIO,cAAc;;IACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;OAC5B,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAChE,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","./src/components/basic-navigation/basic-navigation.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.mode-large) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.mode-small) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n\n  @State() mode: Mode = 'large';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    if (this.hideHeader === false) {\n      this.modeDisposable = screenMode.onChange.on(\n        (mode) => (this.mode = mode)\n      );\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName} mode={this.mode}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-blind.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface IxBlind extends Components.IxBlind, HTMLElement {}
-export const IxBlind: {
-  prototype: IxBlind;
-  new (): IxBlind;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;