@siemens/ix 0.0.0-20240419081748

package/dist/cjs/ix-menu-category.cjs.entry.js

@@ -0,0 +1,205 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+const anime_es = require('./anime.es-e2814360.js');
+const context = require('./context-98f4a0b3.js');
+const mutationObserver = require('./mutation-observer-babb20a5.js');
+require('./typed-event-8032c0c0.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}: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 IxMenuCategoryStyle0 = menuCategoryCss;
+
+const DefaultIxMenuItemHeight = 40;
+const DefaultAnimationTimeout = 150;
+const MenuCategory = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeOtherCategories = index.createEvent(this, "closeOtherCategories", 7);
+        this.enterLeaveDebounce = createEnterLeaveDebounce(() => {
+            this.onPointerEnter();
+        }, () => {
+            this.onPointerLeave();
+        });
+        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_es.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_es.anime({
+            targets: this.menuItemsContainer,
+            duration: DefaultAnimationTimeout,
+            easing: 'easeInSine',
+            opacity: [0, 1],
+            maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
+            begin: () => {
+                this.showItems = true;
+                this.showDropdown = false;
+            },
+        });
+    }
+    onPointerEnter() {
+        if (this.ixMenu.expand) {
+            return;
+        }
+        this.closeOtherCategories.emit();
+        this.showDropdown = true;
+    }
+    onPointerLeave() {
+        this.showDropdown = false;
+    }
+    onCategoryClick(e) {
+        e.stopPropagation();
+        if (this.ixMenu.expand) {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            this.onExpandCategory(!this.showItems);
+            return;
+        }
+    }
+    onNestedItemsChanged() {
+        this.nestedItems = this.getNestedItems();
+    }
+    isCategoryItemListVisible() {
+        return this.menuExpand && (this.showItems || this.isNestedItemActive());
+    }
+    componentWillLoad() {
+        const closestMenu = context.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() {
+        this.observer = mutationObserver.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;
+            if (!menuExpand) {
+                this.clearMenuItemStyles();
+            }
+            this.showItems = this.isCategoryItemListVisible();
+        });
+    }
+    clearMenuItemStyles() {
+        this.menuItemsContainer.style.removeProperty('max-height');
+        this.menuItemsContainer.style.removeProperty('opacity');
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '17d25dacba5afe08d75eb84c1063856e79efa255', class: {
+                expanded: this.showItems,
+            }, onPointerEnter: () => {
+                this.enterLeaveDebounce.onEnter();
+            }, onPointerLeave: (event) => {
+                if (event.pointerType === 'touch') {
+                    return;
+                }
+                this.enterLeaveDebounce.onLeave();
+            } }, index.h("ix-menu-item", { key: '3d7cc544297fbf21c5948bd390f9a65fa3e9892f', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, index.h("div", { key: '44cf05761426822b2a0d5ad7b43bc0ac84b66ef2', class: "category" }, index.h("div", { key: '7d0c2c9efff3d54e3ed5eb0f19294703f7cf853f', class: "category-text" }, this.label), index.h("ix-icon", { key: '1eeb7a9da2b3b2cbf9f2b37f1e7d42162b7f65e5', name: 'chevron-down-small', class: {
+                'category-chevron': true,
+                'category-chevron--open': this.showItems,
+            } }))), index.h("div", { key: '783ec3ecb6153f12b43a2f3733b672d9af6390df', ref: (ref) => (this.menuItemsContainer = ref), class: {
+                'menu-items': true,
+                'menu-items--expanded': this.showItems,
+                'menu-items--collapsed': !this.showItems,
+            } }, this.showItems ? index.h("slot", null) : null), index.h("ix-dropdown", { key: '8f7c5bf15a51ca3a57a50e259caa691ffce7a6dd', 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;
+                    }
+                }
+            } }, index.h("ix-dropdown-item", { key: 'e5f9d6b9ea910dcb852da7bdffec8117bd0fdf6e', class: 'category-dropdown-header' }, index.h("ix-typography", { key: '5e8ce8f52f2c089ffabd36e3345c46b83b07a554', variant: "default-title-single", color: "std" }, this.label)), index.h("ix-divider", { key: 'ebadc6189f93ab6e25262b324259993eaa557400' }), index.h("slot", { key: 'f9d0e1a321e824390671e380094c78c22f67d428' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+MenuCategory.style = IxMenuCategoryStyle0;
+
+exports.ix_menu_category = MenuCategory;
+
+//# sourceMappingURL=ix-menu-category.cjs.entry.js.map

package/dist/cjs/ix-menu-category.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-category.entry.cjs.js","mappings":"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","names":["anime","closestIxMenu","createMutationObserver","h","Host"],"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';\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  /** @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      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\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  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(() => 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        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={'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            '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              }\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/dist/cjs/ix-menu-expand-icon.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+const baseButton = require('./base-button-2f74b19d.js');
+const a11y = require('./a11y-d3ce56d1.js');
+
+const menuExpandIconCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:var(--theme-default-time);padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}: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 svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in var(--theme-default-time), transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--hover)}.menu-expand-button{width:2rem;padding:0;cursor:pointer}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}";
+const IxMenuExpandIconStyle0 = menuExpandIconCss;
+
+const MenuExpandIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ixAriaLabel = 'Expand';
+        this.expanded = false;
+        this.breakpoint = undefined;
+        this.pinned = false;
+    }
+    getSmallScreenIcon() {
+        return (index.h("button", { class: Object.assign(Object.assign({}, baseButton.getButtonClasses('secondary', false, true, true, false, false, false)), { 'menu-expand-button': true }), type: "button", "aria-label": this.ixAriaLabel ? this.ixAriaLabel : null, "aria-pressed": a11y.a11yBoolean(this.expanded) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), index.h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), index.h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
+    }
+    getLargeScreenIcon() {
+        return (index.h("ix-icon-button", { icon: `double-chevron-${this.expanded ? 'left' : 'right'}`, ghost: true }));
+    }
+    getMenuIcon() {
+        if (this.pinned) {
+            return this.getLargeScreenIcon();
+        }
+        if (this.breakpoint === 'md') {
+            return this.getLargeScreenIcon();
+        }
+        if (this.breakpoint === 'lg') {
+            return this.getLargeScreenIcon();
+        }
+        return this.getSmallScreenIcon();
+    }
+    render() {
+        return (index.h(index.Host, { key: '36ee1cac55573a7413f6fd89635987a1a38d3a1d', class: {
+                expanded: this.expanded,
+            } }, this.getMenuIcon()));
+    }
+};
+MenuExpandIcon.style = IxMenuExpandIconStyle0;
+
+exports.ix_menu_expand_icon = MenuExpandIcon;
+
+//# sourceMappingURL=ix-menu-expand-icon.cjs.entry.js.map

