@siemens/ix 4.4.0 → 5.0.0

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

@@ -1,37 +1,64 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
+var component = require('./component-CYtonfpw.js');
+require('./focus-utilities-yx7wWjEO.js');
+require('./shadow-dom-BG8VqeIu.js');
 
 const menuAboutNewsCss = () => `:host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-2);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--theme-default-time);margin-inline-start:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-inline-start:4rem;margin-block-start:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-2);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}@media only screen and (max-width: 48em){:host{display:flex;flex-direction:column;max-height:calc(100vh - 4.75rem);width:calc(100% - 2rem);max-width:30rem;transform:translateX(calc(1rem - 50%));left:calc(50% - 1rem) !important;bottom:1rem !important;margin-inline:0 !important;z-index:calc(var(--theme-z-index-sticky) - 1)}:host .slot-container{overflow-y:auto}:host #arrow{display:none}}`;
 
-const MenuAboutNews = class {
+const MenuAboutNews = class extends index.Mixin(...component.DefaultMixins) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.showMore = index.createEvent(this, "showMore", 7);
         this.closePopover = index.createEvent(this, "closePopover", 7);
-        /**
-         * Show about news
-         */
-        this.show = false;
-        /**
-         * i18n label for 'Show more' button
-         */
-        this.i18nShowMore = 'Show more';
-        /** @internal */
-        this.expanded = false;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Show about news
+     */
+    show = false;
+    /**
+     * Title of the about news
+     */
+    label;
+    /**
+     * i18n label for 'Show more' button
+     */
+    i18nShowMore = 'Show more';
+    /**
+     * Subtitle of the about news
+     */
+    aboutItemLabel;
+    /**
+     * Defines which tab should be active, used when the about news is used in combination with ix-menu-about
+     *
+     * @since 5.0.0
+     */
+    activeAboutTabKey;
+    /**
+     * Show More button is pressed
+     */
+    showMore;
+    /**
+     * Popover closed
+     */
+    closePopover;
+    /** @internal */
+    expanded = false;
     render() {
-        return (index.h(index.Host, { key: '7443d209d383de9e46d8c024c1756ae814c5d764', class: {
+        return (index.h(index.Host, { key: 'c284e2ac608e4e039c2df0ee62c2c3befc241391', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, index.h("div", { key: '034c93b01133fa50d28c0e4ce98becc53fe29158', class: "banner-container" }, index.h("ix-icon", { key: '69df7443eba7107db4d4f20d2a628159a7ed8660', color: "color-inv-contrast-text", name: index$1.iconShout, size: "32" }), index.h("svg", { key: '36cc1e785395307d29813cac4f13b1309ee2d257', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: '35d4a86b62c225dc03329e6e53bdd6180d1a6b8e', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: 'd5f1d76a2bf661fb865fa7c4857b0f20d6f225dc', class: "cui-popover-news-header" }, index.h("ix-typography", { key: 'd8ef22907758393fe430cc2a4940dea8ee7372e8', format: "label", bold: true }, this.label)), index.h("ix-icon-button", { key: '2fb7cf52ee3bf3e475fc5fa6d0aaadec96246acc', size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, index.h("div", { key: 'e4a567021e29740a32199328c1a18024265101a6', class: "banner-container" }, index.h("ix-icon", { key: 'dc9d56156ee0010d675315a3afd03f17f45a9b6f', color: "color-inv-contrast-text", name: index$1.iconShout, size: "32" }), index.h("svg", { key: '95f83ef229d360cc1d65641bcd0f7f377b1f22f7', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: '4291b6af8d4b43a13e2e4aa50b9a180ee5903202', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: 'adb50ab8101ff53415ea4fee45e7bc182c9aad00', class: "cui-popover-news-header" }, index.h("ix-typography", { key: '7b7bdb1153222bbee432ed46c562ac1a6a8d7d3f', format: "label", bold: true }, this.label)), index.h("ix-icon-button", { key: '6cdc8cf741a65498937db07c1f8d767d11a62f04', size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), index.h("div", { key: '8875b7027424233f78ac46c52cbeccc3d4fb7560', class: "slot-container" }, index.h("slot", { key: 'b662f3b8c11a9c3ea639ed6b753a4b80ed038bec' })), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), index.h("div", { key: '9c374a87ff85b7660820b9b57abe8e579190071b', class: "slot-container" }, index.h("slot", { key: 'bd4a92948a87e0e2fb2a0617bedb065147ae3d57' })), this.activeAboutTabKey ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (event) => {
                 this.show = false;
-                this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, index.h("div", { key: '97cbdaf247a6f83b9361121cbac596dc86e2bb28', id: "arrow" })));
+                this.showMore.emit(event);
+            } }, this.i18nShowMore))) : null, index.h("div", { key: '5f13c58d47a92e7acd3212ae7d48cc78ab4a5240', id: "arrow" })));
     }
 };
 MenuAboutNews.style = menuAboutNewsCss();

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

@@ -1,47 +1,91 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var ixMenuSettings_entry = require('./ix-menu-settings-B3zMjM3D.js');
-require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
 
-const menuAboutCss = () => `.text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}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 menuAboutCss = () => `.text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}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 *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}: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}`;
 
 const MenuAbout = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tabChange = index.createEvent(this, "tabChange", 7);
         this.close = index.createEvent(this, "close", 7);
-        /**
-         * Content of the header
-         */
-        this.label = 'About & legal information';
-        /**
-         * Aria label for close button
-         */
-        this.ariaLabelCloseButton = 'Close About';
-        /** @internal */
-        this.show = false;
     }
-    updateTab(newLabel, oldLabel) {
-        if (newLabel !== oldLabel) {
-            ixMenuSettings_entry.syncTabDisplay(this, newLabel);
-        }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Whether to suppress legacy tabs (ix-menu-about-item) and use slotted tabs
+     * (ix-tab-item) instead
+     *
+     * @since 5.0.0
+     */
+    suppressLegacyTabs = false;
+    /**
+     * Active tab used for legacy ix-menu-about-item integrations
+     *
+     * @deprecated since 5.0.0, only used for legacy ix-menu-about-item
+     * integrations
+     * @since 5.0.0
+     */
+    activeTabKey;
+    /**
+     * Content of the header
+     */
+    label = 'About & legal information';
+    /**
+     * Aria label for close button
+     */
+    ariaLabelCloseButton = 'Close About';
+    /** @internal */
+    show = false;
+    /**
+     * Active tab changed
+     * @since 3.0.0
+     */
+    tabChange;
+    /**
+     * About and Legal closed
+     */
+    close;
+    itemsObserver;
+    get items() {
+        return Array.from(this.hostElement.querySelectorAll('ix-menu-about-item'));
     }
     componentWillLoad() {
-        ixMenuSettings_entry.initialize(this);
+        this.itemsObserver = new MutationObserver(() => this.onItemsChange());
+        this.itemsObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['label'],
+        });
+        this.onItemsChange();
+    }
+    disconnectedCallback() {
+        this.itemsObserver?.disconnect();
+    }
+    onItemsChange() {
+        if (this.suppressLegacyTabs) {
+            return;
+        }
+        if (this.activeTabKey === undefined && this.items.length > 0) {
+            this.activeTabKey = this.items[0].tabKey;
+        }
     }
-    componentDidLoad() {
-        index.forceUpdate(this.el);
+    handleLabelChange() {
+        if (this.suppressLegacyTabs) {
+            return;
+        }
+        index.forceUpdate(this);
     }
     render() {
-        return index.h(ixMenuSettings_entry.MenuTabs, { key: 'ca696d609e81a77afbb7210a699c89e52cf2b59f', context: this });
+        return (index.h(index.Host, { key: 'cd2ec8d53634b27f234387f307e04d39533ca6ee', slot: 'ix-menu-about', class: {
+                show: this.show,
+                ['legacy-tabs']: !this.suppressLegacyTabs,
+            } }, index.h("div", { key: '68f17954c5f51c37e44b24b154cf58f218149468', class: 'about-header' }, index.h("h2", { key: '1e56a04ed218d37418cf9190f264586883e7f9bf', class: "text-h2" }, this.label), index.h("ix-icon-button", { key: '54b82a7838d4e1d9413efec58e03aeea3dcf21dd', variant: "tertiary", size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+                name: 'ix-menu-about',
+                nativeEvent: e,
+            }) })), !this.suppressLegacyTabs ? (index.h("ix-tab-set", null, index.h("ix-tabs", { activeTabKey: this.activeTabKey }, this.items.map(({ label, tabKey }) => (index.h("ix-tab-item", { tabKey: tabKey, selected: tabKey === this.activeTabKey, label: label })))), index.h("slot", null))) : (index.h("slot", null))));
     }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "activeTabLabel": [{
-                "updateTab": 0
-            }]
-    }; }
 };
 MenuAbout.style = menuAboutCss();
 

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
 
 const menuAvatarCss = () => `:host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:var(--theme-default-time)}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{color:var(--theme-nav-item-primary--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar{border-radius:1.25rem}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover,: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)}`;
 
@@ -12,28 +12,61 @@ const MenuAvatar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.logoutClick = index.createEvent(this, "logoutClick", 7);
-        /**
-         * i18n label for 'Logout' button
-         */
-        this.i18nLogout = 'Logout';
-        /**
-         *  Control the visibility of the logout button
-         */
-        this.hideLogoutButton = false;
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        /**
-         * Control the visibility of the dropdown menu
-         */
-        this.showContextMenu = false;
-        this.avatarElementId = 'ix-menu-avatar-id';
-        this.tooltipRef = makeRef.makeRef();
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * First line of text
+     */
+    top;
+    /**
+     * Second line of text
+     */
+    bottom;
+    /**
+     * Display a avatar image
+     */
+    image;
+    /**
+     * Display the initials of the user. Will be overwritten by image
+     */
+    initials;
+    /**
+     * Tooltip text to display on hover. If not set, the 'top' property (user name) will be used as the default tooltip text.
+     *
+     * @since 4.3.0.
+     */
+    tooltipText;
+    /**
+     * aria-label for the tooltip
+     *
+     * @since 4.3.0.
+     */
+    ariaLabelTooltip;
+    /**
+     * i18n label for 'Logout' button
+     */
+    i18nLogout = 'Logout';
+    /**
+     *  Control the visibility of the logout button
+     */
+    hideLogoutButton = false;
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Control the visibility of the dropdown menu
+     */
+    showContextMenu = false;
+    /**
+     * Logout click
+     */
+    logoutClick;
+    avatarElementId = 'ix-menu-avatar-id';
+    tooltipRef = makeRef.makeRef();
     onSlotChange() {
         const slot = this.hostElement.shadowRoot.querySelector('slot');
         if (!slot) {
@@ -43,20 +76,18 @@ const MenuAvatar = class {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        var _a;
-        const tooltipText = (_a = this.tooltipText) !== null && _a !== void 0 ? _a : this.top;
+        const tooltipText = this.tooltipText ?? this.top;
         const ariaHidden = tooltipText === this.top;
-        return (index.h(index.Host, { key: '63251d35fc15b945de3bae097702c3e0e7377568', slot: "ix-menu-avatar" }, index.h("button", { key: 'f50dd772c58b7b20e966d0a992f6e2537ebbe5bc', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '1b3ea2ab31cc248e021306b9399b5b2bbad1122f', image: this.image, initials: this.initials }), index.h("div", { key: '1e8aee8c464ebc41e99d00b6933f6682d1c98019', class: "avatar-name" }, index.h("span", { key: '3bc559472005be3d21b406fd9ea85fcb9737dcb6', class: "text-default-single" }, this.top), index.h("span", { key: '023fb55cd5229df9aadec9daf86834e16944a66f', class: "text-default-single" }, this.bottom))), !!tooltipText && (index.h("ix-tooltip", { key: '8e13fc36570e1152049b636ecabb042e7288c3e8', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11y.a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), index.h("ix-dropdown", { key: '6a7e04c67894981100c3b81eb6ac9c5d9a16194a', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        return (index.h(index.Host, { key: '5c6f05897a9a1c5a24b8ac5ba87686b6f83ca090', slot: "ix-menu-avatar" }, index.h("button", { key: '4425caeee1c3ae0c74d45c3253190cc6272416a3', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: 'c0141851636696906476abd3777f7e5bd64322b7', image: this.image, initials: this.initials }), index.h("div", { key: '3f79c860b22a4dbcc8e72e768a6709c27a6a78ea', class: "avatar-name" }, index.h("span", { key: 'e901a92cee9be95d6602da989872c8870291418a', class: "text-default-single" }, this.top), index.h("span", { key: '7da5bba687c52d0fab08c8c4cdc992bdb3dbd7be', class: "text-default-single" }, this.bottom))), !!tooltipText && (index.h("ix-tooltip", { key: '1dd0063f1e2ee34df0076dd7a19b885d19837d80', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11y.a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), index.h("ix-dropdown", { key: '6709e38d692c0f725ffbdd2531fa8d9b5d89bf3c', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
                 mainAxis: 16,
             }, onShowChanged: (event) => {
                 if (event.detail && this.tooltipRef.current) {
                     this.tooltipRef.current.hideTooltip(0);
                 }
-            }, enableTopLayer: this.enableTopLayer }, index.h("slot", { key: 'd7444d53d15826d0999476c55bc428a89a6b73fa', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (index.h("ix-menu-avatar-item", { key: 'f6c1fc16b2b39ef2277ae01485f1b7014e72e568', label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
+            }, enableTopLayer: this.enableTopLayer }, index.h("slot", { key: '40ebda089d3578ddd04b3a304b14406051760df8', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (index.h("ix-menu-avatar-item", { key: '7a0a8e9d709adb8e7cf851fa56e1943cdcd21966', label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
             } })))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 MenuAvatar.style = menuAvatarCss();