@siemens/ix 2.1.0 → 2.1.1-beta.0

package/dist/esm/ix-input-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-38dea61d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0d053ada.js';
 import { g as getSlottedElements } from './shadow-dom-60e9243d.js';
 
 const inputGroupCss = ":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.375rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.375rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}";

package/dist/esm/ix-key-value-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-38dea61d.js';
+import { r as registerInstance, h, H as Host } from './index-0d053ada.js';
 
 const keyValueListCss = ":host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}";
 const IxKeyValueListStyle0 = keyValueListCss;

package/dist/esm/ix-key-value.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-38dea61d.js';
+import { r as registerInstance, h, H as Host } from './index-0d053ada.js';
 
 const keyValueCss = ":host(.keyValue){display:flex;flex-direction:row;align-items:center;gap:1rem}:host(.keyValue) .keyValue__icon{padding:0.25rem 0}:host(.keyValue) .keyValue__content{display:flex;flex-grow:1;align-items:flex-start}:host(.keyValue) .keyValue__content,:host(.keyValue) .keyValue__content .content__label,:host(.keyValue) .keyValue__content .content__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}:host(.keyValue) .keyValue__content .content__label{color:var(--theme-color-soft-text)}:host(.keyValue) .keyValue__content .content__value{width:100%}:host(.keyValue.keyValue--column){padding:0.5rem 0;border-bottom:1px solid var(--theme-color-soft-bdr)}:host(.keyValue.keyValue--column) .keyValue__content{flex-direction:column}:host(.keyValue.keyValue--column) .keyValue__content .content__label,:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue){padding:2px 0}:host(.keyValue.keyValue--row){padding:0.25rem 0}:host(.keyValue.keyValue--row) .keyValue__content{flex-direction:row;gap:1rem;align-items:center}:host(.keyValue.keyValue--row) .keyValue__content .content__label,:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue){padding:6px 0}:host(.keyValue.keyValue--row) .keyValue__content .content__label{min-width:8rem}";
 const IxKeyValueStyle0 = keyValueCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-38dea61d.js';
+import { r as registerInstance, h, H as Host } from './index-0d053ada.js';
 
 const kpiCss = ":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-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);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";
 const IxKpiStyle0 = kpiCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-38dea61d.js';
+import { r as registerInstance, h, H as Host } from './index-0d053ada.js';
 
 const linkButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;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:inline-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled):hover .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active,:host .link-button:not(.disabled):not(:disabled).active{color:var(--theme-color-dynamic--active)}:host .link-button:not(.disabled):not(:disabled):active .link,:host .link-button:not(.disabled):not(:disabled).active .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
 const IxLinkButtonStyle0 = linkButtonCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-38dea61d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0d053ada.js';
 import { a as anime } from './anime.es-185e9087.js';
 
 const mapNavigationOverlayCss = ".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{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .overlay-header{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}:host .overlay-header-content{display:flex;align-items:center;min-width:0}:host .overlay-header-content ix-icon{margin-inline-start:1rem;color:var(--theme-overlay-header--color)}:host .overlay-header-content .overlay-header-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);margin-inline-start:1rem}:host .color-indicator{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}:host .overlay-close{margin-inline-start:auto;margin-inline-end:1rem}:host .d-none{display:none}:host(.d-none){display:none}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-38dea61d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0d053ada.js';
 import { a as anime } from './anime.es-185e9087.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-c9078420.js';
 import './typed-event-ad6484c5.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-38dea61d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-0d053ada.js';
 
 const menuAboutItemCss = ":host{display:block}";
 const IxMenuAboutItemStyle0 = menuAboutItemCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-38dea61d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-0d053ada.js';
 
 const menuAboutNewsCss = ":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--animate-duration);margin-inline-start:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-inline-start:4rem;margin-block-start:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);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;

package/dist/esm/ix-menu-about.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-38dea61d.js';
-import { s as setTab, i as initialize, M as MenuTabs } from './menu-tabs-fc-efc49c04.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-0d053ada.js';
+import { s as setTab, i as initialize, M as MenuTabs } from './menu-tabs-fc-7b7acc8b.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;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-38dea61d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0d053ada.js';
 import { g as getSlottedElements } from './shadow-dom-60e9243d.js';
 
 const menuAvatarCss = ":host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:0.15s;border-radius:1.25rem}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}: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{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)}";

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-38dea61d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0d053ada.js';
 import { a as anime } from './anime.es-185e9087.js';
 import { c as closestIxMenu } from './context-c9078420.js';
 import { c as createMutationObserver } from './mutation-observer-db8757e6.js';
 import './typed-event-ad6484c5.js';
 
-const menuCategoryCss = ":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-chevron{margin-left:auto;margin-right:0px;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0px;transition:var(--theme-default-time) max-height ease-in-out;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--expanded{max-height:999999999px}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";
+const menuCategoryCss = ":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";
 const IxMenuCategoryStyle0 = menuCategoryCss;
 
 const DefaultIxMenuItemHeight = 40;
@@ -81,12 +81,16 @@ const MenuCategory = class {
     isCategoryItemListVisible() {
         return this.menuExpand && (this.showItems || this.isNestedItemActive());
     }
-    componentDidLoad() {
+    componentWillLoad() {
         const closestMenu = closestIxMenu(this.hostElement);
         if (!closestMenu) {
             throw Error('ix-menu-category can only be used as a child of ix-menu');
         }
         this.ixMenu = closestMenu;
+        this.menuExpand = this.ixMenu.expand;
+        this.showItems = this.isCategoryItemListVisible();
+    }
+    componentDidLoad() {
         this.observer = createMutationObserver(() => this.onNestedItemsChanged());
         this.observer.observe(this.hostElement, {
             attributes: true,
@@ -98,24 +102,32 @@ const MenuCategory = class {
         });
         this.ixMenu.addEventListener('expandChange', ({ detail: menuExpand }) => {
             this.menuExpand = menuExpand;
+            if (!menuExpand) {
+                this.clearMenuItemStyles();
+            }
             this.showItems = this.isCategoryItemListVisible();
         });
     }
+    clearMenuItemStyles() {
+        this.menuItemsContainer.style.removeProperty('max-height');
+        this.menuItemsContainer.style.removeProperty('opacity');
+    }
     disconnectedCallback() {
         if (this.observer) {
             this.observer.disconnect();
         }
     }
     render() {
-        return (h(Host, { key: '200bff1a548044f19fb8f2280dfbfafe1e5cfcdd', class: {
+        return (h(Host, { key: '3f5dfce349405ecd3798a5dfd952ac42f8487e6d', class: {
                 expanded: this.showItems,
-            } }, h("ix-menu-item", { key: '447015d4ad34f0c2a37ea1c676abb71c062f475c', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { key: 'e0a548b93ea0286298d7d05aa2df2fcafc648fdc', class: "category" }, this.label, h("ix-icon", { key: '1df8ba182dfed3a4b0ce676a4a1e796749d2dacb', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: '6cd75627b0929758afa3c0cb931ba0c32df13bd2', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { key: 'c0022335362c681a5d9bf3ddd688439ea865d20d', class: "category" }, h("div", { key: '77a3681c6bd3a7c8f5dbad2a7527fc91af0c2d3a', class: "category-text" }, this.label), h("ix-icon", { key: '06f46b6d5f1ba7ad020126f297d37972f972bee4', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: 'ade480e9fb57aa93a4796c9c685c1af80db170eb', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: 'd442db2f892f10fd430334664260cd657da22cb8', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '8c0c5c2a17314bf9da36dfc6d0c147ee67c7ac16', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+                'menu-items--collapsed': !this.showItems,
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '3c0d16c043a3f453ce879bae38a35eb02ae646a4', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -125,7 +137,7 @@ const MenuCategory = class {
                         this.showDropdown = false;
                     }
                 }
-            } }, h("ix-dropdown-item", { key: 'd85fdf6132b7214c478547f95ecb28be7b11c3ae', class: 'category-dropdown-header' }, h("ix-typography", { key: 'b41ede61c366cf9ca189f19ccf1b7369bc3907bd', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: '5a354c66b93f5f630f75b519234c8f167a15aec9' }), h("slot", { key: '505699faf4ef92aeaea9a8b098b82b8900c56128' }))));
+            } }, h("ix-dropdown-item", { key: '26f3d0e5bab44a7dbf86a23743f252916887c56a', class: 'category-dropdown-header' }, h("ix-typography", { key: 'd8f1724a07a9b3d050d8e215a6a321e57b54cc82', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: '67b72bfdacc3db1127cf21accce402bf3f10d5b7' }), h("slot", { key: 'bf8ed74c15b32d89ff13509678e7a735ab3f73e0' }))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ix-menu-category.entry.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,26CAA26C,CAAC;AACp8C,6BAAe,eAAe;;ACY9B,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,uBAAuB,GAAG,GAAG,CAAC;MAUvB,YAAY;;;;;;0BAkBD,KAAK;yBACN,KAAK;4BACF,KAAK;2BACmB,EAAE;;IAM1C,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/B,KAAK,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;QACnB,KAAK,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,iBAAiB,CAAC,CAAc;QACtC,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;QAED,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KACxC;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,gBAAgB;QACd,MAAM,WAAW,GAAG,aAAa,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,QAAQ,GAAG,sBAAsB,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;YAE7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;SACnD,CACF,CAAC;KACH;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,SAAS;aACzB,IAED,qEACE,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,iBAAiB,CAAC,CAAC,CAAC,IAEzC,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,KAAK,EACX,gEACE,IAAI,EAAE,oBAAoB,EAC1B,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,wBAAwB,EAAE,IAAI,CAAC,SAAS;aACzC,GACQ,CACP,CACO,EACf,4DACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,kBAAkB,GAAG,GAAI,CAAC,EAC9C,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,sBAAsB,EAAE,IAAI,CAAC,SAAS;aACvC,IAEA,IAAI,CAAC,SAAS,GAAG,eAAa,GAAG,IAAI,CAClC,EACN,oEACE,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;iBACF;aACF,IAED,yEAAkB,KAAK,EAAE,0BAA0B,IACjD,sEAAe,OAAO,EAAC,sBAAsB,EAAC,KAAK,EAAC,KAAK,IACtD,IAAI,CAAC,KAAK,CACG,CACC,EACnB,oEAAyB,EACzB,8DAAa,CACD,CACT,EACP;KACH;;;;;;;","names":[],"sources":["src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  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-chevron {\n    margin-left: auto;\n    margin-right: 0px;\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: 0px;\n    transition: var(--theme-default-time) max-height ease-in-out;\n    padding: 0.25rem 0 0.25rem 1.625rem;\n  }\n\n  .menu-items--expanded {\n    max-height: 999999999px;\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    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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\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  @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 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 onCategoryClicked(e?: MouseEvent) {\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n\n    this.showDropdown = !this.showDropdown;\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  componentDidLoad() {\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.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\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\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      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClicked(e)}\n        >\n          <div class=\"category\">\n            {this.label}\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          }}\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              }\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}
+{"file":"ix-menu-category.entry.js","mappings":"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","names":[],"sources":["src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\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  @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 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 onCategoryClicked(e?: MouseEvent) {\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n\n    this.showDropdown = !this.showDropdown;\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      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClicked(e)}\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              }\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}

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-38dea61d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0d053ada.js';
 import { c as createMutationObserver } from './mutation-observer-db8757e6.js';
 
-const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{all:unset;box-sizing:border-box;display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);width:100%;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .tab-icon{color:var(--theme-nav-item-primary-icon--color);position:relative;pointer-events:none}:host .tab:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:-1px}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.tab-icon{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.tab-nested) .tab::before{display:none}";
+const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{all:unset;box-sizing:border-box;display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);width:100%;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .tab-icon{color:var(--theme-nav-item-primary-icon--color);position:relative;pointer-events:none}:host .tab:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:-1px}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.5rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.tab-icon{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.tab-nested) .tab{flex-direction:row;padding-left:1.375rem}:host(.tab-nested) .tab .notification{position:relative;top:0;left:0;padding-left:0.5rem}:host(.tab-nested) .tab .tab-icon{padding-left:0.5rem;padding-right:0.5rem}:host(.tab-nested) .tab .tab-text{margin-left:0.5rem}:host(.tab-nested) .tab::before{display:none}";
 const IxMenuItemStyle0 = menuItemCss;
 
 const MenuItem = class {
@@ -10,7 +10,7 @@ const MenuItem = class {
         this.isHostedInsideCategory = false;
         this.home = false;
         this.bottom = false;
-        this.tabIcon = 'document';
+        this.tabIcon = undefined;
         this.icon = undefined;
         this.notifications = undefined;
         this.active = undefined;
@@ -20,6 +20,8 @@ const MenuItem = class {
     componentWillLoad() {
         this.isHostedInsideCategory =
             !!this.hostElement.closest('ix-menu-category');
+        this.onIconChange();
+        this.onTabIconChange();
     }
     componentWillRender() {
         this.title = this.hostElement.innerText;
@@ -39,6 +41,20 @@ const MenuItem = class {
             this.observer.disconnect();
         }
     }
+    onIconChange() {
+        if (!this.isHostedInsideCategory &&
+            !this.hostElement.icon &&
+            !this.hostElement.tabIcon) {
+            this.icon = 'document';
+        }
+    }
+    onTabIconChange() {
+        if (!this.isHostedInsideCategory &&
+            !this.hostElement.icon &&
+            !this.hostElement.tabIcon) {
+            this.tabIcon = 'document';
+        }
+    }
     render() {
         var _a;
         let extendedAttributes = {};
@@ -52,15 +68,19 @@ const MenuItem = class {
                 slot: 'bottom',
             };
         }
-        return (h(Host, Object.assign({ key: 'd00ab2e99c623bcb386887b3173ad3afe94fcb35', class: {
+        return (h(Host, Object.assign({ key: 'cf7c3ee73c7ff53d9825bc64460a72a876c46f03', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), h("button", { key: '8d6b02cc96f0477c1eee2a665fbbcbacfada4197', class: "tab", title: this.title, tabIndex: this.disabled ? -1 : 0, role: "listitem" }, h("ix-icon", { key: '881303994ea8a29f49ac55b4599bee5b4755beec', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon }), h("div", { key: '2cb1cc719ca29def024b81b72dfe6861d0e4c77c', class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { key: 'cbe86fcfb2b26056b7d9c3bc1ec26539ec7bf481', class: "tab-text text-default" }, h("slot", { key: '9c71b007cff4024971ae2f64a3e3fbe2c8ac85b5' })))));
+            } }, extendedAttributes), h("button", { key: 'd79e9ab5097e712949a65e59e08426166dfa4091', class: "tab", title: this.title, tabIndex: this.disabled ? -1 : 0, role: "listitem" }, (this.icon || this.tabIcon) && (h("ix-icon", { 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: 'edbdefc1edd5b572c49d2f74e184a466989500e6', class: "tab-text text-default" }, h("slot", { key: 'f3d75d13c9b68b69e7731f9c947c423e304a76d6' })))));
     }
     get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "icon": ["onIconChange"],
+        "tabIcon": ["onTabIconChange"]
+    }; }
 };
 MenuItem.style = IxMenuItemStyle0;
 

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

@@ -1 +1 @@
-{"file":"ix-menu-item.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,gmGAAgmG,CAAC;AACrnG,yBAAe,WAAW;;MCmBb,QAAQ;;;QA6CX,2BAAsB,GAAG,KAAK,CAAC;oBAzCxB,KAAK;sBAOH,KAAK;uBAOJ,UAAU;;;;;;;IA6B5B,iBAAiB;QACf,IAAI,CAAC,sBAAsB;YACzB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;KAClD;IAED,mBAAmB;QACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;KACzC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;YACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;SACzC,CAAC,CAAC;QAEH,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;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,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,IAAI,EAAC,UAAU,IAEf,gEACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,GACtB,EACX,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,EACN,6DAAM,KAAK,EAAC,uBAAuB,IACjC,8DAAa,CACR,CACA,CACJ,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  .tab:not(:last-child) {\n    margin-bottom: $small-space;\n  }\n\n  .notification {\n    display: inline-flex;\n    position: absolute;\n    top: 0.25rem;\n    left: 1.75rem;\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      border-radius: 6.25rem;\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 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::before {\n    display: none;\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 } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\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   * 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() tabIcon = 'document';\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() 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;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n  private isHostedInsideCategory = false;\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n  }\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\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\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          title={this.title}\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"listitem\"\n        >\n          <ix-icon\n            class={'tab-icon'}\n            name={this.icon ?? this.tabIcon}\n          ></ix-icon>\n          <div class=\"notification\">\n            {this.notifications ? (\n              <div class=\"pill\">{this.notifications}</div>\n            ) : null}\n          </div>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-menu-item.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,y3GAAy3G,CAAC;AAC94G,yBAAe,WAAW;;MCmBb,QAAQ;;;QA6CX,2BAAsB,GAAG,KAAK,CAAC;oBAzCxB,KAAK;sBAOH,KAAK;;;;;;;;IAoCtB,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;KACxB;IAED,mBAAmB;QACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;KACzC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;YACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;SACzC,CAAC,CAAC;QAEH,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;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,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,IAAI,EAAC,UAAU,IAEd,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,MACzB,eACE,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,IACjC,8DAAa,CACR,CACA,CACJ,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  .tab:not(:last-child) {\n    margin-bottom: $small-space;\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      border-radius: 6.25rem;\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 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';\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   * 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;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n  private isHostedInsideCategory = false;\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n\n    this.onIconChange();\n    this.onTabIconChange();\n  }\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\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\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          title={this.title}\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"listitem\"\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            <slot></slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-38dea61d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-0d053ada.js';
 
 const menuSettingsItemCss = ":host{display:block}";
 const IxMenuSettingsItemStyle0 = menuSettingsItemCss;
@@ -17,7 +17,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (h(Host, { key: 'ece4d8e415ca694383a7a2e3bd55733e43521143' }, h("slot", { key: '3da9723abce35580aa1d6382ff936887a538fe9e' })));
+        return (h(Host, { key: '265bf24f492278e364dcdba664e6e919e60b745a' }, h("slot", { key: '2979e025b275b5d031f22f1bfb1f37272d624d1b' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

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

@@ -1,4 +1,4 @@
-export { a as ix_menu_settings } from './menu-tabs-fc-efc49c04.js';
-import './index-38dea61d.js';
+export { a as ix_menu_settings } from './menu-tabs-fc-7b7acc8b.js';
+import './index-0d053ada.js';
 
 //# sourceMappingURL=ix-menu-settings.entry.js.map

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-38dea61d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0d053ada.js';
 import { a as anime } from './anime.es-185e9087.js';
-import { s as showAppSwitch } from './index-ff9bfca4.js';
+import { s as showAppSwitch } from './index-76b9c8de.js';
 import { a as useContextConsumer, A as ApplicationLayoutContext } from './context-c9078420.js';
 import { a as applicationLayoutService } from './service-02cc9011.js';
 import { m as menuController } from './menu-service-0a72c2d0.js';
 import { a as convertToRemString } from './rwd.util-d8e00a88.js';
 import { t as themeSwitcher } from './theme-switcher-b10fb4da.js';
 import './animation-4a73b1c3.js';
-import './modal-8bc5477b.js';
+import './modal-54740f80.js';
 import './typed-event-ad6484c5.js';
 import './breakpoints-d5c2f627.js';
 
@@ -425,14 +425,14 @@ const Menu = class {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'bulb' }, 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()}` }, this.getCollapseText())) : null), h("div", { key: 'ee4db379f8d07738ce3c1fa6f71292a659de314f', class: {
+            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, 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' }, 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()}` }, this.getCollapseText())) : null), h("div", { key: 'cc7443de9d327194cc7aff083033111642440efc', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: 'b3b166add6d5635863d6b6c665cf073b020ec6d6', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '9e899a47dd33eaf9e78d3150ccc4f078e1ab212f', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: '5a166f1447115082d0578b42768b9bf79f8df406', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '0f29a9bbb6a2acc42744818a1813329220ce5c54', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {