npm - @siemens/ix - Versions diffs - 0.0.0-pr-2155-20250924075220 → 0.0.0-pr-2166-20251001083917 - Mend

@siemens/ix 0.0.0-pr-2155-20250924075220 → 0.0.0-pr-2166-20251001083917

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 (786) hide show

package/dist/esm/ix-kpi.entry.js CHANGED Viewed

@@ -33,13 +33,13 @@ const Kpi = class {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: 'f606b08119be0b32663efe2f51749fe88cb25608', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: 'c92079fec06e7de58750cf213462277436bfc16c', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '2b7f2b65007d825f76b2380b25a81afe697fdcbf', class: {
+            } }, h("div", { key: '19b03ae1e57f933d5a56d59765a3c86bebfc572d', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '6241807a1c2497e3ed4ad6f498cd5c64c5b84185', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'fcd050a162b9c3ac9a80abf54c3fe9000d9d2a8d', class: "kpi-label-text" }, this.label)), h("span", { key: 'e0b0f5ce921c7579dc6f947c8129f1eec8377cc5', class: "kpi-value-container" }, h("span", { key: '449f3de71bb4ee0b6a058f0fe8205aa06654dbc1', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: '57ffff6b93d07c51e702f69e0665abe6794d9fe8', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '2ddcf14874f47d3fb7446618b5635f3e0441dd52', class: "kpi-label-text" }, this.label)), h("span", { key: '58c8ed8685d39049736c17efd4cf8a9f853de9ce', class: "kpi-value-container" }, h("span", { key: 'f3bce025fee07f36d4a8edae7b4d460c4da8d69b', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
 };
 Kpi.style = kpiCss;

package/dist/esm/ix-layout-auto.entry.js CHANGED Viewed

@@ -76,7 +76,7 @@ const LayoutForm = class {
         });
     }
     render() {
-        return (h(Host, { key: 'f29e16a0be5c5d3751bbe6cffc35a8b33bd69075' }, h("div", { key: '2eeb15c4fe4d5b09cce40faef29502367eb576a5', class: "container" }, h("slot", { key: 'b13b8c6a610d0d9fff987d48f6bc1810af1b7390' }))));
+        return (h(Host, { key: '75ef49e33c43dea4b070df9529402dfa5843b202' }, h("div", { key: '2a2916b18cd39cd9edd2ae4381544f9d45637401', class: "container" }, h("slot", { key: '0a955e698e61273942795538527a865be6fd6e71' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-link-button.entry.js CHANGED Viewed

@@ -18,13 +18,13 @@ const LinkButton = class {
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: '7f1fbbb36784bd6a5792da9ea48cc6e9c6aa5332' }, h("a", { key: 'ffd97898fd1e720f6431e0f2405b3c23d765e0c6', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '02d318962866d9b26c47c0229ba2a6c87851c56e' }, h("a", { key: 'cabe9f6ced43a4ec4efdfb386d60fe4779c3cd1b', 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: '9980af21cb250d099f2ba0ddd543d4934a6d0eb6', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '347fdc85236282e3b93b8215de0269dd4993a2f2', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'af54ed0919ac9891729f789f4027021af6aa440f', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '31a4c7de092658ddf5eb2b18f081f1fcc18eec85', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '79348eda083a81187f79e3a1c043982ae93c97a9' })))));
+            } }, h("slot", { key: '50126a934c69cc5e5c7da46f55177431d6cc29ff' })))));
     }
 };
 LinkButton.style = linkButtonCss;

package/dist/esm/ix-map-navigation-overlay.entry.js CHANGED Viewed

