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

package/components/p-DJ7U7oUq.js

@@ -0,0 +1,89 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { c as closestPassShadow } from './p-Bi1VyG64.js';
+import { u as iconClose } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$3 } from './p-BXjBChze.js';
+import { d as defineCustomElement$2 } from './p-BygLxZIM.js';
+import { d as defineCustomElement$1 } from './p-DyMgW0fR.js';
+
+const modalHeaderCss = ":host{display:flex;padding:0.5rem 0 0.5rem 0.5rem;align-items:center;gap:1rem}: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 .modal-title{flex-grow:1}:host .modal-close{align-self:flex-start}";
+
+const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeClick = createEvent(this, "closeClick", 7);
+        /**
+         * Hide the close button
+         */
+        this.hideClose = false;
+    }
+    onIconChange(icon) {
+        if (this.parentDialog) {
+            if (icon) {
+                this.parentDialog.classList.add('with-icon');
+            }
+            else {
+                this.parentDialog.classList.remove('with-icon');
+            }
+        }
+    }
+    componentDidLoad() {
+        this.parentDialog = closestPassShadow(this.hostElement, 'ix-modal');
+        this.onIconChange(this.icon);
+    }
+    onCloseClick(event) {
+        const ce = this.closeClick.emit(event);
+        if (ce.defaultPrevented || event.defaultPrevented) {
+            return;
+        }
+        this.parentDialog.dismissModal();
+    }
+    render() {
+        return (h(Host, { key: 'd9e6d78a14a90dc7d90ddcc53d7319655df4cc73' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32" })) : null, h("div", { key: '0987c59bd84c59e01283d389730a09c993d11ccd', class: "modal-title" }, h("ix-typography", { key: '41acad668a08d2c6bcf8f9a3d5b56768798c7ce3', format: "h5" }, h("slot", { key: '1533cecaf059d5bae7ba488a177457244552e9c1' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), ghost: true, icon: iconClose })) : null));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "icon": ["onIconChange"]
+    }; }
+    static get style() { return modalHeaderCss; }
+}, [1, "ix-modal-header", {
+        "hideClose": [4, "hide-close"],
+        "icon": [1],
+        "iconColor": [1, "icon-color"]
+    }, undefined, {
+        "icon": ["onIconChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-modal-header", "ix-icon-button", "ix-spinner", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-modal-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ModalHeader);
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ModalHeader as M, defineCustomElement as d };
+//# sourceMappingURL=p-DJ7U7oUq.js.map
+
+//# sourceMappingURL=p-DJ7U7oUq.js.map

package/components/p-DJ7U7oUq.js.map

@@ -0,0 +1 @@
+{"file":"p-DJ7U7oUq.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,g5BAAg5B;;MC2B15B,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;;AAQE;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAsE1B;AA9DC,IAAA,YAAY,CAAC,IAAa,EAAA;AACxB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC;;iBACvC;gBACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;;;IAkBrD,gBAAgB,GAAA;QACd,IAAI,CAAC,YAAY,GAAG,iBAAiB,CACnC,IAAI,CAAC,WAAW,EAChB,UAAU,CACW;AACvB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGtB,IAAA,YAAY,CAAC,KAAiB,EAAA;QACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACjD;;AAGF,QAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;;IAGlC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,IAAI,EAAA,CAAW,IACnE,IAAI,EACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,IAAI,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACC,CACZ,EACL,CAAC,IAAI,CAAC,SAAS,IACd,CAAA,CAAA,gBAAA,EAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAE,SAAS,EAAA,CACC,IAChB,IAAI,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","src/components/modal-header/modal-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.5rem 0 0.5rem 0.5rem;\n  align-items: center;\n  gap: 1rem;\n\n  .modal-title {\n    flex-grow: 1;\n  }\n\n  .modal-close  {\n    align-self: flex-start;\n  }\n}\n","/*\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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { closestPassShadow } from '../utils/shadow-dom';\nimport { iconClose } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon?: string;\n\n  @Watch('icon')\n  onIconChange(icon?: string) {\n    if (this.parentDialog) {\n      if (icon) {\n        this.parentDialog.classList.add('with-icon');\n      } else {\n        this.parentDialog.classList.remove('with-icon');\n      }\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Emits when close icon is clicked and closes the modal\n   * Can be prevented, in which case only the event is triggered, and the modal remains open\n   */\n  @Event() closeClick!: EventEmitter<MouseEvent>;\n\n  private parentDialog!: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = closestPassShadow(\n      this.hostElement,\n      'ix-modal'\n    ) as HTMLIxModalElement;\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon name={this.icon} color={this.iconColor} size=\"32\"></ix-icon>\n        ) : null}\n        <div class=\"modal-title\">\n          <ix-typography format=\"h5\">\n            <slot></slot>\n          </ix-typography>\n        </div>\n        {!this.hideClose ? (\n          <ix-icon-button\n            class=\"modal-close\"\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon={iconClose}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-DMlmNp-B.js

@@ -0,0 +1,33 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+
+const rowCss = ":host{display:flex;flex-wrap:wrap}:host(:not(:first-of-type)){margin-block-start:var(--ix-layout-grid-row-margin, 0)}";
+
+const Row = /*@__PURE__*/ proxyCustomElement(class Row extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '3b0d16365de5142ce2fffa2a2e11ce877e283111' }, h("slot", { key: '0d7a715f298d2cf1c97eb19a1adcaf345d7ca4e8' })));
+    }
+    static get style() { return rowCss; }
+}, [1, "ix-row"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-row"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-row":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Row);
+            }
+            break;
+    } });
+}
+
+export { Row as R, defineCustomElement as d };
+//# sourceMappingURL=p-DMlmNp-B.js.map
+
+//# sourceMappingURL=p-DMlmNp-B.js.map

