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/cjs/ix-menu-about-news.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const menuAboutNewsCss = ":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-2);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--theme-default-time);margin-inline-start:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-inline-start:4rem;margin-block-start:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-2);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}@media only screen and (max-width: 48em){:host{display:flex;flex-direction:column;max-height:calc(100vh - 4.75rem);width:calc(100% - 2rem);max-width:30rem;transform:translateX(calc(1rem - 50%));left:calc(50% - 1rem) !important;bottom:1rem !important;margin-inline:0 !important;z-index:calc(var(--theme-z-index-sticky) - 1)}:host .slot-container{overflow-y:auto}:host #arrow{display:none}}";
 const IxMenuAboutNewsStyle0 = menuAboutNewsCss;
@@ -20,16 +20,16 @@ const MenuAboutNews = class {
         this.expanded = false;
     }
     render() {
-        return (index.h(index.Host, { key: '49f78c17e45ad71cb4339d7d53fb98c5e359a468', class: {
+        return (index.h(index.Host, { key: '83f1ba400d8000a12796a2817259ad56b442d177', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, index.h("div", { key: 'a04326d6e192dfdd8c80388dd9af3efe6f915435', class: "banner-container" }, index.h("ix-icon", { key: '1311e733e409348f8f7a365652c99afad3391f17', color: "color-inv-contrast-text", name: 'shout', size: "32" }), index.h("svg", { key: 'b7874d274c41bbeb46b241bfe8d2759dbd88ca8f', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: '6d4f6e0f92a8e07156993693a9d4b67c12e4a2bc', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: '39755e039fb3139fb95db1829f15785b4c18846c', class: "cui-popover-news-header" }, index.h("ix-typography", { key: '7c9f46a117ad88543678de3e22acdacf21c85089', variant: "default-title-single" }, this.label)), index.h("ix-icon-button", { key: '96f109929cc5d515d83db16b14ad42b37eb7d23f', size: "24", icon: 'close', ghost: true, onClick: () => {
+            } }, index.h("div", { key: '908c7d853a4e51cd9ff1511d03256de50ee1ff28', class: "banner-container" }, index.h("ix-icon", { key: '66f28b4daa8e7b3779718de1cbb9a8adc53a88df', color: "color-inv-contrast-text", name: 'shout', size: "32" }), index.h("svg", { key: '6825e46de08ee4ee0d7cea4a5e7bce0c7f843189', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: '8126f241e46af7c27a316e8d3938bc4fdd5c9eda', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: '26eddce36c663f819d76fb99660150358e1e46cd', class: "cui-popover-news-header" }, index.h("ix-typography", { key: '010285ae6e2a5f171febbe764ef36d3a6a90a75f', format: "label", bold: true }, this.label)), index.h("ix-icon-button", { key: 'c6d685ef430721c8364c8ddf78c7f76d41f7c634', size: "24", icon: 'close', ghost: true, onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), index.h("div", { key: '375dcdb8c5913e917597ca6d6ab74595370c2c0f', class: "slot-container" }, index.h("slot", { key: 'd9319ca884b957d2629f24937c958901aa53ebcf' })), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), index.h("div", { key: '1f98461c288ac98e75c1d9504e01673b35d5488a', class: "slot-container" }, index.h("slot", { key: '42806d437962511fd3469f2ce14fc8bf8e186dbe' })), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
                 this.show = false;
                 this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, index.h("div", { key: 'bb3c91c6282f18deed4de7c393b5d48427a4ed27', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, index.h("div", { key: '64671055f20f56aa598beca6bd017c1ecfc4e412', id: "arrow" })));
     }
 };
 MenuAboutNews.style = IxMenuAboutNewsStyle0;

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

	@@ -1 +1 @@
1	- {"file":"ix-menu-about-news.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,wuEAAwuE,CAAC;AAClwE,8BAAe,gBAAgB;;MCelB,aAAa;;;;;oBAIuB,KAAK;;4BAU7B,WAAW;;4BAUX,CAAC;wBAeL,KAAK;;IAExB,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;aACjB,IAEDD,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,sEACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACXA,kEAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IACzDA,sEAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF,EAENA,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,4EAAe,OAAO,EAAC,~~sBAAsB~~,~~IAC1C~~,IAAI,CAAC,KAAK,CACG,CACZ,EAENA,6EACE,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,EAClBA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,oEAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClBA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,uBACE,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,EACRA,kEAAK,EAAE,EAAC,OAAO,GAAO,CACjB,EACP;KACH;;;;;;","names":["h","Host"],"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.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,wuEAAwuE,CAAC;AAClwE,8BAAe,gBAAgB;;MCelB,aAAa;;;;;oBAIuB,KAAK;;4BAU7B,WAAW;;4BAUX,CAAC;wBAeL,KAAK;;IAExB,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;aACjB,IAEDD,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,sEACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACXA,kEAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IACzDA,sEAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF,EAENA,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,4EAAe,MAAM,EAAC,OAAO,EAAC,IAAI,UAC/B,IAAI,CAAC,KAAK,CACG,CACZ,EAENA,6EACE,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,EAClBA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,oEAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClBA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,uBACE,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,EACRA,kEAAK,EAAE,EAAC,OAAO,GAAO,CACjB,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/ix-menu-about.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
-const menuTabsFc = require('./menu-tabs-fc-df53f176.js');
+const index = require('./index-757233c7.js');
+const menuTabsFc = require('./menu-tabs-fc-eb899b0d.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;
@@ -27,7 +27,7 @@ const MenuAbout = class {
         index.forceUpdate(this.el);
     }
     render() {
-        return index.h(menuTabsFc.MenuTabs, { key: 'ee62d88ee8d98eb192ed213cb146febf5451de14', context: this });
+        return index.h(menuTabsFc.MenuTabs, { key: 'de6857ca0dab82a0edf10e30e18259a50c9c3221', context: this });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const shadowDom = require('./shadow-dom-454acc38.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)}";
@@ -30,9 +30,9 @@ const MenuAvatar = class {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (index.h(index.Host, { key: 'b8ebb51ddac8d0b3f9bd933a16ab8ba589e07c1e', slot: "ix-menu-avatar" }, index.h("button", { key: 'd9e8fa7ff0a0dbe81d696e6c4a05aa7e71549254', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '7318e067653f55f1e122c8e2ae84056c55d7a008', image: this.image, initials: this.initials }), index.h("div", { key: 'ee1b1bdff6e4c63d024d277fe3e7890c3e50a86d', class: "avatar-name" }, index.h("span", { key: 'ec81483aeb0bf87072b52e0421e3cc81bdc5e7c3', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: 'e22dfec17284c5c9ab23c71dc2819222c92d2072', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: '4feab6c0868c081b05919c60aad646e07a643fa0', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
+        return (index.h(index.Host, { key: 'c1fa0cee8afddf06bb3d3920d395305a9b911b3c', slot: "ix-menu-avatar" }, index.h("button", { key: '5012c1e35df4627a9fddb131f545f6e35042250c', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '2a1d4585720d023caeb9a008ee779537fca91715', image: this.image, initials: this.initials }), index.h("div", { key: 'de59499988b75887263c47c4d9612e8ec7ad3e9d', class: "avatar-name" }, index.h("span", { key: '7f824012aacf351597139c302ffccaf45df95d22', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: '8f5d667ac1a6c82c1fd3a30994202457ee007c5a', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: '5345172d53852effd5bd360122079476c3894e24', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
                 mainAxis: 16,
-            } }, index.h("slot", { key: 'f37ff709dc79e41b4197469b1cedce4d42a0fa87', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (index.h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
+            } }, index.h("slot", { key: '5ded6f40210ba408b6dd2313568c700f5cb56797', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (index.h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
                 this.logoutClick.emit(e);
             } })) : null)));
     }

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const anime_es = require('./anime.es-e2814360.js');
-const context = require('./context-938f7470.js');
+const context = require('./context-6644f454.js');
 const mutationObserver = require('./mutation-observer-babb20a5.js');
 require('./typed-event-8032c0c0.js');
@@ -168,7 +168,7 @@ const MenuCategory = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3b7a2f4b780189c7527b050c20e036eec255ea29', class: {
+        return (index.h(index.Host, { key: 'f9f4730936ba8f8ee2a46e0ce306117f947de177', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -177,14 +177,14 @@ const MenuCategory = class {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, index.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 }, index.h("div", { key: 'fc663a360899abcaced5bca9fded51d09c15f340', class: "category" }, index.h("div", { key: 'ce375f719315b0d4cccd9838435dc4e59ab126f7', class: "category-text" }, this.label), index.h("ix-icon", { key: 'ce17082c41e6f78ae19e0988b9c8f6b784387d5b', name: 'chevron-down-small', class: {
+            } }, index.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 }, index.h("div", { key: '3b584077fbdbf1ce09421f33fddc52ba4da5d168', class: "category" }, index.h("div", { key: '73388008e380b2d6f341eef162727fd59aec88ee', class: "category-text" }, this.label), index.h("ix-icon", { key: 'ab5cf9fd56692b29bcc7501cb096411416a661a5', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), index.h("div", { key: '2614bff20114b65cc5a79a3b9ab30effc2f09f3b', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), index.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 ? index.h("slot", null) : null), index.h("ix-dropdown", { key: 'ffd3996cf5fa75cea5d54a98b5d3fef1aee8baa0', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? index.h("slot", null) : null), index.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,
@@ -197,7 +197,7 @@ const MenuCategory = class {
                         e.preventDefault();
                     }
                 }
-            } }, index.h("ix-dropdown-item", { key: '79200ca71682e57529ae12e3b858ed254b78bfda', class: 'category-dropdown-header' }, index.h("ix-typography", { key: '5b1615544787d9bbf831195251750b7c14171dc1', variant: "default-title-single", color: "std" }, this.label)), index.h("ix-divider", { key: 'f3a08498a76abecf1388607c36751de4b1becef8' }), index.h("slot", { key: 'a099d0d632946c6afe98463d238c06360ea82903' }))));
+            } }, index.h("ix-dropdown-item", { key: '66918af3f1d25eaa574e47eda975b1ce23e954d4', class: 'category-dropdown-header' }, index.h("ix-typography", { key: '7479a92697b5e704aa75a9281d75aad54384328e', format: "label", bold: true, color: "std" }, this.label)), index.h("ix-divider", { key: 'ac0f5ce34503cfe9e77071185b46789eed2c3eef' }), index.h("slot", { key: '78dc27c30debcc86f4040e359a8659b55d8259b1' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"ix-menu-category.entry.cjs.js","mappings":";;;;;;;;;;AAAA;;;;;;;;SAQgB,wBAAwB,CACtC,aAAuB,EACvB,aAAuB,EACvB,EACE,iBAAiB,EACjB,iBAAiB,MAIf;IACF,iBAAiB,EAAE,CAAC;IACpB,iBAAiB,EAAE,GAAG;CACvB;IAED,IAAI,YAA4B,CAAC;IACjC,IAAI,YAA4B,CAAC;IAEjC,OAAO;QACL,OAAO,EAAE;YACP,YAAY,CAAC,YAAY,CAAC,CAAC;YAC3B,YAAY,GAAG,UAAU,CAAC;gBACxB,aAAa,EAAE,CAAC;aACjB,EAAE,iBAAiB,CAAC,CAAC;SACvB;QACD,OAAO,EAAE;YACP,YAAY,CAAC,YAAY,CAAC,CAAC;YAC3B,YAAY,GAAG,UAAU,CAAC;gBACxB,aAAa,EAAE,CAAC;aACjB,EAAE,iBAAiB,CAAC,CAAC;SACvB;KACF,CAAC;AACJ;;ACvCA,MAAM,eAAe,GAAG,mvDAAmvD,CAAC;AAC5wD,6BAAe,eAAe;;ACuB9B,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,uBAAuB,GAAG,GAAG,CAAC;MAUvB,YAAY;;;;QAgCf,uBAAkB,GAAG,wBAAwB,CACnD;YACE,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,EACD;YACE,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CACF,CAAC;;;;0BAhBoB,KAAK;yBACN,KAAK;4BACF,KAAK;2BACmB,EAAE;;IAe1C,kBAAkB;QACxB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;KAC1D;IAEO,cAAc;QACpB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAC9B,CAAC;KAC9B;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAEpC,OAAO,KAAK,CAAC,MAAM,GAAG,uBAAuB,CAAC;KAC/C;IAEO,gBAAgB,CAAC,SAAkB;QACzC,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;aAAM;YACL,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,cAAc;QACpB,MAAM,mBAAmB,GAAG,EAAE,CAAC;QAC/BA,cAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,kBAAkB;YAChC,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,YAAY;YACpB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,SAAS,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,GAAG,uBAAuB,EAAE,CAAC,CAAC;YACrE,QAAQ,EAAE;gBACR,UAAU,CAAC;oBACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;iBAC3B,EAAE,uBAAuB,GAAG,mBAAmB,CAAC,CAAC;aACnD;SACF,CAAC,CAAC;KACJ;IAEO,aAAa;QACnBA,cAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,kBAAkB;YAChC,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,YAAY;YACpB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,GAAG,uBAAuB,CAAC;YACrE,KAAK,EAAE;gBACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;aAC3B;SACF,CAAC,CAAC;KACJ;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YACtB,OAAO;SACR;QACD,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;QACjC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;IAGO,cAAc;QACpB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC3B;IAEO,eAAe,CAAC,CAAa;QACnC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YACtB,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,eAAe,EAAE,CAAC;YACrB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACvC,OAAO;SACR;KACF;IAEO,oBAAoB;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;KAC1C;IAEO,yBAAyB;QAC/B,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;KACzE;IAED,iBAAiB;QACf,MAAM,WAAW,GAAGC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,WAAW,EAAE;YAChB,MAAM,KAAK,CAAC,yDAAyD,CAAC,CAAC;SACxE;QACD,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC;QAE1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;KACnD;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAGC,uCAAsB,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,qBAAqB,CAAC;YACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAC1B,cAAc,EACd,CAAC,EAAE,MAAM,EAAE,UAAU,EAAwB;YAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;YAC7B,IAAI,CAAC,UAAU,EAAE;gBACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC5B;YACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;SACnD,CACF,CAAC;KACH;IAED,mBAAmB;QACjB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;QAC3D,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;KACzD;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,SAAS;aACzB,EACD,cAAc,EAAE;gBACd,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC;aACnC,EACD,cAAc,EAAE,CAAC,KAAmB;gBAClC,IAAI,KAAK,CAAC,WAAW,KAAK,OAAO,EAAE;oBACjC,OAAO;iBACR;gBACD,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC;aACnC,IAEDD,2EACE,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACvC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,UAAU,UAEVA,kEAAK,KAAK,EAAC,UAAU,IACnBA,kEAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAO,EAC7CA,sEACE,IAAI,EAAE,oBAAoB,EAC1B,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,wBAAwB,EAAE,IAAI,CAAC,SAAS;aACzC,GACQ,CACP,CACO,EACfA,kEACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,kBAAkB,GAAG,GAAI,CAAC,EAC9C,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,sBAAsB,EAAE,IAAI,CAAC,SAAS;gBACtC,uBAAuB,EAAE,CAAC,IAAI,CAAC,SAAS;aACzC,IAEA,IAAI,CAAC,SAAS,GAAGA,qBAAa,GAAG,IAAI,CAClC,EACNA,0EACE,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,EAAwB;gBAC7D,IAAI,CAAC,YAAY,GAAG,aAAa,CAAC;aACnC,EACD,KAAK,EAAE,mBAAmB,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,SAAS,EAAC,aAAa,EACvB,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC;aACZ,EACD,OAAO,EAAE,CAAC,CAAC;gBACT,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,EAAE;oBACnC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,cAAc,EAAE;wBACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;qBAC3B;yBAAM;wBACL,CAAC,CAAC,cAAc,EAAE,CAAC;qBACpB;iBACF;aACF,IAEDA,+EAAkB,KAAK,EAAE,0BAA0B,IACjDA,4EAAe,OAAO,EAAC,sBAAsB,EAAC,KAAK,EAAC,KAAK,IACtD,IAAI,CAAC,KAAK,CACG,CACC,EACnBA,0EAAyB,EACzBA,oEAAa,CACD,CACT,EACP;KACH;;;;;;;","names":["anime","closestIxMenu","createMutationObserver","h","Host"],"sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport function createEnterLeaveDebounce(\n enterCallback: Function,\n leaveCallback: Function,\n {\n debounceTimeEnter,\n debounceTimeLeave,\n }: {\n debounceTimeEnter: number;\n debounceTimeLeave: number;\n } = {\n debounceTimeEnter: 0,\n debounceTimeLeave: 500,\n }\n) {\n let enterTimeout: NodeJS.Timeout;\n let leaveTimeout: NodeJS.Timeout;\n\n return {\n onEnter: () => {\n clearTimeout(leaveTimeout);\n enterTimeout = setTimeout(() => {\n enterCallback();\n }, debounceTimeEnter);\n },\n onLeave: () => {\n clearTimeout(enterTimeout);\n leaveTimeout = setTimeout(() => {\n leaveCallback();\n }, debounceTimeLeave);\n },\n };\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-text {\n width: 100%;\n padding-right: 0.25rem;\n @include ellipsis;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0;\n transition: var(--theme-default-time) max-height ease-in-out;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--collapsed {\n display: none;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n padding-left: 0.125rem;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label: string;\n\n /\n Icon of the category\n /\n @Prop() icon: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer: MutationObserver;\n private menuItemsContainer: HTMLDivElement;\n private ixMenu: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged() {\n this.nestedItems = this.getNestedItems();\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems \|\| this.isNestedItemActive());\n }\n\n componentWillLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.menuExpand = this.ixMenu.expand;\n this.showItems = this.isCategoryItemListVisible();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer.style.removeProperty('max-height');\n this.menuItemsContainer.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={'chevron-down-small'}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } 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.cjs.js","mappings":"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","names":["anime","closestIxMenu","createMutationObserver","h","Host"],"sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport function createEnterLeaveDebounce(\n enterCallback: Function,\n leaveCallback: Function,\n {\n debounceTimeEnter,\n debounceTimeLeave,\n }: {\n debounceTimeEnter: number;\n debounceTimeLeave: number;\n } = {\n debounceTimeEnter: 0,\n debounceTimeLeave: 500,\n }\n) {\n let enterTimeout: NodeJS.Timeout;\n let leaveTimeout: NodeJS.Timeout;\n\n return {\n onEnter: () => {\n clearTimeout(leaveTimeout);\n enterTimeout = setTimeout(() => {\n enterCallback();\n }, debounceTimeEnter);\n },\n onLeave: () => {\n clearTimeout(enterTimeout);\n leaveTimeout = setTimeout(() => {\n leaveCallback();\n }, debounceTimeLeave);\n },\n };\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-text {\n width: 100%;\n padding-right: 0.25rem;\n @include ellipsis;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0;\n transition: var(--theme-default-time) max-height ease-in-out;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--collapsed {\n display: none;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n padding-left: 0.125rem;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label: string;\n\n /\n Icon of the category\n /\n @Prop() icon: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer: MutationObserver;\n private menuItemsContainer: HTMLDivElement;\n private ixMenu: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged() {\n this.nestedItems = this.getNestedItems();\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems \|\| this.isNestedItemActive());\n }\n\n componentWillLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.menuExpand = this.ixMenu.expand;\n this.showItems = this.isCategoryItemListVisible();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer.style.removeProperty('max-height');\n this.menuItemsContainer.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={'chevron-down-small'}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } 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/cjs/ix-menu-expand-icon.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
-const baseButton = require('./base-button-3735b8c2.js');
-const a11y = require('./a11y-eba397e8.js');
+const index = require('./index-757233c7.js');
+const baseButton = require('./base-button-119d9368.js');
+const a11y = require('./a11y-ae470f01.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;
@@ -36,7 +36,7 @@ const MenuExpandIcon = class {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (index.h(index.Host, { key: '04c0e5b43f6de34672561d67612587ccf57b8de2', class: {
+        return (index.h(index.Host, { key: '47eabfc90f05f809a8df541e3ae79f3f7d32bb5f', class: {
                 expanded: this.expanded,
             } }, this.getMenuIcon()));
     }

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const mutationObserver = require('./mutation-observer-babb20a5.js');
-const makeRef = require('./make-ref-c25629b7.js');
+const makeRef = require('./make-ref-499e1e41.js');
 const menuService = require('./menu-service-9936f670.js');
 require('./typed-event-8032c0c0.js');
@@ -32,19 +32,20 @@ const MenuItem = class {
         this.menuExpanded = false;
     }
     componentWillLoad() {
+        var _a;
         this.isHostedInsideCategory =
             !!this.hostElement.closest('ix-menu-category');
         this.onIconChange();
         this.onTabIconChange();
-        this.menuExpanded = menuService.menuController.nativeElement.expand;
+        this.menuExpanded = ((_a = menuService.menuController.nativeElement) === null || _a === void 0 ? void 0 : _a.expand) || false;
         this.menuExpandedDisposer = menuService.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, {
@@ -88,15 +89,15 @@ const MenuItem = class {
                 slot: 'bottom',
             };
         }
-        return (index.h(index.Host, Object.assign({ key: '44759af10c986ca08135dae3ab3b2258c933d8ef', class: {
+        return (index.h(index.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), index.h("button", { key: 'e30dbc8b43973f06f0d1f387ca886f11c088c0b9', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (index.h("ix-icon", { key: '11163d983423f020b14de4bcae24dbf55068e645', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (index.h("div", { class: "notification" }, index.h("div", { class: "pill" }, this.notifications))) : null, index.h("span", { key: '3a62db4c5e965a9fec6d5e4648a9587b7ff6271d', class: "tab-text text-default" }, this.label, index.h("slot", { key: '1c9c5c22c13da93176d68f93c516e4005506d43e' }))), !this.isCategory &&
+            } }, extendedAttributes), index.h("button", { key: '581d840e9f95e029300a3f14bc63841b919d7639', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, (this.icon || this.tabIcon) && (index.h("ix-icon", { key: 'b31f3ea13d00770520b0c3a1867fb7f9a9e42a21', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (index.h("div", { class: "notification" }, index.h("div", { class: "pill" }, this.notifications))) : null, index.h("span", { key: '977480b74cf07ffd13a9502d679fd3be4103fb17', class: "tab-text text-default" }, this.label, index.h("slot", { key: '19f5dfc4e6e8909391dc71c8593470dd8f408fd4' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
-            !this.menuExpanded && (index.h("ix-tooltip", { key: 'ec5fd96cbe7c0937202a70ebfba24abc66afd203', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+            !this.menuExpanded && (index.h("ix-tooltip", { key: 'e742d5f121663b823cc9a748c2fc8abafbe4d47e', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"ix-menu-item.entry.cjs.js","mappings":"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","names":["makeRef","createMutationObserver","menuController","h","Host"],"sources":["src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$menuItemHeight: 3rem;\n$menuItemPadding: 0.875rem;\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: var(--ix-menu-item-height, $menuItemHeight);\n min-height: var(--ix-menu-item-height, $menuItemHeight);\n max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n .tab {\n all: unset;\n box-sizing: border-box;\n display: flex;\n position: relative;\n align-items: center;\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: calc(100%);\n z-index: 500;\n padding-left: $menuItemPadding;\n\n @include ghost-hover-pressed;\n }\n\n .tab-icon {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n pointer-events: none;\n }\n\n .tab:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: -1px;\n }\n\n .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.cjs.js","mappings":"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","names":["makeRef","createMutationObserver","menuController","h","Host"],"sources":["src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$menuItemHeight: 3rem;\n$menuItemPadding: 0.875rem;\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: var(--ix-menu-item-height, $menuItemHeight);\n min-height: var(--ix-menu-item-height, $menuItemHeight);\n max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n .tab {\n all: unset;\n box-sizing: border-box;\n display: flex;\n position: relative;\n align-items: center;\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: calc(100%);\n z-index: 500;\n padding-left: $menuItemPadding;\n\n @include ghost-hover-pressed;\n }\n\n .tab-icon {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n pointer-events: none;\n }\n\n .tab:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: -1px;\n }\n\n .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/cjs/ix-menu-settings-item.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const menuSettingsItemCss = ":host{display:block}";
 const IxMenuSettingsItemStyle0 = menuSettingsItemCss;
@@ -21,7 +21,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '4a2b28d8557666fe0bba168564975571238c618d' }, index.h("slot", { key: 'c6f14fc9b3f99836e0e78a553e8f823e274f26d1' })));
+        return (index.h(index.Host, { key: '7f91b18b72aa08bc94bca973e934a6b591d6466b' }, index.h("slot", { key: '56192b67632208075a544cfcb7970fe7d6e42cbc' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const menuTabsFc = require('./menu-tabs-fc-df53f176.js');
-require('./index-529f21c1.js');
+const menuTabsFc = require('./menu-tabs-fc-eb899b0d.js');
+require('./index-757233c7.js');