@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/menu-about/menu-about.js

@@ -6,35 +6,83 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { forceUpdate, h, } from "@stencil/core";
-import { MenuTabs } from "../utils/menu-tabs/menu-tabs-fc";
-import { initialize, syncTabDisplay, } from "../utils/menu-tabs/menu-tabs-utils";
+import { iconClose } from "@siemens/ix-icons/icons";
+import { forceUpdate, h, Host, } from "@stencil/core";
 export class MenuAbout {
-    constructor() {
-        /**
-         * 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) {
-            syncTabDisplay(this, newLabel);
-        }
+    hostElement;
+    /**
+     * 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() {
-        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();
     }
-    componentDidLoad() {
-        forceUpdate(this.el);
+    onItemsChange() {
+        if (this.suppressLegacyTabs) {
+            return;
+        }
+        if (this.activeTabKey === undefined && this.items.length > 0) {
+            this.activeTabKey = this.items[0].tabKey;
+        }
+    }
+    handleLabelChange() {
+        if (this.suppressLegacyTabs) {
+            return;
+        }
+        forceUpdate(this);
     }
     render() {
-        return h(MenuTabs, { key: 'ca696d609e81a77afbb7210a699c89e52cf2b59f', context: this });
+        return (h(Host, { key: 'cd2ec8d53634b27f234387f307e04d39533ca6ee', slot: 'ix-menu-about', class: {
+                show: this.show,
+                ['legacy-tabs']: !this.suppressLegacyTabs,
+            } }, h("div", { key: '68f17954c5f51c37e44b24b154cf58f218149468', class: 'about-header' }, h("h2", { key: '1e56a04ed218d37418cf9190f264586883e7f9bf', class: "text-h2" }, this.label), h("ix-icon-button", { key: '54b82a7838d4e1d9413efec58e03aeea3dcf21dd', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+                name: 'ix-menu-about',
+                nativeEvent: e,
+            }) })), !this.suppressLegacyTabs ? (h("ix-tab-set", null, h("ix-tabs", { activeTabKey: this.activeTabKey }, this.items.map(({ label, tabKey }) => (h("ix-tab-item", { tabKey: tabKey, selected: tabKey === this.activeTabKey, label: label })))), h("slot", null))) : (h("slot", null))));
     }
     static get is() { return "ix-menu-about"; }
     static get encapsulation() { return "shadow"; }
@@ -50,7 +98,30 @@ export class MenuAbout {
     }
     static get properties() {
         return {
-            "activeTabLabel": {
+            "suppressLegacyTabs": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Whether to suppress legacy tabs (ix-menu-about-item) and use slotted tabs\n(ix-tab-item) instead"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suppress-legacy-tabs",
+                "defaultValue": "false"
+            },
+            "activeTabKey": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -61,13 +132,19 @@ export class MenuAbout {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Active tab"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "since 5.0.0, only used for legacy ix-menu-about-item\nintegrations"
+                        }, {
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Active tab used for legacy ix-menu-about-item integrations"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "active-tab-label"
+                "attribute": "active-tab-key"
             },
             "label": {
                 "type": "string",
@@ -134,11 +211,6 @@ export class MenuAbout {
             }
         };
     }
-    static get states() {
-        return {
-            "items": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "tabChange",
@@ -182,11 +254,14 @@ export class MenuAbout {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
-    static get watchers() {
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
         return [{
-                "propName": "activeTabLabel",
-                "methodName": "updateTab"
+                "name": "labelChange",
+                "method": "handleLabelChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/menu-about-item/menu-about-item.js

@@ -6,8 +6,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from "@stencil/core";
-export class MenuAboutItem {
+import { h, Host, Mixin, } from "@stencil/core";
+import { BaseTabMixin } from "../tab-item/tab.mixin";
+/**
+ * @deprecated since 5.0.0, use ix-tab-item instead of ix-menu-about-item
+ */
+export class MenuAboutItem extends Mixin(BaseTabMixin) {
+    constructor() {
+        super();
+    }
+    /**
+     * About Item label
+     */
+    label;
+    /**
+     * Label changed
+     */
+    labelChange;
     watchLabel(newValue, oldValue) {
         this.labelChange.emit({
             name: 'ix-menu-about-item',
@@ -16,20 +31,9 @@ export class MenuAboutItem {
         });
     }
     render() {
-        return (h(Host, { key: '2877a9c9386fb74d8c4fcfb72d5f31d8aa9057f1' }, h("slot", { key: 'fc2e89e7a6a427dbbf3e2030949a4db31c34957e' })));
+        return (h(Host, { key: '30ba62aac3a8dff2224f9a207ca9f7fd2223bea8' }, h("ix-tab-panel", { key: '524c2909d0a0bec44a1867e8ff1323c0944e49e8', tabKey: this.tabKey }, h("slot", { key: 'aaa24a90ca22a0379437a2971b4dc1c52ee81110' }))));
     }
     static get is() { return "ix-menu-about-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["menu-about-item.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["menu-about-item.css"]
-        };
-    }
     static get properties() {
         return {
             "label": {

package/dist/collection/components/menu-about-news/menu-about-news.js

@@ -7,31 +7,56 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { iconClose, iconShout } from "@siemens/ix-icons/icons";
-import { h, Host } from "@stencil/core";
-export class MenuAboutNews {
+import { h, Host, Mixin, } from "@stencil/core";
+import { DefaultMixins } from "../utils/internal/component";
+export class MenuAboutNews extends Mixin(...DefaultMixins) {
     constructor() {
-        /**
-         * Show about news
-         */
-        this.show = false;
-        /**
-         * i18n label for 'Show more' button
-         */
-        this.i18nShowMore = 'Show more';
-        /** @internal */
-        this.expanded = false;
+        super();
     }
+    hostElement;
+    /**
+     * 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 (h(Host, { key: '7443d209d383de9e46d8c024c1756ae814c5d764', class: {
+        return (h(Host, { key: 'c284e2ac608e4e039c2df0ee62c2c3befc241391', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, h("div", { key: '034c93b01133fa50d28c0e4ce98becc53fe29158', class: "banner-container" }, h("ix-icon", { key: '69df7443eba7107db4d4f20d2a628159a7ed8660', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: '36cc1e785395307d29813cac4f13b1309ee2d257', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '35d4a86b62c225dc03329e6e53bdd6180d1a6b8e', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: 'd5f1d76a2bf661fb865fa7c4857b0f20d6f225dc', class: "cui-popover-news-header" }, h("ix-typography", { key: 'd8ef22907758393fe430cc2a4940dea8ee7372e8', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: '2fb7cf52ee3bf3e475fc5fa6d0aaadec96246acc', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, h("div", { key: 'e4a567021e29740a32199328c1a18024265101a6', class: "banner-container" }, h("ix-icon", { key: 'dc9d56156ee0010d675315a3afd03f17f45a9b6f', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: '95f83ef229d360cc1d65641bcd0f7f377b1f22f7', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '4291b6af8d4b43a13e2e4aa50b9a180ee5903202', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: 'adb50ab8101ff53415ea4fee45e7bc182c9aad00', class: "cui-popover-news-header" }, h("ix-typography", { key: '7b7bdb1153222bbee432ed46c562ac1a6a8d7d3f', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: '6cdc8cf741a65498937db07c1f8d767d11a62f04', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), h("div", { key: '8875b7027424233f78ac46c52cbeccc3d4fb7560', class: "slot-container" }, h("slot", { key: 'b662f3b8c11a9c3ea639ed6b753a4b80ed038bec' })), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), h("div", { key: '9c374a87ff85b7660820b9b57abe8e579190071b', class: "slot-container" }, h("slot", { key: 'bd4a92948a87e0e2fb2a0617bedb065147ae3d57' })), this.activeAboutTabKey ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (event) => {
                 this.show = false;
-                this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, h("div", { key: '97cbdaf247a6f83b9361121cbac596dc86e2bb28', id: "arrow" })));
+                this.showMore.emit(event);
+            } }, this.i18nShowMore))) : null, h("div", { key: '5f13c58d47a92e7acd3212ae7d48cc78ab4a5240', id: "arrow" })));
     }
     static get is() { return "ix-menu-about-news"; }
     static get encapsulation() { return "shadow"; }
@@ -125,6 +150,28 @@ export class MenuAboutNews {
                 "reflect": false,
                 "attribute": "about-item-label"
             },
+            "activeAboutTabKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Defines which tab should be active, used when the about news is used in combination with ix-menu-about"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-about-tab-key"
+            },
             "expanded": {
                 "type": "boolean",
                 "mutable": false,
@@ -188,4 +235,5 @@ export class MenuAboutNews {
                 }
             }];
     }
+    static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/menu-avatar/menu-avatar.js

@@ -12,29 +12,60 @@ import { a11yBoolean } from "../utils/a11y";
 import { makeRef } from "../utils/make-ref";
 import { getSlottedElements } from "../utils/shadow-dom";
 export class MenuAvatar {
-    constructor() {
-        /**
-         * 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();
-    }
+    hostElement;
+    /**
+     * 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();
     onSlotChange() {
         const slot = this.hostElement.shadowRoot.querySelector('slot');
         if (!slot) {
@@ -44,16 +75,15 @@ export class MenuAvatar {
         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 (h(Host, { key: '63251d35fc15b945de3bae097702c3e0e7377568', slot: "ix-menu-avatar" }, h("button", { key: 'f50dd772c58b7b20e966d0a992f6e2537ebbe5bc', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '1b3ea2ab31cc248e021306b9399b5b2bbad1122f', image: this.image, initials: this.initials }), h("div", { key: '1e8aee8c464ebc41e99d00b6933f6682d1c98019', class: "avatar-name" }, h("span", { key: '3bc559472005be3d21b406fd9ea85fcb9737dcb6', class: "text-default-single" }, this.top), h("span", { key: '023fb55cd5229df9aadec9daf86834e16944a66f', class: "text-default-single" }, this.bottom))), !!tooltipText && (h("ix-tooltip", { key: '8e13fc36570e1152049b636ecabb042e7288c3e8', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), h("ix-dropdown", { key: '6a7e04c67894981100c3b81eb6ac9c5d9a16194a', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        return (h(Host, { key: '5c6f05897a9a1c5a24b8ac5ba87686b6f83ca090', slot: "ix-menu-avatar" }, h("button", { key: '4425caeee1c3ae0c74d45c3253190cc6272416a3', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: 'c0141851636696906476abd3777f7e5bd64322b7', image: this.image, initials: this.initials }), h("div", { key: '3f79c860b22a4dbcc8e72e768a6709c27a6a78ea', class: "avatar-name" }, h("span", { key: 'e901a92cee9be95d6602da989872c8870291418a', class: "text-default-single" }, this.top), h("span", { key: '7da5bba687c52d0fab08c8c4cdc992bdb3dbd7be', class: "text-default-single" }, this.bottom))), !!tooltipText && (h("ix-tooltip", { key: '1dd0063f1e2ee34df0076dd7a19b885d19837d80', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), 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 }, h("slot", { key: 'd7444d53d15826d0999476c55bc428a89a6b73fa', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'f6c1fc16b2b39ef2277ae01485f1b7014e72e568', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+            }, enableTopLayer: this.enableTopLayer }, h("slot", { key: '40ebda089d3578ddd04b3a304b14406051760df8', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: '7a0a8e9d709adb8e7cf851fa56e1943cdcd21966', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
             } })))));
     }

package/dist/collection/components/menu-avatar-item/menu-avatar-item.js

@@ -9,15 +9,26 @@
 import { h, } from "@stencil/core";
 import { makeRef } from "../utils/make-ref";
 export class MenuAvatarItem {
-    constructor() {
-        this.dropdownItemRef = makeRef();
-    }
+    hostElement;
+    /**
+     * Avatar dropdown icon
+     */
+    icon;
+    /**
+     * Avatar dropdown label
+     */
+    label;
+    /**
+     * Avatar dropdown item clicked
+     */
+    itemClick;
+    dropdownItemRef = makeRef();
     /** @internal */
     async getDropdownItemElement() {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: '437aead7832603097e4f814abef0108dcb0ad386', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: 'f96a631b215cb1d42035b4d5ffb7ce7fbea2b34a', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     static get is() { return "ix-menu-avatar-item"; }
     static get encapsulation() { return "shadow"; }