npm - @siemens/ix - Versions diffs - 4.1.0 → 4.3.0 - Mend

@siemens/ix 4.1.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (971) hide show

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

@@ -6,9 +6,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { iconLogOut } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
+import { a11yBoolean } from "../utils/a11y";
+import { makeRef } from "../utils/make-ref";
 import { getSlottedElements } from "../utils/shadow-dom";
-import { iconLogOut } from "@siemens/ix-icons/icons";
 export class MenuAvatar {
     constructor() {
         /**
@@ -19,11 +21,19 @@ export class MenuAvatar {
          *  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();
     }
     onSlotChange() {
         const slot = this.hostElement.shadowRoot.querySelector('slot');
@@ -34,9 +44,16 @@ export class MenuAvatar {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (h(Host, { key: '6cff313b74cbbd668ed30dd7c04e060867ae0095', slot: "ix-menu-avatar" }, h("button", { key: 'c387330d89a9d5740f0af21ec4e7d0f077510064', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '82f6207b4005ad8a799d29ce52a629d805d60b36', image: this.image, initials: this.initials }), h("div", { key: 'c1a6a4e03b3dda5b36a3caa6c7595a32407b9c19', class: "avatar-name" }, h("span", { key: 'a8b413ee5ec9a9f60d26ce695df3d9359831867d', class: "text-default-single", title: this.top }, this.top), h("span", { key: 'b333a5337d49199f9545eb30361fe5166d8a8725', class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { key: '31b4149a67636711972e1f682da62a60f833e9f3', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        var _a;
+        const tooltipText = (_a = this.tooltipText) !== null && _a !== void 0 ? _a : 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: {
                 mainAxis: 16,
-            } }, h("slot", { key: 'a17ca070258b8b892c647f4cc2429b21562072c1', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'cbc2544543237b2874744c0678838b701ec89d4a', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+            }, 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) => {
                 this.logoutClick.emit(e);
             } })))));
     }
@@ -130,6 +147,50 @@ export class MenuAvatar {
                 "setter": false,
                 "reflect": false
             },
+            "tooltipText": {
+                "type": "string",
+                "attribute": "tooltip-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "4.3.0."
+                        }],
+                    "text": "Tooltip text to display on hover. If not set, the 'top' property (user name) will be used as the default tooltip text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "ariaLabelTooltip": {
+                "type": "string",
+                "attribute": "aria-label-tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "4.3.0."
+                        }],
+                    "text": "aria-label for the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "i18nLogout": {
                 "type": "string",
                 "attribute": "i18n-logout",
@@ -169,6 +230,32 @@ export class MenuAvatar {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "enableTopLayer": {
+                "type": "boolean",
+                "attribute": "enable-top-layer",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "since",
+                            "text": "4.3.0"
+                        }],
+                    "text": "Enable Popover API rendering for dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/menu-avatar/menu-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-avatar.js","sourceRoot":"","sources":["../../../src/components/menu-avatar/menu-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,~~qBAAqB~~,CAAC;~~AACzD~~,OAAO,EAAE,~~UAAU~~,EAAE,MAAM,~~yBAAyB~~,CAAC;~~AAOrD~~,MAAM,OAAO,UAAU;IALvB;~~QA4BE~~;;WAEG;QACiC,eAAU,GAAW,QAAQ,CAAC;QAElE;;WAEG;QACK,qBAAgB,GAAY,KAAK,CAAC;QAE1C;;WAEG;QACM,oBAAe,GAAY,KAAK,CAAC;QAOlC,oBAAe,GAAG,mBAAmB,CAAC;~~KAqD~~/C;~~IAnDC~~,YAAY;QACV,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB;YACzB,+DACE,KAAK,EAAC,mCAAmC,EACzC,~~KAAK,~~EAAE,~~IAAI,CAAC,GAAG,EACf,~~EAAE,~~EAAE,~~IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC;gBAEX,kEAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc;gBAEnE,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,KAAK,EAAC,qBAAqB,~~EAAC~~,KAAK,~~EAAE~~,IAAI,CAAC,GAAG,~~IAC9C~~,IAAI,CAAC,GAAG,~~CACJ;oBACP~~,~~6DAAM~~,~~KAAK~~,~~EAAC~~,~~qBAAqB~~,~~EAAC~~,~~KAAK~~,EAAE,~~IAAI~~,CAAC,~~MAAM~~,~~IACjD~~,IAAI,CAAC,~~MAAM~~,~~CACP~~,~~CACH~~,~~CACC~~;~~YACT~~,oEACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,gBAAgB,EACtD,MAAM,EAAE;oBACN,QAAQ,EAAE,EAAE;iBACb;~~gBAED~~,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAS;gBACrD,CAAC,IAAI,CAAC,gBAAgB,IAAI,CACzB,4EACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;oBAC3B,CAAC,GACoB,CACxB,CACW,CACT,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","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 /\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { ~~getSlottedElements~~ } from '../utils/~~shadow~~-~~dom~~';\nimport { ~~iconLogOut~~ } from '~~@siemens~~/ix-~~icons/icons~~';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top?: string;\n\n /\n Second line of text\n /\n @Prop() bottom?: string;\n\n /\n Display a avatar image\n /\n @Prop() image?: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n /\n @Prop() initials?: string;\n\n /\n i18n label for 'Logout' button\n /\n @Prop({ attribute: 'i18n-logout' }) i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n /\n @Prop() hideLogoutButton: boolean = false;\n\n /\n Control the visibility of the dropdown menu\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick!: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n ~~title={this.top}\n~~ id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\" ~~title=~~{this.top}~~>\n {this.top}\n~~ </span>\n <span class=\"text-default-single\" ~~title=~~{this.bottom}>\n {this.~~bottom~~}\n ~~</span~~>\n </~~div~~>\n ~~</button>\~~n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && this.hideLogoutButton}\n offset={{\n mainAxis: 16,\n }}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {!this.hideLogoutButton && (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={iconLogOut}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n )}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"menu-avatar.js","sourceRoot":"","sources":["../../../src/components/menu-avatar/menu-avatar.tsx"],"names":[],"mappings":"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","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 /\nimport { iconLogOut } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { makeRef } from '../utils/make-ref';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top?: string;\n\n /\n Second line of text\n /\n @Prop() bottom?: string;\n\n /\n Display a avatar image\n /\n @Prop() image?: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n /\n @Prop() initials?: string;\n\n /\n Tooltip text to display on hover. If not set, the 'top' property (user name) will be used as the default tooltip text.\n \n @since 4.3.0.\n /\n @Prop() tooltipText?: string;\n\n /\n aria-label for the tooltip\n \n @since 4.3.0.\n /\n @Prop() ariaLabelTooltip?: string;\n\n /\n i18n label for 'Logout' button\n /\n @Prop({ attribute: 'i18n-logout' }) i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n /\n @Prop() hideLogoutButton: boolean = false;\n\n /\n Enable Popover API rendering for dropdown.\n \n @default false\n * @since 4.3.0\n /\n @Prop() enableTopLayer: boolean = false;\n\n /\n Control the visibility of the dropdown menu\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick!: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n const tooltipText = this.tooltipText ?? this.top;\n const ariaHidden = tooltipText === this.top;\n\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\">{this.top}</span>\n <span class=\"text-default-single\">{this.bottom}</span>\n </div>\n </button>\n {!!tooltipText && (\n <ix-tooltip\n ref={this.tooltipRef}\n for={`#${this.avatarElementId}`}\n placement={'right'}\n aria-hidden={a11yBoolean(ariaHidden)}\n aria-label={this.ariaLabelTooltip}\n >\n {tooltipText}\n </ix-tooltip>\n )}\n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && this.hideLogoutButton}\n offset={{\n mainAxis: 16,\n }}\n onShowChanged={(event) => {\n if (event.detail && this.tooltipRef.current) {\n this.tooltipRef.current.hideTooltip(0);\n }\n }}\n enableTopLayer={this.enableTopLayer}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {!this.hideLogoutButton && (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={iconLogOut}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n )}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}

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

@@ -17,7 +17,7 @@ export class MenuAvatarItem {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: '4a25c0768a9afad6b18bf3019c8998cc51fa134a', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: '437aead7832603097e4f814abef0108dcb0ad386', 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"; }

package/dist/collection/components/menu-category/menu-category.js CHANGED Viewed

@@ -6,12 +6,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { iconChevronDownSmall } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
 import { animate } from "animejs";
 import { closestIxMenu } from "../utils/application-layout/context";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { createEnterLeaveDebounce } from "./enter-leave";
-import { iconChevronDownSmall } from "@siemens/ix-icons/icons";
 const DefaultIxMenuItemHeight = 40;
 const DefaultAnimationTimeout = 150;
 export class MenuCategory {
@@ -153,7 +153,7 @@ export class MenuCategory {
         }
     }
     render() {
-        return (h(Host, { key: '13ac63c3321e33e4781ab642577464fde79c6bf2', class: {
+        return (h(Host, { key: 'edd1e65e5cd1cc96d1da1decfa666654d3926f6d', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -162,14 +162,14 @@ export class MenuCategory {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: '25e8a0a50ea1540e346e830045275e6a0c63327d', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("div", { key: '5b0dcefb391bada721218f4d3ba690c1a2de966e', class: "category" }, h("div", { key: 'f65e560cb7a6ab490220b814f9e66bbfd010bc44', class: "category-text" }, this.label), h("ix-icon", { key: '672a4f90f58ad0cdf023d050d4b3f75114a4ee52', name: iconChevronDownSmall, class: {
+            } }, h("ix-menu-item", { key: 'bd7b6f2c2bef925249db2b73ad14e1454a291939', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("div", { key: '1bdd93be15ca3e24d491ce54aed4e441617bdbaf', class: "category" }, h("div", { key: '37444ebec527ba83b30675b3c01411770989f77b', class: "category-text" }, this.label), h("ix-icon", { key: '3e3967c7973058113c32f4f90a9343079bfc4d52', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: 'd7f0f085f33a09d7c57ca18818a90125b3c2e2bf', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '270aa92509cdf90771863199a9483d5039289d94', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'e5b6be4ba14c97ef2e85abd01833bed929b1efa4', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'f81b8c80a0bef8cec723260df27c01ed0299a4d4', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -182,7 +182,7 @@ export class MenuCategory {
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '90e095e2d61e5d359c29c742e4e84457ef47426f', class: 'category-dropdown-header' }, h("ix-typography", { key: '67efee1940b51e0457ccec7f0a271684ea6df881', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '2ec48cbab9dc6a223fcc636e59b497b1db315369' }), h("slot", { key: 'e32fb89cf4045faae851af8d1ed1c4ab394e1709' }))));
+            } }, h("ix-dropdown-item", { key: '88b93b5ac540e470b659e0fa0e2a788cf9da0b3d', class: 'category-dropdown-header' }, h("ix-typography", { key: '2664b30d7a7aa21de7dd6874a8f8471bcb5f0dee', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'af94566fdd4ad843ce75332b8e511201bfad790c' }), h("slot", { key: '735e220778d5ac78309c4133d11a1b8fad67431e' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-category/menu-category.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-category.js","sourceRoot":"","sources":["../../../src/components/menu-category/menu-category.tsx"],"names":[],"mappings":"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","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 /\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\nimport type { IxMenuItemBase } from './../menu-item/menu-item.interface';\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory implements IxMenuItemBase {\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 /\n Will be shown as tooltip text, if not provided menu text content will be used.\n \n @since 4.0.0\n /\n @Prop() tooltipText?: string;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories!: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer?: MutationObserver;\n private menuItemsContainer?: HTMLDivElement;\n private ixMenu?: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n animate(this.menuItemsContainer!, {\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n onComplete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n animate(this.menuItemsContainer!, {\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n onBegin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu?.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu?.expand) {\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged(mutations?: MutationRecord[]) {\n const oldNestedItemsLength = this.nestedItems.length;\n this.nestedItems = this.getNestedItems();\n\n if (\n this.showItems &&\n this.menuItemsContainer &&\n oldNestedItemsLength !== this.nestedItems.length\n ) {\n this.menuItemsContainer.style.maxHeight = `${\n this.getNestedItemsHeight() + DefaultIxMenuItemHeight\n }px`;\n }\n\n if (!this.menuExpand \|\| this.showItems \|\| !mutations) {\n return;\n }\n\n for (const mutation of mutations ?? []) {\n if (\n mutation.attributeName === 'class' &&\n mutation.target instanceof HTMLElement &&\n mutation.target.classList.contains('active')\n ) {\n this.showItems = true;\n this.onExpandCategory(true);\n return;\n }\n }\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((mutations: MutationRecord[]) =>\n this.onNestedItemsChanged(mutations)\n );\n\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu?.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer?.style.removeProperty('max-height');\n this.menuItemsContainer?.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n tooltipText={this.tooltipText}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={iconChevronDownSmall}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography format=\"label\" bold textColor=\"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"]}
1	+ {"version":3,"file":"menu-category.js","sourceRoot":"","sources":["../../../src/components/menu-category/menu-category.tsx"],"names":[],"mappings":"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","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 /\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport type { IxMenuItemBase } from './../menu-item/menu-item.interface';\nimport { createEnterLeaveDebounce } from './enter-leave';\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory implements IxMenuItemBase {\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 /\n Will be shown as tooltip text, if not provided menu text content will be used.\n \n @since 4.0.0\n /\n @Prop() tooltipText?: string;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories!: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer?: MutationObserver;\n private menuItemsContainer?: HTMLDivElement;\n private ixMenu?: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n animate(this.menuItemsContainer!, {\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n onComplete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n animate(this.menuItemsContainer!, {\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n onBegin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu?.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu?.expand) {\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged(mutations?: MutationRecord[]) {\n const oldNestedItemsLength = this.nestedItems.length;\n this.nestedItems = this.getNestedItems();\n\n if (\n this.showItems &&\n this.menuItemsContainer &&\n oldNestedItemsLength !== this.nestedItems.length\n ) {\n this.menuItemsContainer.style.maxHeight = `${\n this.getNestedItemsHeight() + DefaultIxMenuItemHeight\n }px`;\n }\n\n if (!this.menuExpand \|\| this.showItems \|\| !mutations) {\n return;\n }\n\n for (const mutation of mutations ?? []) {\n if (\n mutation.attributeName === 'class' &&\n mutation.target instanceof HTMLElement &&\n mutation.target.classList.contains('active')\n ) {\n this.showItems = true;\n this.onExpandCategory(true);\n return;\n }\n }\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((mutations: MutationRecord[]) =>\n this.onNestedItemsChanged(mutations)\n );\n\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu?.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer?.style.removeProperty('max-height');\n this.menuItemsContainer?.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n tooltipText={this.tooltipText}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={iconChevronDownSmall}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n aria-hidden=\"true\"\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography format=\"label\" bold textColor=\"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"]}

package/dist/collection/components/menu-item/menu-item.js CHANGED Viewed

@@ -6,12 +6,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { iconDocument } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
-import { createMutationObserver } from "../utils/mutation-observer";
+import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
 import { makeRef } from "../utils/make-ref";
 import { menuController } from "../utils/menu-service/menu-service";
-import { iconDocument } from "@siemens/ix-icons/icons";
-import { a11yBoolean } from "../utils/a11y";
+import { createMutationObserver } from "../utils/mutation-observer";
 import { createSequentialId } from "../utils/uuid";
 let sequenceId = 0;
 /**
@@ -105,27 +105,25 @@ export class MenuItem {
                 slot: 'bottom',
             };
         }
-        const commonAttributes = {
-            class: 'tab',
-            tabIndex: this.disabled ? -1 : 0,
-        };
+        const hostA11y = a11yHostAttributes(this.hostElement);
+        const commonAttributes = Object.assign({ class: 'tab', tabIndex: this.disabled ? -1 : 0 }, hostA11y);
         const menuContent = [
-            this.icon && h("ix-icon", { key: 'cf444eeb0b3478721a77ee1dc52436689e4c0102', class: 'tab-icon', name: this.icon }),
+            this.icon && (h("ix-icon", { key: '3235cdce2773d33e6f1a75b4df395079246fa993', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
             this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null,
-            h("span", { key: '93ac9e24f2c8634f9bfcef42c8a167d219ff764e', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'c98d81e6a16ff3304c1c2c489a71cc892fc6e287' })),
+            h("span", { key: '704284ed9ae6b83b2b2d65ebc103e5e8ff766c1b', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '6b79e39fb7e616088d11bd8b9c57f4406fdd94b6' })),
         ];
-        return (h(Host, Object.assign({ key: '2bed98070395e9df578f968f317a16f214bf5627', class: {
+        return (h(Host, Object.assign({ key: '331694d5c502b1ed77035e591ffa5748777d8a81', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), this.href ? (h("a", Object.assign({}, commonAttributes, { href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, role: "button", ref: this.buttonRef, onClick: (e) => {
+            }, "aria-disabled": this.disabled ? 'true' : null }, extendedAttributes), this.href ? (h("a", Object.assign({}, commonAttributes, { href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, role: "button", ref: this.buttonRef, onClick: (e) => {
                 if (this.disabled) {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), h("ix-tooltip", { key: '691d40c1d8df8ab9111165be8320190a5c893de0', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }), menuContent)) : (h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), h("ix-tooltip", { key: 'd282a68bce72435079cbfea5234b227c92027643', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-item/menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.tsx"],"names":[],"mappings":"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","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\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\nimport { iconDocument } from '@siemens/ix-icons/icons';\nimport { a11yBoolean } from '../utils/a11y';\nimport { createSequentialId } from '../utils/uuid';\nimport { IxMenuItemBase } from './menu-item.interface';\nimport { AnchorTarget } from '../button/button.interface';\n\nlet sequenceId = 0;\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 implements IxMenuItemBase {\n /\n Label of the menu item. Will also be used as tooltip text\n /\n @Prop() label?: string;\n\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n /\n @Prop() bottom = false;\n\n /\n Name of the icon you want to display. Icon names can be resolved from the documentation {@link https://ix.siemens.io/docs/icon-library/icons}\n /\n @Prop({ mutable: true }) icon?: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications?: number;\n\n /\n State to display active\n /\n @Prop() active: boolean = false;\n\n /\n Disable tab and remove event handlers\n /\n @Prop() disabled: boolean = false;\n\n /\n Will be shown as tooltip text, if not provided menu text content will be used.\n \n @since 4.0.0\n /\n @Prop() tooltipText?: string;\n\n /\n URL for the button link. When provided, the button will render as an anchor tag.\n \n @since 4.0.0\n /\n @Prop() href?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() target?: AnchorTarget = '_self';\n\n /\n Specifies the relationship between the current document and the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() rel?: string;\n\n /* @internal */\n @Prop() isCategory: boolean = false;\n\n @Element() hostElement!: HTMLIxMenuItemElement;\n\n @State() tooltip?: string;\n @State() ariaHiddenTooltip = false;\n @State() menuExpanded: boolean = false;\n\n private readonly internalItemId = createSequentialId(\n 'ix-menu-item-',\n sequenceId++\n );\n\n private readonly buttonRef = makeRef<HTMLButtonElement \| HTMLAnchorElement>();\n private isHostedInsideCategory = false;\n private menuExpandedDisposer?: Disposable;\n\n private readonly observer: MutationObserver = createMutationObserver(() => {\n this.setTooltip();\n });\n\n componentWillLoad() {\n this.isHostedInsideCategory =\n !!this.hostElement.closest('ix-menu-category');\n\n this.onIconChange();\n\n this.menuExpanded = menuController.nativeElement?.expand \|\| false;\n this.menuExpandedDisposer = menuController.expandChange.on(\n (expand) => (this.menuExpanded = expand)\n );\n }\n\n componentWillRender() {\n this.setTooltip();\n }\n\n setTooltip() {\n this.tooltip =\n this.tooltipText ??\n this.label ??\n this.hostElement.textContent ??\n undefined;\n\n this.ariaHiddenTooltip =\n this.tooltipText === this.label \|\|\n this.tooltipText === this.hostElement.textContent;\n }\n\n connectedCallback() {\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.menuExpandedDisposer) {\n this.menuExpandedDisposer.dispose();\n }\n }\n\n @Watch('icon')\n onIconChange() {\n if (!this.isHostedInsideCategory && !this.hostElement.icon) {\n this.icon = iconDocument;\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\n const commonAttributes = {\n class: 'tab',\n tabIndex: this.disabled ? -1 : 0,\n };\n\n const menuContent = [\n this.icon && <ix-icon class={'tab-icon'} name={this.icon}></ix-icon>,\n this.notifications ? (\n <div class=\"notification\">\n <div class=\"pill\">{this.notifications}</div>\n </div>\n ) : null,\n <span id={this.internalItemId} class=\"tab-text text-default\">\n {this.label}\n <slot></slot>\n </span>,\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 {this.href ? (\n <a\n {...commonAttributes}\n href={this.disabled ? undefined : this.href}\n target={this.target}\n rel={this.rel}\n role=\"button\"\n ref={this.buttonRef}\n onClick={(e: Event) => {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n {menuContent}\n </a>\n ) : (\n <button {...commonAttributes} ref={this.buttonRef}>\n {menuContent}\n </button>\n )}\n <ix-tooltip\n for={this.buttonRef.waitForCurrent()}\n placement={'right'}\n showDelay={1000}\n interactive={false}\n aria-hidden={a11yBoolean(this.ariaHiddenTooltip)}\n aria-labelledby={this.internalItemId}\n >\n {this.tooltip}\n </ix-tooltip>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.tsx"],"names":[],"mappings":"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","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\nimport { iconDocument } from '@siemens/ix-icons/icons';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { AnchorTarget } from '../button/button.interface';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { makeRef } from '../utils/make-ref';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { Disposable } from '../utils/typed-event';\nimport { createSequentialId } from '../utils/uuid';\nimport { IxMenuItemBase } from './menu-item.interface';\n\nlet sequenceId = 0;\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 implements IxMenuItemBase {\n /\n Label of the menu item. Will also be used as tooltip text\n /\n @Prop() label?: string;\n\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n /\n @Prop() bottom = false;\n\n /\n Name of the icon you want to display. Icon names can be resolved from the documentation {@link https://ix.siemens.io/docs/icon-library/icons}\n /\n @Prop({ mutable: true }) icon?: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications?: number;\n\n /\n State to display active\n /\n @Prop() active: boolean = false;\n\n /\n Disable tab and remove event handlers\n /\n @Prop() disabled: boolean = false;\n\n /\n Will be shown as tooltip text, if not provided menu text content will be used.\n \n @since 4.0.0\n /\n @Prop() tooltipText?: string;\n\n /\n URL for the button link. When provided, the button will render as an anchor tag.\n \n @since 4.0.0\n /\n @Prop() href?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() target?: AnchorTarget = '_self';\n\n /\n Specifies the relationship between the current document and the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() rel?: string;\n\n /* @internal */\n @Prop() isCategory: boolean = false;\n\n @Element() hostElement!: HTMLIxMenuItemElement;\n\n @State() tooltip?: string;\n @State() ariaHiddenTooltip = false;\n @State() menuExpanded: boolean = false;\n\n private readonly internalItemId = createSequentialId(\n 'ix-menu-item-',\n sequenceId++\n );\n\n private readonly buttonRef = makeRef<HTMLButtonElement \| HTMLAnchorElement>();\n private isHostedInsideCategory = false;\n private menuExpandedDisposer?: Disposable;\n\n private readonly observer: MutationObserver = createMutationObserver(() => {\n this.setTooltip();\n });\n\n componentWillLoad() {\n this.isHostedInsideCategory =\n !!this.hostElement.closest('ix-menu-category');\n\n this.onIconChange();\n\n this.menuExpanded = menuController.nativeElement?.expand \|\| false;\n this.menuExpandedDisposer = menuController.expandChange.on(\n (expand) => (this.menuExpanded = expand)\n );\n }\n\n componentWillRender() {\n this.setTooltip();\n }\n\n setTooltip() {\n this.tooltip =\n this.tooltipText ??\n this.label ??\n this.hostElement.textContent ??\n undefined;\n\n this.ariaHiddenTooltip =\n this.tooltipText === this.label \|\|\n this.tooltipText === this.hostElement.textContent;\n }\n\n connectedCallback() {\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.menuExpandedDisposer) {\n this.menuExpandedDisposer.dispose();\n }\n }\n\n @Watch('icon')\n onIconChange() {\n if (!this.isHostedInsideCategory && !this.hostElement.icon) {\n this.icon = iconDocument;\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\n const hostA11y = a11yHostAttributes(this.hostElement);\n\n const commonAttributes = {\n class: 'tab',\n tabIndex: this.disabled ? -1 : 0,\n ...hostA11y,\n };\n\n const menuContent = [\n this.icon && (\n <ix-icon\n class={'tab-icon'}\n name={this.icon}\n aria-hidden=\"true\"\n ></ix-icon>\n ),\n this.notifications ? (\n <div class=\"notification\">\n <div class=\"pill\">{this.notifications}</div>\n </div>\n ) : null,\n <span id={this.internalItemId} class=\"tab-text text-default\">\n {this.label}\n <slot></slot>\n </span>,\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 aria-disabled={this.disabled ? 'true' : null}\n {...extendedAttributes}\n >\n {this.href ? (\n <a\n {...commonAttributes}\n href={this.disabled ? undefined : this.href}\n target={this.target}\n rel={this.rel}\n role=\"button\"\n ref={this.buttonRef}\n onClick={(e: Event) => {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n {menuContent}\n </a>\n ) : (\n <button {...commonAttributes} ref={this.buttonRef}>\n {menuContent}\n </button>\n )}\n <ix-tooltip\n for={this.buttonRef.waitForCurrent()}\n placement={'right'}\n showDelay={1000}\n interactive={false}\n aria-hidden={a11yBoolean(this.ariaHiddenTooltip)}\n aria-labelledby={this.internalItemId}\n >\n {this.tooltip}\n </ix-tooltip>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/menu-settings/menu-settings.js CHANGED Viewed

@@ -15,6 +15,10 @@ export class MenuSettings {
          * Label of first tab
          */
         this.label = 'Settings';
+        /**
+         * Aria label for close button
+         */
+        this.ariaLabelCloseButton = 'Close Settings';
         /** @internal */
         this.show = false;
     }
@@ -30,7 +34,7 @@ export class MenuSettings {
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: 'bff35655d1e57ea807a1d8a6bd0879f8804e3ef4', context: this });
+        return h(MenuTabs, { key: 'eefc53f1fa300794513f41b1bc80ac9fd00e295e', context: this });
     }
     static get is() { return "ix-menu-settings"; }
     static get encapsulation() { return "shadow"; }
@@ -85,6 +89,26 @@ export class MenuSettings {
                 "reflect": false,
                 "defaultValue": "'Settings'"
             },
+            "ariaLabelCloseButton": {
+                "type": "string",
+                "attribute": "aria-label-close-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Close Settings'"
+            },
             "show": {
                 "type": "boolean",
                 "attribute": "show",

package/dist/collection/components/menu-settings/menu-settings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAEL,UAAU,EACV,cAAc,GACf,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,YAAY;IALzB;QAcE;;WAEG;QACK,UAAK,GAAG,UAAU,CAAC;QAE3B,gBAAgB;QACR,SAAI,GAAG,KAAK,CAAC;KAiCtB;IAjBC,SAAS,CAAC,QAAgB,EAAE,QAAgB;QAC1C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,GAAI,CAAC;IACrC,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","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\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n CustomCloseEvent,\n initialize,\n syncTabDisplay,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n tag: 'ix-menu-settings',\n styleUrl: 'menu-settings.scss',\n shadow: true,\n})\nexport class MenuSettings {\n @Element() el!: HTMLIxMenuSettingsElement;\n\n /\n Active tab\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) activeTabLabel?: string;\n\n /\n Label of first tab\n /\n @Prop() label = 'Settings';\n\n /* @internal /\n @Prop() show = false;\n\n /\n Active tab changed\n * @since 3.0.0\n /\n @Event() tabChange!: EventEmitter<string>;\n\n /\n Popover closed\n */\n @Event() close!: EventEmitter<CustomCloseEvent>;\n\n @State() items!: HTMLIxMenuSettingsItemElement[];\n\n @Watch('activeTabLabel')\n updateTab(newLabel: string, oldLabel: string) {\n if (newLabel !== oldLabel) {\n syncTabDisplay(this, newLabel);\n }\n }\n\n componentWillLoad() {\n initialize(this);\n }\n\n componentDidLoad() {\n forceUpdate(this.el);\n }\n\n render() {\n return <MenuTabs context={this} />;\n }\n}\n"]}
1	+ {"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAEL,UAAU,EACV,cAAc,GACf,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,YAAY;IALzB;QAcE;;WAEG;QACK,UAAK,GAAG,UAAU,CAAC;QAE3B;;WAEG;QACK,yBAAoB,GAAG,gBAAgB,CAAC;QAEhD,gBAAgB;QACR,SAAI,GAAG,KAAK,CAAC;KAiCtB;IAjBC,SAAS,CAAC,QAAgB,EAAE,QAAgB;QAC1C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,GAAI,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n CustomCloseEvent,\n initialize,\n syncTabDisplay,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n tag: 'ix-menu-settings',\n styleUrl: 'menu-settings.scss',\n shadow: true,\n})\nexport class MenuSettings {\n @Element() el!: HTMLIxMenuSettingsElement;\n\n /\n Active tab\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) activeTabLabel?: string;\n\n /\n Label of first tab\n /\n @Prop() label = 'Settings';\n\n /\n Aria label for close button\n /\n @Prop() ariaLabelCloseButton = 'Close Settings';\n\n /* @internal /\n @Prop() show = false;\n\n /\n Active tab changed\n * @since 3.0.0\n /\n @Event() tabChange!: EventEmitter<string>;\n\n /\n Popover closed\n */\n @Event() close!: EventEmitter<CustomCloseEvent>;\n\n @State() items!: HTMLIxMenuSettingsItemElement[];\n\n @Watch('activeTabLabel')\n updateTab(newLabel: string, oldLabel: string) {\n if (newLabel !== oldLabel) {\n syncTabDisplay(this, newLabel);\n }\n }\n\n componentWillLoad() {\n initialize(this);\n }\n\n componentDidLoad() {\n forceUpdate(this.el);\n }\n\n render() {\n return <MenuTabs context={this} />;\n }\n}\n"]}

package/dist/collection/components/menu-settings-item/menu-settings-item.js CHANGED Viewed

@@ -16,7 +16,7 @@ export class MenuSettingsItem {
         });
     }
     render() {
-        return (h(Host, { key: '69dac244a2c3b427237e8dceec64fad9c16600e9' }, h("slot", { key: 'ccfc87d1f061f0d4195f943dec3782b655626aae' })));
+        return (h(Host, { key: '93bcd49368f3bcb45ca4405eb1f75d5a0699b784' }, h("slot", { key: '3d2fd58e28f27f3f8355dc915fc78e15fb64bf61' })));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message-bar/message-bar.css CHANGED Viewed

@@ -33,14 +33,6 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
-/*
-* SPDX-FileCopyrightText: 2024 Siemens AG
-*
-* SPDX-License-Identifier: MIT
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
 :host {
   margin: 0.5rem 0.5rem 0rem 0.5rem;
 }
@@ -133,9 +125,6 @@
   padding: 0 1rem;
   font-weight: normal;
   white-space: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 :host ix-icon {
   margin-top: 0.25rem;

package/dist/collection/components/message-bar/message-bar.js CHANGED Viewed

@@ -42,7 +42,7 @@ export class MessageBar {
         }
     }
     render() {
-        return (h(Host, { key: '538fcc08ad07fe808f424e067a361f4a56f4c0ec' }, h("div", { key: '4a75052efe1b22c247dcfcd298aabbd1098ff7b6', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'd348829692e38a1023e044834aefa45516b4d916', color: this.color, name: this.icon }), h("div", { key: '0ac0a509efe1dd246f7732660e4cf16416c8655d', class: "message-content" }, h("slot", { key: '6143bfa9cf39d32d149c2893b7712358337833c9' })), !this.persistent && (h("ix-icon-button", { key: 'b118c91956af0fd00d02cfefdb7da36d46f2d360', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: '77cde4e0a2aa39b0838ccef1fe84dcd85a99f0e1' }, h("div", { key: '319882aba72c886393d8162442a56dc8404ed386', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'a204e1952605dc54532a3a862c8d00f9c049727d', color: this.color, name: this.icon }), h("div", { key: 'a1870021581d39097b24fae111a0f3418516cc1b', class: "message-content" }, h("slot", { key: '96e9f8283842a5ef183e62b0b49ea879a61f303e' })), !this.persistent && (h("ix-icon-button", { key: 'a136f9c0b1b557c3f789b569bbef64802f70cc26', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

package/dist/collection/components/modal/modal.css CHANGED Viewed

@@ -25,10 +25,6 @@
   padding-bottom: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));
   left: 50%;
 }
-:host dialog::backdrop {
-  -webkit-backdrop-filter: blur(2.7182817459px);
-          backdrop-filter: blur(2.7182817459px);
-}
 :host .modal {
   display: flex;
   flex-direction: column;
@@ -41,6 +37,7 @@
   overflow: visible;
   max-height: 80vh;
   pointer-events: all;
+  overflow-wrap: break-word;
 }
 :host .modal-size-360 {
   width: 22.5rem;

package/dist/collection/components/modal/modal.js CHANGED Viewed

@@ -110,6 +110,7 @@ export class Modal {
             const dialog = await waitForElement('dialog', this.hostElement.shadowRoot);
             this.modalVisible = true;
             dialog.showModal();
+            this.slideInModal();
         }
         catch (e) {
             console.error('HTMLDialogElement not existing');
@@ -154,24 +155,21 @@ export class Modal {
             this.dialogClose.emit(reason);
         });
     }
-    componentDidLoad() {
-        this.slideInModal();
-    }
     componentWillLoad() {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '0170729f63356223c39bcd6b0bb7124b2036f2c4', class: {
+        return (h(Host, { key: 'd5bb63f7716950339e3ab3be9cdf6e4bd914e958', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
-            } }, h("div", { key: '436b9f2efce7279defa936c9ee79fa44d090e388', class: "dialog-backdrop" }, h("dialog", { key: 'e3bc4891433993a5dcbe186011fd91d70277ca3d', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: 'ce234129ecd33f05b4049a90633dabc590244178', class: "dialog-backdrop" }, h("dialog", { key: '65700de4d4e4e440ed81bdab67e9c54641aac02e', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, h("slot", { key: '5a3e86b9c04f8e1564be6026b0352940978f0666' })))));
+            } }, h("slot", { key: '7a4bdf139d88ba4342d2cd6a2867683081c8f9e5' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }