@siemens/ix 2.0.0 → 2.0.1

package/components/ix-menu-about.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './icon-button.js';
+import { d as defineCustomElement$4 } from './spinner.js';
+import { d as defineCustomElement$3 } from './tab-item.js';
+import { d as defineCustomElement$2 } from './tabs.js';
+
+const menuAboutCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-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)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";
+
+const MenuAbout = /*@__PURE__*/ proxyCustomElement(class MenuAbout extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    this.activeTabLabel = undefined;
+    this.label = 'About & legal information';
+    this.show = false;
+    this.labels = [];
+  }
+  get aboutItems() {
+    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));
+  }
+  setTab(label) {
+    this.activeTabLabel = label;
+    this.aboutItems.forEach((i) => {
+      i.style.display = 'none';
+      if (i.label === this.activeTabLabel) {
+        i.style.display = 'block';
+      }
+    });
+  }
+  componentWillLoad() {
+    if (this.aboutItems.length) {
+      this.setTab(this.activeTabLabel || this.aboutItems[0].label);
+    }
+  }
+  componentDidLoad() {
+    forceUpdate(this.el);
+  }
+  componentWillRender() {
+    this.updateLabels();
+  }
+  updateLabels() {
+    this.labels = this.aboutItems.map((i) => i.label);
+  }
+  watchActiveTabLabel(value) {
+    // Wait a DOM render cycle to get changed labels
+    setTimeout(() => this.setTab(value));
+  }
+  getSelectedTabIndex(label) {
+    const selectedItem = this.aboutItems.find((item) => item.label === label);
+    return this.aboutItems.indexOf(selectedItem);
+  }
+  getTabItems() {
+    return this.aboutItems.map(({ label }) => {
+      return (h("ix-tab-item", { class: {
+          active: label === this.activeTabLabel,
+        }, onClick: () => this.setTab(label) }, label));
+    });
+  }
+  render() {
+    return (h(Host, { slot: "ix-menu-about", class: {
+        show: this.show,
+      } }, h("div", { class: "about-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: 'close', onClick: (e) => this.close.emit({
+        name: 'ix-menu-about',
+        nativeEvent: e,
+      }) })), h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel) }, this.getTabItems()), h("div", { class: "about-items" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "activeTabLabel": ["watchActiveTabLabel"]
+  }; }
+  static get style() { return menuAboutCss; }
+}, [1, "ix-menu-about", {
+    "activeTabLabel": [1025, "active-tab-label"],
+    "label": [1],
+    "show": [4],
+    "labels": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-about", "ix-icon-button", "ix-spinner", "ix-tab-item", "ix-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-about":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAbout);
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-tab-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMenuAbout = MenuAbout;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAbout, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-about.js.map

package/components/ix-menu-about.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-about.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ozGAAozG;;MC2B5zG,SAAS;;;;;;;iBASJ,2BAA2B;gBAK5B,KAAK;kBAYQ,EAAE;;EAE9B,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;GACnE;EAEO,MAAM,CAAC,KAAa;IAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;MACxB,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACzB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;QACnC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;OAC3B;KACF,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;MAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KAC9D;GACF;EAED,gBAAgB;IACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACtB;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAEO,YAAY;IAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;GACnD;EAGD,mBAAmB,CAAC,KAAa;;IAE/B,UAAU,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACtC;EAEO,mBAAmB,CAAC,KAAa;IACvC,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAC1E,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;GAC9C;EAEO,WAAW;IACjB,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE;MACnC,QACE,mBACE,KAAK,EAAE;UACL,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc;SACtC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhC,KAAK,CACM,EACd;KACH,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,IAED,WAAK,KAAK,EAAC,cAAc,IACvB,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAM,EACrC,sBACE,KAAK,QACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,CAAC,CAAC,KACT,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,eAAe;QACrB,WAAW,EAAE,CAAC;OACf,CAAC,GAEY,CACd,EACN,eAAS,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,IAC7D,IAAI,CAAC,WAAW,EAAE,CACX,EACV,WAAK,KAAK,EAAC,aAAa,IACtB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=shadow","./src/components/menu-about/menu-about.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 'legacy/fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  ix-menu-about-item {\n    display: none;\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  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * Active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  @State() labels: string[] = [];\n\n  get aboutItems(): HTMLIxMenuAboutItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.aboutItems.forEach((i) => {\n      i.style.display = 'none';\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.aboutItems.length) {\n      this.setTab(this.activeTabLabel || this.aboutItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  componentWillRender() {\n    this.updateLabels();\n  }\n\n  private updateLabels() {\n    this.labels = this.aboutItems.map((i) => i.label);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    // Wait a DOM render cycle to get changed labels\n    setTimeout(() => this.setTab(value));\n  }\n\n  private getSelectedTabIndex(label: string) {\n    const selectedItem = this.aboutItems.find((item) => item.label === label);\n    return this.aboutItems.indexOf(selectedItem);\n  }\n\n  private getTabItems() {\n    return this.aboutItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"ix-menu-about\"\n        class={{\n          show: this.show,\n        }}\n      >\n        <div class=\"about-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon={'close'}\n            onClick={(e) =>\n              this.close.emit({\n                name: 'ix-menu-about',\n                nativeEvent: e,\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs selected={this.getSelectedTabIndex(this.activeTabLabel)}>\n          {this.getTabItems()}\n        </ix-tabs>\n        <div class=\"about-items\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-menu-avatar-item.d.ts

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

package/components/ix-menu-avatar-item.js

@@ -0,0 +1,8 @@
+import { M as MenuAvatarItem, d as defineCustomElement$1 } from './menu-avatar-item.js';
+
+const IxMenuAvatarItem = MenuAvatarItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAvatarItem, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-avatar-item.js.map

package/components/ix-menu-avatar-item.js.map

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

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

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

package/components/ix-menu-avatar.js

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './avatar.js';
+import { d as defineCustomElement$4 } from './dropdown.js';
+import { d as defineCustomElement$3 } from './dropdown-item.js';
+import { d as defineCustomElement$2 } from './menu-avatar-item.js';
+
+const menuAvatarCss = ":host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:0.15s;border-radius:1.25rem}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):active,:host .avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}:host .avatar:focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
+
+const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class MenuAvatar extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.logoutClick = createEvent(this, "logoutClick", 7);
+    this.avatarElementId = 'ix-menu-avatar-id';
+    this.top = undefined;
+    this.bottom = undefined;
+    this.image = undefined;
+    this.initials = undefined;
+    this.i18nLogout = 'Logout';
+  }
+  render() {
+    return (h(Host, { slot: "ix-menu-avatar" }, h("button", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { image: this.image, initials: this.initials }), h("div", { class: "avatar-name" }, h("span", { class: "text-default-single", title: this.top }, this.top), h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { trigger: this.hostElement, placement: 'right-start', offset: {
+        mainAxis: 16,
+      } }, h("slot", null), h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
+        this.logoutClick.emit(e);
+      } }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return menuAvatarCss; }
+}, [1, "ix-menu-avatar", {
+    "top": [1],
+    "bottom": [1],
+    "image": [1],
+    "initials": [1],
+    "i18nLogout": [1, "i-1-8n-logout"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-avatar", "ix-avatar", "ix-dropdown", "ix-dropdown-item", "ix-menu-avatar-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAvatar);
+      }
+      break;
+    case "ix-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-menu-avatar-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMenuAvatar = MenuAvatar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAvatar, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-avatar.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-menu-avatar.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,imEAAimE;;MCuB1mE,UAAU;;;;;;IAqCb,oBAAe,GAAG,mBAAmB,CAAC;;;;;sBAPzB,QAAQ;;EAS7B,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,IACzB,cACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,IAEX,iBAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc,EAEnE,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ,EACP,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,mBACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE;OACb,IAED,eAAa,EACb,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,CAAC,CAAC;QACT,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OAC1B,GACoB,CACX,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","./src/components/menu-avatar/menu-avatar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n  margin-right: 0.75rem;\n\n  .avatar {\n    all: unset;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    width: 100%;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.41rem;\n    margin-right: 0.35rem;\n    transition: 0.15s;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-color-component-3);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-color-4);\n    }\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: $default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        @include ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n\n  .avatar:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <button\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n          tabIndex={0}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </button>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon={'log-out'}\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-menu-category.d.ts

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

package/components/ix-menu-category.js

@@ -0,0 +1,190 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { c as closestIxMenu } from './context.js';
+import { c as createMutationObserver } from './mutation-observer.js';
+import { d as defineCustomElement$6 } from './divider.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './dropdown-item.js';
+import { d as defineCustomElement$3 } from './menu-item.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const menuCategoryCss = ":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-chevron{margin-left:auto;margin-right:0px;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0px;transition:var(--theme-default-time) max-height ease-in-out;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--expanded{max-height:999999999px}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";
+
+const DefaultIxMenuItemHeight = 40;
+const DefaultAnimationTimeout = 150;
+const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.icon = undefined;
+    this.notifications = undefined;
+    this.menuExpand = false;
+    this.showItems = false;
+    this.showDropdown = false;
+    this.nestedItems = [];
+  }
+  isNestedItemActive() {
+    return this.getNestedItems().some((item) => item.active);
+  }
+  getNestedItems() {
+    return Array.from(this.hostElement.querySelectorAll(':scope ix-menu-item'));
+  }
+  getNestedItemsHeight() {
+    const items = this.getNestedItems();
+    return items.length * DefaultIxMenuItemHeight;
+  }
+  onExpandCategory(showItems) {
+    if (showItems) {
+      this.animateFadeIn();
+    }
+    else {
+      this.animateFadeOut();
+    }
+  }
+  animateFadeOut() {
+    const slotHideThresholdMs = 25;
+    anime({
+      targets: this.menuItemsContainer,
+      duration: DefaultAnimationTimeout,
+      easing: 'easeInSine',
+      opacity: [1, 0],
+      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],
+      complete: () => {
+        setTimeout(() => {
+          this.showItems = false;
+          this.showDropdown = false;
+        }, DefaultAnimationTimeout + slotHideThresholdMs);
+      },
+    });
+  }
+  animateFadeIn() {
+    anime({
+      targets: this.menuItemsContainer,
+      duration: DefaultAnimationTimeout,
+      easing: 'easeInSine',
+      opacity: [0, 1],
+      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
+      begin: () => {
+        this.showItems = true;
+        this.showDropdown = false;
+      },
+    });
+  }
+  onCategoryClicked(e) {
+    if (this.ixMenu.expand) {
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+      this.onExpandCategory(!this.showItems);
+      return;
+    }
+    this.showDropdown = !this.showDropdown;
+  }
+  onNestedItemsChanged() {
+    this.nestedItems = this.getNestedItems();
+  }
+  isCategoryItemListVisible() {
+    return this.menuExpand && (this.showItems || this.isNestedItemActive());
+  }
+  componentDidLoad() {
+    const closestMenu = closestIxMenu(this.hostElement);
+    if (!closestMenu) {
+      throw Error('ix-menu-category can only be used as a child of ix-menu');
+    }
+    this.ixMenu = closestMenu;
+    this.observer = createMutationObserver(() => this.onNestedItemsChanged());
+    this.observer.observe(this.hostElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    requestAnimationFrame(() => {
+      this.onNestedItemsChanged();
+    });
+    this.ixMenu.addEventListener('expandChange', ({ detail: menuExpand }) => {
+      this.menuExpand = menuExpand;
+      this.showItems = this.isCategoryItemListVisible();
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.showItems,
+      } }, h("ix-menu-item", { class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { class: "category" }, this.label, h("ix-icon", { name: 'chevron-down-small', class: {
+        'category-chevron': true,
+        'category-chevron--open': this.showItems,
+      } }))), h("div", { ref: (ref) => (this.menuItemsContainer = ref), class: {
+        'menu-items': true,
+        'menu-items--expanded': this.showItems,
+      } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+        this.showDropdown = dropdownShown;
+      }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
+        mainAxis: 3,
+      }, onClick: (e) => {
+        if (e.target instanceof HTMLElement) {
+          if (e.target.tagName === 'IX-MENU-ITEM') {
+            this.showDropdown = false;
+          }
+        }
+      } }, h("ix-dropdown-item", { class: 'category-dropdown-header' }, h("ix-typography", { variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", null), h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return menuCategoryCss; }
+}, [1, "ix-menu-category", {
+    "label": [1],
+    "icon": [1],
+    "notifications": [2],
+    "menuExpand": [32],
+    "showItems": [32],
+    "showDropdown": [32],
+    "nestedItems": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-category", "ix-divider", "ix-dropdown", "ix-dropdown-item", "ix-menu-item", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-category":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuCategory);
+      }
+      break;
+    case "ix-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMenuCategory = MenuCategory;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuCategory, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-category.js.map

package/components/ix-menu-category.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-category.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,26CAA26C;;ACan8C,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,uBAAuB,GAAG,GAAG,CAAC;MAUvB,YAAY;;;;;;;;sBAkBD,KAAK;qBACN,KAAK;wBACF,KAAK;uBACmB,EAAE;;EAM1C,kBAAkB;IACxB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;GAC1D;EAEO,cAAc;IACpB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAC9B,CAAC;GAC9B;EAEO,oBAAoB;IAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAEpC,OAAO,KAAK,CAAC,MAAM,GAAG,uBAAuB,CAAC;GAC/C;EAEO,gBAAgB,CAAC,SAAkB;IACzC,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;SAAM;MACL,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;GACF;EAEO,cAAc;IACpB,MAAM,mBAAmB,GAAG,EAAE,CAAC;IAC/B,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,kBAAkB;MAChC,QAAQ,EAAE,uBAAuB;MACjC,MAAM,EAAE,YAAY;MACpB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,SAAS,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,GAAG,uBAAuB,EAAE,CAAC,CAAC;MACrE,QAAQ,EAAE;QACR,UAAU,CAAC;UACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;UACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;SAC3B,EAAE,uBAAuB,GAAG,mBAAmB,CAAC,CAAC;OACnD;KACF,CAAC,CAAC;GACJ;EAEO,aAAa;IACnB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,kBAAkB;MAChC,QAAQ,EAAE,uBAAuB;MACjC,MAAM,EAAE,YAAY;MACpB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,GAAG,uBAAuB,CAAC;MACrE,KAAK,EAAE;QACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;OAC3B;KACF,CAAC,CAAC;GACJ;EAEO,iBAAiB,CAAC,CAAc;IACtC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;MACtB,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,eAAe,EAAE,CAAC;MACrB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MACvC,OAAO;KACR;IAED,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;GACxC;EAEO,oBAAoB;IAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;GAC1C;EAEO,yBAAyB;IAC/B,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;GACzE;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,WAAW,EAAE;MAChB,MAAM,KAAK,CAAC,yDAAyD,CAAC,CAAC;KACxE;IACD,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC;IAE1B,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,qBAAqB,CAAC;MACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAC1B,cAAc,EACd,CAAC,EAAE,MAAM,EAAE,UAAU,EAAwB;MAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;MAE7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;KACnD,CACF,CAAC;GACH;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,SAAS;OACzB,IAED,oBACE,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAEzC,WAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,KAAK,EACX,eACE,IAAI,EAAE,oBAAoB,EAC1B,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI;QACxB,wBAAwB,EAAE,IAAI,CAAC,SAAS;OACzC,GACQ,CACP,CACO,EACf,WACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,kBAAkB,GAAG,GAAI,CAAC,EAC9C,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,sBAAsB,EAAE,IAAI,CAAC,SAAS;OACvC,IAEA,IAAI,CAAC,SAAS,GAAG,eAAa,GAAG,IAAI,CAClC,EACN,mBACE,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,EAAwB;QAC7D,IAAI,CAAC,YAAY,GAAG,aAAa,CAAC;OACnC,EACD,KAAK,EAAE,mBAAmB,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,SAAS,EAAC,aAAa,EACvB,MAAM,EAAE;QACN,QAAQ,EAAE,CAAC;OACZ,EACD,OAAO,EAAE,CAAC,CAAC;QACT,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,EAAE;UACnC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,cAAc,EAAE;YACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;WAC3B;SACF;OACF,IAED,wBAAkB,KAAK,EAAE,0BAA0B,IACjD,qBAAe,OAAO,EAAC,sBAAsB,EAAC,KAAK,EAAC,KAAK,IACtD,IAAI,CAAC,KAAK,CACG,CACC,EACnB,qBAAyB,EACzB,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","./src/components/menu-category/menu-category.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  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  .category {\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .category-chevron {\n    margin-left: auto;\n    margin-right: 0px;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .category-chevron--open {\n    transform: rotate(-180deg);\n  }\n\n  .menu-items {\n    overflow: hidden;\n    max-height: 0px;\n    transition: var(--theme-default-time) max-height ease-in-out;\n    padding: 0.25rem 0 0.25rem 1.625rem;\n  }\n\n  .menu-items--expanded {\n    max-height: 999999999px;\n  }\n\n  .category-dropdown {\n    ::slotted(ix-menu-item) {\n      --ix-menu-item-height: 2.5rem;\n    }\n  }\n\n  .category-dropdown-header {\n    pointer-events: none;\n    min-width: 256px;\n  }\n\n  ::slotted(ix-menu-item) {\n    --ix-menu-item-height: 2.5rem;\n  }\n}\n\n:host(.expanded) {\n  background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-menu-category',\n  styleUrl: 'menu-category.scss',\n  shadow: true,\n})\nexport class MenuCategory {\n  @Element() hostElement: HTMLIxMenuCategoryElement;\n\n  /**\n   * Display name of the category\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of the category\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification count on the category\n   */\n  @Prop() notifications: number;\n\n  @State() menuExpand = false;\n  @State() showItems = false;\n  @State() showDropdown = false;\n  @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n  private observer: MutationObserver;\n  private menuItemsContainer: HTMLDivElement;\n  private ixMenu: HTMLIxMenuElement;\n\n  private isNestedItemActive() {\n    return this.getNestedItems().some((item) => item.active);\n  }\n\n  private getNestedItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(':scope ix-menu-item')\n    ) as HTMLIxMenuItemElement[];\n  }\n\n  private getNestedItemsHeight() {\n    const items = this.getNestedItems();\n\n    return items.length * DefaultIxMenuItemHeight;\n  }\n\n  private onExpandCategory(showItems: boolean) {\n    if (showItems) {\n      this.animateFadeIn();\n    } else {\n      this.animateFadeOut();\n    }\n  }\n\n  private animateFadeOut() {\n    const slotHideThresholdMs = 25;\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [1, 0],\n      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n      complete: () => {\n        setTimeout(() => {\n          this.showItems = false;\n          this.showDropdown = false;\n        }, DefaultAnimationTimeout + slotHideThresholdMs);\n      },\n    });\n  }\n\n  private animateFadeIn() {\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [0, 1],\n      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n      begin: () => {\n        this.showItems = true;\n        this.showDropdown = false;\n      },\n    });\n  }\n\n  private onCategoryClicked(e?: MouseEvent) {\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n\n    this.showDropdown = !this.showDropdown;\n  }\n\n  private onNestedItemsChanged() {\n    this.nestedItems = this.getNestedItems();\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentDidLoad() {\n    const closestMenu = closestIxMenu(this.hostElement);\n    if (!closestMenu) {\n      throw Error('ix-menu-category can only be used as a child of ix-menu');\n    }\n    this.ixMenu = closestMenu;\n\n    this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n    this.observer.observe(this.hostElement, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => {\n      this.onNestedItemsChanged();\n    });\n\n    this.ixMenu.addEventListener(\n      'expandChange',\n      ({ detail: menuExpand }: CustomEvent<boolean>) => {\n        this.menuExpand = menuExpand;\n\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.showItems,\n        }}\n      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClicked(e)}\n        >\n          <div class=\"category\">\n            {this.label}\n            <ix-icon\n              name={'chevron-down-small'}\n              class={{\n                'category-chevron': true,\n                'category-chevron--open': this.showItems,\n              }}\n            ></ix-icon>\n          </div>\n        </ix-menu-item>\n        <div\n          ref={(ref) => (this.menuItemsContainer = ref!)}\n          class={{\n            'menu-items': true,\n            'menu-items--expanded': this.showItems,\n          }}\n        >\n          {this.showItems ? <slot></slot> : null}\n        </div>\n        <ix-dropdown\n          closeBehavior={'both'}\n          show={this.showDropdown}\n          onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n            this.showDropdown = dropdownShown;\n          }}\n          class={'category-dropdown'}\n          anchor={this.hostElement}\n          placement=\"right-start\"\n          offset={{\n            mainAxis: 3,\n          }}\n          onClick={(e) => {\n            if (e.target instanceof HTMLElement) {\n              if (e.target.tagName === 'IX-MENU-ITEM') {\n                this.showDropdown = false;\n              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography variant=\"default-title-single\" color=\"std\">\n              {this.label}\n            </ix-typography>\n          </ix-dropdown-item>\n          <ix-divider></ix-divider>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-menu-item.d.ts

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

package/components/ix-menu-item.js

@@ -0,0 +1,8 @@
+import { M as MenuItem, d as defineCustomElement$1 } from './menu-item.js';
+
+const IxMenuItem = MenuItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuItem, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-item.js.map

package/components/ix-menu-item.js.map

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

package/components/ix-menu-settings-item.d.ts

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

package/components/ix-menu-settings-item.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const menuSettingsItemCss = ":host{display:block}";
+
+const MenuSettingsItem = /*@__PURE__*/ proxyCustomElement(class MenuSettingsItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return menuSettingsItemCss; }
+}, [1, "ix-menu-settings-item", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-settings-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-settings-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuSettingsItem);
+      }
+      break;
+  } });
+}
+
+const IxMenuSettingsItem = MenuSettingsItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuSettingsItem, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-settings-item.js.map

package/components/ix-menu-settings-item.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-settings-item.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,sBAAsB;;MCgBrC,gBAAgB;;;;;;;EAM3B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-settings-item/menu-settings-item.css?tag=ix-menu-settings-item&encapsulation=shadow","./src/components/menu-settings-item/menu-settings-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  shadow: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-menu-settings.d.ts

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