npm - @siemens/ix - Versions diffs - 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522 - Mend

@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1382) hide show

package/components/ix-kpi.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-kpi.js","mappings":";;AAAA,MAAM,MAAM,GAAG,~~42EAA42E~~,CAAC;~~AAC53E~~,oBAAe,MAAM;;MCeR,GAAG;;;;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK;YAChB,KAAK,OAAO;gBACV,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX;YAEJ,KAAK,SAAS;gBACZ,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,EACX;YAEJ;gBACE,OAAO,EAAE,CAAC;SACb;KACF;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SAC3C;QAED,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC,IAED,4DACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aAClC,IAED,6DAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACP,6DAAM,KAAK,EAAC,qBAAqB,IAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-grow: 1;\n height: $large-control-height;\n border-radius: var(--theme-kpi--border-radius);\n padding: 0.375rem $tiny-space;\n min-width: 0;\n\n span {\n @include ellipsis;\n }\n\n .kpi-container {\n display: flex;\n height: 100%;\n width: 100%;\n border-block-end: 2px solid grey;\n\n &.alarm {\n border-block-end-color: var(--theme-color-alarm);\n }\n\n &.warning {\n border-block-end-color: var(--theme-color-warning);\n }\n\n .kpi-label {\n display: flex;\n align-items: center;\n color: var(--theme-kpi-display-label--color);\n flex-grow: 1;\n flex-shrink: 9999;\n\n ix-icon {\n margin-inline-end: $tiny-space;\n }\n }\n\n .kpi-value-container {\n display: flex;\n align-items: flex-end;\n }\n\n .kpi-value {\n @include text-xl;\n\n color: var(--theme-kpi-display-value--color);\n }\n\n .kpi-unit {\n margin-inline-start: $small-space;\n color: var(--theme-kpi-display-units--color);\n }\n\n .kpi-label,\n .kpi-unit {\n margin-block-start: 0.125rem;\n }\n }\n\n @include hover {\n background-color: var(--theme-kpi-display--background--hover);\n }\n\n @include active {\n background-color: var(--theme-kpi-display--background--active);\n }\n\n @include focus-visible {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(.stacked) {\n height: 3.75rem;\n\n .kpi-container {\n justify-content: center;\n flex-wrap: wrap;\n\n .kpi-label {\n width: 100%;\n justify-content: center;\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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-kpi',\n styleUrl: 'kpi.scss',\n shadow: true,\n})\nexport class Kpi {\n /\n \n /\n @Prop() label: string;\n\n /\n \n /\n @Prop() value: string \| number;\n\n /\n \n /\n @Prop() unit: string;\n\n /\n \n /\n @Prop() state: 'neutral' \| 'warning' \| 'alarm' = 'neutral';\n\n /\n \n */\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n private getStateIcon() {\n switch (this.state) {\n case 'alarm':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'alarm'}\n size=\"16\"\n ></ix-icon>\n );\n\n case 'warning':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'warning'}\n size=\"16\"\n ></ix-icon>\n );\n\n default:\n return '';\n }\n }\n\n private getTooltipText() {\n let tooltip = `${this.label}: ${this.value}`;\n\n if (this.unit) {\n tooltip = tooltip.concat(` ${this.unit}`);\n }\n\n return tooltip;\n }\n\n render() {\n return (\n <Host\n title={this.getTooltipText()}\n tabindex=\"1\"\n class={{\n stacked: this.orientation === 'vertical',\n }}\n >\n <div\n class={{\n 'kpi-container': true,\n alarm: this.state === 'alarm',\n warning: this.state === 'warning',\n }}\n >\n <span class=\"kpi-label\">\n {this.getStateIcon()}\n <span class=\"kpi-label-text\">{this.label}</span>\n </span>\n <span class=\"kpi-value-container\">\n <span class=\"kpi-value\">{this.value}</span>\n {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-kpi.js","mappings":";;AAAA,MAAM,MAAM,GAAG,wgFAAwgF,CAAC;AACxhF,oBAAe,MAAM;;MCeR,GAAG;;;;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK;YAChB,KAAK,OAAO;gBACV,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX;YAEJ,KAAK,SAAS;gBACZ,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,EACX;YAEJ;gBACE,OAAO,EAAE,CAAC;SACb;KACF;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SAC3C;QAED,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC,IAED,4DACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aAClC,IAED,6DAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACP,6DAAM,KAAK,EAAC,qBAAqB,IAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-grow: 1;\n height: $large-control-height;\n border-radius: var(--theme-kpi--border-radius);\n padding: 0.375rem $tiny-space;\n min-width: 0;\n\n span {\n @include ellipsis;\n }\n\n .kpi-container {\n display: flex;\n height: 100%;\n width: 100%;\n border-block-end: 2px solid grey;\n\n &.alarm {\n border-block-end-color: var(--theme-color-alarm);\n }\n\n &.warning {\n border-block-end-color: var(--theme-color-warning);\n }\n\n .kpi-label {\n display: flex;\n align-items: center;\n color: var(--theme-kpi-display-label--color);\n flex-grow: 1;\n flex-shrink: 9999;\n\n ix-icon {\n margin-inline-end: $tiny-space;\n }\n }\n\n .kpi-value-container {\n display: flex;\n align-items: flex-end;\n }\n\n .kpi-value {\n @include text-xl;\n\n color: var(--theme-kpi-display-value--color);\n }\n\n .kpi-unit {\n margin-inline-start: $small-space;\n color: var(--theme-kpi-display-units--color);\n }\n\n .kpi-label,\n .kpi-unit {\n margin-block-start: 0.125rem;\n }\n }\n\n @include hover {\n background-color: var(--theme-kpi-display--background--hover);\n }\n\n @include active {\n background-color: var(--theme-kpi-display--background--active);\n }\n\n @include focus-visible {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(.stacked) {\n height: 3.75rem;\n\n .kpi-container {\n justify-content: center;\n flex-wrap: wrap;\n\n .kpi-label {\n width: 100%;\n justify-content: center;\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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-kpi',\n styleUrl: 'kpi.scss',\n shadow: true,\n})\nexport class Kpi {\n /\n \n /\n @Prop() label: string;\n\n /\n \n /\n @Prop() value: string \| number;\n\n /\n \n /\n @Prop() unit: string;\n\n /\n \n /\n @Prop() state: 'neutral' \| 'warning' \| 'alarm' = 'neutral';\n\n /\n \n */\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n private getStateIcon() {\n switch (this.state) {\n case 'alarm':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'alarm'}\n size=\"16\"\n ></ix-icon>\n );\n\n case 'warning':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'warning'}\n size=\"16\"\n ></ix-icon>\n );\n\n default:\n return '';\n }\n }\n\n private getTooltipText() {\n let tooltip = `${this.label}: ${this.value}`;\n\n if (this.unit) {\n tooltip = tooltip.concat(` ${this.unit}`);\n }\n\n return tooltip;\n }\n\n render() {\n return (\n <Host\n title={this.getTooltipText()}\n tabindex=\"1\"\n class={{\n stacked: this.orientation === 'vertical',\n }}\n >\n <div\n class={{\n 'kpi-container': true,\n alarm: this.state === 'alarm',\n warning: this.state === 'warning',\n }}\n >\n <span class=\"kpi-label\">\n {this.getStateIcon()}\n <span class=\"kpi-label-text\">{this.label}</span>\n </span>\n <span class=\"kpi-value-container\">\n <span class=\"kpi-value\">{this.value}</span>\n {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-layout-form.d.ts ADDED Viewed

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

package/components/ix-layout-form.js ADDED Viewed

@@ -0,0 +1,113 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const layoutFormCss = ":host{display:block;position:relative;margin:0 0.5rem}:host .container{display:flex;align-items:stretch;flex-wrap:wrap;gap:0.5rem}:host ::slotted(*){flex-grow:0;flex-shrink:0}";
+const IxLayoutFormStyle0 = layoutFormCss;
+const LayoutForm = /*@__PURE__*/ proxyCustomElement(class LayoutForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.mediaQueryList = [];
+        this.observer = new MutationObserver(() => this.calculateGridTemplateColumns());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.calculateGridTemplateColumns();
+        });
+        this.layout = [
+            { minWidth: '0', columns: 1 },
+            { minWidth: '35rem', columns: 2 },
+        ];
+        this.gridTemplateColumns = undefined;
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-colspan'],
+        });
+        this.resizeObserver.observe(this.hostElement);
+        this.updateMediaQueryList();
+    }
+    componentWillLoad() {
+        this.calculateGridTemplateColumns();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    updateMediaQueryList() {
+        this.mediaQueryList = [];
+        this.layout.forEach((layout) => {
+            const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);
+            this.mediaQueryList.push({
+                mediaQuery,
+                layout,
+            });
+        });
+    }
+    parseNumber(number) {
+        if (!number) {
+            return 1;
+        }
+        const result = parseInt(number);
+        if (isNaN(result)) {
+            return 1;
+        }
+        return result;
+    }
+    calculateGridTemplateColumns() {
+        let layoutColumns = 1;
+        let columnSpacing = '0.5rem';
+        this.mediaQueryList.forEach((mediaQuery) => {
+            if (mediaQuery.mediaQuery.matches) {
+                layoutColumns = mediaQuery.layout.columns;
+            }
+        });
+        Array.from(this.hostElement.children).forEach((child) => {
+            let colspan = this.parseNumber(child.getAttribute('data-colspan'));
+            colspan = Math.min(colspan, layoutColumns);
+            const childRatio = colspan / layoutColumns;
+            child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
+        });
+    }
+    render() {
+        return (h(Host, { key: 'd2fa4c6a9f79d88482f665cd46bc96dfe8536535' }, h("div", { key: '32c2e2f039e5545b039d073200f1575aafe2b625', class: "container", style: {
+                gridTemplateColumns: this.gridTemplateColumns,
+            } }, h("slot", { key: '59930603690b5d72f584817f0e0e3a44e423ca6e' }))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "layout": ["updateMediaQueryList"]
+    }; }
+    static get style() { return IxLayoutFormStyle0; }
+}, [1, "ix-layout-form", {
+        "layout": [16],
+        "gridTemplateColumns": [32]
+    }, undefined, {
+        "layout": ["updateMediaQueryList"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-layout-form"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-layout-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LayoutForm);
+            }
+            break;
+    } });
+}
+const IxLayoutForm = LayoutForm;
+const defineCustomElement = defineCustomElement$1;
+export { IxLayoutForm, defineCustomElement };
+//# sourceMappingURL=ix-layout-form.js.map

package/components/ix-layout-form.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-layout-form.js","mappings":"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","names":[],"sources":["src/components/layout-form/layout-form.scss?tag=ix-layout-form&encapsulation=shadow","src/components/layout-form/layout-form.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n\n margin: 0 0.5rem;\n\n .container {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n\n ::slotted(*) {\n flex-grow: 0;\n flex-shrink: 0;\n }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n tag: 'ix-layout-form',\n styleUrl: 'layout-form.scss',\n shadow: true,\n})\nexport class LayoutForm implements IxComponent {\n @Element() hostElement!: HTMLIxLayoutFormElement;\n\n /**\n * Defines the layout of the form.\n */\n @Prop() layout: {\n minWidth: string;\n columns: number;\n }[] = [\n { minWidth: '0', columns: 1 },\n { minWidth: '35rem', columns: 2 },\n ];\n\n @State() gridTemplateColumns?: string;\n\n private mediaQueryList: {\n mediaQuery: MediaQueryList;\n layout: {\n minWidth: string;\n columns: number;\n };\n }[] = [];\n\n private observer = new MutationObserver(() =>\n this.calculateGridTemplateColumns()\n );\n\n private resizeObserver = new ResizeObserver(() => {\n this.calculateGridTemplateColumns();\n });\n\n connectedCallback(): void {\n this.observer.observe(this.hostElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['data-colspan'],\n });\n this.resizeObserver.observe(this.hostElement);\n\n this.updateMediaQueryList();\n }\n\n componentWillLoad(): void | Promise<void> {\n this.calculateGridTemplateColumns();\n }\n\n disconnectedCallback(): void {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n @Watch('layout')\n updateMediaQueryList() {\n this.mediaQueryList = [];\n this.layout.forEach((layout) => {\n const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);\n this.mediaQueryList.push({\n mediaQuery,\n layout,\n });\n });\n }\n\n private parseNumber(number: string | null) {\n if (!number) {\n return 1;\n }\n\n const result = parseInt(number);\n if (isNaN(result)) {\n return 1;\n }\n\n return result;\n }\n\n private calculateGridTemplateColumns() {\n let layoutColumns = 1;\n let columnSpacing = '0.5rem';\n\n this.mediaQueryList.forEach((mediaQuery) => {\n if (mediaQuery.mediaQuery.matches) {\n layoutColumns = mediaQuery.layout.columns;\n }\n });\n\n let column = 0;\n Array.from(this.hostElement.children).forEach((child: HTMLElement) => {\n let colspan = this.parseNumber(child.getAttribute('data-colspan'));\n colspan = Math.min(colspan, layoutColumns);\n const childRatio = colspan / layoutColumns;\n\n child.style.width = `calc(${childRatio * 99.9}% - ${\n 1 - childRatio\n } * ${columnSpacing})`;\n\n if (column + colspan > layoutColumns) {\n column = 0;\n }\n\n column = (column + colspan) % layoutColumns;\n });\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"container\"\n style={{\n gridTemplateColumns: this.gridTemplateColumns,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-link-button.js CHANGED Viewed

@@ -13,13 +13,13 @@ const LinkButton = /*@__PURE__*/ proxyCustomElement(class LinkButton extends HTM
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: '0308562a5da54b5dbc6e5fff61ff5c40458220a4' }, h("a", { key: '31312e87d8ec1a6876d0f9f0d119ec5a99e3d7df', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '389f113b4cc2287e9967a4dfab74f08cde025b55' }, h("a", { key: '4f50ef3e1e331ffdebb8d4b7c79f18d32f682490', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'f2f046c1695abcb7ab6c5aae112c78cd9ef4163d', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '04a4a97aa51211e18a585c74aff33b9cd5ed6bc1', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '10e9351e9f4fe2afc048d5ea6aed2127bb8c509e', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '38a14f8d696ddf2d3bf438d9b14d997f320a444d', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'a1d09c078e9a4a63ca06a4bbc65c8b8d3e8e1e89' })))));
+            } }, h("slot", { key: '7241dc0ba6e2d8a990e6269f998cc15f98e5101b' })))));
     }
     static get style() { return IxLinkButtonStyle0; }
 }, [1, "ix-link-button", {

package/components/ix-map-navigation.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './map-navigation-overlay.js';
 import { d as defineCustomElement$3 } from './menu-expand-icon.js';
 import { d as defineCustomElement$2 } from './spinner.js';
-const mapNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%}: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 .map-nav{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}:host .map-nav-sidebar{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}:host .map-nav-sidebar-content{align-items:center;position:relative;overflow:auto;height:100%;width:100%}:host .map-nav-sidebar-content .map-nav-sidebar-static-content{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}:host .map-nav-header{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}:host .map-nav-header .map-nav-header-brand{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}:host .map-nav-header .map-nav-header-brand button{margin-left:1rem}:host .map-nav-header-content{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}:host .map-nav-header-content.empty{height:0}:host .map-nav-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}:host .content{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}:host ::slotted(ix-menu){position:absolute}";
+const mapNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%}: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 .map-nav{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}:host .map-nav-sidebar{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}:host .map-nav-sidebar-content{align-items:center;position:relative;overflow:auto;height:100%;width:100%}:host .map-nav-sidebar-content .map-nav-sidebar-static-content{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}:host .map-nav-header{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}:host .map-nav-header .map-nav-header-brand{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}:host .map-nav-header .map-nav-header-brand button{margin-left:1rem}:host .map-nav-header-content{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}:host .map-nav-header-content.empty{height:0}:host .map-nav-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}:host .content{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}:host ::slotted(ix-menu){position:absolute}";
 const IxMapNavigationStyle0 = mapNavigationCss;
 const MapNavigation = /*@__PURE__*/ proxyCustomElement(class MapNavigation extends HTMLElement {
@@ -161,11 +161,11 @@ const MapNavigation = /*@__PURE__*/ proxyCustomElement(class MapNavigation exten
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (h(Host, { key: '2946dcb874fe6142c5e46fc0e631528f9c252acd' }, h("slot", { key: '1dade6736fb8ca41922269af3613069109e0f7e1', name: "menu" }), h("div", { key: 'ebf94a90f8d8bc250f50e3b6b81ab9529403ced4', class: "map-nav" }, h("div", { key: 'ca6e3fb3f7222e415a2c3b0a0485852e0d24eb27', class: "map-nav-sidebar" }, h("div", { key: 'eedd75c6ed28651eb0dacc304c2a6bb74a3acb48', class: "map-nav-header" }, h("ix-application-header", { key: '29c589f85db676ffd91bb12488e70de7e2e4dbe1', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'c19497c92151dffa74f57177b67b4ba4e0927598', slot: "logo", name: "logo" }))), h("div", { key: '4b3f49c7a748481ba6644748cf81b97346a93e86', class: "map-nav-sidebar-content" }, h("div", { key: '2f3ae2b3b2b82259c9d50f84446b3c3b9187595e', class: "map-nav-sidebar-static-content" }, h("div", { key: '55256b8072af12003597c805c5b79e5996326199', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'fb536c51269368ac94db2464fa040992c1bfb272', class: "map-nav-sidebar-user-content" }, h("slot", { key: '46a3481ffdb3b1fd94dbcb3e4100d36abd3ec800', name: "sidebar-content" })))), h("div", { key: '68e57564835c8813e97a6a5ca27bb6560744b635', class: "content" }, h("div", { key: '51fe8de82f713940d867a5d369a4e9c520f8a13b', class: {
+        return (h(Host, { key: 'd4732f320cef195fd71fcbd9cac4efa9d47d62b7' }, h("slot", { key: 'd89d067a69a0dc395473a37a350fde3373fd0ad8', name: "menu" }), h("div", { key: '0d82e970de98c5ed5cee50dd1e5c12254c1d1ec8', class: "map-nav" }, h("div", { key: '651974e052b845a105dc0c2da24d2aeb32f19153', class: "map-nav-sidebar" }, h("div", { key: 'ddd61f170fc617eb7f6ebc7d15bd7302afe2f499', class: "map-nav-header" }, h("ix-application-header", { key: '1a7a9dc0086e3154d1d9f47f53333de2b72f0cb2', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'c0298ae4799751bcca1f576409fa8804018fa01f', slot: "logo", name: "logo" }))), h("div", { key: 'a74e511549005ebf76418632a66704fb3f0ac53b', class: "map-nav-sidebar-content" }, h("div", { key: '6ab0f9f636be4b5341ee60228f942c9f188edf0f', class: "map-nav-sidebar-static-content" }, h("div", { key: 'd31102ac7b3e338a3d0d5eb8c2056093ea35f3c1', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: '1e3e148d42813f499abed125afe8f87f83e15f07', class: "map-nav-sidebar-user-content" }, h("slot", { key: '77c8448972889f71ea084ff3eb4ab511f3ce4e61', name: "sidebar-content" })))), h("div", { key: '7b91060048aa1c326b4c45dbc919c7576f41133a', class: "content" }, h("div", { key: '07b4cd1aadb0e24cc4fbb97ca3ea4763cce102bd', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, h("slot", { key: 'bb2fd5b5bb1577353c85780fa3f285702f1d224e', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '2735c1d81e97f98b9a9e5652ee7d281e233a21a6' }, h("slot", { key: '830e9656af5d9e46e0d39202abd82ad9fe1ce7fa' }), h("slot", { key: '7bf4f8bce525e3572acdeb08a852e029e7f5cd09', name: "overlay" }))))));
+            } }, h("slot", { key: 'fec68f39d08a4509be7611c2a62b1b9daff93980', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: 'e5f4c7145bce662d0f9d4c1ca33663b7eacd138e' }, h("slot", { key: 'ba1298d913a0b0395ce7ecb9c309d21d3057a1f2' }), h("slot", { key: '31f07289d03e8408e4f197869a8cba4d50ac3129', name: "overlay" }))))));
     }
     get hostElement() { return this; }
     static get style() { return IxMapNavigationStyle0; }

package/components/ix-map-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-map-navigation.js","mappings":"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","names":[],"sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n $appHeaderHeight: 3.5rem;\n $appHeaderGradientHeight: 4rem;\n $navHeaderHeight: 11.5rem;\n $sidebarWidth: 29.75rem;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n .map-nav {\n display: flex;\n margin-left: 3.25rem;\n position: relative;\n height: 100%;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .map-nav-sidebar {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: $sidebarWidth;\n max-width: $sidebarWidth;\n min-width: $sidebarWidth;\n height: 100%;\n left: 4rem;\n background-color: var(--theme-map-navigation--background);\n border-inline-end: 0.125rem solid\n var(--theme-map-navigation-separator--background);\n z-index: 99;\n }\n\n .map-nav-sidebar-content {\n align-items: center;\n position: relative;\n overflow: auto;\n height: 100%;\n width: 100%;\n\n .map-nav-sidebar-static-content {\n @include text-h2;\n display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: $default-space;\n margin-right: $default-space;\n }\n }\n\n .map-nav-header {\n display: flex;\n position: relative;\n align-items: center;\n height: $appHeaderHeight;\n min-height: $appHeaderHeight;\n width: 100%;\n\n .map-nav-header-brand {\n background-color: var(--theme-map-navigation-background);\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n padding: 0 $default-space;\n\n --theme-app-header--color: var(--theme-map-navigation-header--color);\n --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n button {\n margin-left: $default-space;\n }\n }\n }\n\n .map-nav-header-content {\n display: flex;\n height: $appHeaderHeight;\n align-items: center;\n overflow: hidden;\n padding: 0 $default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n @include text-h2();\n\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n .content {\n display: block;\n flex-grow: 1;\n position: relative;\n height: 100%;\n overflow: hidden;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n }\n\n ::slotted(ix-menu) {\n position: absolute;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\n\n@Component({\n tag: 'ix-map-navigation',\n styleUrl: 'map-navigation.scss',\n shadow: true,\n})\nexport class MapNavigation {\n private static readonly defaultTime = 150;\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Navigation title\n /\n @Prop() navigationTitle: string;\n\n /\n Hide the sidebar context menu button when set to true\n /\n @Prop() hideContextMenu = true;\n\n /\n Navigation toggled\n /\n @Event() navigationToggled: EventEmitter<boolean>;\n\n /\n Context menu clicked\n /\n @Event() contextMenuClick: EventEmitter<void>;\n\n @State() isSidebarOpen = true;\n @State() hasContentHeader = false;\n\n get menu() {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get menuOverlay() {\n return this.hostElement.querySelector('ix-menu-overlay');\n }\n\n get mapNavMenu() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-menu');\n }\n\n get sidebar() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');\n }\n\n get overlay() {\n return this.hostElement.shadowRoot.querySelector('#overlay');\n }\n\n componentDidRender() {\n this.appendMenu();\n this.closeOverlay();\n }\n\n componentWillLoad() {\n useContextProvider(this.hostElement, ApplicationLayoutContext, {\n hideHeader: false,\n host: 'map-navigation',\n });\n }\n\n private appendMenu() {\n this.menu.addEventListener(\n 'mapExpandChange',\n (event: CustomEvent<boolean>) => {\n const state = !event.detail;\n this.toggleSidebar(state);\n }\n );\n this.menu.enableMapExpand = true;\n }\n\n /\n Change the visibility of the sidebar\n \n @param show new visibility state\n * @since 1.6.0\n /\n @Method()\n async toggleSidebar(show?: boolean) {\n if (show !== undefined) {\n this.isSidebarOpen = show;\n } else {\n this.isSidebarOpen = !this.isSidebarOpen;\n }\n\n if (this.isSidebarOpen) {\n this.openSidebar();\n } else {\n this.closeSidebar();\n }\n\n this.navigationToggled.emit(this.isSidebarOpen);\n this.menu.toggleMapExpand(this.isSidebarOpen);\n }\n\n private closeSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.sidebar.classList.add('d-none');\n },\n });\n }\n\n private openSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.sidebar.classList.remove('d-none');\n },\n });\n }\n\n /\n Open a overlay inside content area\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n \n @param name\n * @param component\n * @param icon\n * @param color\n /\n @Method()\n async openOverlay(\n name: string,\n component: HTMLElement,\n icon?: string,\n color?: string\n ) {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.overlay.classList.remove('d-none');\n },\n });\n\n const overlayInstance = document.createElement('ix-map-navigation-overlay');\n overlayInstance.setAttribute('color', color);\n overlayInstance.setAttribute('name', name);\n overlayInstance.setAttribute('icon', icon);\n overlayInstance.setAttribute('slot', 'overlay');\n overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n overlayInstance.appendChild(component);\n this.hostElement.appendChild(overlayInstance);\n }\n\n /\n Close current shown overlay\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n */\n @Method()\n async closeOverlay() {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('d-none');\n },\n });\n }\n\n private checkHasContentHeader(e: Event) {\n const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n flatten: true,\n });\n\n this.hasContentHeader = nodes?.length !== 0;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"menu\"></slot>\n <div class=\"map-nav\">\n <div class=\"map-nav-sidebar\">\n <div class=\"map-nav-header\">\n <ix-application-header\n name={this.applicationName}\n class=\"map-nav-header-brand\"\n >\n <slot slot=\"logo\" name=\"logo\"></slot>\n </ix-application-header>\n </div>\n <div class=\"map-nav-sidebar-content\">\n <div class=\"map-nav-sidebar-static-content\">\n <div class=\"map-nav-title\">{this.navigationTitle}</div>\n {this.hideContextMenu ? (\n ''\n ) : (\n <ix-icon-button\n icon={'context-menu'}\n ghost\n size=\"24\"\n variant=\"secondary\"\n onClick={(_) => this.contextMenuClick.emit()}\n ></ix-icon-button>\n )}\n </div>\n <div class=\"map-nav-sidebar-user-content\">\n <slot name=\"sidebar-content\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div\n class={{\n 'map-nav-header-content': true,\n 'bg-2': true,\n empty: !this.hasContentHeader,\n }}\n >\n <slot\n name=\"content-header\"\n onSlotchange={(e) => this.checkHasContentHeader(e)}\n ></slot>\n </div>\n <main>\n <slot></slot>\n <slot name=\"overlay\"></slot>\n </main>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-map-navigation.js","mappings":"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","names":[],"sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n $appHeaderHeight: 3.5rem;\n $appHeaderGradientHeight: 4rem;\n $navHeaderHeight: 11.5rem;\n $sidebarWidth: 29.75rem;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n .map-nav {\n display: flex;\n margin-left: 3.25rem;\n position: relative;\n height: 100%;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .map-nav-sidebar {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: $sidebarWidth;\n max-width: $sidebarWidth;\n min-width: $sidebarWidth;\n height: 100%;\n left: 4rem;\n background-color: var(--theme-map-navigation--background);\n border-inline-end: 0.125rem solid\n var(--theme-map-navigation-separator--background);\n z-index: 99;\n }\n\n .map-nav-sidebar-content {\n align-items: center;\n position: relative;\n overflow: auto;\n height: 100%;\n width: 100%;\n\n .map-nav-sidebar-static-content {\n @include text-h2;\n display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: $default-space;\n margin-right: $default-space;\n }\n }\n\n .map-nav-header {\n display: flex;\n position: relative;\n align-items: center;\n height: $appHeaderHeight;\n min-height: $appHeaderHeight;\n width: 100%;\n\n .map-nav-header-brand {\n background-color: var(--theme-map-navigation-background);\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n padding: 0 $default-space;\n\n --theme-app-header--color: var(--theme-map-navigation-header--color);\n --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n button {\n margin-left: $default-space;\n }\n }\n }\n\n .map-nav-header-content {\n display: flex;\n height: $appHeaderHeight;\n align-items: center;\n overflow: hidden;\n padding: 0 $default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n @include text-h2();\n\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n .content {\n display: block;\n flex-grow: 1;\n position: relative;\n height: 100%;\n overflow: hidden;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n }\n\n ::slotted(ix-menu) {\n position: absolute;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\n\n@Component({\n tag: 'ix-map-navigation',\n styleUrl: 'map-navigation.scss',\n shadow: true,\n})\nexport class MapNavigation {\n private static readonly defaultTime = 150;\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Navigation title\n /\n @Prop() navigationTitle: string;\n\n /\n Hide the sidebar context menu button when set to true\n /\n @Prop() hideContextMenu = true;\n\n /\n Navigation toggled\n /\n @Event() navigationToggled: EventEmitter<boolean>;\n\n /\n Context menu clicked\n /\n @Event() contextMenuClick: EventEmitter<void>;\n\n @State() isSidebarOpen = true;\n @State() hasContentHeader = false;\n\n get menu() {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get menuOverlay() {\n return this.hostElement.querySelector('ix-menu-overlay');\n }\n\n get mapNavMenu() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-menu');\n }\n\n get sidebar() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');\n }\n\n get overlay() {\n return this.hostElement.shadowRoot.querySelector('#overlay');\n }\n\n componentDidRender() {\n this.appendMenu();\n this.closeOverlay();\n }\n\n componentWillLoad() {\n useContextProvider(this.hostElement, ApplicationLayoutContext, {\n hideHeader: false,\n host: 'map-navigation',\n });\n }\n\n private appendMenu() {\n this.menu.addEventListener(\n 'mapExpandChange',\n (event: CustomEvent<boolean>) => {\n const state = !event.detail;\n this.toggleSidebar(state);\n }\n );\n this.menu.enableMapExpand = true;\n }\n\n /\n Change the visibility of the sidebar\n \n @param show new visibility state\n * @since 1.6.0\n /\n @Method()\n async toggleSidebar(show?: boolean) {\n if (show !== undefined) {\n this.isSidebarOpen = show;\n } else {\n this.isSidebarOpen = !this.isSidebarOpen;\n }\n\n if (this.isSidebarOpen) {\n this.openSidebar();\n } else {\n this.closeSidebar();\n }\n\n this.navigationToggled.emit(this.isSidebarOpen);\n this.menu.toggleMapExpand(this.isSidebarOpen);\n }\n\n private closeSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.sidebar.classList.add('d-none');\n },\n });\n }\n\n private openSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.sidebar.classList.remove('d-none');\n },\n });\n }\n\n /\n Open a overlay inside content area\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n \n @param name\n * @param component\n * @param icon\n * @param color\n /\n @Method()\n async openOverlay(\n name: string,\n component: HTMLElement,\n icon?: string,\n color?: string\n ) {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.overlay.classList.remove('d-none');\n },\n });\n\n const overlayInstance = document.createElement('ix-map-navigation-overlay');\n overlayInstance.setAttribute('color', color);\n overlayInstance.setAttribute('name', name);\n overlayInstance.setAttribute('icon', icon);\n overlayInstance.setAttribute('slot', 'overlay');\n overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n overlayInstance.appendChild(component);\n this.hostElement.appendChild(overlayInstance);\n }\n\n /\n Close current shown overlay\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n */\n @Method()\n async closeOverlay() {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('d-none');\n },\n });\n }\n\n private checkHasContentHeader(e: Event) {\n const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n flatten: true,\n });\n\n this.hasContentHeader = nodes?.length !== 0;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"menu\"></slot>\n <div class=\"map-nav\">\n <div class=\"map-nav-sidebar\">\n <div class=\"map-nav-header\">\n <ix-application-header\n name={this.applicationName}\n class=\"map-nav-header-brand\"\n >\n <slot slot=\"logo\" name=\"logo\"></slot>\n </ix-application-header>\n </div>\n <div class=\"map-nav-sidebar-content\">\n <div class=\"map-nav-sidebar-static-content\">\n <div class=\"map-nav-title\">{this.navigationTitle}</div>\n {this.hideContextMenu ? (\n ''\n ) : (\n <ix-icon-button\n icon={'context-menu'}\n ghost\n size=\"24\"\n variant=\"secondary\"\n onClick={(_) => this.contextMenuClick.emit()}\n ></ix-icon-button>\n )}\n </div>\n <div class=\"map-nav-sidebar-user-content\">\n <slot name=\"sidebar-content\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div\n class={{\n 'map-nav-header-content': true,\n 'bg-2': true,\n empty: !this.hasContentHeader,\n }}\n >\n <slot\n name=\"content-header\"\n onSlotchange={(e) => this.checkHasContentHeader(e)}\n ></slot>\n </div>\n <main>\n <slot></slot>\n <slot name=\"overlay\"></slot>\n </main>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-menu-about-item.js CHANGED Viewed

@@ -19,7 +19,7 @@ const MenuAboutItem = /*@__PURE__*/ proxyCustomElement(class MenuAboutItem exten
         });
     }
     render() {
-        return (h(Host, { key: 'db029b1d15d652d75c93dfc429bf154196d9b9aa' }, h("slot", { key: '8564c8182628fd41a29f5adc896d6482b5ce3ada' })));
+        return (h(Host, { key: '478f4d6f6a8ec55ee52c67efb01e381549bd3c1b' }, h("slot", { key: 'e6e2586c81e5350e3f5923a46dc31180145395b0' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/components/ix-menu-about-news.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './icon-button.js';
 import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './typography.js';
-const menuAboutNewsCss = ":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-2);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--theme-default-time);margin-inline-start:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}: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 .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-inline-start:4rem;margin-block-start:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-2);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}@media only screen and (max-width: 48em){:host{display:flex;flex-direction:column;max-height:calc(100vh - 4.75rem);width:calc(100% - 2rem);max-width:30rem;transform:translateX(calc(1rem - 50%));left:calc(50% - 1rem) !important;bottom:1rem !important;margin-inline:0 !important;z-index:calc(var(--theme-z-index-sticky) - 1)}:host .slot-container{overflow-y:auto}:host #arrow{display:none}}";
+const menuAboutNewsCss = ":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-2);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--theme-default-time);margin-inline-start:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}: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 .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-inline-start:4rem;margin-block-start:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-2);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}@media only screen and (max-width: 48em){:host{display:flex;flex-direction:column;max-height:calc(100vh - 4.75rem);width:calc(100% - 2rem);max-width:30rem;transform:translateX(calc(1rem - 50%));left:calc(50% - 1rem) !important;bottom:1rem !important;margin-inline:0 !important;z-index:calc(var(--theme-z-index-sticky) - 1)}:host .slot-container{overflow-y:auto}:host #arrow{display:none}}";
 const IxMenuAboutNewsStyle0 = menuAboutNewsCss;
 const MenuAboutNews = /*@__PURE__*/ proxyCustomElement(class MenuAboutNews extends HTMLElement {
@@ -22,16 +22,16 @@ const MenuAboutNews = /*@__PURE__*/ proxyCustomElement(class MenuAboutNews exten
         this.expanded = false;
     }
     render() {
-        return (h(Host, { key: '39cfad7d2abb6147661da57bc79b528040ea591d', class: {
+        return (h(Host, { key: 'e72ac7723dda40335ce444c89a10fe7cf7e18a13', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, h("div", { key: '6257ae03e7a15a1712ee5e89db3b0fb7c646d211', class: "banner-container" }, h("ix-icon", { key: 'f2bac5de5b7ec1f83fd93b7a523ed36efb262ec8', color: "color-inv-contrast-text", name: 'shout', size: "32" }), h("svg", { key: 'cac47b22376f5e4541fba3b08fcf6a9e2e6bc385', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '2bab22f0e230dfb4b90da92d2a09c5fc0c8aaf85', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: '36dabd8f389b71c803ed7e26fb5038811f10f43a', class: "cui-popover-news-header" }, h("ix-typography", { key: 'a82ebe9ebb3a0aee9fe276b37381475d326dfe92', variant: "default-title-single" }, this.label)), h("ix-icon-button", { key: '1b8e63ffaee5befe53c02e772d9f018e29bbf574', size: "24", icon: 'close', ghost: true, onClick: () => {
+            } }, h("div", { key: 'f81e024a5487aa56d769d57a75c3454ea85fceb8', class: "banner-container" }, h("ix-icon", { key: '57fc0976931753ed0aa86d076d49e9c86ba33e90', color: "color-inv-contrast-text", name: 'shout', size: "32" }), h("svg", { key: '92826358ba8acf0edda9a7b90f09afe70e501be4', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: 'b7b9098bab9b114cfe7746d0184e44e12eb254f5', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: '86afb9c05beaf21dbb766fd0d00f0b29087f370a', class: "cui-popover-news-header" }, h("ix-typography", { key: 'bc0727d2abefebba6867038bc18185c19cb5728c', variant: "default-title-single" }, this.label)), h("ix-icon-button", { key: '9074f0121ab9358127b20a9a45427c8d2eaa0047', size: "24", icon: 'close', ghost: true, onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), h("div", { key: '8c18be6b3e1c086c36f02031f2656d8d6122fe6b', class: "slot-container" }, h("slot", { key: '8d784c09bffab1c553c812ed08f4f38f27ab93db' })), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), h("div", { key: 'beb2523620e9ee7970dfa0a333cab2750c80c49c', class: "slot-container" }, h("slot", { key: 'c6f6561fd5be17d3a25b8f3be23f3906f3f10309' })), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {
                 this.show = false;
                 this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, h("div", { key: 'ff66eddc3cab62ee4dc48b2680f99e737cee31bf', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, h("div", { key: '1f7c1e0f90a0ab73f8492eed9cc94f4314622cb4', id: "arrow" })));
     }
     static get style() { return IxMenuAboutNewsStyle0; }
 }, [1, "ix-menu-about-news", {

package/components/ix-menu-about-news.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-menu-about-news.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,~~4kEAA4kE~~,CAAC;~~AACtmE~~,8BAAe,gBAAgB;;MCelB,aAAa;;;;;;;oBAIuB,KAAK;;4BAU7B,WAAW;;4BAUX,CAAC;wBAeL,KAAK;;IAExB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;aACjB,IAED,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,gEACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX,4DAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IACzD,gEAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF,EAEN,4DAAK,KAAK,EAAC,yBAAyB,IAClC,sEAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,KAAK,CACG,CACZ,EAEN,uEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,OAAO,EACb,KAAK,QACL,OAAO,EAAE;gBACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;aAC1B,GACe,EAClB,4DAAK,KAAK,EAAC,gBAAgB,IACzB,8DAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClB,WAAK,KAAK,EAAC,yBAAyB,IAClC,iBACE,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC;gBACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aACvB,IAEA,IAAI,CAAC,YAAY,CACR,CACR,IACJ,IAAI,EACR,4DAAK,EAAE,EAAC,OAAO,GAAO,CACjB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=shadow","src/components/menu-about-news/menu-about-news.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/break-points';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\n @include ix-component;\n\n --margin: 0.5rem;\n\n display: block;\n position: fixed;\n width: 20rem;\n height: auto;\n background-color: var(--theme-color-2);\n border-radius: $default-border-radius;\n padding: 1rem;\n left: $left;\n z-index: 10000;\n transition: left var(--theme-default-time);\n\n margin-inline-start: var(--margin) !important;\n\n @include box-shadow(4);\n\n .banner-container {\n position: absolute;\n top: 0.0625rem;\n left: $default-space;\n\n svg {\n position: absolute;\n height: 3.625rem;\n width: 3rem;\n\n polygon {\n fill: var(--theme-color-primary);\n }\n }\n\n ix-icon {\n margin: $small-space;\n position: absolute;\n z-index: 1;\n }\n }\n\n .cui-popover-news-header {\n margin-bottom: 2.5rem;\n margin-inline-start: 4rem;\n margin-block-start: -$tiny-space;\n }\n\n .popover-body {\n color: var(--theme-color-std-text);\n }\n\n .cui-popover-news-footer {\n display: flex;\n justify-content: flex-end;\n margin-top: 1rem;\n }\n\n ix-icon-button {\n top: $small-space;\n right: $small-space;\n position: absolute;\n }\n\n #arrow {\n position: absolute;\n width: 0.5rem;\n height: 0.5rem;\n background-color: var(--theme-color-2);\n transform: translateX(calc(var(--margin) -1 - 0.8rem)) rotateZ(45deg);\n }\n}\n\n:host(.expanded) {\n left: calc(#{$left} + 12.7rem);\n}\n\n:host(.show) {\n display: none;\n}\n\n@include media-breakpoint-match('sm') {\n :host {\n display: flex;\n flex-direction: column;\n max-height: calc(100vh - 4.75rem);\n width: calc(100% - 2rem);\n max-width: 30rem;\n transform: translateX(calc(1rem - 50%));\n left: calc(50% - 1rem) !important;\n bottom: 1rem !important;\n margin-inline: 0 !important;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n\n .slot-container {\n overflow-y: auto;\n }\n\n #arrow {\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-menu-about-news',\n styleUrl: 'menu-about-news.scss',\n shadow: true,\n})\nexport class MenuAboutNews {\n /\n Show about news\n /\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /\n Title of the about news\n /\n @Prop() label: string;\n\n /\n \n /\n @Prop() i18nShowMore = 'Show more';\n\n /\n Subtitle of the about news\n /\n @Prop() aboutItemLabel: string;\n\n /\n Bottom offset\n /\n @Prop() offsetBottom = 0;\n\n /\n Show More button is pressed\n /\n @Event() showMore: EventEmitter<MouseEvent>;\n\n /\n Popover closed\n /\n @Event() closePopover: EventEmitter<void>;\n\n /\n Internal\n */\n @Prop() expanded = false;\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n show: !this.show,\n }}\n >\n <div class=\"banner-container\">\n <ix-icon\n color=\"color-inv-contrast-text\"\n name={'shout'}\n size=\"32\"\n ></ix-icon>\n <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n </svg>\n </div>\n\n <div class=\"cui-popover-news-header\">\n <ix-typography variant=\"default-title-single\">\n {this.label}\n </ix-typography>\n </div>\n\n <ix-icon-button\n size=\"24\"\n icon={'close'}\n ghost\n onClick={() => {\n this.show = false;\n this.closePopover.emit();\n }}\n ></ix-icon-button>\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n {this.aboutItemLabel ? (\n <div class=\"cui-popover-news-footer\">\n <ix-button\n variant=\"primary\"\n onClick={(e) => {\n this.show = false;\n this.showMore.emit(e);\n }}\n >\n {this.i18nShowMore}\n </ix-button>\n </div>\n ) : null}\n <div id=\"arrow\"></div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-menu-about-news.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,wuEAAwuE,CAAC;AAClwE,8BAAe,gBAAgB;;MCelB,aAAa;;;;;;;oBAIuB,KAAK;;4BAU7B,WAAW;;4BAUX,CAAC;wBAeL,KAAK;;IAExB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;aACjB,IAED,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,gEACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX,4DAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IACzD,gEAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF,EAEN,4DAAK,KAAK,EAAC,yBAAyB,IAClC,sEAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,KAAK,CACG,CACZ,EAEN,uEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,OAAO,EACb,KAAK,QACL,OAAO,EAAE;gBACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;aAC1B,GACe,EAClB,4DAAK,KAAK,EAAC,gBAAgB,IACzB,8DAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClB,WAAK,KAAK,EAAC,yBAAyB,IAClC,iBACE,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC;gBACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aACvB,IAEA,IAAI,CAAC,YAAY,CACR,CACR,IACJ,IAAI,EACR,4DAAK,EAAE,EAAC,OAAO,GAAO,CACjB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=shadow","src/components/menu-about-news/menu-about-news.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/break-points';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\n @include ix-component;\n\n --margin: 0.5rem;\n\n display: block;\n position: fixed;\n width: 20rem;\n height: auto;\n background-color: var(--theme-color-2);\n border-radius: $default-border-radius;\n padding: 1rem;\n left: $left;\n z-index: 10000;\n transition: left var(--theme-default-time);\n\n margin-inline-start: var(--margin) !important;\n\n @include box-shadow(4);\n\n .banner-container {\n position: absolute;\n top: 0.0625rem;\n left: $default-space;\n\n svg {\n position: absolute;\n height: 3.625rem;\n width: 3rem;\n\n polygon {\n fill: var(--theme-color-primary);\n }\n }\n\n ix-icon {\n margin: $small-space;\n position: absolute;\n z-index: 1;\n }\n }\n\n .cui-popover-news-header {\n margin-bottom: 2.5rem;\n margin-inline-start: 4rem;\n margin-block-start: -$tiny-space;\n }\n\n .popover-body {\n color: var(--theme-color-std-text);\n }\n\n .cui-popover-news-footer {\n display: flex;\n justify-content: flex-end;\n margin-top: 1rem;\n }\n\n ix-icon-button {\n top: $small-space;\n right: $small-space;\n position: absolute;\n }\n\n #arrow {\n position: absolute;\n width: 0.5rem;\n height: 0.5rem;\n background-color: var(--theme-color-2);\n transform: translateX(calc(var(--margin) -1 - 0.8rem)) rotateZ(45deg);\n }\n}\n\n:host(.expanded) {\n left: calc(#{$left} + 12.7rem);\n}\n\n:host(.show) {\n display: none;\n}\n\n@include media-breakpoint-match('sm') {\n :host {\n display: flex;\n flex-direction: column;\n max-height: calc(100vh - 4.75rem);\n width: calc(100% - 2rem);\n max-width: 30rem;\n transform: translateX(calc(1rem - 50%));\n left: calc(50% - 1rem) !important;\n bottom: 1rem !important;\n margin-inline: 0 !important;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n\n .slot-container {\n overflow-y: auto;\n }\n\n #arrow {\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-menu-about-news',\n styleUrl: 'menu-about-news.scss',\n shadow: true,\n})\nexport class MenuAboutNews {\n /\n Show about news\n /\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /\n Title of the about news\n /\n @Prop() label: string;\n\n /\n \n /\n @Prop() i18nShowMore = 'Show more';\n\n /\n Subtitle of the about news\n /\n @Prop() aboutItemLabel: string;\n\n /\n Bottom offset\n /\n @Prop() offsetBottom = 0;\n\n /\n Show More button is pressed\n /\n @Event() showMore: EventEmitter<MouseEvent>;\n\n /\n Popover closed\n /\n @Event() closePopover: EventEmitter<void>;\n\n /\n Internal\n */\n @Prop() expanded = false;\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n show: !this.show,\n }}\n >\n <div class=\"banner-container\">\n <ix-icon\n color=\"color-inv-contrast-text\"\n name={'shout'}\n size=\"32\"\n ></ix-icon>\n <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n </svg>\n </div>\n\n <div class=\"cui-popover-news-header\">\n <ix-typography variant=\"default-title-single\">\n {this.label}\n </ix-typography>\n </div>\n\n <ix-icon-button\n size=\"24\"\n icon={'close'}\n ghost\n onClick={() => {\n this.show = false;\n this.closePopover.emit();\n }}\n ></ix-icon-button>\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n {this.aboutItemLabel ? (\n <div class=\"cui-popover-news-footer\">\n <ix-button\n variant=\"primary\"\n onClick={(e) => {\n this.show = false;\n this.showMore.emit(e);\n }}\n >\n {this.i18nShowMore}\n </ix-button>\n </div>\n ) : null}\n <div id=\"arrow\"></div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-menu-about.js CHANGED Viewed

@@ -29,7 +29,7 @@ const MenuAbout = /*@__PURE__*/ proxyCustomElement(class MenuAbout extends HTMLE
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: 'dc8ff17b6bee972f3ed647d700db41cad0125aa1', context: this });
+        return h(MenuTabs, { key: '5941708ae679dfcdade09d02de399d2c910af7ce', context: this });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ix-menu-avatar.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './menu-avatar-item.js';
 import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './typography.js';
-const menuAvatarCss = ":host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:var(--theme-default-time);border-radius:1.25rem}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{color:var(--theme-nav-item-primary--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):active,:host .avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}:host .avatar:focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
+const menuAvatarCss = ":host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:var(--theme-default-time);border-radius:1.25rem}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{color:var(--theme-nav-item-primary--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):active,:host .avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}:host .avatar:focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
 const IxMenuAvatarStyle0 = menuAvatarCss;
 const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class MenuAvatar extends HTMLElement {
@@ -35,9 +35,9 @@ const MenuAvatar = /*@__PURE__*/ proxyCustomElement(class MenuAvatar extends HTM
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (h(Host, { key: '5ce6a18ce0ad5abe546f26eb0792ae9277ee3330', slot: "ix-menu-avatar" }, h("button", { key: '1b3da5028c32b38c396aab0e4122772be4b10ae4', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '237e2b1841f7070bfb11ef83a72e8d427fbf1316', image: this.image, initials: this.initials }), h("div", { key: 'e1091468ca746a3e471b83ee1f3337d8cfe2baf6', class: "avatar-name" }, h("span", { key: '63e8130a4b5f15a35b4d3eac2f3bcaea30243c28', class: "text-default-single", title: this.top }, this.top), h("span", { key: '378fe56221b406bf0846304938b8ca122ac626cc', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: 'dd7e541e91c15b4d1c309d01ed75666f5cdb61fa', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
+        return (h(Host, { key: 'c0bf7a8b08fa5ca6215927f31a37899b06f378b7', slot: "ix-menu-avatar" }, h("button", { key: '652165040f7513436f4f16da45a0c23d81741f21', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '1c36b127ec8b586838ee935f497cc501e466e290', image: this.image, initials: this.initials }), h("div", { key: '925a5ceb643e1dcfb4df41c54e82e90ef2704f9f', class: "avatar-name" }, h("span", { key: 'd69ad21049f466ab330685d40ec91f89dbf09ef6', class: "text-default-single", title: this.top }, this.top), h("span", { key: 'd6e2ac3206009bdb9a240160581ff7040e546bfa', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: '9035fa897fd81532a8cf6243227bc22cc3fc6e5a', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
                 mainAxis: 16,
-            } }, h("slot", { key: '671b121c9b7313526fa3ab075cb0cafaacf67503', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
+            } }, h("slot", { key: 'ee24ee2c00901133625c602a1663d4dc962006d9', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
                 this.logoutClick.emit(e);
             } })) : null)));
     }

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

	@@ -1 +1 @@
1	- {"file":"ix-menu-avatar.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,~~muDAAmuD,~~CAAC;~~AAC1vD~~,2BAAe,aAAa;;MCwBf,UAAU;;;;;;QAiDb,oBAAe,GAAG,mBAAmB,CAAC;;;;;0BAnBjB,QAAQ;gCAMD,IAAI;+BAMJ,KAAK;;IASzC,YAAY;QACV,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;KAC9C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB,IACzB,+DACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,IAEX,kEAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc,EAEnE,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ,EACP,6DAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,oEACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EACvD,MAAM,EAAE;gBACN,QAAQ,EAAE,EAAE;aACb,IAED,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,EACrD,IAAI,CAAC,gBAAgB,IACpB,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,CAAC,CAAC;gBACT,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aAC1B,GACoB,IACrB,IAAI,CACI,CACT,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n margin-bottom: 0.5rem;\n margin-right: 0.75rem;\n\n .avatar {\n all: unset;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n height: 2.5rem;\n width: 100%;\n max-height: 2.5rem;\n padding-left: 0.25rem;\n margin-left: 0.41rem;\n margin-right: 0.35rem;\n transition: var(--theme-default-time);\n\n .avatar-name {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n white-space: nowrap;\n margin-left: $default-space;\n line-height: 1.14;\n\n .text-default-single {\n color: var(--theme-nav-item-primary--color);\n @include ellipsis;\n }\n }\n\n border-radius: 1.25rem;\n\n @include hover {\n background-color: var(--theme-avatar-btn--background--hover);\n color: var(--theme-avatar-btn--color--hover);\n }\n\n @include active {\n background-color: var(--theme-avatar-btn--background--active);\n color: var(--theme-avatar-btn--color--active);\n }\n }\n\n .avatar:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top: string;\n\n /\n Second line of text\n /\n @Prop() bottom: string;\n\n /\n Display a avatar image\n \n @since 1.4.0\n /\n @Prop() image: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n \n @since 1.4.0\n /\n @Prop() initials: string;\n\n /\n Use for translation\n /\n @Prop() i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n * @since 2.1.0\n /\n @Prop() showLogoutButton: boolean = true;\n\n /\n Control the visibility of the dropdown menu\n * @since 2.1.0\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n title={this.top}\n id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\" title={this.top}>\n {this.top}\n </span>\n <span class=\"text-default-single\" title={this.bottom}>\n {this.bottom}\n </span>\n </div>\n </button>\n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && !this.showLogoutButton}\n offset={{\n mainAxis: 16,\n }}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {this.showLogoutButton ? (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={'log-out'}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n ) : null}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-menu-avatar.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,+3DAA+3D,CAAC;AACt5D,2BAAe,aAAa;;MCwBf,UAAU;;;;;;QAiDb,oBAAe,GAAG,mBAAmB,CAAC;;;;;0BAnBjB,QAAQ;gCAMD,IAAI;+BAMJ,KAAK;;IASzC,YAAY;QACV,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;KAC9C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB,IACzB,+DACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,IAEX,kEAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc,EAEnE,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ,EACP,6DAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,oEACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EACvD,MAAM,EAAE;gBACN,QAAQ,EAAE,EAAE;aACb,IAED,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,EACrD,IAAI,CAAC,gBAAgB,IACpB,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,CAAC,CAAC;gBACT,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aAC1B,GACoB,IACrB,IAAI,CACI,CACT,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n margin-bottom: 0.5rem;\n margin-right: 0.75rem;\n\n .avatar {\n all: unset;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n height: 2.5rem;\n width: 100%;\n max-height: 2.5rem;\n padding-left: 0.25rem;\n margin-left: 0.41rem;\n margin-right: 0.35rem;\n transition: var(--theme-default-time);\n\n .avatar-name {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n white-space: nowrap;\n margin-left: $default-space;\n line-height: 1.14;\n\n .text-default-single {\n color: var(--theme-nav-item-primary--color);\n @include ellipsis;\n }\n }\n\n border-radius: 1.25rem;\n\n @include hover {\n background-color: var(--theme-avatar-btn--background--hover);\n color: var(--theme-avatar-btn--color--hover);\n }\n\n @include active {\n background-color: var(--theme-avatar-btn--background--active);\n color: var(--theme-avatar-btn--color--active);\n }\n }\n\n .avatar:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top: string;\n\n /\n Second line of text\n /\n @Prop() bottom: string;\n\n /\n Display a avatar image\n \n @since 1.4.0\n /\n @Prop() image: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n \n @since 1.4.0\n /\n @Prop() initials: string;\n\n /\n Use for translation\n /\n @Prop() i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n * @since 2.1.0\n /\n @Prop() showLogoutButton: boolean = true;\n\n /\n Control the visibility of the dropdown menu\n * @since 2.1.0\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n title={this.top}\n id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\" title={this.top}>\n {this.top}\n </span>\n <span class=\"text-default-single\" title={this.bottom}>\n {this.bottom}\n </span>\n </div>\n </button>\n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && !this.showLogoutButton}\n offset={{\n mainAxis: 16,\n }}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {this.showLogoutButton ? (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={'log-out'}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n ) : null}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-menu-category.js CHANGED Viewed

@@ -39,7 +39,7 @@ function createEnterLeaveDebounce(enterCallback, leaveCallback, { debounceTimeEn
     };
 }
-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 menuCategoryCss = ":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";
 const IxMenuCategoryStyle0 = menuCategoryCss;
 const DefaultIxMenuItemHeight = 40;
@@ -171,7 +171,7 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
         }
     }
     render() {
-        return (h(Host, { key: 'e62e654ac84f229e1f669a732c051d96848c730d', class: {
+        return (h(Host, { key: '681e9563ade090a5f59a8606430fbe74ff4b52de', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -180,14 +180,14 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: 'f64066062bdd83ee3c49228d04877fbe78eb15ce', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '89f722bf950f5428e5b090e14a1ea68be2a27536', class: "category" }, h("div", { key: 'd72fc532b76d2807a3fad5a54e5243dc712383b6', class: "category-text" }, this.label), h("ix-icon", { key: '080cfeb2201ce391ca621fdb1b1bc3b5bfbbe6bb', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: 'ead1226ec1a66cd1ead3dec9eb441217d35f591a', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: 'e55a7ac1bc8b58f74628421fd57b9c058674354d', class: "category" }, h("div", { key: 'b9b5bbabb34aba6573aa53b9fdc6406b63cc2fda', class: "category-text" }, this.label), h("ix-icon", { key: '1589ca98c29d171e4e2989717de92f91f1f51e03', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: '5f59b31543e5f71fb188a1b6e952e732ef1c3db4', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: '9e50abc7e68efd6d85433a61e9a5705161ac18f8', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '9d7cdb7ce906a6d2cbeeac5e3d71dc0c49cf1327', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '5379605872925ea9ed286785a3608e69a6ac2449', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -196,8 +196,11 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
                     if (e.target.tagName === 'IX-MENU-ITEM') {
                         this.showDropdown = false;
                     }
+                    else {
+                        e.preventDefault();
+                    }
                 }
-            } }, h("ix-dropdown-item", { key: 'f8d2ec34a4602f977802808e23c3ebc811d2d0ce', class: 'category-dropdown-header' }, h("ix-typography", { key: '1f6fea32ef8b6786cdd35285e44e9715c7622ad9', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: 'f868a430532498205b95c76addc1c3ef2f5ff239' }), h("slot", { key: 'ba6dd154693ae5040fdadf4c92d4d10e5dc79d2b' }))));
+            } }, h("ix-dropdown-item", { key: '4148ecc61c2cc0654981ac29bc4ef24b405ce726', class: 'category-dropdown-header' }, h("ix-typography", { key: '498b96071905c7db9a536d1b5bde61741db8e87d', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: 'b28dfc32a3c13f311b82d280d9d51cf88ddca175' }), h("slot", { key: '026b92bb6023bafe757f237e492f5d8ad309f57b' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxMenuCategoryStyle0; }