package/dist/cjs/ix-menu-expand-icon.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-expand-icon.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,ylcAAylc,CAAC;AACpnc,+BAAe,iBAAiB;;MC6BnB,cAAc;;;2BAEK,QAAQ;wBAGF,KAAK;;sBAMxB,KAAK;;IAEtB,kBAAkB;QAChB,QACEA,oBACE,KAAK,kCACAC,2BAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,kBACxCC,gBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAExCF,iBACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEXA,kBAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ,EACnEA,kBAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ,EACpEA,kBAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ,CAChE,CACC,EACT;KACH;IAED,kBAAkB;QAChB,QACEA,4BACE,IAAI,EAAE,kBAAkB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAE,EAC1D,KAAK,SACW,EAClB;KACH;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAClC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;YAC5B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAClC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;YAC5B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAClC;QAED,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAClC;IAED,MAAM;QACJ,QACEA,QAACG,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEA,IAAI,CAAC,WAAW,EAAE,CACd,EACP;KACH;;;;;;","names":["h","getButtonClasses","a11yBoolean","Host"],"sources":["src/components/menu/menu-expand-icon.scss?tag=ix-menu-expand-icon&encapsulation=shadow","src/components/menu/menu-expand-icon.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$focus-bdr-width: 0.0625rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 2rem;\n  width: 2rem;\n  border-radius: var(--theme-btn--border-radius);\n  pointer-events: all;\n\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .line {\n    fill: var(--theme-menu-btn--color);\n    opacity: 1;\n    x: 2px;\n    transition: x 0.075s ease-in var(--theme-default-time), transform 0.075s ease-in-out 0.075s,\n      y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n    transform-origin: center;\n  }\n}\n\n@include host-hover {\n  .menu-expand-button {\n    background-color: var(--theme-menu-btn--background--hover);\n  }\n}\n\n.menu-expand-button {\n  width: 2rem;\n  padding: 0;\n  cursor: pointer;\n}\n\n@include host-active {\n  .menu-expand-button {\n    background-color: var(--theme-menu-btn--background--active);\n  }\n}\n\n:host(.expanded) {\n  svg .line-1 {\n    opacity: 1;\n    transform: rotate(-45deg);\n    y: 11px;\n  }\n\n  svg .line-2 {\n    opacity: 0;\n    x: 9;\n  }\n\n  svg .line-3 {\n    opacity: 1;\n    transform: rotate(45deg);\n    y: 11px;\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 * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport { Breakpoint } from '../utils/breakpoints';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-menu-expand-icon',\n  styleUrl: './menu-expand-icon.scss',\n  shadow: true,\n})\nexport class MenuExpandIcon {\n  /** Accessibility label for the menu expand icon (MANDATORY) */\n  @Prop() ixAriaLabel: string = 'Expand';\n\n  /** Whether the menu expand icon displays the expanded state or not */\n  @Prop({ reflect: true }) expanded = false;\n\n  /** Controls which icon is displayed */\n  @Prop({ reflect: true }) breakpoint: Breakpoint;\n\n  /** Display as pinned */\n  @Prop() pinned = false;\n\n  getSmallScreenIcon() {\n    return (\n      <button\n        class={{\n          ...getButtonClasses(\n            'secondary',\n            false,\n            true,\n            true,\n            false,\n            false,\n            false\n          ),\n          'menu-expand-button': true,\n        }}\n        type=\"button\"\n        aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n        aria-pressed={a11yBoolean(this.expanded)}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n        >\n          <rect class=\"line line-1\" x=\"2\" y=\"5\" width=\"20\" height=\"2\"></rect>\n          <rect class=\"line line-2\" x=\"2\" y=\"11\" width=\"13\" height=\"2\"></rect>\n          <rect class=\"line line-3\" x=\"2\" y=\"17\" width=\"20\" height=\"2\"></rect>\n        </svg>\n      </button>\n    );\n  }\n\n  getLargeScreenIcon() {\n    return (\n      <ix-icon-button\n        icon={`double-chevron-${this.expanded ? 'left' : 'right'}`}\n        ghost\n      ></ix-icon-button>\n    );\n  }\n\n  getMenuIcon() {\n    if (this.pinned) {\n      return this.getLargeScreenIcon();\n    }\n\n    if (this.breakpoint === 'md') {\n      return this.getLargeScreenIcon();\n    }\n\n    if (this.breakpoint === 'lg') {\n      return this.getLargeScreenIcon();\n    }\n\n    return this.getSmallScreenIcon();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n        }}\n      >\n        {this.getMenuIcon()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-menu-item.cjs.entry.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+const mutationObserver = require('./mutation-observer-babb20a5.js');
+const makeRef = require('./make-ref-c25629b7.js');
+const menuService = require('./menu-service-9936f670.js');
+require('./typed-event-8032c0c0.js');
+
+const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{all:unset;box-sizing:border-box;display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);width:100%;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .tab-icon{color:var(--theme-nav-item-primary-icon--color);position:relative;pointer-events:none}:host .tab:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:-1px}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.5rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1rem 0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.tab-icon{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.tab-nested) .tab{flex-direction:row;padding-left:1.375rem}:host(.tab-nested) .tab .notification{position:relative;top:0;left:0;padding-left:0.5rem}:host(.tab-nested) .tab .tab-icon{padding-left:0.5rem;padding-right:0.5rem}:host(.tab-nested) .tab .tab-text{margin-left:0.5rem}:host(.tab-nested) .tab::before{display:none}";
+const IxMenuItemStyle0 = menuItemCss;
+
+const MenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonRef = makeRef.makeRef();
+        this.isHostedInsideCategory = false;
+        this.observer = mutationObserver.createMutationObserver(() => {
+            var _a;
+            this.tooltip = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.innerText;
+        });
+        this.label = undefined;
+        this.home = false;
+        this.bottom = false;
+        this.tabIcon = undefined;
+        this.icon = undefined;
+        this.notifications = undefined;
+        this.active = undefined;
+        this.disabled = undefined;
+        this.isCategory = undefined;
+        this.tooltip = undefined;
+        this.menuExpanded = undefined;
+    }
+    componentWillLoad() {
+        this.isHostedInsideCategory =
+            !!this.hostElement.closest('ix-menu-category');
+        this.onIconChange();
+        this.onTabIconChange();
+        this.menuExpanded = menuService.menuController.nativeElement.expand;
+        this.menuExpandedDisposer = menuService.menuController.expandChange.on((expand) => (this.menuExpanded = expand));
+    }
+    componentWillRender() {
+        index.readTask(() => {
+            var _a;
+            this.tooltip = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.innerText;
+        });
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.menuExpandedDisposer) {
+            this.menuExpandedDisposer.dispose();
+        }
+    }
+    onIconChange() {
+        if (!this.isHostedInsideCategory &&
+            !this.hostElement.icon &&
+            !this.hostElement.tabIcon) {
+            this.icon = 'document';
+        }
+    }
+    onTabIconChange() {
+        if (!this.isHostedInsideCategory &&
+            !this.hostElement.icon &&
+            !this.hostElement.tabIcon) {
+            this.tabIcon = 'document';
+        }
+    }
+    render() {
+        var _a;
+        let extendedAttributes = {};
+        if (this.home) {
+            extendedAttributes = {
+                slot: 'home',
+            };
+        }
+        if (this.bottom) {
+            extendedAttributes = {
+                slot: 'bottom',
+            };
+        }
+        return (index.h(index.Host, Object.assign({ key: 'bfc3aa3ed90de347026711d3af189c0bbe99e1ae', class: {
+                disabled: this.disabled,
+                'home-tab': this.home,
+                'bottom-tab': this.bottom,
+                active: this.active,
+                'tab-nested': this.isHostedInsideCategory,
+            } }, extendedAttributes), index.h("button", { key: '17d3a3ec7b65c596f0eaaa26d0202b38a9ab7023', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (index.h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (index.h("div", { class: "notification" }, index.h("div", { class: "pill" }, this.notifications))) : null, index.h("span", { key: '6289a0f93a7b79580c2962c2e51bf427eeb01183', class: "tab-text text-default" }, this.label, " ", index.h("slot", { key: 'de9ccad5b97b9603de86791a3a98656a2add17d3' }))), !this.isCategory &&
+            !this.isHostedInsideCategory &&
+            !this.menuExpanded && (index.h("ix-tooltip", { for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "icon": ["onIconChange"],
+        "tabIcon": ["onTabIconChange"]
+    }; }
+};
+MenuItem.style = IxMenuItemStyle0;
+
+exports.ix_menu_item = MenuItem;
+
+//# sourceMappingURL=ix-menu-item.cjs.entry.js.map

package/dist/cjs/ix-menu-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-item.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,WAAW,GAAG,02GAA02G,CAAC;AAC/3G,yBAAe,WAAW;;MC+Bb,QAAQ;;;QAuDX,cAAS,GAAGA,eAAO,EAAqB,CAAC;QACzC,2BAAsB,GAAG,KAAK,CAAC;QAG/B,aAAQ,GAAqBC,uCAAsB,CAAC;;YAC1D,IAAI,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;SACzD,CAAC,CAAC;;oBAlDY,KAAK;sBAOH,KAAK;;;;;;;;;;IA6CtB,iBAAiB;QACf,IAAI,CAAC,sBAAsB;YACzB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAEjD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,YAAY,GAAGC,0BAAc,CAAC,aAAa,CAAC,MAAM,CAAC;QACxD,IAAI,CAAC,oBAAoB,GAAGA,0BAAc,CAAC,YAAY,CAAC,EAAE,CACxD,CAAC,MAAM,MAAM,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,CACzC,CAAC;KACH;IAED,mBAAmB;QACjBC,cAAQ,CAAC;;YACP,IAAI,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;SACzD,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,aAAa,EAAE,IAAI;SACpB,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;QAED,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC;SACrC;KACF;IAGD,YAAY;QACV,IACE,CAAC,IAAI,CAAC,sBAAsB;YAC5B,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI;YACtB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EACzB;YACA,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;SACxB;KACF;IAGD,eAAe;QACb,IACE,CAAC,IAAI,CAAC,sBAAsB;YAC5B,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI;YACtB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EACzB;YACA,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;SAC3B;KACF;IAED,MAAM;;QACJ,IAAI,kBAAkB,GAAG,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,kBAAkB,GAAG;gBACnB,IAAI,EAAE,MAAM;aACb,CAAC;SACH;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,kBAAkB,GAAG;gBACnB,IAAI,EAAE,QAAQ;aACf,CAAC;SACH;QACD,QACEC,QAACC,UAAI,mEACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,UAAU,EAAE,IAAI,CAAC,IAAI;gBACrB,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,YAAY,EAAE,IAAI,CAAC,sBAAsB;aAC1C,IACG,kBAAkB,GAEtBD,qEACE,KAAK,EAAC,KAAK,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,IAAI,CAAC,SAAS,IAElB,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,MACzBA,qBACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,GACtB,CACZ,EACA,IAAI,CAAC,aAAa,IACjBA,iBAAK,KAAK,EAAC,cAAc,IACvBA,iBAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CACxC,IACJ,IAAI,EACRA,mEAAM,KAAK,EAAC,uBAAuB,IAChC,IAAI,CAAC,KAAK,OAAEA,oEAAa,CACrB,CACA,EACR,CAAC,IAAI,CAAC,UAAU;YACf,CAAC,IAAI,CAAC,sBAAsB;YAC5B,CAAC,IAAI,CAAC,YAAY,KAChBA,wBACE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,EACpC,SAAS,EAAE,OAAO,EAClB,SAAS,EAAE,IAAI,IAEd,IAAI,CAAC,OAAO,CACF,CACd,CACE,EACP;KACH;;;;;;;;;;;","names":["makeRef","createMutationObserver","menuController","readTask","h","Host"],"sources":["src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","src/components/menu-item/menu-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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$menuItemHeight: 3rem;\n$menuItemPadding: 0.875rem;\n\n:host {\n  position: relative;\n  display: block;\n  cursor: pointer;\n\n  height: var(--ix-menu-item-height, $menuItemHeight);\n  min-height: var(--ix-menu-item-height, $menuItemHeight);\n  max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n  .tab {\n    all: unset;\n    box-sizing: border-box;\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: var(--ix-menu-item-height, $menuItemHeight);\n    width: calc(100%);\n    z-index: 500;\n    padding-left: $menuItemPadding;\n\n    @include ghost-hover-pressed;\n  }\n\n  .tab-icon {\n    color: var(--theme-nav-item-primary-icon--color);\n    position: relative;\n    pointer-events: none;\n  }\n\n  .tab:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: -1px;\n  }\n\n  .tab:not(:last-child) {\n    margin-bottom: $small-space;\n  }\n\n  .notification {\n    display: inline-flex;\n    position: absolute;\n    top: 0.25rem;\n    left: 1.5rem;\n\n    .pill {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 0.5rem;\n      min-width: 1rem;\n      position: relative;\n      border-radius: 6.25rem;\n      background-color: var(--theme-color-primary);\n      font-size: 0.75rem;\n      font-weight: bold;\n      line-height: 1;\n      font-family: Siemens Sans, Arial, sans-serif;\n      color: var(--theme-color-primary--contrast);\n      padding: $tiny-space;\n    }\n  }\n\n  .tab-text {\n    @include ellipsis;\n    color: var(--theme-nav-item-primary--color);\n    margin: 0 1rem 0 1.25rem;\n    user-select: none;\n    width: 100%;\n  }\n}\n\n:host(.active),\n:host(.selected) {\n  .tab {\n    background-color: var(--theme-nav-item-primary--background--selected);\n  }\n\n  .tab::before {\n    content: '';\n    background-color: var(--theme-nav-item-primary--border-color--selected);\n    height: var(--ix-menu-item-height, $menuItemHeight);\n    width: 0.25rem;\n    left: 0;\n    position: absolute;\n  }\n\n  .tab > .glyph {\n    color: var(--theme-nav-item-primary-icon--color--selected);\n  }\n}\n\n:host(.disabled) {\n  color: var(--theme-color-weak-text);\n  pointer-events: none;\n  cursor: default;\n\n  .tab > .tab-icon {\n    color: var(--theme-color-weak-text);\n  }\n\n  .tab-text {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n  $bottom-height: 2.25rem;\n\n  min-height: $bottom-height;\n  height: $bottom-height;\n  max-height: $bottom-height;\n\n  .tab {\n    height: $bottom-height;\n  }\n\n  .tab::before {\n    height: $bottom-height;\n    background-color: transparent;\n  }\n\n  &.active,\n  &.selected {\n    &:hover {\n      background-color: var(--theme-nav-item-secondary--background--selected);\n    }\n\n    &:active {\n      background-color: var(--theme-nav-item-secondary--background--selected);\n    }\n  }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n  .tab {\n    background-color: var(--theme-nav-item-secondary--background--selected);\n  }\n}\n\n:host(.tab-nested) {\n  .tab {\n    flex-direction: row;\n    padding-left: calc(0.5rem + $menuItemPadding);\n\n    .notification {\n      position: relative;\n      top: 0;\n      left: 0;\n      padding-left: 0.5rem;\n    }\n\n    .tab-icon {\n      padding-left: 0.5rem;\n      padding-right: 0.5rem;\n    }\n\n    .tab-text {\n      margin-left: 0.5rem;\n    }\n\n    &::before {\n      display: none;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot menu-item-label Custom label\n */\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\n  /**\n   * Label of the menu item. Will also be used as tooltip text\n   *\n   * @since 2.2.0\n   */\n  @Prop() label: string;\n\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   *\n   * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0\n   */\n  @Prop({ mutable: true }) tabIcon: string;\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   */\n  @Prop({ mutable: true }) icon: string;\n\n  /**\n   * Show notification count on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  /** @internal */\n  @Prop() isCategory: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() tooltip: string;\n  @State() menuExpanded: boolean;\n\n  private buttonRef = makeRef<HTMLButtonElement>();\n  private isHostedInsideCategory = false;\n  private menuExpandedDisposer: Disposable;\n\n  private observer: MutationObserver = createMutationObserver(() => {\n    this.tooltip = this.label ?? this.hostElement.innerText;\n  });\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n\n    this.onIconChange();\n    this.onTabIconChange();\n\n    this.menuExpanded = menuController.nativeElement.expand;\n    this.menuExpandedDisposer = menuController.expandChange.on(\n      (expand) => (this.menuExpanded = expand)\n    );\n  }\n\n  componentWillRender() {\n    readTask(() => {\n      this.tooltip = this.label ?? this.hostElement.innerText;\n    });\n  }\n\n  connectedCallback() {\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.menuExpandedDisposer) {\n      this.menuExpandedDisposer.dispose();\n    }\n  }\n\n  @Watch('icon')\n  onIconChange() {\n    if (\n      !this.isHostedInsideCategory &&\n      !this.hostElement.icon &&\n      !this.hostElement.tabIcon\n    ) {\n      this.icon = 'document';\n    }\n  }\n\n  @Watch('tabIcon')\n  onTabIconChange() {\n    if (\n      !this.isHostedInsideCategory &&\n      !this.hostElement.icon &&\n      !this.hostElement.tabIcon\n    ) {\n      this.tabIcon = 'document';\n    }\n  }\n\n  render() {\n    let extendedAttributes = {};\n    if (this.home) {\n      extendedAttributes = {\n        slot: 'home',\n      };\n    }\n\n    if (this.bottom) {\n      extendedAttributes = {\n        slot: 'bottom',\n      };\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n          'tab-nested': this.isHostedInsideCategory,\n        }}\n        {...extendedAttributes}\n      >\n        <button\n          class=\"tab\"\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"listitem\"\n          ref={this.buttonRef}\n        >\n          {(this.icon || this.tabIcon) && (\n            <ix-icon\n              class={'tab-icon'}\n              name={this.icon ?? this.tabIcon}\n            ></ix-icon>\n          )}\n          {this.notifications ? (\n            <div class=\"notification\">\n              <div class=\"pill\">{this.notifications}</div>\n            </div>\n          ) : null}\n          <span class=\"tab-text text-default\">\n            {this.label} <slot></slot>\n          </span>\n        </button>\n        {!this.isCategory &&\n          !this.isHostedInsideCategory &&\n          !this.menuExpanded && (\n            <ix-tooltip\n              for={this.buttonRef.waitForCurrent()}\n              placement={'right'}\n              showDelay={1000}\n            >\n              {this.tooltip}\n            </ix-tooltip>\n          )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-menu-settings-item.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+
+const menuSettingsItemCss = ":host{display:block}";
+const IxMenuSettingsItemStyle0 = menuSettingsItemCss;
+
+const MenuSettingsItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.labelChange = index.createEvent(this, "labelChange", 7);
+        this.label = undefined;
+    }
+    watchLabel(newValue, oldValue) {
+        this.labelChange.emit({
+            name: 'ix-menu-settings-item',
+            oldLabel: oldValue,
+            newLabel: newValue,
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'af7b6698864d0f6c2e893843787b07450f586259' }, index.h("slot", { key: '5ced9613e2513330bd9d8152656dedb7320bdd74' })));
+    }
+    static get watchers() { return {
+        "label": ["watchLabel"]
+    }; }
+};
+MenuSettingsItem.style = IxMenuSettingsItemStyle0;
+
+exports.ix_menu_settings_item = MenuSettingsItem;
+
+//# sourceMappingURL=ix-menu-settings-item.cjs.entry.js.map

package/dist/cjs/ix-menu-settings-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-settings-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,sBAAsB,CAAC;AACnD,iCAAe,mBAAmB;;MCwBrB,gBAAgB;;;;;;IAY3B,UAAU,CAAC,QAAgB,EAAE,QAAgB;QAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,IAAI,EAAE,uBAAuB;YAC7B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;;;;","names":["h","Host"],"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/dist/cjs/ix-menu-settings.cjs.entry.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const menuTabsFc = require('./menu-tabs-fc-194c3ba9.js');
+require('./index-c6f0ac73.js');
+
+
+
+exports.ix_menu_settings = menuTabsFc.MenuSettings;
+
+//# sourceMappingURL=ix-menu-settings.cjs.entry.js.map

package/dist/cjs/ix-menu-settings.cjs.entry.js.map

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