@@ -36,14 +36,14 @@ const MapNavigationOverlay = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'c7a50abb3513fe85c2b49cacb0ad9db139eeff61' }, h("div", { key: '877867feede603c1eb0977ceebe8c1efa8c223c4', class: "overlay-header" }, h("div", { key: 'c85cd0ce6dc09266d331e7100235fe6469598d5a', class: {
+        return (h(Host, { key: '20be4d9ca5276f987e368ae76e0e384d6de8d518' }, h("div", { key: '92c142906a8bc62a66122e9bb7edb77580177d9f', class: "overlay-header" }, h("div", { key: '9d114426224b86e403269b67581e69ce6d42b806', class: {
                 'color-indicator': true,
                 'display-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), h("div", { key: '7b8a70dc3272d2c7a5a522accbafe58f330f1f30', class: "overlay-header-content" }, h("ix-icon", { key: '4ec9d2689d01d79468bbeb1e395873264f8e14e0', size: "32", name: this.icon, "aria-label": this.ariaLabelIcon }), h("span", { key: 'f0db6769dc5b3172f1196f1fbf8fe4b6210514d4', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: '9c75f3ae0f263c2002c6e7e46e46b8379e7d63d1', class: "overlay-close", variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", size: "24", onClick: () => this.closeOverlay(), "aria-label": this.ariaLabelCloseIconButton })), h("slot", { key: 'd5c0fd5b40a7e33462e0f5aa2e1e491176583ae3' })));
+            } }), h("div", { key: 'd2ec51d25d995c1ffa97d95ebf2fb1b1c0bfdb43', class: "overlay-header-content" }, h("ix-icon", { key: 'f3a60357a1c4faf8cf56748ebb42c9f6d8d143bc', size: "32", name: this.icon, "aria-label": this.ariaLabelIcon }), h("span", { key: '17cac790ed7f83c03d62676288ec2c48b5a892e9', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: '220c6324fe86b2039a14f29a72f3de32bcde06bb', class: "overlay-close", variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", size: "24", onClick: () => this.closeOverlay(), "aria-label": this.ariaLabelCloseIconButton })), h("slot", { key: '8e6ebd5c85b618bda20ecaeaf5d5501082673a12' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-map-navigation.entry.js CHANGED Viewed

@@ -14,6 +14,7 @@ const MapNavigation = class {
         /**
          * Hide the sidebar context menu button when set to true
          */
+        // eslint-disable-next-line @stencil-community/ban-default-true
         this.hideContextMenu = true;
         this.isSidebarOpen = true;
         this.hasContentHeader = false;
@@ -150,11 +151,11 @@ const MapNavigation = class {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (h(Host, { key: '5e7b81e33095916809c72c77c58a0e9561e3eadc' }, h("slot", { key: '6355eae609a9b40444e3af3f6ff344c657941eeb', name: "menu" }), h("div", { key: '3b22b95b4816ed75f6eb186378be9dd025b9a8b0', class: "map-nav" }, h("div", { key: 'dfe48e307748f1ec3115284f58a2f7e6eba704a9', class: "map-nav-sidebar" }, h("div", { key: '330712680eaf25821f7f9819d2b07d1fee4f9077', class: "map-nav-header" }, h("ix-application-header", { key: 'ac1b29fd7c20ef689b4ce2b41f1188444d492ecb', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'a01977d24404f8db7e750e8cd61af5461183bf09', slot: "logo", name: "logo" }))), h("div", { key: '409bf4a73f9c24cf7267380ce0bec7e91c51564e', class: "map-nav-sidebar-content" }, h("div", { key: '26b2020c1f215665c7b40c2f81baf4d42620a482', class: "map-nav-sidebar-static-content" }, h("div", { key: '265a149ce8f4f2502e45149a88159766556c37d3', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: iconContextMenu, size: "24", variant: "subtle-primary", onClick: (_) => this.contextMenuClick.emit(), "aria-label": this.ariaLabelContextIconButton }))), h("div", { key: '2824fecae7636c4a68ab90dc06b0274afc031602', class: "map-nav-sidebar-user-content" }, h("slot", { key: '1ef670f8310c5c3804c5eac3dc4d601898bf244d', name: "sidebar-content" })))), h("div", { key: 'a383691fe6515768ef643ea8c69012d30c3b9d9b', class: "content" }, h("div", { key: '9c2dee41f6fd805e31c0f555347a24f3e9f393b2', class: {
+        return (h(Host, { key: 'ee355f2c6943155181eb42c9340afbbfb23c5256' }, h("slot", { key: '0e634f2140aa3b139b883519285c29f107cc55d2', name: "menu" }), h("div", { key: 'c282e8ce53748ec98a0e78c1e2c9c74566485f6a', class: "map-nav" }, h("div", { key: '2714ae8cff89e4336988e6aeb43f5e9743c16cda', class: "map-nav-sidebar" }, h("div", { key: '5f0052944113e935a166eecc5490106166ccde5a', class: "map-nav-header" }, h("ix-application-header", { key: '41eb644bd30d2f6431fea2871ef4c1200d673f12', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: '6019099822cf9547258db6509af5dbabf771c80c', slot: "logo", name: "logo" }))), h("div", { key: 'a41cf1fd5570cd449840ec29c51b9a214a7fc1ee', class: "map-nav-sidebar-content" }, h("div", { key: '8d31a6f87137144dce9f038c6af57935ad0b361d', class: "map-nav-sidebar-static-content" }, h("div", { key: 'f08e9ece40573dcc2c7e2ffd3d7960f7cafda9ce', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: iconContextMenu, size: "24", variant: "subtle-primary", onClick: () => this.contextMenuClick.emit(), "aria-label": this.ariaLabelContextIconButton }))), h("div", { key: '0a44ecc9fc7d2eaf47a0ab030c29937ef984ec91', class: "map-nav-sidebar-user-content" }, h("slot", { key: '8520ed8e55ffcd3dfd6f091b686d60844de812d1', name: "sidebar-content" })))), h("div", { key: 'de99d37f59d097a73cbe51560582304410551cbb', class: "content" }, h("div", { key: '87874873f41bf080f62b06fa649eef0f73905da2', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, h("slot", { key: 'f7136c106397b3e0df52c4b3a14b5dfddf73f793', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: 'ca7e27826c15a419d9803cf99d67587f26a1d6a0' }, h("slot", { key: '7083d7482930fc674efe735972268b4eb14dd7d8' }), h("slot", { key: 'a94b1a95f2941fec540bd63c97b23b261688c0ba', name: "overlay" }))))));
+            } }, h("slot", { key: '43dae1efd68fe7838af56d068897d46306517dce', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '9abeda56b56db433715cd500730f0594d9a39ad3' }, h("slot", { key: 'f084c2e9cf4b23220bae1d5fdb078905922bc491' }), h("slot", { key: '797eff659abf7cadd47d9cdc9d73e451fe7add56', name: "overlay" }))))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-map-navigation.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-map-navigation.entry.js","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@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\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 @include component.ix-component;\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 &.display-none {\n display: none;\n }\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 display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: vars.$default-space;\n margin-right: vars.$default-space;\n\n @include fonts.text-h2;\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\n padding-left: vars.$default-space;\n padding-right: vars.$default-space;\n padding-bottom: 0.625rem;\n height: 100%;\n width: 100%;\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: vars.$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 vars.$default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n\n @include fonts.text-h2();\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 { animate } from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\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 ARIA label for the context menu icon button\n * Will be set for the native HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelContextIconButton?: string;\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 /\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 animate(this.sidebar, {\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n onComplete: () => {\n this.sidebar.classList.add('display-none');\n },\n });\n }\n\n private openSidebar() {\n animate(this.sidebar, {\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n onBegin: () => {\n this.sidebar.classList.remove('display-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 animate(this.overlay, {\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n onBegin: () => {\n this.overlay.classList.remove('display-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 animate(this.overlay, {\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n onComplete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('display-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={iconContextMenu}\n size=\"24\"\n variant=\"subtle-primary\"\n onClick={(_) => this.contextMenuClick.emit()}\n aria-label={this.ariaLabelContextIconButton}\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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-map-navigation.entry.js","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@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\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 @include component.ix-component;\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 &.display-none {\n display: none;\n }\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 display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: vars.$default-space;\n margin-right: vars.$default-space;\n\n @include fonts.text-h2;\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\n padding-left: vars.$default-space;\n padding-right: vars.$default-space;\n padding-bottom: 0.625rem;\n height: 100%;\n width: 100%;\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: vars.$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 vars.$default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n\n @include fonts.text-h2();\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 { animate } from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\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 // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() hideContextMenu = true;\n\n /\n ARIA label for the context menu icon button\n * Will be set for the native HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelContextIconButton?: string;\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 /\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 animate(this.sidebar, {\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n onComplete: () => {\n this.sidebar.classList.add('display-none');\n },\n });\n }\n\n private openSidebar() {\n animate(this.sidebar, {\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n onBegin: () => {\n this.sidebar.classList.remove('display-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 animate(this.overlay, {\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n onBegin: () => {\n this.overlay.classList.remove('display-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 animate(this.overlay, {\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n onComplete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('display-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={iconContextMenu}\n size=\"24\"\n variant=\"subtle-primary\"\n onClick={() => this.contextMenuClick.emit()}\n aria-label={this.ariaLabelContextIconButton}\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"],"names":[],"mappings":"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"}

package/dist/esm/ix-menu-about-item.entry.js CHANGED Viewed

@@ -15,7 +15,7 @@ const MenuAboutItem = class {
         });
     }
     render() {
-        return (h(Host, { key: 'd7fbd6d3eb9261ae581a3fc6aa0d4547835856b0' }, h("slot", { key: '7032262b6fd0d7e86f5d290596e3dce0880b10b4' })));
+        return (h(Host, { key: 'e38ae328fe99752b11b3ad3d7e4b8e550bb6297a' }, h("slot", { key: '3878bda15892fcfe137f685743599df2d049b9e8' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/dist/esm/ix-menu-about-news.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const MenuAboutNews = class {
          */
         this.show = false;
         /**
-         *
+         * i18n label for 'Show more' button
          */
         this.i18nShowMore = 'Show more';
         /**
@@ -24,16 +24,16 @@ const MenuAboutNews = class {
         this.expanded = false;
     }
     render() {
-        return (h(Host, { key: '7df5ab3340c00fa42ac34c72360d83d78accdc9a', class: {
+        return (h(Host, { key: '6f2eec672b3e8702c1d8f627d6205952fe3bf6b9', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, h("div", { key: '9ab98af5bf69c5815bef3ac1ae426f0b571b8010', class: "banner-container" }, h("ix-icon", { key: 'e319d5fb4d5dd873ddafe4e829d7c73dd7c91216', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: '95199144fb82aeeae3b4b8794d013a777a9428ab', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '29f72de3e8b75d51b460f4599efe0d6cbda37f71', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: 'a3ed5484d79a81e92aa195d5a82f89c90c3b016a', class: "cui-popover-news-header" }, h("ix-typography", { key: 'a76614c32f808cc2478dff9dc039f65989e79f17', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: '0ed45db2c8139ba583de5baeb1fbdac269868780', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, h("div", { key: 'e21d67de0af189e3a972e2bbdd92cb8397ef9474', class: "banner-container" }, h("ix-icon", { key: 'd5fc587e1d461d2e10b59f18b5445b5d0b5903de', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: '15f4391c50619871d7486c14254cf98a2c3b761e', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: 'd9039e1fc57bcc388cef43a73d143ee3fb56e49c', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: '193dd70d01f33252f16a445885d51c2ddc31ff3b', class: "cui-popover-news-header" }, h("ix-typography", { key: '7e3a817ac6f5acad1f247ef2245f2ed6e355e7b1', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: 'f1efe1cf1d70513f0e6ea74ee9da9e446a7f3df0', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), h("div", { key: '042579220701ff85da8abb261ef1ed10af14ffea', class: "slot-container" }, h("slot", { key: '1796ef2a9725cc6ebb49ff08f32d37d0a1bcc004' })), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), h("div", { key: 'c99b7f3e62a9f901859e7bc8bf96dc8c3eb64f7b', class: "slot-container" }, h("slot", { key: 'bcdae55901e855ef9f60440bfef352720532c1c4' })), 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: '4712eab9126ac4f905d93a4fc8025343971fc13f', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, h("div", { key: 'b0dc0fa5d4eb5cd1469e037ab322c0eda0794ed5', id: "arrow" })));
     }
 };
 MenuAboutNews.style = menuAboutNewsCss;

package/dist/esm/ix-menu-about-news.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-menu-about-news.entry.js","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@use './common-variables' as vars;\n@use 'mixins/break-points';\n@use 'mixins/shadows';\n@use 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\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: vars.$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 shadows.box-shadow(4);\n @include component.ix-component;\n\n .banner-container {\n position: absolute;\n top: 0.0625rem;\n left: vars.$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: vars.$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: -(vars.$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: vars.$small-space;\n right: vars.$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 break-points.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 { iconClose, iconShout } from '@siemens/ix-icons/icons';\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 /* @internal */\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={iconShout}\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 format=\"label\" bold>\n {this.label}\n </ix-typography>\n </div>\n\n <ix-icon-button\n size=\"24\"\n icon={iconClose}\n iconColor=\"color-soft-text\"\n variant=\"tertiary\"\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"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,owEAAowE;;MCiBhxE,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAME;;AAEG;AACqC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAOpD;;AAEG;~~AACK~~,QAAA,IAAY,CAAA,YAAA,GAAG,WAAW;~~AAOlC~~;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,CAAC;;AAahB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAyDzB;IAvDC,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;AACjB,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,EACA,CAAA,EACX,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACzD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,MAAM,EAAC,2BAA2B,EAAA,CAAG,CAC1C,CACF,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,OAAO,EAAC,IAAI,UAC/B,IAAI,CAAC,KAAK,CACG,CACZ,EAEN,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,SAAS,EACf,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,aAAC,EACe,CAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClC,CACE,CAAA,WAAA,EAAA,EAAA,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,aAAC,EAAA,EAEA,IAAI,CAAC,YAAY,CACR,CACR,IACJ,IAAI,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,OAAO,EAAO,CAAA,CACjB;;;;;;;"}
1	+ {"version":3,"file":"ix-menu-about-news.entry.js","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@use './common-variables' as vars;\n@use 'mixins/break-points';\n@use 'mixins/shadows';\n@use 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\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: vars.$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 shadows.box-shadow(4);\n @include component.ix-component;\n\n .banner-container {\n position: absolute;\n top: 0.0625rem;\n left: vars.$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: vars.$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: -(vars.$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: vars.$small-space;\n right: vars.$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 break-points.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 { iconClose, iconShout } from '@siemens/ix-icons/icons';\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 i18n label for 'Show more' button\n /\n @Prop({ attribute: 'i18n-show-more' }) 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 /* @internal */\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={iconShout}\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 format=\"label\" bold>\n {this.label}\n </ix-typography>\n </div>\n\n <ix-icon-button\n size=\"24\"\n icon={iconClose}\n iconColor=\"color-soft-text\"\n variant=\"tertiary\"\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"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,owEAAowE;;MCiBhxE,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAME;;AAEG;AACqC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAOpD;;AAEG;AACoC,QAAA,IAAY,CAAA,YAAA,GAAG,WAAW;AAOjE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,CAAC;;AAahB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAyDzB;IAvDC,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;AACjB,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,EACA,CAAA,EACX,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACzD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,MAAM,EAAC,2BAA2B,EAAA,CAAG,CAC1C,CACF,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,OAAO,EAAC,IAAI,UAC/B,IAAI,CAAC,KAAK,CACG,CACZ,EAEN,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,SAAS,EACf,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,aAAC,EACe,CAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClC,CACE,CAAA,WAAA,EAAA,EAAA,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,aAAC,EAAA,EAEA,IAAI,CAAC,YAAY,CACR,CACR,IACJ,IAAI,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,OAAO,EAAO,CAAA,CACjB;;;;;;;"}

package/dist/esm/ix-menu-avatar.entry.js CHANGED Viewed

@@ -9,13 +9,13 @@ const MenuAvatar = class {
         registerInstance(this, hostRef);
         this.logoutClick = createEvent(this, "logoutClick", 7);
         /**
-         * Use for translation
+         * i18n label for 'Logout' button
          */
         this.i18nLogout = 'Logout';
         /**
          *  Control the visibility of the logout button
          */
-        this.showLogoutButton = true;
+        this.hideLogoutButton = false;
         /**
          * Control the visibility of the dropdown menu
          */
@@ -31,11 +31,11 @@ const MenuAvatar = class {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (h(Host, { key: '274bebdedd85a2c9feb0002082f746024042a42b', slot: "ix-menu-avatar" }, h("button", { key: '3f083f2a06e92bf86e2abbbb96873fb6d833fffb', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '837037ddca3c761d0caffd14d6733f3cbbb6df3b', image: this.image, initials: this.initials }), h("div", { key: 'f49101f720b27dcabc07e867b046efdac49d02f3', class: "avatar-name" }, h("span", { key: '239790ee603d680501fc74a8b4a8cea2b5d6e34c', class: "text-default-single", title: this.top }, this.top), h("span", { key: '181e0e90ce4165e5ce0a8cfd4f308dcb9b8e3ecf', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: 'a27321ca3d249d34e3b0e16c12ecfd2f909f09a2', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
+        return (h(Host, { key: 'fddc6780cf6971c418d8f4130919454442d0e85f', slot: "ix-menu-avatar" }, h("button", { key: '485f3d780b964d7d763918c85e40ea6e799aa76c', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '8a76b568896130da5b2b041eb95b8c8e1aab72b0', image: this.image, initials: this.initials }), h("div", { key: '15bc4999c8f6f04be7b43747c5b787c873780d13', class: "avatar-name" }, h("span", { key: '70a70e6d7e2b26c5a4a0d3e8d01a118a5b849e15', class: "text-default-single", title: this.top }, this.top), h("span", { key: '4281b01cdf8aa1bdc2a62268a880a09ffb87a5ff', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: '5d5846ce26aabbd1cbbe39f659c90baaacfbbc5f', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
                 mainAxis: 16,
-            } }, h("slot", { key: 'f246850fdee12e06e123f1d20389e842132faf4d', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+            } }, h("slot", { key: '64ca8a084a7d787efa1b167cb5c08c22a39c28e7', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'eaace538a0668becf30368fa733c778a8590c940', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
-            } })) : null)));
+            } })))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-menu-avatar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-menu-avatar.entry.js","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@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n display: block;\n position: relative;\n margin-bottom: 0.5rem;\n margin-right: 0.75rem;\n\n @include component.ix-component;\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: vars.$default-space;\n line-height: 1.14;\n\n .text-default-single {\n color: var(--theme-nav-item-primary--color);\n @include text-truncation.ellipsis;\n }\n }\n\n border-radius: 1.25rem;\n\n @include hover.hover {\n background-color: var(--theme-avatar-btn--background--hover);\n color: var(--theme-avatar-btn--color--hover);\n }\n\n @include hover.active {\n background-color: var(--theme-avatar-btn--background--active);\n color: var(--theme-avatar-btn--color--active);\n }\n }\n\n .avatar:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top?: string;\n\n /\n Second line of text\n /\n @Prop() bottom?: string;\n\n /\n Display a avatar image\n /\n @Prop() image?: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n /\n @Prop() initials?: string;\n\n /\n ~~Use~~ for ~~translation~~\n /\n @Prop() i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n /\n @Prop() ~~showLogoutButton~~: boolean = ~~true~~;\n\n /\n Control the visibility of the dropdown menu\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick!: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n title={this.top}\n id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\" title={this.top}>\n {this.top}\n </span>\n <span class=\"text-default-single\" title={this.bottom}>\n {this.bottom}\n </span>\n </div>\n </button>\n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && !this.~~showLogoutButton~~}\n offset={{\n mainAxis: 16,\n }}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {this.~~showLogoutButton~~ ? (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={iconLogOut}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n ) ~~: null~~}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,29DAA29D;;MC0Bp+D,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA4BE;;AAEG;~~AACK~~,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;~~AAErC~~;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,~~IAAI~~;~~AAExC~~;;AAEG;AACM,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAOjC,QAAA,IAAe,CAAA,eAAA,GAAG,mBAAmB;AAqD9C;IAnDC,YAAY,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,EAAA,EAEX,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAc,CAAA,EAEnE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAA,EAC9C,IAAI,CAAC,GAAG,CACJ,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,~~CAAC,~~IAAI,CAAC,gBAAgB,~~EACvD~~,MAAM,EAAE;AACN,gBAAA,QAAQ,EAAE,EAAE;aACb,EAAA,EAED,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAS,CAAA,EACrD,IAAI,CAAC,gBAAgB,~~IACpB~~,~~CAAA~~,CAAA,qBAAA,EAAA,~~EACE~~,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;~~aACzB~~,~~EAAA~~,~~CACoB~~,~~IACrB~~,~~IAAI~~,~~CACI~~,CACT;;;;;;;;"}
1	+ {"version":3,"file":"ix-menu-avatar.entry.js","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@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n display: block;\n position: relative;\n margin-bottom: 0.5rem;\n margin-right: 0.75rem;\n\n @include component.ix-component;\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: vars.$default-space;\n line-height: 1.14;\n\n .text-default-single {\n color: var(--theme-nav-item-primary--color);\n @include text-truncation.ellipsis;\n }\n }\n\n border-radius: 1.25rem;\n\n @include hover.hover {\n background-color: var(--theme-avatar-btn--background--hover);\n color: var(--theme-avatar-btn--color--hover);\n }\n\n @include hover.active {\n background-color: var(--theme-avatar-btn--background--active);\n color: var(--theme-avatar-btn--color--active);\n }\n }\n\n .avatar:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top?: string;\n\n /\n Second line of text\n /\n @Prop() bottom?: string;\n\n /\n Display a avatar image\n /\n @Prop() image?: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n /\n @Prop() initials?: string;\n\n /\n i18n label for 'Logout' button\n /\n @Prop({ attribute: 'i18n-logout' }) i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n /\n @Prop() hideLogoutButton: boolean = false;\n\n /\n Control the visibility of the dropdown menu\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick!: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n title={this.top}\n id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\" title={this.top}>\n {this.top}\n </span>\n <span class=\"text-default-single\" title={this.bottom}>\n {this.bottom}\n </span>\n </div>\n </button>\n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && this.hideLogoutButton}\n offset={{\n mainAxis: 16,\n }}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {!this.hideLogoutButton && (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={iconLogOut}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n )}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,29DAA29D;;MC0Bp+D,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA4BE;;AAEG;AACiC,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAEjE;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAEzC;;AAEG;AACM,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAOjC,QAAA,IAAe,CAAA,eAAA,GAAG,mBAAmB;AAqD9C;IAnDC,YAAY,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,EAAA,EAEX,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAc,CAAA,EAEnE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAA,EAC9C,IAAI,CAAC,GAAG,CACJ,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,gBAAgB,EACtD,MAAM,EAAE;AACN,gBAAA,QAAQ,EAAE,EAAE;aACb,EAAA,EAED,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAS,CAAA,EACrD,CAAC,IAAI,CAAC,gBAAgB,KACrB,CACE,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1B,aAAC,EACoB,CAAA,CACxB,CACW,CACT;;;;;;;;"}

package/dist/esm/ix-menu-category.entry.js CHANGED Viewed

@@ -180,7 +180,7 @@ const MenuCategory = class {
         }
     }
     render() {
-        return (h(Host, { key: '49275009853fd8a9c9231e41b206e3f2d1b0d6a9', class: {
+        return (h(Host, { key: '4f372fe034a70522511d1bc8d1d76e3184876132', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -189,14 +189,14 @@ const MenuCategory = class {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: '9288752f9cd67d83434da74c8f4fe65e57f21b8a', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("div", { key: 'e45b143ed2316a69bcc06a8b7ee4b32895a25f67', class: "category" }, h("div", { key: '34ab800b45131b0b7324921baa6883bc8f2f1bf2', class: "category-text" }, this.label), h("ix-icon", { key: '54450dce975a283573a4a25aaff84cc43e3cfeee', name: iconChevronDownSmall, class: {
+            } }, h("ix-menu-item", { key: '315cb321cfaa7670b546edbd33907727c2add1df', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("div", { key: '897f1604fd0819774b8533f0cc786716a12cf8b6', class: "category" }, h("div", { key: '4a39ac0e300b06530ee0bf1d1bb31c4ba6e37cec', class: "category-text" }, this.label), h("ix-icon", { key: '24fe5aa4a3256acf7666cdc06ed1b53eabe61ca5', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: '71a3deccbecc34fe27423c0d8c5fe12648244a3e', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: 'aa7d5988b6a22fabaef5cf4d74e740e96d2e390a', 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: 'c9ba4105259aea83ecd4a125a084a555299c83de', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'db4b7115dbf5967b1de97c0b1c6e9392ceac6256', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -209,7 +209,7 @@ const MenuCategory = class {
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '1e5e1b3659d6359c7c613bf15e7f9993f716cfab', class: 'category-dropdown-header' }, h("ix-typography", { key: 'ffd1265ecaa6a5edb29536088440d5654de2fd2f', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '61d8dc31511e8ddf63233bd4bda467374fbe44ef' }), h("slot", { key: 'c509e35530dc05faa847c9dbae7a16de0f84d415' }))));
+            } }, h("ix-dropdown-item", { key: '5dc987ad55ea5b36ab2021bd1484716b13349d89', class: 'category-dropdown-header' }, h("ix-typography", { key: '97c5fc80da4c914acebf89b161b3df3b1da77a60', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '366e9b4d84d9bfce5aed8912de25ceb4383fb68e' }), h("slot", { key: '2c51fafa9faeb14428df5419bdcbe32c570ee404' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-menu-expand-icon.entry.js CHANGED Viewed

@@ -34,7 +34,7 @@ const MenuExpandIcon = class {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: 'ef8794f40bf74a03af8b8ddeab15da2bfd40096f', class: {
+        return (h(Host, { key: '457b12c1f7a01523ebd9fbc4ace5204687770021', class: {
                 expanded: this.expanded,
             }, type: "button", "aria-label": this.ixAriaLabel, "aria-pressed": a11yBoolean(this.expanded) }, this.getMenuIcon()));
     }

package/dist/esm/ix-menu-item.entry.js CHANGED Viewed

@@ -115,11 +115,11 @@ const MenuItem = class {
             tabIndex: this.disabled ? -1 : 0,
         };
         const menuContent = [
-            this.icon && h("ix-icon", { key: '247ccf76115c4f9a3504ae8625cd064da17cb5f4', class: 'tab-icon', name: this.icon }),
+            this.icon && h("ix-icon", { key: '7450154ddbe822f7c017f81be83d48c31ca830ea', class: 'tab-icon', name: this.icon }),
             this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null,
-            h("span", { key: 'c98c04295888f8be7e0016cce7d749c19d641d32', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'ce04723016a4187e57f1dd31e4cb43cbea1cde93' })),
+            h("span", { key: '53c5e2a2ff8111e4360edf2b44acd1a305a8ca17', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '82b8b69c7519342d617f9bda5367b5c826e9f098' })),
         ];
-        return (h(Host, Object.assign({ key: '4f5490aa3304bdaa57dfbe5f2f9e292f78571ef7', class: {
+        return (h(Host, Object.assign({ key: 'b80a8dbcb7cb5a6dbffe6747352e565cf9abb1bf', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
@@ -130,7 +130,7 @@ const MenuItem = class {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), h("ix-tooltip", { key: '9eb280ed1e0b95127eae4db991470111f1af550a', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }), menuContent)) : (h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), h("ix-tooltip", { key: 'f95a923b5c8d36f15adf85a4805405595be31f55', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-menu-settings-item.entry.js CHANGED Viewed

@@ -15,7 +15,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (h(Host, { key: '70dbe5bb6bb618cf897ea60bae0febecde3021d1' }, h("slot", { key: 'ec2608b87f8123513ce9b052c6035ec04a41aef8' })));
+        return (h(Host, { key: 'df456ff8730db1834cc56549d596857a948d2dcc' }, h("slot", { key: 'a7683e6f94c5a6bbe0e178f0ae2e21e4f20c4070' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/dist/esm/ix-menu.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { a as animate } from './anime.esm-DhE1t8Qh.js';
 import { s as showAppSwitch } from './index-D4tQ_iTq.js';
 import { a as useContextConsumer, A as ApplicationLayoutContext } from './context-CKM5pVsv.js';
-import { a as applicationLayoutService } from './service-ktcE7NzB.js';
+import { a as applicationLayoutService } from './service-Da0kv8hS.js';
 import { m as menuController } from './menu-service-BMvtckRa.js';
 import { c as convertToRemString } from './rwd.util-pXYAoEyc.js';
 import { t as themeSwitcher } from './theme-switcher-Bg6wsOIn.js';
@@ -49,10 +49,6 @@ const Menu = class {
          * Show toggle between light and dark variant. Only if the provided theme have implemented both!
          */
         this.enableToggleTheme = false;
-        /**
-         * Is settings tab is visible
-         */
-        this.enableSettings = true;
         /** @internal */
         this.enableMapExpand = false;
         /**
@@ -76,18 +72,23 @@ const Menu = class {
          */
         this.pinned = false;
         /**
+         *  i18n label for 'About & legal information' button
          */
         this.i18nLegal = 'About & legal information';
         /**
+         * i18n label for 'Settings' button
          */
         this.i18nSettings = 'Settings';
         /**
+         * i18n label for 'Toggle theme' button
          */
         this.i18nToggleTheme = 'Toggle theme';
         /**
+         * i18n label for 'Expand' button
          */
         this.i18nExpand = ' Expand';
         /**
+         * i18n label for 'Collapse' button
          */
         this.i18nCollapse = 'Collapse';
         this.showPinned = false;
@@ -457,44 +458,44 @@ const Menu = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'cb2a106b4faa5e32da4ef52870aca5e3939f1fd8', class: {
+        return (h(Host, { key: 'df5d448d54816e68d11ac8b0c89fdcfcc3eb0f5f', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: '89199dcac3f0157e1560e42a6988ec9f68eb4890', class: {
+            }, slot: "menu" }, h("nav", { key: '77a960b00a2e5c2c984653a83e57da1a092f5c39', class: {
                 menu: true,
                 expanded: this.expand,
-            } }, h("div", { key: 'dc9f51c7515e86fb869df07da4e980dd292a0fc9', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '30904d7f5cbefb53cea567565def615301b63093', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (h("ix-icon-button", { key: 'a0c3574d850ad28b4e0117863330bab62815d0d4', onClick: () => {
+            } }, h("div", { key: 'dcc507883dc51c8b13fa2dc1835b73479da1d46f', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '9563ef5a20623bef8f4b58109fb76430efda864e', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (h("ix-icon-button", { key: '9753f46ffac62bf013c53b2b63e4038a1bc66f9a', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: 'bc3bc1e51acdf30ba2ef0089e6974ad23a504718', id: "menu-tabs", style: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '149ea3070a963a59f9639727e33baf654b34b29b', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: 'ef1c5df6e1f411f2cd2908ebe61dd01254941272', class: "tabs-shadow-container" }, h("div", { key: '581688ad46fe78bf4cc59bb4004d77b115f77131', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '22af0ea5a512ff6f7f8654d706545d86603e32d5', class: "tabs-shadow-container" }, h("div", { key: '9e2623f578770768243c005a9dbeb4ed939696d9', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: 'a9d146c2de67af14e194a068b756dcc881294b50', class: {
+            } }), h("div", { key: '1dcb982811b70d44b41cbf28305f479cf4291296', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '4c7d6f4d744c094bac965db4b30b758d12362d53', class: "menu-avatar" }, h("slot", { key: '56104613d9367c81ad57e0f855eda60dbfc65545', name: "ix-menu-avatar" })), h("slot", { key: '972691b28f31b3abb967bf65e4815ed75afc2ed8', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'd15397e21e38b1078d9baab6c92a078f1b7221ed', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '58a320db01e6003ebdfc7071afb06933500b8311', class: "menu-avatar" }, h("slot", { key: 'e4d1b4d1d1d950503e94a22b9c0a3786b78ee618', name: "ix-menu-avatar" })), h("slot", { key: '1f6deafef14122d3edade907774176ce7543e3c3', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '437ddcbd787dac4de4663e9adcc704f5205b9ea2', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: 'b9d70bfc1a536c6007abc02cbfefc72202ecae38', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: '02d515815929fac815a88b6ced7d130c49a62565', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme })) : null, h("div", { key: '3b6b8785abf4265b959e170c0d326fcb1080b8fa', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '452ae889b5e005ec580c0f69e0c08f61924e2c82', name: "bottom" })), h("div", { key: '87ebc27ce104d09ef2944b8bbdd17696b919e77a', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme })) : null, h("div", { key: '4e2780ab0b9775d005fa1a45b932443f80d078ad', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '9870393f9cdceb14aba51b3b533e867a2a3356d7', name: "bottom" })), h("div", { key: '8ade061e4a43e78f76aacfcc908a39b1064676ce', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), h("div", { key: 'a96fe202eed0ab17f762fbce60b54246d66f5eff', class: {
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), h("div", { key: '12d3aab3ecfe3b0371ef6dc59540550d719bc036', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: 'd4142be810b9c757230f32022e82f9af9437ab08', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'a4ef6fef39327fa22d15c00ee65d6686fd03e5f6', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: 'e762e0182ebd71dbb4112ef4af489f179dc2b6de', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '3f2fc5f4853d14fc4fceecfce36d6b18ac0c2aac', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {