@siemens/ix 1.0.0-beta.2

package/dist/components/ix-menu-about-item.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const menuAboutItemCss = ".sc-ix-menu-about-item-h{display:block}";
+
+const MenuAboutItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return menuAboutItemCss; }
+}, [6, "ix-menu-about-item", {
+    "label": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-about-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-about-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAboutItem);
+      }
+      break;
+  } });
+}
+
+const IxMenuAboutItem = MenuAboutItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAboutItem, defineCustomElement };

package/dist/components/ix-menu-about-news.d.ts

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

package/dist/components/ix-menu-about-news.js

@@ -0,0 +1,78 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+
+const menuAboutNewsCss = ".sc-ix-menu-about-news-h{display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:4rem;z-index:10000;transition:left var(--animate-duration);margin-left:0.5rem !important;box-shadow:var(--theme-box-shadow-level-2)}.expanded.sc-ix-menu-about-news-h{left:calc(4rem + 12rem)}.show.sc-ix-menu-about-news-h{display:none}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news{position:absolute;top:0.0625rem;left:1rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news{position:absolute;height:3.625rem;width:3rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news polygon.sc-ix-menu-about-news{fill:var(--theme-color-primary)}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news ix-icon.sc-ix-menu-about-news{margin:0.5rem;position:absolute;z-index:1}.sc-ix-menu-about-news-h .cui-popover-news-header.sc-ix-menu-about-news{margin-bottom:2rem;margin-left:4rem;margin-top:-0.25rem}.sc-ix-menu-about-news-h .popover-body.sc-ix-menu-about-news{color:var(--theme-color-std-text)}.sc-ix-menu-about-news-h .cui-popover-news-footer.sc-ix-menu-about-news{display:flex;justify-content:flex-end;margin-top:1rem}.sc-ix-menu-about-news-h #arrow.sc-ix-menu-about-news{bottom:14px;position:relative;left:-10px}.sc-ix-menu-about-news-h ix-icon-button.sc-ix-menu-about-news{top:0.5rem;right:0.5rem;position:absolute}.sc-ix-menu-about-news-h svg#arrow.sc-ix-menu-about-news{position:absolute;left:-0.5rem;bottom:0.4rem}.sc-ix-menu-about-news-h svg#arrow.sc-ix-menu-about-news path.sc-ix-menu-about-news{fill:var(--theme-color-1);stroke:var(--theme-color-weak-bdr-1)}";
+
+const MenuAboutNews = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.showMore = createEvent(this, "showMore", 7);
+    this.closePopover = createEvent(this, "closePopover", 7);
+    /**
+     * Show about news
+     */
+    this.show = false;
+    /**
+     *
+     */
+    this.i18nShowMore = 'Show more';
+    /**
+     * Bottom offset
+     */
+    this.offsetBottom = 0;
+    /**
+     * Internal
+     */
+    this.expanded = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.expanded,
+        show: !this.show,
+      } }, h("div", { class: "banner-container" }, h("ix-icon", { color: "color-inv-contrast-text", name: "shout", size: "32" }), h("svg", { viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { class: "cui-popover-news-header" }, h("span", { class: "text-l-title" }, this.label)), h("ix-icon-button", { size: "24", icon: "close-small", ghost: true, onClick: () => {
+        this.show = false;
+        this.closePopover.emit();
+      } }), h("slot", null), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("button", { class: "btn btn-primary", onClick: (e) => {
+        this.show = false;
+        this.showMore.emit(e);
+      } }, this.i18nShowMore))) : null, h("svg", { id: "arrow", xmlns: "http://www.w3.org/2000/svg", width: "8", height: "12", viewBox: "0 0 8 12" }, h("path", { d: "M8 0 L0 6 L8 12" }))));
+  }
+  static get style() { return menuAboutNewsCss; }
+}, [6, "ix-menu-about-news", {
+    "show": [1540],
+    "label": [1],
+    "i18nShowMore": [1, "i-1-8n-show-more"],
+    "aboutItemLabel": [1, "about-item-label"],
+    "offsetBottom": [2, "offset-bottom"],
+    "expanded": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-about-news", "ix-icon", "ix-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-about-news":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAboutNews);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMenuAboutNews = MenuAboutNews;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAboutNews, defineCustomElement };

package/dist/components/ix-menu-about.d.ts

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

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

@@ -0,0 +1,6 @@
+import { M as MenuAbout, d as defineCustomElement$1 } from './menu-about.js';
+
+const IxMenuAbout = MenuAbout;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAbout, defineCustomElement };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../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/dist/components/ix-menu-avatar-item.js

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

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../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/dist/components/ix-menu-avatar.js

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { P as Popover } from './popover.util.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './dropdown-item.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './menu-avatar-item.js';
+
+const menuAvatarCss = ".sc-ix-menu-avatar-h{display:block;position:relative;margin-bottom:0.5rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar{display:flex;align-items:center;height:2.5rem;max-height:2.5rem;padding-left:0.25rem;margin-left:0.75rem;margin-right:0.75rem;transition:0.15s;border-radius:1.25rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>svg.sc-ix-menu-avatar{height:2rem;width:2rem;min-height:2rem;min-width:2rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-background.sc-ix-menu-avatar{fill:var(--theme-avatar--background)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-person.sc-ix-menu-avatar{fill:var(--theme-avatar--person)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar .text-default-single.sc-ix-menu-avatar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}";
+
+const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.logoutClick = createEvent(this, "logoutClick", 7);
+    /**
+     *
+     */
+    this.i18nLogout = 'Logout';
+  }
+  toggleMenu() {
+    this.outsideListener.open();
+    this.displayMenu = !this.displayMenu;
+  }
+  componentDidLoad() {
+    this.outsideListener = new Popover(this.hostElement, this.hostElement.querySelector('ix-dropdown'), () => {
+      this.displayMenu = false;
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.outsideListener) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (h(Host, null, h("li", { class: "nav-item top-item avatar no-hover", title: this.top }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n                    16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n                  6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n                  9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n                  6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))), 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", { show: this.displayMenu }, 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; }
+}, [6, "ix-menu-avatar", {
+    "top": [1],
+    "bottom": [1],
+    "i18nLogout": [1, "i-1-8n-logout"],
+    "displayMenu": [32]
+  }, [[1, "click", "toggleMenu"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-avatar", "ix-dropdown", "ix-dropdown-item", "ix-icon", "ix-menu-avatar-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAvatar);
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon":
+      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 };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../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/dist/components/ix-menu-item.js

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

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../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/dist/components/ix-menu-settings-item.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const menuSettingsItemCss = ".sc-ix-menu-settings-item-h{display:block}";
+
+const MenuSettingsItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return menuSettingsItemCss; }
+}, [6, "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 };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../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;

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

@@ -0,0 +1,107 @@
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './tab-item.js';
+import { d as defineCustomElement$2 } from './tabs.js';
+
+const menuSettingsCss = ".text-xs.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{-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.sc-ix-menu-settings{color:var(--theme-color-primary)}.sc-ix-menu-settings-h{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}.sc-ix-menu-settings-h .settings-header.sc-ix-menu-settings{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}.sc-ix-menu-settings-h .settings-header.sc-ix-menu-settings h2.sc-ix-menu-settings{color:var(--theme-nav-overlay-header--color);margin-bottom:0}.sc-ix-menu-settings-h .settings-tabs.sc-ix-menu-settings{margin-bottom:1.5rem}";
+
+const MenuAbout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.close = createEvent(this, "close", 7);
+    /**
+     * Label
+     */
+    this.label = 'Settings';
+    /**
+     * Internal
+     */
+    this.show = false;
+  }
+  get settingsItems() {
+    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));
+  }
+  setTab(label) {
+    this.activeTabLabel = label;
+    this.settingsItems.forEach((i) => {
+      i.style.display = 'none';
+      if (i.label === this.activeTabLabel) {
+        i.style.display = 'block';
+      }
+    });
+  }
+  componentWillLoad() {
+    if (this.settingsItems.length) {
+      this.setTab(this.activeTabLabel || this.settingsItems[0].label);
+    }
+  }
+  componentDidLoad() {
+    forceUpdate(this.el);
+  }
+  watchActiveTabLabel(value) {
+    this.setTab(value);
+  }
+  getTabItems() {
+    return this.settingsItems.map(({ label }) => {
+      return (h("ix-tab-item", { class: {
+          active: label === this.activeTabLabel,
+        }, onClick: () => this.setTab(label) }, label));
+    });
+  }
+  render() {
+    return (h(Host, { class: {
+        animate__animated: true,
+        animate__fadeInLeft: this.show,
+        animate__fadeOutLeft: !this.show,
+      } }, h("div", { class: "settings-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })), h("ix-tabs", null, this.getTabItems()), h("slot", null)));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "activeTabLabel": ["watchActiveTabLabel"]
+  }; }
+  static get style() { return menuSettingsCss; }
+}, [6, "ix-menu-settings", {
+    "activeTabLabel": [1025, "active-tab-label"],
+    "label": [1],
+    "show": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-settings", "ix-icon", "ix-icon-button", "ix-tab-item", "ix-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-settings":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAbout);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-icon-button":
+      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 IxMenuSettings = MenuAbout;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuSettings, defineCustomElement };

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

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