npm - @siemens/ix - Versions diffs - 2.5.0 → 2.6.0 - Mend

@siemens/ix 2.5.0 → 2.6.0

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

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

	@@ -1 +1 @@
1	- {"file":"ix-menu-about-news.entry.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}
1	+ {"file":"ix-menu-about-news.entry.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,MAAM,EAAC,OAAO,EAAC,IAAI,UAC/B,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 format=\"label\" bold>\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/dist/esm/ix-menu-about.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-5429f20b.js';
-import { s as setTab, i as initialize, M as MenuTabs } from './menu-tabs-fc-d9a7dd06.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-97874de0.js';
+import { s as setTab, i as initialize, M as MenuTabs } from './menu-tabs-fc-563a74d9.js';
 const menuAboutCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-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)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";
 const IxMenuAboutStyle0 = menuAboutCss;
@@ -23,7 +23,7 @@ const MenuAbout = class {
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: 'ee62d88ee8d98eb192ed213cb146febf5451de14', context: this });
+        return h(MenuTabs, { key: 'de6857ca0dab82a0edf10e30e18259a50c9c3221', context: this });
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
 import { g as getSlottedElements } from './shadow-dom-cc0bc152.js';
 const menuAvatarCss = ":host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:var(--theme-default-time);border-radius:1.25rem}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{color:var(--theme-nav-item-primary--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover{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)}";
@@ -26,9 +26,9 @@ const MenuAvatar = class {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (h(Host, { key: 'b8ebb51ddac8d0b3f9bd933a16ab8ba589e07c1e', slot: "ix-menu-avatar" }, h("button", { key: 'd9e8fa7ff0a0dbe81d696e6c4a05aa7e71549254', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '7318e067653f55f1e122c8e2ae84056c55d7a008', image: this.image, initials: this.initials }), h("div", { key: 'ee1b1bdff6e4c63d024d277fe3e7890c3e50a86d', class: "avatar-name" }, h("span", { key: 'ec81483aeb0bf87072b52e0421e3cc81bdc5e7c3', class: "text-default-single", title: this.top }, this.top), h("span", { key: 'e22dfec17284c5c9ab23c71dc2819222c92d2072', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: '4feab6c0868c081b05919c60aad646e07a643fa0', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
+        return (h(Host, { key: 'c1fa0cee8afddf06bb3d3920d395305a9b911b3c', slot: "ix-menu-avatar" }, h("button", { key: '5012c1e35df4627a9fddb131f545f6e35042250c', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '2a1d4585720d023caeb9a008ee779537fca91715', image: this.image, initials: this.initials }), h("div", { key: 'de59499988b75887263c47c4d9612e8ec7ad3e9d', class: "avatar-name" }, h("span", { key: '7f824012aacf351597139c302ffccaf45df95d22', class: "text-default-single", title: this.top }, this.top), h("span", { key: '8f5d667ac1a6c82c1fd3a30994202457ee007c5a', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: '5345172d53852effd5bd360122079476c3894e24', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
                 mainAxis: 16,
-            } }, h("slot", { key: 'f37ff709dc79e41b4197469b1cedce4d42a0fa87', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
+            } }, h("slot", { key: '5ded6f40210ba408b6dd2313568c700f5cb56797', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
                 this.logoutClick.emit(e);
             } })) : null)));
     }

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
 import { a as anime } from './anime.es-a5520566.js';
-import { c as closestIxMenu } from './context-82a1ccf8.js';
+import { c as closestIxMenu } from './context-42311cff.js';
 import { c as createMutationObserver } from './mutation-observer-db8757e6.js';
 import './typed-event-ad6484c5.js';
@@ -164,7 +164,7 @@ const MenuCategory = class {
         }
     }
     render() {
-        return (h(Host, { key: '3b7a2f4b780189c7527b050c20e036eec255ea29', class: {
+        return (h(Host, { key: 'f9f4730936ba8f8ee2a46e0ce306117f947de177', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -173,14 +173,14 @@ const MenuCategory = class {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: '740d283513848384f2b0a980f41e1a41edc3c87a', 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: 'fc663a360899abcaced5bca9fded51d09c15f340', class: "category" }, h("div", { key: 'ce375f719315b0d4cccd9838435dc4e59ab126f7', class: "category-text" }, this.label), h("ix-icon", { key: 'ce17082c41e6f78ae19e0988b9c8f6b784387d5b', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: 'c8c152e9c345945b50803bd72998a09b72a70d74', 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: '3b584077fbdbf1ce09421f33fddc52ba4da5d168', class: "category" }, h("div", { key: '73388008e380b2d6f341eef162727fd59aec88ee', class: "category-text" }, this.label), h("ix-icon", { key: 'ab5cf9fd56692b29bcc7501cb096411416a661a5', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: '2614bff20114b65cc5a79a3b9ab30effc2f09f3b', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: 'faa34c42bcf4250389ca2f46566b3992b235db27', 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: 'ffd3996cf5fa75cea5d54a98b5d3fef1aee8baa0', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'd366bdd594350a8f67ee80b0d7d7b98d8d57cb28', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -193,7 +193,7 @@ const MenuCategory = class {
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '79200ca71682e57529ae12e3b858ed254b78bfda', class: 'category-dropdown-header' }, h("ix-typography", { key: '5b1615544787d9bbf831195251750b7c14171dc1', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: 'f3a08498a76abecf1388607c36751de4b1becef8' }), h("slot", { key: 'a099d0d632946c6afe98463d238c06360ea82903' }))));
+            } }, h("ix-dropdown-item", { key: '66918af3f1d25eaa574e47eda975b1ce23e954d4', class: 'category-dropdown-header' }, h("ix-typography", { key: '7479a92697b5e704aa75a9281d75aad54384328e', format: "label", bold: true, color: "std" }, this.label)), h("ix-divider", { key: 'ac0f5ce34503cfe9e77071185b46789eed2c3eef' }), h("slot", { key: '78dc27c30debcc86f4040e359a8659b55d8259b1' }))));
     }
     get hostElement() { return getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"ix-menu-category.entry.js","mappings":"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","names":[],"sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport function createEnterLeaveDebounce(\n enterCallback: Function,\n leaveCallback: Function,\n {\n debounceTimeEnter,\n debounceTimeLeave,\n }: {\n debounceTimeEnter: number;\n debounceTimeLeave: number;\n } = {\n debounceTimeEnter: 0,\n debounceTimeLeave: 500,\n }\n) {\n let enterTimeout: NodeJS.Timeout;\n let leaveTimeout: NodeJS.Timeout;\n\n return {\n onEnter: () => {\n clearTimeout(leaveTimeout);\n enterTimeout = setTimeout(() => {\n enterCallback();\n }, debounceTimeEnter);\n },\n onLeave: () => {\n clearTimeout(enterTimeout);\n leaveTimeout = setTimeout(() => {\n leaveCallback();\n }, debounceTimeLeave);\n },\n };\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-text {\n width: 100%;\n padding-right: 0.25rem;\n @include ellipsis;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0;\n transition: var(--theme-default-time) max-height ease-in-out;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--collapsed {\n display: none;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n padding-left: 0.125rem;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label: string;\n\n /\n Icon of the category\n /\n @Prop() icon: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer: MutationObserver;\n private menuItemsContainer: HTMLDivElement;\n private ixMenu: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged() {\n this.nestedItems = this.getNestedItems();\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems \|\| this.isNestedItemActive());\n }\n\n componentWillLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.menuExpand = this.ixMenu.expand;\n this.showItems = this.isCategoryItemListVisible();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer.style.removeProperty('max-height');\n this.menuItemsContainer.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={'chevron-down-small'}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography variant=\"default-title-single\" color=\"std\">\n {this.label}\n </ix-typography>\n </ix-dropdown-item>\n <ix-divider></ix-divider>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-menu-category.entry.js","mappings":"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","names":[],"sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport function createEnterLeaveDebounce(\n enterCallback: Function,\n leaveCallback: Function,\n {\n debounceTimeEnter,\n debounceTimeLeave,\n }: {\n debounceTimeEnter: number;\n debounceTimeLeave: number;\n } = {\n debounceTimeEnter: 0,\n debounceTimeLeave: 500,\n }\n) {\n let enterTimeout: NodeJS.Timeout;\n let leaveTimeout: NodeJS.Timeout;\n\n return {\n onEnter: () => {\n clearTimeout(leaveTimeout);\n enterTimeout = setTimeout(() => {\n enterCallback();\n }, debounceTimeEnter);\n },\n onLeave: () => {\n clearTimeout(enterTimeout);\n leaveTimeout = setTimeout(() => {\n leaveCallback();\n }, debounceTimeLeave);\n },\n };\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-text {\n width: 100%;\n padding-right: 0.25rem;\n @include ellipsis;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0;\n transition: var(--theme-default-time) max-height ease-in-out;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--collapsed {\n display: none;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n padding-left: 0.125rem;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label: string;\n\n /\n Icon of the category\n /\n @Prop() icon: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer: MutationObserver;\n private menuItemsContainer: HTMLDivElement;\n private ixMenu: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged() {\n this.nestedItems = this.getNestedItems();\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems \|\| this.isNestedItemActive());\n }\n\n componentWillLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.menuExpand = this.ixMenu.expand;\n this.showItems = this.isCategoryItemListVisible();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer.style.removeProperty('max-height');\n this.menuItemsContainer.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={'chevron-down-small'}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography format=\"label\" bold color=\"std\">\n {this.label}\n </ix-typography>\n </ix-dropdown-item>\n <ix-divider></ix-divider>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
-import { g as getButtonClasses } from './base-button-1b40b11d.js';
-import { a as a11yBoolean } from './a11y-2e34777f.js';
+import { r as registerInstance, h, H as Host } from './index-97874de0.js';
+import { g as getButtonClasses } from './base-button-845f2463.js';
+import { a as a11yBoolean } from './a11y-b10c12e0.js';
 const menuExpandIconCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:var(--theme-default-time);padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-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 svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in var(--theme-default-time), transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--hover)}.menu-expand-button{width:2rem;padding:0;cursor:pointer}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}";
 const IxMenuExpandIconStyle0 = menuExpandIconCss;
@@ -32,7 +32,7 @@ const MenuExpandIcon = class {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: '04c0e5b43f6de34672561d67612587ccf57b8de2', class: {
+        return (h(Host, { key: '47eabfc90f05f809a8df541e3ae79f3f7d32bb5f', class: {
                 expanded: this.expanded,
             } }, this.getMenuIcon()));
     }

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-97874de0.js';
 import { c as createMutationObserver } from './mutation-observer-db8757e6.js';
-import { m as makeRef } from './make-ref-c80046bf.js';
+import { m as makeRef } from './make-ref-4b76e9b5.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import './typed-event-ad6484c5.js';
@@ -28,19 +28,20 @@ const MenuItem = class {
         this.menuExpanded = false;
     }
     componentWillLoad() {
+        var _a;
         this.isHostedInsideCategory =
             !!this.hostElement.closest('ix-menu-category');
         this.onIconChange();
         this.onTabIconChange();
-        this.menuExpanded = menuController.nativeElement.expand;
+        this.menuExpanded = ((_a = menuController.nativeElement) === null || _a === void 0 ? void 0 : _a.expand) || false;
         this.menuExpandedDisposer = menuController.expandChange.on((expand) => (this.menuExpanded = expand));
     }
     componentWillRender() {
         this.setTooltip();
     }
     setTooltip() {
-        var _a;
-        this.tooltip = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.textContent;
+        var _a, _b;
+        this.tooltip = (_b = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.textContent) !== null && _b !== void 0 ? _b : undefined;
     }
     connectedCallback() {
         this.observer.observe(this.hostElement, {
@@ -84,15 +85,15 @@ const MenuItem = class {
                 slot: 'bottom',
             };
         }
-        return (h(Host, Object.assign({ key: '44759af10c986ca08135dae3ab3b2258c933d8ef', class: {
+        return (h(Host, Object.assign({ key: '88e8f15c522e435f3d0cf1873cc583d241145264', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), h("button", { key: 'e30dbc8b43973f06f0d1f387ca886f11c088c0b9', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { key: '11163d983423f020b14de4bcae24dbf55068e645', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: '3a62db4c5e965a9fec6d5e4648a9587b7ff6271d', class: "tab-text text-default" }, this.label, h("slot", { key: '1c9c5c22c13da93176d68f93c516e4005506d43e' }))), !this.isCategory &&
+            } }, extendedAttributes), h("button", { key: '581d840e9f95e029300a3f14bc63841b919d7639', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { key: 'b31f3ea13d00770520b0c3a1867fb7f9a9e42a21', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: '977480b74cf07ffd13a9502d679fd3be4103fb17', class: "tab-text text-default" }, this.label, h("slot", { key: '19f5dfc4e6e8909391dc71c8593470dd8f408fd4' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
-            !this.menuExpanded && (h("ix-tooltip", { key: 'ec5fd96cbe7c0937202a70ebfba24abc66afd203', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+            !this.menuExpanded && (h("ix-tooltip", { key: 'e742d5f121663b823cc9a748c2fc8abafbe4d47e', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5429f20b.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-97874de0.js';
 const menuSettingsItemCss = ":host{display:block}";
 const IxMenuSettingsItemStyle0 = menuSettingsItemCss;
@@ -17,7 +17,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (h(Host, { key: '4a2b28d8557666fe0bba168564975571238c618d' }, h("slot", { key: 'c6f14fc9b3f99836e0e78a553e8f823e274f26d1' })));
+        return (h(Host, { key: '7f91b18b72aa08bc94bca973e934a6b591d6466b' }, h("slot", { key: '56192b67632208075a544cfcb7970fe7d6e42cbc' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

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

@@ -1,4 +1,4 @@
-export { a as ix_menu_settings } from './menu-tabs-fc-d9a7dd06.js';
-import './index-5429f20b.js';
+export { a as ix_menu_settings } from './menu-tabs-fc-563a74d9.js';
+import './index-97874de0.js';
 //# sourceMappingURL=ix-menu-settings.entry.js.map

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
 import { a as anime } from './anime.es-a5520566.js';
-import { s as showAppSwitch } from './index-76b9c8de.js';
-import { a as useContextConsumer, A as ApplicationLayoutContext } from './context-82a1ccf8.js';
+import { s as showAppSwitch } from './index-60d17930.js';
+import { a as useContextConsumer, A as ApplicationLayoutContext } from './context-42311cff.js';
 import { a as applicationLayoutService } from './service-c7fc628b.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import { a as convertToRemString } from './rwd.util-d8e00a88.js';
-import { t as themeSwitcher } from './theme-switcher-b10fb4da.js';
+import { t as themeSwitcher } from './theme-switcher-5fcf712d.js';
 import './animation-4a73b1c3.js';
-import './modal-54740f80.js';
+import './modal-101eef04.js';
 import './typed-event-ad6484c5.js';
 import './breakpoints-d5c2f627.js';
@@ -60,7 +60,6 @@ const Menu = class {
         this.i18nCollapse = 'Collapse';
         this.showPinned = false;
         this.mapExpand = true;
-        this.activeTab = undefined;
         this.breakpoint = 'lg';
         this.itemsScrollShadowTop = false;
         this.itemsScrollShadowBottom = false;
@@ -93,10 +92,10 @@ const Menu = class {
         return this.hostElement.shadowRoot.querySelector('.menu-overlay');
     }
     get menuItems() {
-        return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible);
+        return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter((elm) => this.isVisible(elm));
     }
     get menuBottomItems() {
-        return Array.from(this.hostElement.querySelectorAll('ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)')).filter(this.isVisible);
+        return Array.from(this.hostElement.querySelectorAll('ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)')).filter((elm) => this.isVisible(elm));
     }
     get homeTab() {
         return this.hostElement.querySelector('ix-menu-item.home-tab');
@@ -159,10 +158,10 @@ const Menu = class {
         applicationLayoutService.onChange.on((breakpoint) => this.onBreakpointChange(breakpoint));
         this.onBreakpointChange(applicationLayoutService.breakpoint, true);
     }
-    componentWillRender() {
-        this.appendTabs();
-    }
     componentDidRender() {
+        if (!this.about && this.aboutNewsPopover) {
+            this.aboutNewsPopover.show = false;
+        }
         this.appendFragments();
     }
     setPinned(pinned) {
@@ -192,23 +191,21 @@ const Menu = class {
     appendFragments() {
         this.appendAboutNewsPopover();
     }
-    resetActiveTab() {
-        this.activeTab = null;
-    }
-    appendTabs() {
-        this.activeTab = null;
-    }
     getAboutPopoverVerticalPosition() {
+        var _a;
         const heightArrow = 12;
         const offsetArrow = 6;
-        const rectAbout = this.aboutTab.getBoundingClientRect();
+        const rectAbout = ((_a = this.aboutTab) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+            bottom: -window.innerHeight,
+            height: 0,
+        };
         const offset = window.innerHeight -
             (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);
         return convertToRemString(offset);
     }
     appendAboutNewsPopover() {
         var _a;
-        if (!this.aboutNewsPopover) {
+        if (!this.aboutNewsPopover || !this.about) {
             return;
         }
         this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();
@@ -397,45 +394,48 @@ const Menu = class {
         this.hostElement.dispatchEvent(new ApplicationSidebarToggleEvent(this.mapExpand));
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'a84bbcad87774f4ccfed4038adf791b7905145e5', class: {
+        var _a, _b;
+        return (h(Host, { key: 'f96e5769eabac81269111fa13dd1b85644f897e6', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("aside", { key: 'b430d95050f0e3cd578cf1e0e66b9edce7026e48', class: {
+            }, slot: "menu" }, h("nav", { key: 'a7155f904044921b26b9e3740270d3ec3cce513c', class: {
                 menu: true,
                 expanded: this.expand,
-            }, onClick: () => {
-                this.resetActiveTab();
-            } }, h("div", { key: '8b21b8b85e928cc28c82fbd70fda6360b2b13865', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: 'a118273b801370c8ddda429ddd930d5a350d0c9d', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
-            this.applicationLayoutContext.appSwitchConfig && (h("ix-icon-button", { key: 'af4c7ca9bb43d92fb07c80558290004af1ecef42', onClick: () => showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), h("div", { key: 'cdeb37aaaf57fdd7b9f4f1eb4f7973c52247dd9e', id: "menu-tabs", style: {
+            } }, h("div", { key: '4e02e47fbcdb0718ecff56cb3373d0de11bdb8cb', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: 'eb044c0771361b7906177bc74d83a572964afc09', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
+            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (h("ix-icon-button", { key: '726c67cc25b24ac1e48d0803ae84f076f47ca0b7', onClick: () => {
+                var _a;
+                if ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) {
+                    showAppSwitch(this.applicationLayoutContext.appSwitchConfig);
+                }
+            }, icon: "apps", ghost: true }))), h("div", { key: 'f5dfc27a27bb8f7d37f9350f72c0916067c979f8', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '158c152bf09f2c615042f684014589276d9390e9', class: "tabs-shadow-container" }, h("div", { key: '03de44d899f5329c4756dbab62a8d00b9ec123ff', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: 'ee03f22eb7310e66de17252892f9d6ea97c67233', class: "tabs-shadow-container" }, h("div", { key: 'd5b47a2b127f0172cd0a76689e0c29c8fcb5ca97', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: '3ee05c4db903f6e1dea707b10ad2d81f23c4ac12', class: {
+            } }), h("div", { key: '772da6c3da5e3eeb7dda3d62c5b74cca6b2fba7d', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: 'df6c064dc921714e6a50ebb28856635c1daedfeb', class: "menu-avatar" }, h("slot", { key: '16e29ae7d5af0079d33b43d06309d535cf9dd7f9', name: "ix-menu-avatar" })), h("slot", { key: 'ef3c8a69c6c5054f92fdccb9a9f2aaf033a943d0', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'f2eb8e58cf7950628bf9cf4afb3f93fd04e8e5af', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '45c0740cee734106959383f5f8ac864cca807454', class: "menu-avatar" }, h("slot", { key: '8988cd4f951319458ad0b1e94642ca1dd6ba598b', name: "ix-menu-avatar" })), h("slot", { key: '7f108c59b3bfc84576c9978e12b6abc136f22d1a', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '6791539585b178386b6e8c1ba868e92f6c28ae85', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: '8898857ee017c3a1ec3c993af57fb50782626935', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: '94b1a2cb79fd5d3fe804e6aee7e2ac3729e1ee68', 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: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, h("div", { key: 'a703b9481ea9570998dc0079b5459631e482f405', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '1cbe0b0641e0ad72428ac59dabd1964684b70864', name: "bottom" })), h("div", { key: '1c4126c931628c8461fb020f2701eaf750de86d5', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, h("div", { key: '1b3d5e59235cc486a0fe3222605cc0d3410ff6ee', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '287de3f62a3c9534f18c808032f9b50066b37093', name: "bottom" })), h("div", { key: 'a52fd54d0092fd0058af41658456f6bd08dd087d', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark', label: this.i18nToggleTheme })) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.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), h("div", { key: '869cf96b7215d40677bd69fa6b82e0d9fdc037db', class: {
+            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark', label: this.i18nToggleTheme })) : null, 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), h("div", { key: '1b7fc6c3486a5f09c0e1e0899af5628b5029a156', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: 'dbdf64b9a47629c10cd8b2636d236ee9a6c48e28', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'fe7022d1d7ad7c6da31c2db029892c3a37714c8c', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: '16260da7408110f09bcf35c7bca37d21ff9e47b1', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'bde0f8f348e3490a94149b7eccbed19d00ca2a63', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {