npm - @siemens/ix - Versions diffs - 2.6.0 → 2.7.0 - Mend

@siemens/ix 2.6.0 → 2.7.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 (1228) hide show

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

@@ -79,7 +79,8 @@ export class MenuCategory {
         });
     }
     onPointerEnter() {
-        if (this.ixMenu.expand) {
+        var _a;
+        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
             return;
         }
         this.closeOtherCategories.emit();
@@ -89,15 +90,27 @@ export class MenuCategory {
         this.showDropdown = false;
     }
     onCategoryClick(e) {
+        var _a;
         e.stopPropagation();
-        if (this.ixMenu.expand) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
             this.onExpandCategory(!this.showItems);
             return;
         }
     }
-    onNestedItemsChanged() {
+    onNestedItemsChanged(mutations) {
         this.nestedItems = this.getNestedItems();
+        if (!this.menuExpand || this.showItems || !mutations) {
+            return;
+        }
+        for (const mutation of mutations !== null && mutations !== void 0 ? mutations : []) {
+            if (mutation.attributeName === 'class' &&
+                mutation.target instanceof HTMLElement &&
+                mutation.target.classList.contains('active')) {
+                this.showItems = true;
+                this.onExpandCategory(true);
+                return;
+            }
+        }
     }
     isCategoryItemListVisible() {
         return this.menuExpand && (this.showItems || this.isNestedItemActive());
@@ -112,7 +125,8 @@ export class MenuCategory {
         this.showItems = this.isCategoryItemListVisible();
     }
     componentDidLoad() {
-        this.observer = createMutationObserver(() => this.onNestedItemsChanged());
+        var _a;
+        this.observer = createMutationObserver((mutations) => this.onNestedItemsChanged(mutations));
         this.observer.observe(this.hostElement, {
             attributes: true,
             childList: true,
@@ -121,7 +135,7 @@ export class MenuCategory {
         requestAnimationFrame(() => {
             this.onNestedItemsChanged();
         });
-        this.ixMenu.addEventListener('expandChange', ({ detail: menuExpand }) => {
+        (_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.addEventListener('expandChange', ({ detail: menuExpand }) => {
             this.menuExpand = menuExpand;
             if (!menuExpand) {
                 this.clearMenuItemStyles();
@@ -130,8 +144,9 @@ export class MenuCategory {
         });
     }
     clearMenuItemStyles() {
-        this.menuItemsContainer.style.removeProperty('max-height');
-        this.menuItemsContainer.style.removeProperty('opacity');
+        var _a, _b;
+        (_a = this.menuItemsContainer) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
+        (_b = this.menuItemsContainer) === null || _b === void 0 ? void 0 : _b.style.removeProperty('opacity');
     }
     disconnectedCallback() {
         if (this.observer) {
@@ -139,7 +154,7 @@ export class MenuCategory {
         }
     }
     render() {
-        return (h(Host, { key: 'f9f4730936ba8f8ee2a46e0ce306117f947de177', class: {
+        return (h(Host, { key: 'e71d240316eb6b94bb380ef38095a980c414e3da', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -148,14 +163,14 @@ export class MenuCategory {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: 'c8c152e9c345945b50803bd72998a09b72a70d74', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '3b584077fbdbf1ce09421f33fddc52ba4da5d168', class: "category" }, h("div", { key: '73388008e380b2d6f341eef162727fd59aec88ee', class: "category-text" }, this.label), h("ix-icon", { key: 'ab5cf9fd56692b29bcc7501cb096411416a661a5', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: 'a944c473517dc6bdfbe17557de92ea23e33a636b', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '92d971d7fb4b9e93c17e5f6dce66a4c71d15df40', class: "category" }, h("div", { key: '60f7d2d47cd58a9f52d5061d8758ce7e293265d7', class: "category-text" }, this.label), h("ix-icon", { key: '5e5acccf3735496059acd2c96b604d2d2a911ab9', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: 'faa34c42bcf4250389ca2f46566b3992b235db27', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: '6cd4983793650c000968615488bf5432ebff8ae5', 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: 'd366bdd594350a8f67ee80b0d7d7b98d8d57cb28', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '865f01f86e242c671c98bbb0c69a34fd13d57191', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -168,7 +183,7 @@ export class MenuCategory {
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '66918af3f1d25eaa574e47eda975b1ce23e954d4', class: 'category-dropdown-header' }, h("ix-typography", { key: '7479a92697b5e704aa75a9281d75aad54384328e', format: "label", bold: true, color: "std" }, this.label)), h("ix-divider", { key: 'ac0f5ce34503cfe9e77071185b46789eed2c3eef' }), h("slot", { key: '78dc27c30debcc86f4040e359a8659b55d8259b1' }))));
+            } }, h("ix-dropdown-item", { key: '479772ea8b9b93dc9891b9055a49fcfdd8c29b24', class: 'category-dropdown-header' }, h("ix-typography", { key: '700e4fb48634c9c6ab5a626dc3fabdc9212b6aa3', format: "label", bold: true, color: "std" }, this.label)), h("ix-divider", { key: 'ffc1422f9d4db6f6b1d32767935678d55ef8231a' }), h("slot", { key: 'a56cd8de6fb1829795ac0866bd2d4d31b672b24a' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }
@@ -189,11 +204,11 @@ export class MenuCategory {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Display name of the category"
@@ -206,11 +221,11 @@ export class MenuCategory {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Icon of the category"
@@ -223,11 +238,11 @@ export class MenuCategory {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Show notification count on the category"

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 anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label: string;\n\n /\n Icon of the category\n /\n @Prop() icon: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer: MutationObserver;\n private menuItemsContainer: HTMLDivElement;\n private ixMenu: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged() {\n this.nestedItems = this.getNestedItems();\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems \|\| this.isNestedItemActive());\n }\n\n componentWillLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.menuExpand = this.ixMenu.expand;\n this.showItems = this.isCategoryItemListVisible();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer.style.removeProperty('max-height');\n this.menuItemsContainer.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={'chevron-down-small'}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography format=\"label\" bold color=\"std\">\n {this.label}\n </ix-typography>\n </ix-dropdown-item>\n <ix-divider></ix-divider>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}
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 anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement!: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label?: string;\n\n /\n Icon of the category\n /\n @Prop() icon?: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications?: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories!: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer?: MutationObserver;\n private menuItemsContainer?: HTMLDivElement;\n private ixMenu?: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu?.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu?.expand) {\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged(mutations?: MutationRecord[]) {\n this.nestedItems = this.getNestedItems();\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 isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={'chevron-down-small'}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography format=\"label\" bold color=\"std\">\n {this.label}\n </ix-typography>\n </ix-dropdown-item>\n <ix-divider></ix-divider>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}

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

@@ -90,15 +90,15 @@ export class MenuItem {
                 slot: 'bottom',
             };
         }
-        return (h(Host, Object.assign({ key: '88e8f15c522e435f3d0cf1873cc583d241145264', class: {
+        return (h(Host, Object.assign({ key: '2354afb58f352da2049c890dbc5e3e50f09dba0b', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), h("button", { key: '581d840e9f95e029300a3f14bc63841b919d7639', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { key: 'b31f3ea13d00770520b0c3a1867fb7f9a9e42a21', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: '977480b74cf07ffd13a9502d679fd3be4103fb17', class: "tab-text text-default" }, this.label, h("slot", { key: '19f5dfc4e6e8909391dc71c8593470dd8f408fd4' }))), !this.isCategory &&
+            } }, extendedAttributes), h("button", { key: '8018df4a7addace8a43ecfacbb62bc0441cb1454', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { key: 'ae5b887f0dce48499d40173ececb78de88a4dc49', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: '82ffbcea81d54f721940ff582edb456a29ada0df', class: "tab-text text-default" }, this.label, h("slot", { key: '96994438e88c498851d36ff8ab209a15347bd228' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
-            !this.menuExpanded && (h("ix-tooltip", { key: 'e742d5f121663b823cc9a748c2fc8abafbe4d47e', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+            !this.menuExpanded && (h("ix-tooltip", { key: 'c6c3f4431e58275cbab1c0f8573e5387732ea4e4', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -119,7 +119,7 @@ export class MenuItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -175,7 +175,7 @@ export class MenuItem {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -198,7 +198,7 @@ export class MenuItem {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -218,7 +218,7 @@ export class MenuItem {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -26,7 +26,7 @@ export class MenuSettings {
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: '9ec0ad1f36b3faf9e1c688489b26e10b8cf0c982', context: this });
+        return h(MenuTabs, { key: 'e5a0d1cc238a2c88d9a0c572fbfecefd3a589c38', context: this });
     }
     static get is() { return "ix-menu-settings"; }
     static get encapsulation() { return "shadow"; }
@@ -47,11 +47,11 @@ export class MenuSettings {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Active tab"

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,MAAM,GACP,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,YAAY;;;qBAYP,UAAU;oBAKX,KAAK;;;IAUpB,SAAS,CAAC,KAAa;QACrB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACtB,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 setTab,\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 Internal\n /\n @Prop() show = false;\n\n /\n Popover closed\n */\n @Event() close: EventEmitter<CustomCloseEvent>;\n\n @State() items: HTMLIxMenuSettingsItemElement[];\n\n @Watch('activeTabLabel')\n updateTab(label: string) {\n setTab(this, label);\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,MAAM,GACP,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,YAAY;;;qBAYP,UAAU;oBAKX,KAAK;;;IAUpB,SAAS,CAAC,KAAa;QACrB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACtB,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 setTab,\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 Internal\n /\n @Prop() show = false;\n\n /\n Popover closed\n */\n @Event() close!: EventEmitter<CustomCloseEvent>;\n\n @State() items!: HTMLIxMenuSettingsItemElement[];\n\n @Watch('activeTabLabel')\n updateTab(label: string) {\n setTab(this, label);\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

@@ -19,7 +19,7 @@ export class MenuSettingsItem {
         });
     }
     render() {
-        return (h(Host, { key: '7f91b18b72aa08bc94bca973e934a6b591d6466b' }, h("slot", { key: '56192b67632208075a544cfcb7970fe7d6e42cbc' })));
+        return (h(Host, { key: 'f551c7e99242ecfced694c73d83c602dc944dfea' }, h("slot", { key: '11dad3b953eecbfcc967a41195426746f74637eb' })));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get encapsulation() { return "shadow"; }
@@ -40,11 +40,11 @@ export class MenuSettingsItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Settings Item label"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-settings-item.js","sourceRoot":"","sources":["../../../src/components/menu-settings-item/menu-settings-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAQvB,MAAM,OAAO,gBAAgB;;;;IAY3B,UAAU,CAAC,QAAgB,EAAE,QAAgB;QAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,IAAI,EAAE,uBAAuB;YAC7B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,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 /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { CustomLabelChangeEvent } from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n tag: 'ix-menu-settings-item',\n styleUrl: 'menu-settings-item.css',\n shadow: true,\n})\nexport class MenuSettingsItem {\n /\n Settings Item label\n /\n @Prop({ reflect: true }) label: string;\n\n /\n Label changed\n */\n @Event() labelChange: EventEmitter<CustomLabelChangeEvent>;\n\n @Watch('label')\n watchLabel(newValue: string, oldValue: string) {\n this.labelChange.emit({\n name: 'ix-menu-settings-item',\n oldLabel: oldValue,\n newLabel: newValue,\n });\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"menu-settings-item.js","sourceRoot":"","sources":["../../../src/components/menu-settings-item/menu-settings-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAQvB,MAAM,OAAO,gBAAgB;;;;IAY3B,UAAU,CAAC,QAAgB,EAAE,QAAgB;QAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,IAAI,EAAE,uBAAuB;YAC7B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,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 /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { CustomLabelChangeEvent } from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n tag: 'ix-menu-settings-item',\n styleUrl: 'menu-settings-item.css',\n shadow: true,\n})\nexport class MenuSettingsItem {\n /\n Settings Item label\n /\n @Prop({ reflect: true }) label?: string;\n\n /\n Label changed\n */\n @Event() labelChange!: EventEmitter<CustomLabelChangeEvent>;\n\n @Watch('label')\n watchLabel(newValue: string, oldValue: string) {\n this.labelChange.emit({\n name: 'ix-menu-settings-item',\n oldLabel: oldValue,\n newLabel: newValue,\n });\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -42,8 +42,10 @@ export class MessageBar {
         this.closedChange.emit();
     }
     render() {
-        return (h(Host, { key: 'fdbcea5a72dcc7515fcc1d877e654bc071c6b3a2' }, h("div", { key: 'febe64476a91d62341cb7d56bb79f69757a142e5', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '43f3a439f53fe80be9d94c940dae2e58dfecea58', color: this.color, name: this.icon }), h("div", { key: '29fb301dff4e920f6cf6ac54b27ff833d44141c0', class: "message-content" }, h("slot", { key: '1c2c75ff1667923c4dd78e4688a5f4f2a33621a9' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
-                this.closeAlert(this.divElement);
+        return (h(Host, { key: '94f3ffb15597b45ecc76e5914f13550c4d882288' }, h("div", { key: 'eaa19cbf27288f4a752b7cbf61b7c33319f2c1d7', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'cbced877ee67adf695b59de394a085fae3c43e41', color: this.color, name: this.icon }), h("div", { key: '610ca0dbb5c9c3e0e5099b58a1f449c07a4bc120', class: "message-content" }, h("slot", { key: 'c9f13ca7096ba9694ff112a704958082281fa783' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+                if (this.divElement) {
+                    this.closeAlert(this.divElement);
+                }
             }, "data-testid": "close-btn" })) : (''))));
     }
     static get is() { return "ix-message-bar"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/components/message-bar/message-bar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,SAAS,CAAC;AAQ5B,MAAM,OAAO,UAAU;;oBAIyB,MAAM;2BAK9B,IAAI;;;;IAe1B,mBAAmB;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;QAC7B,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QAC5B,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,EAAe;QAChC,KAAK,CAAC;YACJ,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,UAAU,CAAC,QAAQ;YAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,aAAa;YACrB,QAAQ,EAAE,GAAG,EAAE;gBACb,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC;gBAElD,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;gBACvD,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,8DAAa,CACT;gBACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,sBACE,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;~~oBACnC~~,CAAC,iBACW,WAAW,GACP,CACnB,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA9DuB~~,mBAAQ,GAAG,GAAG,AAAN,CAAO","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 Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n tag: 'ix-message-bar',\n styleUrl: 'message-bar.scss',\n shadow: true,\n})\nexport class MessageBar {\n /\n Specifies the type of the alert.\n /\n @Prop() type: 'danger' \| 'warning' \| 'info' = 'info';\n\n /\n If true, close button is enabled and alert can be dismissed by the user\n /\n @Prop() dismissible = true;\n\n /\n An event emitted when the close button is clicked\n */\n @Event() closedChange: EventEmitter;\n\n @State() icon: 'error' \| 'warning' \| 'info';\n\n @State() color: NotificationColor;\n\n private static readonly duration = 300;\n\n private divElement?: HTMLElement;\n\n componentWillRender() {\n if (this.type === 'danger') {\n this.icon = 'error';\n this.color = 'color-alarm';\n }\n\n if (this.type === 'info') {\n this.icon = 'info';\n this.color = 'color-info';\n }\n\n if (this.type === 'warning') {\n this.icon = 'warning';\n this.color = 'color-warning';\n }\n }\n\n private closeAlert(el: HTMLElement) {\n anime({\n targets: el,\n duration: MessageBar.duration,\n opacity: [1, 0],\n easing: 'easeOutSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n this.closedChange.emit();\n }\n\n render() {\n return (\n <Host>\n <div\n class={{ 'message-container': true, [this.type]: true }}\n role=\"alert\"\n ref={(el) => (this.divElement = el as HTMLElement)}\n >\n <ix-icon color={this.color} name={this.icon}></ix-icon>\n <div class=\"message-content\">\n <slot></slot>\n </div>\n {this.dismissible ? (\n <ix-icon-button\n icon={'close'}\n size=\"24\"\n ghost={true}\n onClick={() => {\n this.closeAlert(this.divElement);\n }}\n data-testid=\"close-btn\"\n ></ix-icon-button>\n ) : (\n ''\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/components/message-bar/message-bar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,SAAS,CAAC;AAQ5B,MAAM,OAAO,UAAU;;oBAIyB,MAAM;2BAK9B,IAAI;;;;IAe1B,mBAAmB;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;QAC7B,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QAC5B,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,EAAe;QAChC,KAAK,CAAC;YACJ,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,UAAU,CAAC,QAAQ;YAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,aAAa;YACrB,QAAQ,EAAE,GAAG,EAAE;gBACb,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC;gBAElD,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY;gBACvD,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,8DAAa,CACT;gBACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,sBACE,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;4BACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;wBACnC,CAAC;oBACH,CAAC,iBACW,WAAW,GACP,CACnB,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhEuB,mBAAQ,GAAG,GAAG,AAAN,CAAO","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 Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n tag: 'ix-message-bar',\n styleUrl: 'message-bar.scss',\n shadow: true,\n})\nexport class MessageBar {\n /\n Specifies the type of the alert.\n /\n @Prop() type: 'danger' \| 'warning' \| 'info' = 'info';\n\n /\n If true, close button is enabled and alert can be dismissed by the user\n /\n @Prop() dismissible = true;\n\n /\n An event emitted when the close button is clicked\n */\n @Event() closedChange!: EventEmitter;\n\n @State() icon?: 'error' \| 'warning' \| 'info';\n\n @State() color?: NotificationColor;\n\n private static readonly duration = 300;\n\n private divElement?: HTMLElement;\n\n componentWillRender() {\n if (this.type === 'danger') {\n this.icon = 'error';\n this.color = 'color-alarm';\n }\n\n if (this.type === 'info') {\n this.icon = 'info';\n this.color = 'color-info';\n }\n\n if (this.type === 'warning') {\n this.icon = 'warning';\n this.color = 'color-warning';\n }\n }\n\n private closeAlert(el: HTMLElement) {\n anime({\n targets: el,\n duration: MessageBar.duration,\n opacity: [1, 0],\n easing: 'easeOutSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n this.closedChange.emit();\n }\n\n render() {\n return (\n <Host>\n <div\n class={{ 'message-container': true, [this.type]: true }}\n role=\"alert\"\n ref={(el) => (this.divElement = el as HTMLElement)}\n >\n <ix-icon color={this.color} name={this.icon}></ix-icon>\n <div class=\"message-content\">\n <slot></slot>\n </div>\n {this.dismissible ? (\n <ix-icon-button\n icon={'close'}\n size=\"24\"\n ghost={true}\n onClick={() => {\n if (this.divElement) {\n this.closeAlert(this.divElement);\n }\n }}\n data-testid=\"close-btn\"\n ></ix-icon-button>\n ) : (\n ''\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"message-bar.spec.js","sourceRoot":"","sources":["../../../../src/components/message-bar/test/message-bar.spec.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,IAAI,IAAS,CAAC;IACd,IAAI,UAAmC,CAAC;IACxC,IAAI,WAAoC,CAAC;IAEzC,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,~~CAAC~~,CAAC;~~QACtD~~,WAAW,GAAG,UAAU,CAAC,~~UAAU~~,CAAC,aAAa,~~CAC/C~~,2BAA2B,~~CAC5B~~,CAAC;~~IACJ~~,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,CAAC,IAAI,EAAE,EAAE;QAC1C,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,GAAG,EAAE;YAC/C,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,CAAC,IAAI,EAAE,EAAE;QAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE;YAChC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QAEtD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC9B,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 { newSpecPage } from '@stencil/core/testing';\nimport { fireEvent } from '@testing-library/dom';\nimport { MessageBar } from '../message-bar';\n\ndescribe('ix-message-bar', () => {\n let page: any;\n let messageBar: HTMLIxMessageBarElement;\n let closeButton: HTMLIxIconButtonElement;\n\n beforeEach(async () => {\n page = await newSpecPage({\n components: [MessageBar],\n html: '<ix-message-bar type=\"danger\"></ix-message-bar>',\n });\n\n messageBar = document.querySelector('ix-message-bar');\n closeButton = messageBar.shadowRoot.querySelector(\n '[data-testid=\"close-btn\"]'\n );\n });\n\n it('closes the alert message bar', (done) => {\n messageBar.addEventListener('closedChange', () => {\n done();\n });\n fireEvent.click(closeButton);\n });\n\n it('emits an event when the message is dismissed', (done) => {\n const mockCallback = jest.fn(() => {\n done();\n });\n window.addEventListener('closedChange', mockCallback);\n\n fireEvent.click(closeButton);\n page.waitForChanges().then(() => {\n window.removeEventListener('closedChange', mockCallback);\n });\n });\n});\n"]}
1	+ {"version":3,"file":"message-bar.spec.js","sourceRoot":"","sources":["../../../../src/components/message-bar/test/message-bar.spec.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,IAAI,IAAS,CAAC;IACd,IAAI,UAAmC,CAAC;IACxC,IAAI,WAAoC,CAAC;IAEzC,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC;QACvD,WAAW,GAAG,UAAU,CAAC,UAAW,CAAC,aAAa,CAChD,2BAA2B,CAC3B,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,CAAC,IAAI,EAAE,EAAE;QAC1C,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,GAAG,EAAE;YAC/C,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,CAAC,IAAI,EAAE,EAAE;QAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE;YAChC,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QAEtD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC9B,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 { newSpecPage } from '@stencil/core/testing';\nimport { fireEvent } from '@testing-library/dom';\nimport { MessageBar } from '../message-bar';\n\ndescribe('ix-message-bar', () => {\n let page: any;\n let messageBar: HTMLIxMessageBarElement;\n let closeButton: HTMLIxIconButtonElement;\n\n beforeEach(async () => {\n page = await newSpecPage({\n components: [MessageBar],\n html: '<ix-message-bar type=\"danger\"></ix-message-bar>',\n });\n\n messageBar = document.querySelector('ix-message-bar')!;\n closeButton = messageBar.shadowRoot!.querySelector(\n '[data-testid=\"close-btn\"]'\n )!;\n });\n\n it('closes the alert message bar', (done) => {\n messageBar.addEventListener('closedChange', () => {\n done();\n });\n fireEvent.click(closeButton);\n });\n\n it('emits an event when the message is dismissed', (done) => {\n const mockCallback = jest.fn(() => {\n done();\n });\n window.addEventListener('closedChange', mockCallback);\n\n fireEvent.click(closeButton);\n page.waitForChanges().then(() => {\n window.removeEventListener('closedChange', mockCallback);\n });\n });\n});\n"]}

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

@@ -144,17 +144,17 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '843063a6cabaa8ed0d6f0da512fd79b3df2f11f7', class: {
+        return (h(Host, { key: '2e3dac43f6f2e9cde6a6d639cb3bcebeb9e9b411', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, h("div", { key: 'c1419057ffea6a493dd8870894f491727209a0b3', class: "dialog-backdrop" }, h("dialog", { key: 'fc8d67009dbc4563287d87f3a60fe775cd92e1ba', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '5ea3cf91488446be08e7fc4802b3e167fc688437', class: "dialog-backdrop" }, h("dialog", { key: 'a298c12b344b74ea11a4ba9749a18b49ba97f697', "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(), onClick: (event) => this.onModalClick(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, h("slot", { key: '7daaff4237ace41e3545af9831f039174c8336bb' })))));
+            } }, h("slot", { key: 'a1da640bda6f15e9c48eb5b3b3f7e336c99cb85b' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -259,7 +259,7 @@ export class Modal {
                 "mutable": false,
                 "complexType": {
                     "original": "(reason?: any) => boolean | Promise<boolean>",
-                    "resolved": "(reason?: any) => boolean | Promise<boolean>",
+                    "resolved": "((reason?: any) => boolean | Promise<boolean>) | undefined",
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -268,7 +268,7 @@ export class Modal {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Is called before the modal is dismissed.\n\n- Return `true` to proceed in dismissing the modal\n- Return `false` to abort in dismissing the modal"
@@ -399,7 +399,7 @@ export class Modal {
                     "signature": "<T = any>(reason?: T) => Promise<void>",
                     "parameters": [{
                             "name": "reason",
-                            "type": "T",
+                            "type": "T | undefined",
                             "docs": ""
                         }],
                     "references": {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' \| '480' \| '600' \| '720' \| '840';\nexport type IxModalDynamicSize = 'full-width' \| 'full-screen';\nexport type IxModalSize = IxModalFixedSize \| IxModalDynamicSize;\n\n@Component({\n tag: 'ix-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n private ariaAttributes: A11yAttributes = {};\n\n @Element() hostElement!: HTMLIxModalElement;\n\n /\n Modal size\n \n @since 2.0.0\n /\n @Prop() size: IxModalSize = '360';\n\n /\n Should the modal be animated\n /\n @Prop() animation = true;\n\n /\n Show a backdrop behind the modal dialog\n /\n @Prop() backdrop = true;\n\n /\n Dismiss modal on backdrop click\n \n @since 2.0.0\n /\n @Prop() closeOnBackdropClick = false;\n\n /\n Is called before the modal is dismissed.\n \n - Return `true` to proceed in dismissing the modal\n * - Return `false` to abort in dismissing the modal\n /\n @Prop() beforeDismiss: (reason?: any) => boolean \| Promise<boolean>;\n\n /\n Centered modal\n /\n @Prop() centered = false;\n\n /\n Use ESC to dismiss the modal\n * @deprecated - Use closeOnEscape instead\n /\n @Prop() keyboard = true;\n\n /\n If set to true the modal can be closed by pressing the Escape key\n /\n @Prop() closeOnEscape = true;\n\n /\n Dialog close\n /\n @Event() dialogClose: EventEmitter;\n\n /\n Dialog cancel\n /\n @Event() dialogDismiss: EventEmitter;\n\n @State() modalVisible = false;\n\n @OnListener<Modal>('keydown', (self) => !self.closeOnEscape \|\| !self.keyboard)\n onKey(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n e.preventDefault();\n }\n }\n\n get dialog() {\n return this.hostElement.shadowRoot.querySelector('dialog');\n }\n\n private slideInModal() {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [0, 1],\n translateY: [0, transformY],\n translateX: ['-50%', '-50%'],\n easing: 'easeOutSine',\n });\n }\n\n private slideOutModal(completeCallback: Function) {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [1, 0],\n translateY: [transformY, 0],\n translateX: ['-50%', '-50%'],\n easing: 'easeInSine',\n complete: () => {\n if (completeCallback) {\n completeCallback();\n }\n },\n });\n }\n\n private onModalClick(event: MouseEvent) {\n if (event.target !== this.dialog) {\n return;\n }\n\n const rect = this.dialog.getBoundingClientRect();\n const isClickOutside =\n rect.top <= event.clientY &&\n event.clientY <= rect.top + rect.height &&\n rect.left <= event.clientX &&\n event.clientX <= rect.left + rect.width;\n\n if (!isClickOutside && this.closeOnBackdropClick) {\n this.dismissModal();\n }\n }\n\n /\n Show the dialog\n /\n @Method()\n async showModal() {\n try {\n const dialog = await waitForElement<HTMLDialogElement>(\n 'dialog',\n this.hostElement.shadowRoot\n );\n this.modalVisible = true;\n dialog.showModal();\n } catch (e) {\n console.error('HTMLDialogElement not existing');\n }\n }\n\n /\n Dismiss the dialog\n /\n @Method()\n async dismissModal<T = any>(reason?: T) {\n if (!this.modalVisible) {\n return;\n }\n\n let allowDismiss = true;\n\n if (this.beforeDismiss !== undefined) {\n allowDismiss = await this.beforeDismiss(reason);\n }\n if (!allowDismiss) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog.close(\n JSON.stringify(\n {\n type: 'dismiss',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogDismiss.emit(reason);\n });\n }\n\n /\n Close the dialog\n */\n @Method()\n async closeModal<T = any>(reason: T) {\n if (!this.modalVisible) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog.close(\n JSON.stringify(\n {\n type: 'close',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogClose.emit(reason);\n });\n }\n\n componentDidLoad() {\n this.slideInModal();\n }\n\n componentWillLoad() {\n this.ariaAttributes = a11yHostAttributes(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.modalVisible,\n 'no-backdrop': this.backdrop === false,\n 'align-center': this.centered,\n }}\n >\n <div class=\"dialog-backdrop\">\n <dialog\n aria-modal={a11yBoolean(true)}\n aria-describedby={this.ariaAttributes['aria-describedby']}\n aria-labelledby={this.ariaAttributes['aria-labelledby']}\n class={{\n modal: true,\n [`modal-size-${this.size}`]: true,\n }}\n onClose={() => this.dismissModal()}\n onClick={(event) => this.onModalClick(event)}\n onCancel={(e) => {\n e.preventDefault();\n this.dismissModal();\n }}\n >\n <slot></slot>\n </dialog>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' \| '480' \| '600' \| '720' \| '840';\nexport type IxModalDynamicSize = 'full-width' \| 'full-screen';\nexport type IxModalSize = IxModalFixedSize \| IxModalDynamicSize;\n\n@Component({\n tag: 'ix-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n private ariaAttributes: A11yAttributes = {};\n\n @Element() hostElement!: HTMLIxModalElement;\n\n /\n Modal size\n \n @since 2.0.0\n /\n @Prop() size: IxModalSize = '360';\n\n /\n Should the modal be animated\n /\n @Prop() animation = true;\n\n /\n Show a backdrop behind the modal dialog\n /\n @Prop() backdrop = true;\n\n /\n Dismiss modal on backdrop click\n \n @since 2.0.0\n /\n @Prop() closeOnBackdropClick = false;\n\n /\n Is called before the modal is dismissed.\n \n - Return `true` to proceed in dismissing the modal\n * - Return `false` to abort in dismissing the modal\n /\n @Prop() beforeDismiss?: (reason?: any) => boolean \| Promise<boolean>;\n\n /\n Centered modal\n /\n @Prop() centered = false;\n\n /\n Use ESC to dismiss the modal\n * @deprecated - Use closeOnEscape instead\n /\n @Prop() keyboard = true;\n\n /\n If set to true the modal can be closed by pressing the Escape key\n /\n @Prop() closeOnEscape = true;\n\n /\n Dialog close\n /\n @Event() dialogClose!: EventEmitter;\n\n /\n Dialog cancel\n /\n @Event() dialogDismiss!: EventEmitter;\n\n @State() modalVisible = false;\n\n @OnListener<Modal>('keydown', (self) => !self.closeOnEscape \|\| !self.keyboard)\n onKey(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n e.preventDefault();\n }\n }\n\n get dialog() {\n return this.hostElement.shadowRoot!.querySelector('dialog');\n }\n\n private slideInModal() {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [0, 1],\n translateY: [0, transformY],\n translateX: ['-50%', '-50%'],\n easing: 'easeOutSine',\n });\n }\n\n private slideOutModal(completeCallback: Function) {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [1, 0],\n translateY: [transformY, 0],\n translateX: ['-50%', '-50%'],\n easing: 'easeInSine',\n complete: () => {\n if (completeCallback) {\n completeCallback();\n }\n },\n });\n }\n\n private onModalClick(event: MouseEvent) {\n if (event.target !== this.dialog) {\n return;\n }\n\n const rect = this.dialog!.getBoundingClientRect();\n const isClickOutside =\n rect.top <= event.clientY &&\n event.clientY <= rect.top + rect.height &&\n rect.left <= event.clientX &&\n event.clientX <= rect.left + rect.width;\n\n if (!isClickOutside && this.closeOnBackdropClick) {\n this.dismissModal();\n }\n }\n\n /\n Show the dialog\n /\n @Method()\n async showModal() {\n try {\n const dialog = await waitForElement<HTMLDialogElement>(\n 'dialog',\n this.hostElement.shadowRoot\n );\n this.modalVisible = true;\n dialog.showModal();\n } catch (e) {\n console.error('HTMLDialogElement not existing');\n }\n }\n\n /\n Dismiss the dialog\n /\n @Method()\n async dismissModal<T = any>(reason?: T) {\n if (!this.modalVisible) {\n return;\n }\n\n let allowDismiss = true;\n\n if (this.beforeDismiss !== undefined) {\n allowDismiss = await this.beforeDismiss(reason);\n }\n if (!allowDismiss) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog!.close(\n JSON.stringify(\n {\n type: 'dismiss',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogDismiss.emit(reason);\n });\n }\n\n /\n Close the dialog\n */\n @Method()\n async closeModal<T = any>(reason: T) {\n if (!this.modalVisible) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog!.close(\n JSON.stringify(\n {\n type: 'close',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogClose.emit(reason);\n });\n }\n\n componentDidLoad() {\n this.slideInModal();\n }\n\n componentWillLoad() {\n this.ariaAttributes = a11yHostAttributes(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.modalVisible,\n 'no-backdrop': this.backdrop === false,\n 'align-center': this.centered,\n }}\n >\n <div class=\"dialog-backdrop\">\n <dialog\n aria-modal={a11yBoolean(true)}\n aria-describedby={this.ariaAttributes['aria-describedby']}\n aria-labelledby={this.ariaAttributes['aria-labelledby']}\n class={{\n modal: true,\n [`modal-size-${this.size}`]: true,\n }}\n onClose={() => this.dismissModal()}\n onClick={(event) => this.onModalClick(event)}\n onCancel={(e) => {\n e.preventDefault();\n this.dismissModal();\n }}\n >\n <slot></slot>\n </dialog>\n </div>\n </Host>\n );\n }\n}\n"]}