package/components/p-DMlmNp-B.js.map

@@ -0,0 +1 @@
+{"file":"p-DMlmNp-B.js","mappings":";;AAAA,MAAM,MAAM,GAAG,uHAAuH;;MCgBzH,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAAC,CAAA,CAAA;;;;;;IACd,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/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.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 */\n\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\n}\n","/*\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 */\n\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-DWO4uklL.js

@@ -0,0 +1,146 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { c as createMutationObserver } from './p-CX81WQtk.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { m as menuController } from './p-DDHkNPby.js';
+import { F as iconDocument } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$2 } from './p-DyHdZRT0.js';
+import { d as defineCustomElement$1 } from './p-DyMgW0fR.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 .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 MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Move the Tab to a top position.
+         */
+        this.home = false;
+        /**
+         * Caution: this is no longer working. Please use slot="bottom" instead.
+         *
+         * Place tab on bottom
+         */
+        this.bottom = false;
+        /**
+         * State to display active
+         */
+        this.active = false;
+        /**
+         * Disable tab and remove event handlers
+         */
+        this.disabled = false;
+        /** @internal */
+        this.isCategory = false;
+        this.menuExpanded = false;
+        this.buttonRef = makeRef();
+        this.isHostedInsideCategory = false;
+        this.observer = createMutationObserver(() => {
+            this.setTooltip();
+        });
+    }
+    componentWillLoad() {
+        var _a;
+        this.isHostedInsideCategory =
+            !!this.hostElement.closest('ix-menu-category');
+        this.onIconChange();
+        this.menuExpanded = ((_a = menuController.nativeElement) === null || _a === void 0 ? void 0 : _a.expand) || false;
+        this.menuExpandedDisposer = menuController.expandChange.on((expand) => (this.menuExpanded = expand));
+    }
+    componentWillRender() {
+        this.setTooltip();
+    }
+    setTooltip() {
+        var _a, _b;
+        this.tooltip = (_b = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.textContent) !== null && _b !== void 0 ? _b : undefined;
+    }
+    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.icon = iconDocument;
+        }
+    }
+    render() {
+        let extendedAttributes = {};
+        if (this.home) {
+            extendedAttributes = {
+                slot: 'home',
+            };
+        }
+        if (this.bottom) {
+            extendedAttributes = {
+                slot: 'bottom',
+            };
+        }
+        return (h(Host, Object.assign({ key: '3c97be99972609f07b9ebd733c84237e90a2061e', class: {
+                disabled: this.disabled,
+                'home-tab': this.home,
+                'bottom-tab': this.bottom,
+                active: this.active,
+                'tab-nested': this.isHostedInsideCategory,
+            } }, extendedAttributes), h("button", { key: '0a8a4ded3ca8f4fdfd8a875a62d2437d30098057', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, this.icon && h("ix-icon", { key: '61ffdd54c8123942e05eea275a40e6dc099a0bba', class: 'tab-icon', name: this.icon }), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: '54a456cb810b2c8c393b5b81ebee9334c58ce1db', class: "tab-text text-default" }, this.label, h("slot", { key: 'a4c0d80d3778add2f069dbc0c0597b257b468ec8' }))), !this.isCategory &&
+            !this.isHostedInsideCategory &&
+            !this.menuExpanded && (h("ix-tooltip", { key: 'e9e5e232cb0e49f1e1e752a8a2baae31179cc86c', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "icon": ["onIconChange"]
+    }; }
+    static get style() { return menuItemCss; }
+}, [1, "ix-menu-item", {
+        "label": [1],
+        "home": [4],
+        "bottom": [4],
+        "icon": [1025],
+        "notifications": [2],
+        "active": [4],
+        "disabled": [4],
+        "isCategory": [4, "is-category"],
+        "tooltip": [32],
+        "menuExpanded": [32]
+    }, undefined, {
+        "icon": ["onIconChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-menu-item", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MenuItem);
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { MenuItem as M, defineCustomElement as d };
+//# sourceMappingURL=p-DWO4uklL.js.map
+
+//# sourceMappingURL=p-DWO4uklL.js.map

package/components/p-DWO4uklL.js.map

@@ -0,0 +1 @@
+{"file":"p-DWO4uklL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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  .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 { Component, Element, h, Host, Prop, State, Watch } 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';\nimport { iconDocument } from '@siemens/ix-icons/icons';\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  @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  @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 = false;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean = false;\n\n  /** @internal */\n  @Prop() isCategory: boolean = false;\n\n  @Element() hostElement!: HTMLIxMenuItemElement;\n\n  @State() tooltip?: string;\n  @State() menuExpanded: boolean = false;\n\n  private readonly buttonRef = makeRef<HTMLButtonElement>();\n  private isHostedInsideCategory = false;\n  private menuExpandedDisposer?: Disposable;\n\n  private readonly observer: MutationObserver = createMutationObserver(() => {\n    this.setTooltip();\n  });\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n\n    this.onIconChange();\n\n    this.menuExpanded = menuController.nativeElement?.expand || false;\n    this.menuExpandedDisposer = menuController.expandChange.on(\n      (expand) => (this.menuExpanded = expand)\n    );\n  }\n\n  componentWillRender() {\n    this.setTooltip();\n  }\n\n  setTooltip() {\n    this.tooltip = this.label ?? this.hostElement.textContent ?? undefined;\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 (!this.isHostedInsideCategory && !this.hostElement.icon) {\n      this.icon = iconDocument;\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          ref={this.buttonRef}\n        >\n          {this.icon && <ix-icon class={'tab-icon'} name={this.icon}></ix-icon>}\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}\n            <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}