@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627142646

package/components/ix-menu-avatar.js

@@ -0,0 +1,115 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { g as getSlottedElements } from './p-Bi1VyG64.js';
+import { H as iconLogOut } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$8 } from './p-Bzyt4nTL.js';
+import { d as defineCustomElement$7 } from './p-C6o-AByw.js';
+import { d as defineCustomElement$6 } from './p-Cut5OrRw.js';
+import { d as defineCustomElement$5 } from './p-TNoCM8Wi.js';
+import { d as defineCustomElement$4 } from './p-B1Gzt08S.js';
+import { d as defineCustomElement$3 } from './p-BygLxZIM.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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:var(--theme-default-time);border-radius:1.25rem}: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{color:var(--theme-nav-item-primary--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover,: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 H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.logoutClick = createEvent(this, "logoutClick", 7);
+        /**
+         * Use for translation
+         */
+        this.i18nLogout = 'Logout';
+        /**
+         *  Control the visibility of the logout button
+         */
+        this.showLogoutButton = true;
+        /**
+         * Control the visibility of the dropdown menu
+         */
+        this.showContextMenu = false;
+        this.avatarElementId = 'ix-menu-avatar-id';
+    }
+    onSlotChange() {
+        const slot = this.hostElement.shadowRoot.querySelector('slot');
+        if (!slot) {
+            return;
+        }
+        const elements = getSlottedElements(slot);
+        this.showContextMenu = elements.length !== 0;
+    }
+    render() {
+        return (h(Host, { key: 'd39f2185d9c75395af0b72507439a8e28a20fdc7', slot: "ix-menu-avatar" }, h("button", { key: 'f171e34fa3361cbeb55d4730de3536918cfccb31', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '6c9496150170f3474bf4dd545c834ecd3dd4e215', image: this.image, initials: this.initials }), h("div", { key: '6493bd94c069d676f41984274dec57b876117ae5', class: "avatar-name" }, h("span", { key: 'f72261b4c8a7752fbbe93df416b0b2f8c314c61b', class: "text-default-single", title: this.top }, this.top), h("span", { key: '909f8c9579d97d92f9be2b86e336f5ed8a2b3c78', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: 'c1a91f5f2703d85fb0fefef0ef97b17112113b55', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
+                mainAxis: 16,
+            } }, h("slot", { key: '284a7ea7a3431c1b2b83fc6dd13cbb51d517a45a', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+                this.logoutClick.emit(e);
+            } })) : null)));
+    }
+    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"],
+        "showLogoutButton": [4, "show-logout-button"],
+        "showContextMenu": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-menu-avatar", "ix-avatar", "ix-divider", "ix-dropdown", "ix-dropdown-item", "ix-menu-avatar-item", "ix-spinner", "ix-typography"];
+    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$8();
+            }
+            break;
+        case "ix-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-menu-avatar-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxMenuAvatar = MenuAvatar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAvatar, defineCustomElement };
+//# sourceMappingURL=ix-menu-avatar.js.map
+
+//# 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,i7DAAi7D;;MC0B17D,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AA4BE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAErC;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,IAAI;AAExC;;AAEG;AACM,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAOjC,QAAA,IAAe,CAAA,eAAA,GAAG,mBAAmB;AAqD9C;IAnDC,YAAY,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,EAAA,EAEX,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAc,CAAA,EAEnE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAA,EAC9C,IAAI,CAAC,GAAG,CACJ,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EACvD,MAAM,EAAE;AACN,gBAAA,QAAQ,EAAE,EAAE;aACb,EAAA,EAED,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAS,CAAA,EACrD,IAAI,CAAC,gBAAgB,IACpB,CAAA,CAAA,qBAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;aACzB,EAAA,CACoB,IACrB,IAAI,CACI,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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: var(--theme-default-time);\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        color: var(--theme-nav-item-primary--color);\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  State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\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  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   */\n  @Prop() initials?: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout: string = 'Logout';\n\n  /**\n   *  Control the visibility of the logout button\n   */\n  @Prop() showLogoutButton: boolean = true;\n\n  /**\n   * Control the visibility of the dropdown menu\n   */\n  @State() showContextMenu: boolean = false;\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick!: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n  }\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          hidden={!this.showContextMenu && !this.showLogoutButton}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot onSlotchange={() => this.onSlotChange()}></slot>\n          {this.showLogoutButton ? (\n            <ix-menu-avatar-item\n              label={this.i18nLogout}\n              icon={iconLogOut}\n              onClick={(e) => {\n                this.logoutClick.emit(e);\n              }}\n            ></ix-menu-avatar-item>\n          ) : null}\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,284 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { a as anime } from './p-Ou74PMQs.js';
+import { c as closestIxMenu } from './p--2LOMK-5.js';
+import { c as createMutationObserver } from './p-CX81WQtk.js';
+import { v as iconChevronDownSmall } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$7 } from './p-C6o-AByw.js';
+import { d as defineCustomElement$6 } from './p-Cut5OrRw.js';
+import { d as defineCustomElement$5 } from './p-TNoCM8Wi.js';
+import { d as defineCustomElement$4 } from './p-DWO4uklL.js';
+import { d as defineCustomElement$3 } from './p-DyHdZRT0.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function createEnterLeaveDebounce(enterCallback, leaveCallback, { debounceTimeEnter, debounceTimeLeave, } = {
+    debounceTimeEnter: 0,
+    debounceTimeLeave: 500,
+}) {
+    let enterTimeout;
+    let leaveTimeout;
+    return {
+        onEnter: () => {
+            clearTimeout(leaveTimeout);
+            enterTimeout = setTimeout(() => {
+                enterCallback();
+            }, debounceTimeEnter);
+        },
+        onLeave: () => {
+            clearTimeout(enterTimeout);
+            leaveTimeout = setTimeout(() => {
+                leaveCallback();
+            }, debounceTimeLeave);
+        },
+    };
+}
+
+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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;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 H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeOtherCategories = createEvent(this, "closeOtherCategories", 7);
+        this.menuExpand = false;
+        this.showItems = false;
+        this.showDropdown = false;
+        this.nestedItems = [];
+        this.enterLeaveDebounce = createEnterLeaveDebounce(() => {
+            this.onPointerEnter();
+        }, () => {
+            this.onPointerLeave();
+        });
+    }
+    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;
+            },
+        });
+    }
+    onPointerEnter() {
+        var _a;
+        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+            return;
+        }
+        this.closeOtherCategories.emit();
+        this.showDropdown = true;
+    }
+    onPointerLeave() {
+        this.showDropdown = false;
+    }
+    onCategoryClick(e) {
+        var _a;
+        e.stopPropagation();
+        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+            this.onExpandCategory(!this.showItems);
+            return;
+        }
+    }
+    onNestedItemsChanged(mutations) {
+        const oldNestedItemsLength = this.nestedItems.length;
+        this.nestedItems = this.getNestedItems();
+        if (this.showItems &&
+            this.menuItemsContainer &&
+            oldNestedItemsLength !== this.nestedItems.length) {
+            this.menuItemsContainer.style.maxHeight = `${this.getNestedItemsHeight() + DefaultIxMenuItemHeight}px`;
+        }
+        if (!this.menuExpand || this.showItems || !mutations) {
+            return;
+        }
+        for (const mutation of mutations !== null && mutations !== void 0 ? mutations : []) {
+            if (mutation.attributeName === 'class' &&
+                mutation.target instanceof H &&
+                mutation.target.classList.contains('active')) {
+                this.showItems = true;
+                this.onExpandCategory(true);
+                return;
+            }
+        }
+    }
+    isCategoryItemListVisible() {
+        return this.menuExpand && (this.showItems || this.isNestedItemActive());
+    }
+    componentWillLoad() {
+        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.menuExpand = this.ixMenu.expand;
+        this.showItems = this.isCategoryItemListVisible();
+    }
+    componentDidLoad() {
+        var _a;
+        this.observer = createMutationObserver((mutations) => this.onNestedItemsChanged(mutations));
+        this.observer.observe(this.hostElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        requestAnimationFrame(() => {
+            this.onNestedItemsChanged();
+        });
+        (_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.addEventListener('expandChange', ({ detail: menuExpand }) => {
+            this.menuExpand = menuExpand;
+            if (!menuExpand) {
+                this.clearMenuItemStyles();
+            }
+            this.showItems = this.isCategoryItemListVisible();
+        });
+    }
+    clearMenuItemStyles() {
+        var _a, _b;
+        (_a = this.menuItemsContainer) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
+        (_b = this.menuItemsContainer) === null || _b === void 0 ? void 0 : _b.style.removeProperty('opacity');
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    render() {
+        return (h(Host, { key: '23800b207393349566f65f5cbce0b9af221d1f3e', class: {
+                expanded: this.showItems,
+            }, onPointerEnter: () => {
+                this.enterLeaveDebounce.onEnter();
+            }, onPointerLeave: (event) => {
+                if (event.pointerType === 'touch') {
+                    return;
+                }
+                this.enterLeaveDebounce.onLeave();
+            } }, h("ix-menu-item", { key: 'a5d86098619541be129617248e9977529922bab3', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '633be5538fed1c241c3e8b2558773638b9a046be', class: "category" }, h("div", { key: '945afa3a92f52bcc95c8b511060c801ac50c5afa', class: "category-text" }, this.label), h("ix-icon", { key: 'de6072dc0365ddf33fdd97bbbe75c25e902edc9e', name: iconChevronDownSmall, class: {
+                'category-chevron': true,
+                'category-chevron--open': this.showItems,
+            } }))), h("div", { key: '74350362820bd890066c2d177ed320dce040a4f6', ref: (ref) => (this.menuItemsContainer = ref), class: {
+                'menu-items': true,
+                'menu-items--expanded': this.showItems,
+                'menu-items--collapsed': !this.showItems,
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'f4d3ddca406e418f7945286f30c243fce43c7e3b', 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 H) {
+                    if (e.target.tagName === 'IX-MENU-ITEM') {
+                        this.showDropdown = false;
+                    }
+                    else {
+                        e.preventDefault();
+                    }
+                }
+            } }, h("ix-dropdown-item", { key: '0388374194fcf5804e5b43d044457aa92dd39432', class: 'category-dropdown-header' }, h("ix-typography", { key: '0176e5881a7c477c445934d211f34753cac846ba', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'f9bc3ae191277630951252b32ded88d0968211d8' }), h("slot", { key: '86cb3b4925accbe6be42eb4c394701df3f9fea7e' }))));
+    }
+    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]
+    }, [[8, "closeOtherCategories", "onPointerLeave"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-menu-category", "ix-divider", "ix-dropdown", "ix-dropdown-item", "ix-menu-item", "ix-tooltip", "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$7();
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-tooltip":
+            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
+
+//# sourceMappingURL=ix-menu-category.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-menu-category.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 */\nexport function createEnterLeaveDebounce(\n  enterCallback: Function,\n  leaveCallback: Function,\n  {\n    debounceTimeEnter,\n    debounceTimeLeave,\n  }: {\n    debounceTimeEnter: number;\n    debounceTimeLeave: number;\n  } = {\n    debounceTimeEnter: 0,\n    debounceTimeLeave: 500,\n  }\n) {\n  let enterTimeout: NodeJS.Timeout;\n  let leaveTimeout: NodeJS.Timeout;\n\n  return {\n    onEnter: () => {\n      clearTimeout(leaveTimeout);\n      enterTimeout = setTimeout(() => {\n        enterCallback();\n      }, debounceTimeEnter);\n    },\n    onLeave: () => {\n      clearTimeout(enterTimeout);\n      leaveTimeout = setTimeout(() => {\n        leaveCallback();\n      }, debounceTimeLeave);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\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-text {\n    width: 100%;\n    padding-right: 0.25rem;\n    @include ellipsis;\n  }\n\n  .category-chevron {\n    margin-left: auto;\n    margin-right: 0;\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: 0;\n    transition: var(--theme-default-time) max-height ease-in-out;\n  }\n\n  .menu-items--expanded {\n    max-height: 999999999px;\n    padding: 0.25rem 0 0.25rem 1.625rem;\n  }\n\n  .menu-items--collapsed {\n    display: none;\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    padding-left: 0.125rem;\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 {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\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  /** @internal */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Event({ bubbles: true, cancelable: true })\n  closeOtherCategories!: EventEmitter;\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 enterLeaveDebounce = createEnterLeaveDebounce(\n    () => {\n      this.onPointerEnter();\n    },\n    () => {\n      this.onPointerLeave();\n    }\n  );\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 onPointerEnter() {\n    if (this.ixMenu?.expand) {\n      return;\n    }\n    this.closeOtherCategories.emit();\n    this.showDropdown = true;\n  }\n\n  @Listen('closeOtherCategories', { target: 'window' })\n  private onPointerLeave() {\n    this.showDropdown = false;\n  }\n\n  private onCategoryClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (this.ixMenu?.expand) {\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n  }\n\n  private onNestedItemsChanged(mutations?: MutationRecord[]) {\n    const oldNestedItemsLength = this.nestedItems.length;\n    this.nestedItems = this.getNestedItems();\n\n    if (\n      this.showItems &&\n      this.menuItemsContainer &&\n      oldNestedItemsLength !== this.nestedItems.length\n    ) {\n      this.menuItemsContainer.style.maxHeight = `${\n        this.getNestedItemsHeight() + DefaultIxMenuItemHeight\n      }px`;\n    }\n\n    if (!this.menuExpand || this.showItems || !mutations) {\n      return;\n    }\n\n    for (const mutation of mutations ?? []) {\n      if (\n        mutation.attributeName === 'class' &&\n        mutation.target instanceof HTMLElement &&\n        mutation.target.classList.contains('active')\n      ) {\n        this.showItems = true;\n        this.onExpandCategory(true);\n        return;\n      }\n    }\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentWillLoad() {\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.menuExpand = this.ixMenu.expand;\n    this.showItems = this.isCategoryItemListVisible();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver((mutations: MutationRecord[]) =>\n      this.onNestedItemsChanged(mutations)\n    );\n\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        if (!menuExpand) {\n          this.clearMenuItemStyles();\n        }\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\n  }\n\n  clearMenuItemStyles() {\n    this.menuItemsContainer?.style.removeProperty('max-height');\n    this.menuItemsContainer?.style.removeProperty('opacity');\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        onPointerEnter={() => {\n          this.enterLeaveDebounce.onEnter();\n        }}\n        onPointerLeave={(event: PointerEvent) => {\n          if (event.pointerType === 'touch') {\n            return;\n          }\n          this.enterLeaveDebounce.onLeave();\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.onCategoryClick(e)}\n          onFocus={() => this.onPointerEnter()}\n          isCategory\n        >\n          <div class=\"category\">\n            <div class=\"category-text\">{this.label}</div>\n            <ix-icon\n              name={iconChevronDownSmall}\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            'menu-items--collapsed': !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              } else {\n                e.preventDefault();\n              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography format=\"label\" bold textColor=\"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-expand-icon.d.ts

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

package/components/ix-menu-expand-icon.js

@@ -0,0 +1,9 @@
+import { M as MenuExpandIcon, d as defineCustomElement$1 } from './p-BNu7ac9R.js';
+
+const IxMenuExpandIcon = MenuExpandIcon;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuExpandIcon, defineCustomElement };
+//# sourceMappingURL=ix-menu-expand-icon.js.map
+
+//# sourceMappingURL=ix-menu-expand-icon.js.map

package/components/ix-menu-expand-icon.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-expand-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"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,9 @@
+import { M as MenuItem, d as defineCustomElement$1 } from './p-DWO4uklL.js';
+
+const IxMenuItem = MenuItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuItem, defineCustomElement };
+//# sourceMappingURL=ix-menu-item.js.map
+
+//# 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,51 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+
+const menuSettingsItemCss = ":host{display:block}";
+
+const MenuSettingsItem = /*@__PURE__*/ proxyCustomElement(class MenuSettingsItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.labelChange = createEvent(this, "labelChange", 7);
+    }
+    watchLabel(newValue, oldValue) {
+        this.labelChange.emit({
+            name: 'ix-menu-settings-item',
+            oldLabel: oldValue,
+            newLabel: newValue,
+        });
+    }
+    render() {
+        return (h(Host, { key: '2c46c471680f6a653d64858cec0f991d9a557c02' }, h("slot", { key: 'e840ca9e900cd45d31cbf41fcafa3e1feb4757a7' })));
+    }
+    static get watchers() { return {
+        "label": ["watchLabel"]
+    }; }
+    static get style() { return menuSettingsItemCss; }
+}, [1, "ix-menu-settings-item", {
+        "label": [513]
+    }, undefined, {
+        "label": ["watchLabel"]
+    }]);
+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
+
+//# 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;;MCyBrC,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;IAY3B,UAAU,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC3C,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AACpB,YAAA,IAAI,EAAE,uBAAuB;AAC7B,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { CustomLabelChangeEvent } from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  shadow: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Settings Item label\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * Label changed\n   */\n  @Event() labelChange!: EventEmitter<CustomLabelChangeEvent>;\n\n  @Watch('label')\n  watchLabel(newValue: string, oldValue: string) {\n    this.labelChange.emit({\n      name: 'ix-menu-settings-item',\n      oldLabel: oldValue,\n      newLabel: newValue,\n    });\n  }\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;

package/components/ix-menu-settings.js

@@ -0,0 +1,9 @@
+import { a as MenuSettings, d as defineCustomElement$1 } from './p-CKkTXQiw.js';
+
+const IxMenuSettings = MenuSettings;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuSettings, defineCustomElement };
+//# sourceMappingURL=ix-menu-settings.js.map
+
+//# sourceMappingURL=ix-menu-settings.js.map

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

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

package/components/ix-menu.d.ts

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