npm - @siemens/ix - Versions diffs - 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241021144048 - Mend

@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241021144048

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 (1191) hide show

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

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, readTask, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { makeRef } from "../utils/make-ref";
 import { menuController } from "../utils/menu-service/menu-service";
@@ -18,8 +18,7 @@ export class MenuItem {
         this.buttonRef = makeRef();
         this.isHostedInsideCategory = false;
         this.observer = createMutationObserver(() => {
-            var _a;
-            this.tooltip = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.innerText;
+            this.setTooltip();
         });
         this.label = undefined;
         this.home = false;
@@ -27,11 +26,11 @@ export class MenuItem {
         this.tabIcon = undefined;
         this.icon = undefined;
         this.notifications = undefined;
-        this.active = undefined;
-        this.disabled = undefined;
-        this.isCategory = undefined;
+        this.active = false;
+        this.disabled = false;
+        this.isCategory = false;
         this.tooltip = undefined;
-        this.menuExpanded = undefined;
+        this.menuExpanded = false;
     }
     componentWillLoad() {
         this.isHostedInsideCategory =
@@ -42,10 +41,11 @@ export class MenuItem {
         this.menuExpandedDisposer = menuController.expandChange.on((expand) => (this.menuExpanded = expand));
     }
     componentWillRender() {
-        readTask(() => {
-            var _a;
-            this.tooltip = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.innerText;
-        });
+        this.setTooltip();
+    }
+    setTooltip() {
+        var _a;
+        this.tooltip = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.textContent;
     }
     connectedCallback() {
         this.observer.observe(this.hostElement, {
@@ -89,15 +89,15 @@ export class MenuItem {
                 slot: 'bottom',
             };
         }
-        return (h(Host, Object.assign({ key: '747ed4837d59ca4a8c0afd678fae6e2b79fc70f9', class: {
+        return (h(Host, Object.assign({ key: 'cfaec510f5f9c13dd6ddc93c9cee91ff60032dd9', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), h("button", { key: '882287eba4dcdde8a36f4951716e7db5985bbb73', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { key: '2cb056d1b5d45ea266e3315d6bfeb87b9eddb718', 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: 'daf7c4bc26e1ea027ed208092b39df712716e0a9', class: "tab-text text-default" }, this.label, " ", h("slot", { key: '6cb41c9af3cdda340ad202f8bdcdf643c4883dd9' }))), !this.isCategory &&
+            } }, extendedAttributes), h("button", { key: 'fd607d3ce61a36f8cd3089442490a71164f35123', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { key: '20de89f6bed4e0dcf41322dd7f15006db51e0edb', 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: '825452aa535d6f79c1d3b836655b96bfecc8fc76', class: "tab-text text-default" }, this.label, h("slot", { key: '20fafb4552c98352838983c97f826dba4d789674' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
-            !this.menuExpanded && (h("ix-tooltip", { key: '6867e8b37d599f0f2aea88a5a8098f01d74f9357', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+            !this.menuExpanded && (h("ix-tooltip", { key: '0461a1bc372efb2e15d3e6bebc98a32ce2ab8261', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -122,7 +122,7 @@ export class MenuItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "since",
@@ -178,7 +178,7 @@ export class MenuItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "link",
@@ -201,7 +201,7 @@ export class MenuItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "link",
@@ -221,7 +221,7 @@ export class MenuItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Show notification count on tab"
@@ -244,7 +244,8 @@ export class MenuItem {
                     "text": "State to display active"
                 },
                 "attribute": "active",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
@@ -261,7 +262,8 @@ export class MenuItem {
                     "text": "Disable tab and remove event handlers"
                 },
                 "attribute": "disabled",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "isCategory": {
                 "type": "boolean",
@@ -281,7 +283,8 @@ export class MenuItem {
                     "text": ""
                 },
                 "attribute": "is-category",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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":"AAAA;;;;;;;GAOG;AAEH,OAAO,~~EACL~~,SAAS,~~EACT~~,OAAO,~~EACP~~,CAAC,~~EACD~~,IAAI,~~EACJ~~,IAAI,~~EACJ~~,~~QAAQ,EACR,~~KAAK,~~EACL~~,KAAK,~~GACN~~,MAAM,eAAe,CAAC;~~AACvB~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAGpE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;QAuDX,cAAS,GAAG,OAAO,EAAqB,CAAC;QACzC,2BAAsB,GAAG,KAAK,CAAC;QAG/B,aAAQ,GAAqB,sBAAsB,CAAC,GAAG,EAAE;;YAC/D,IAAI,CAAC,~~OAAO~~,~~GAAG~~,~~MAAA,IAAI,~~CAAC~~,KAAK,mCAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC~~;~~QAC1D~~,CAAC,CAAC,CAAC;;oBAlDY,KAAK;sBAOH,KAAK~~;;;;;;;;;;IA6CtB~~,iBAAiB;QACf,IAAI,CAAC,sBAAsB;YACzB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAEjD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,YAAY,GAAG,cAAc,CAAC,aAAa,CAAC,MAAM,CAAC;QACxD,IAAI,CAAC,oBAAoB,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CACxD,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,CACzC,CAAC;IACJ,CAAC;IAED,mBAAmB;QACjB,~~QAAQ~~,CAAC,~~GAAG~~,EAAE;;~~YACZ~~,IAAI,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,WAAW,CAAC,~~SAAS~~,CAAC;~~QAC1D~~,CAAC~~,CAAC,CAAC~~;~~IACL,CAAC;~~IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,aAAa,EAAE,IAAI;SACpB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;QAED,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;IAGD,YAAY;QACV,IACE,CAAC,IAAI,CAAC,sBAAsB;YAC5B,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI;YACtB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EACzB,CAAC;YACD,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,eAAe;QACb,IACE,CAAC,IAAI,CAAC,sBAAsB;YAC5B,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI;YACtB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EACzB,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,IAAI,kBAAkB,GAAG,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,kBAAkB,GAAG;gBACnB,IAAI,EAAE,MAAM;aACb,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,kBAAkB,GAAG;gBACnB,IAAI,EAAE,QAAQ;aACf,CAAC;QACJ,CAAC;QACD,OAAO,CACL,EAAC,IAAI,mEACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,UAAU,EAAE,IAAI,CAAC,IAAI;gBACrB,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,YAAY,EAAE,IAAI,CAAC,sBAAsB;aAC1C,IACG,kBAAkB;YAEtB,+DACE,KAAK,EAAC,KAAK,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,IAAI,CAAC,SAAS;gBAElB,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAC9B,gEACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,GACtB,CACZ;gBACA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,cAAc;oBACvB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CACxC,CACP,CAAC,CAAC,CAAC,IAAI;gBACR,6DAAM,KAAK,EAAC,uBAAuB;oBAChC,IAAI,CAAC,KAAK~~;;oBAAE~~,8DAAa,~~CACrB~~,CACA;YACR,CAAC,IAAI,CAAC,UAAU;gBACf,CAAC,IAAI,CAAC,sBAAsB;gBAC5B,CAAC,IAAI,CAAC,YAAY,IAAI,CACpB,mEACE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,EACpC,SAAS,EAAE,OAAO,EAClB,SAAS,EAAE,IAAI,IAEd,IAAI,CAAC,OAAO,CACF,CACd,CACE,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~~ Element~~,\n~~ h~~,\n~~ Host~~,\n~~ Prop~~,\n readTask,\n~~ State~~,\n~~ Watch~~,\n~~} 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';\n\n/\n @slot menu-item-label Custom label\n /\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Label of the menu item. Will also be used as tooltip text\n \n @since 2.2.0\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 @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0\n /\n @Prop({ mutable: true }) tabIcon: string;\n\n /\n Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n /\n @Prop({ mutable: true }) icon: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications: number;\n\n /\n State to display active\n /\n @Prop() active: boolean;\n\n /\n Disable tab and remove event handlers\n /\n @Prop() disabled: boolean;\n\n /* @internal */\n @Prop() isCategory: boolean;\n\n @Element() hostElement: HTMLIxMenuItemElement;\n\n @State() tooltip: string;\n @State() menuExpanded: boolean;\n\n private buttonRef = makeRef<HTMLButtonElement>();\n private isHostedInsideCategory = false;\n private menuExpandedDisposer: Disposable;\n\n private observer: MutationObserver = createMutationObserver(() => {\n this.~~tooltip = this.label ?? this.hostElement.innerText~~;\n });\n\n componentWillLoad() {\n this.isHostedInsideCategory =\n !!this.hostElement.closest('ix-menu-category');\n\n this.onIconChange();\n this.onTabIconChange();\n\n this.menuExpanded = menuController.nativeElement.expand;\n this.menuExpandedDisposer = menuController.expandChange.on(\n (expand) => (this.menuExpanded = expand)\n );\n }\n\n componentWillRender() {\n ~~readTask~~(() => {\n this.tooltip = this.label ?? this.hostElement.~~innerText~~;\n ~~});\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 (\n !this.isHostedInsideCategory &&\n !this.hostElement.icon &&\n !this.hostElement.tabIcon\n ) {\n this.icon = 'document';\n }\n }\n\n @Watch('tabIcon')\n onTabIconChange() {\n if (\n !this.isHostedInsideCategory &&\n !this.hostElement.icon &&\n !this.hostElement.tabIcon\n ) {\n this.tabIcon = 'document';\n }\n }\n\n render() {\n let extendedAttributes = {};\n if (this.home) {\n extendedAttributes = {\n slot: 'home',\n };\n }\n\n if (this.bottom) {\n extendedAttributes = {\n slot: 'bottom',\n };\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n 'tab-nested': this.isHostedInsideCategory,\n }}\n {...extendedAttributes}\n >\n <button\n class=\"tab\"\n tabIndex={this.disabled ? -1 : 0}\n role=\"listitem\"\n ref={this.buttonRef}\n >\n {(this.icon \|\| this.tabIcon) && (\n <ix-icon\n class={'tab-icon'}\n name={this.icon ?? this.tabIcon}\n ></ix-icon>\n )}\n {this.notifications ? (\n <div class=\"notification\">\n <div class=\"pill\">{this.notifications}</div>\n </div>\n ) : null}\n <span class=\"tab-text text-default\">\n {this.label} <slot></slot>\n </span>\n </button>\n {!this.isCategory &&\n !this.isHostedInsideCategory &&\n !this.menuExpanded && (\n <ix-tooltip\n for={this.buttonRef.waitForCurrent()}\n placement={'right'}\n showDelay={1000}\n >\n {this.tooltip}\n </ix-tooltip>\n )}\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 { 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';\n\n/\n @slot menu-item-label Custom label\n /\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Label of the menu item. Will also be used as tooltip text\n \n @since 2.2.0\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 @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0\n /\n @Prop({ mutable: true }) tabIcon?: string;\n\n /\n Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n /\n @Prop({ mutable: true }) icon?: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications?: number;\n\n /\n State to display active\n /\n @Prop() active: boolean = false;\n\n /\n Disable tab and remove event handlers\n /\n @Prop() disabled: boolean = false;\n\n /* @internal */\n @Prop() isCategory: boolean = false;\n\n @Element() hostElement!: HTMLIxMenuItemElement;\n\n @State() tooltip?: string;\n @State() menuExpanded: boolean = false;\n\n private buttonRef = makeRef<HTMLButtonElement>();\n private isHostedInsideCategory = false;\n private menuExpandedDisposer: Disposable;\n\n private 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 this.onTabIconChange();\n\n this.menuExpanded = menuController.nativeElement.expand;\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 = this.label ?? 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 (\n !this.isHostedInsideCategory &&\n !this.hostElement.icon &&\n !this.hostElement.tabIcon\n ) {\n this.icon = 'document';\n }\n }\n\n @Watch('tabIcon')\n onTabIconChange() {\n if (\n !this.isHostedInsideCategory &&\n !this.hostElement.icon &&\n !this.hostElement.tabIcon\n ) {\n this.tabIcon = 'document';\n }\n }\n\n render() {\n let extendedAttributes = {};\n if (this.home) {\n extendedAttributes = {\n slot: 'home',\n };\n }\n\n if (this.bottom) {\n extendedAttributes = {\n slot: 'bottom',\n };\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n 'tab-nested': this.isHostedInsideCategory,\n }}\n {...extendedAttributes}\n >\n <button\n class=\"tab\"\n tabIndex={this.disabled ? -1 : 0}\n role=\"listitem\"\n ref={this.buttonRef}\n >\n {(this.icon \|\| this.tabIcon) && (\n <ix-icon\n class={'tab-icon'}\n name={this.icon ?? this.tabIcon}\n ></ix-icon>\n )}\n {this.notifications ? (\n <div class=\"notification\">\n <div class=\"pill\">{this.notifications}</div>\n </div>\n ) : null}\n <span class=\"tab-text text-default\">\n {this.label}\n <slot></slot>\n </span>\n </button>\n {!this.isCategory &&\n !this.isHostedInsideCategory &&\n !this.menuExpanded && (\n <ix-tooltip\n for={this.buttonRef.waitForCurrent()}\n placement={'right'}\n showDelay={1000}\n >\n {this.tooltip}\n </ix-tooltip>\n )}\n </Host>\n );\n }\n}\n"]}

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: 'f2d6521b17f591cbdd009b220d85ccf1daa2f09c', context: this });
+        return h(MenuTabs, { key: '4b288fa42f784e8ae6828fcba63ce7f4b86bd067', context: this });
     }
     static get is() { return "ix-menu-settings"; }
     static get encapsulation() { return "shadow"; }

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: '95940cf98b7f75afe704575f7379d9debf6f0666' }, h("slot", { key: 'd65510239d1f1d0d4dcfc88288fbad819a5ca942' })));
+        return (h(Host, { key: 'e4c9b9c675326b85a86dd5a5b00a3f14c71befa8' }, h("slot", { key: '7e7ba4d1ebdb83dfbf6cdc39b1b005b5562e3cab' })));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class MessageBar {
         this.closedChange.emit();
     }
     render() {
-        return (h(Host, { key: '89f424843ed559d787f88edd431f1321086cbbb2' }, h("div", { key: '3f450ca115c040e749a0926d896dc2bb7ad3648d', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '73dcaa37d965d84b754cb14e58c3442665fcca07', color: this.color, name: this.icon }), h("div", { key: 'b5d5178e53c550320803ffa2ac4da925db284fc7', class: "message-content" }, h("slot", { key: 'e9d97812edc2c45d0c16f57d29352f5357312720' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+        return (h(Host, { key: '0c05da5a485ee5ed3080c9c1e61ed1dfb329fa36' }, h("div", { key: '16694109db2e734ae96b57e4950f972b715a7881', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '190c9f98fe48070d204587987743a88be7429547', color: this.color, name: this.icon }), h("div", { key: 'ca0ac01dded8ed064802fa1e04bb724db4ccdecf', class: "message-content" }, h("slot", { key: '6ca3875be38102fbd55f12d2df6f2692c5d19a7c' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
                 this.closeAlert(this.divElement);
             }, "data-testid": "close-btn" })) : (''))));
     }

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -18,8 +18,11 @@
   display: none;
 }
 :host dialog {
+  --ix-dialog-padding: 1rem;
   margin: 0;
-  padding: 1rem;
+  padding: var(--ix-dialog-padding);
+  padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));
+  padding-bottom: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));
   left: 50%;
 }
 :host dialog::backdrop {
@@ -58,15 +61,22 @@
   width: 95%;
 }
 :host .modal-size-full-screen {
+  border-radius: 0;
   left: 0 !important;
   top: 0 !important;
   transform: none !important;
-  width: calc(100% - 28px);
-  min-width: calc(100% - 28px);
-  max-width: calc(100% - 28px);
-  height: calc(100% - 28px);
-  min-height: calc(100% - 28px);
-  max-height: calc(100% - 28px);
+  box-shadow: none;
+  --ix-dialog-full-screen-height: calc(
+    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)
+  );
+  width: calc(100% - var(--ix-dialog-padding) * 2);
+  min-width: calc(100% - var(--ix-dialog-padding) * 2);
+  max-width: calc(100% - var(--ix-dialog-padding) * 2);
+  min-height: calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));
+  max-height: calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));
+}
+:host dialog.modal-size-full-screen::backdrop {
+  background: var(--theme-modal--background);
 }
 :host .dialog-backdrop {
   display: block;
@@ -99,5 +109,5 @@
 :host(.with-icon) ::slotted(ix-modal-footer),
 :host(.with-icon) ::slotted(ix-modal-content) {
-  margin-left: 2.5rem;
+  margin-left: 3rem;
 }

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

@@ -9,7 +9,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -102,6 +102,9 @@ export class Modal {
      * Dismiss the dialog
      */
     async dismissModal(reason) {
+        if (!this.modalVisible) {
+            return;
+        }
         let allowDismiss = true;
         if (this.beforeDismiss !== undefined) {
             allowDismiss = await this.beforeDismiss(reason);
@@ -122,7 +125,11 @@ export class Modal {
      * Close the dialog
      */
     async closeModal(reason) {
+        if (!this.modalVisible) {
+            return;
+        }
         this.slideOutModal(() => {
+            this.modalVisible = false;
             this.dialog.close(JSON.stringify({
                 type: 'close',
                 reason,
@@ -137,17 +144,17 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'e7e27615541ea127c4d9608a71f447f169cde5d3', class: {
+        return (h(Host, { key: '8da37bc0aac23c63b7ac842548d830d846ff92ce', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, h("div", { key: '3a4e1950295bec70cfdf1a332a9e9e4ab3186472', class: "dialog-backdrop" }, h("dialog", { key: '4455ba17c66dc4d03a792a9aeea11d1380c31674', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '32476b0da9857b242a3f2de542bee81fffdf0b86', class: "dialog-backdrop" }, h("dialog", { key: 'a4f71623afbe203f0b4da5ad606441115b104ae8', "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: '383eae1fa01e4159ca2d512f477532f51c56664a' })))));
+            } }, h("slot", { key: '18506986577fda589e6a6fa47315b9df927f13ad' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }

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: 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 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 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 this.slideOutModal(() => {\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"]}

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -115,4 +115,50 @@ test.describe('closeOnBackdropClick = true', () => {
         await expect(page.locator('ix-modal dialog')).toBeVisible();
     });
 });
+test('emits one event on close', async ({ mount, page }) => {
+    await mount(``);
+    await page.evaluate(() => {
+        return new Promise((resolve) => {
+            const script = document.createElement('script');
+            script.type = 'module';
+            script.innerHTML = `
+        import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
+        window.showModal = ix.showModal;
+      `;
+            document.body.appendChild(script);
+            resolve();
+        });
+    });
+    await page.waitForTimeout(1000);
+    await page.evaluate(() => {
+        const elm = document.createElement('ix-modal');
+        elm.innerHTML = `
+      <ix-modal-header>Title</ix-modal-header>
+      <ix-modal-content>Content</ix-modal-header>
+    `;
+        window
+            .showModal({
+            content: elm,
+            // Disable animation to get the direct animation end callback
+            animation: false,
+        })
+            .then((instance) => {
+            instance.onDismiss.on(() => {
+                const counter = window.__counter;
+                if (counter) {
+                    window.__counter = counter + 1;
+                }
+                else {
+                    window.__counter = 1;
+                }
+            });
+        });
+    });
+    const dialog = page.locator('ix-modal dialog');
+    await expect(dialog).toBeVisible();
+    const iconButton = page.locator('ix-icon-button');
+    await iconButton.click();
+    await expect(dialog).not.toBeVisible();
+    expect(await page.evaluate(() => window.__counter)).toBe(1);
+});
 //# sourceMappingURL=modal.ct.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.ct.js","sourceRoot":"","sources":["../../../../src/components/modal/test/modal.ct.ts"],"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 { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ndeclare global {\n interface Window {\n showModal: any;\n }\n}\n\ntest('closes on Escape key down', async ({ mount, page }) => {\n await mount(``);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n document.body.appendChild(script);\n resolve();\n });\n });\n\n await page.waitForTimeout(1000);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-content>Content</ix-modal-header>\n `;\n window.showModal({\n content: elm,\n });\n });\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n await page.locator('ix-modal-content').click();\n await page.keyboard.down('Escape');\n\n await expect(dialog).not.toBeVisible();\n});\n\ntest.describe('closeOnBackdropClick = true', () => {\n test('should close modal on backdrop click', async ({ mount, page }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n\n document.getElementById('mount').appendChild(script);\n\n function createModalExample() {\n const el = document.createElement('DIV');\n el.style.display = 'contents';\n el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n return el;\n }\n\n setTimeout(() => {\n window.showModal({\n content: createModalExample(),\n closeOnBackdropClick: true,\n });\n\n resolve();\n }, 2000);\n });\n });\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await page.mouse.click(20, 20);\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).not.toBeVisible();\n });\n\n test('should stay open after interacting with input elements', async ({\n mount,\n page,\n }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n\n document.getElementById('mount').appendChild(script);\n\n function createModalExample() {\n const el = document.createElement('DIV');\n el.style.display = 'contents';\n el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n return el;\n }\n\n setTimeout(() => {\n window.showModal({\n content: createModalExample(),\n closeOnBackdropClick: true,\n });\n\n resolve();\n }, 2000);\n });\n });\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await toggle.locator('input').press('Space');\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).toBeVisible();\n });\n});\n"]}
1	+ {"version":3,"file":"modal.ct.js","sourceRoot":"","sources":["../../../../src/components/modal/test/modal.ct.ts"],"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 { expect } from '@playwright/test';\nimport { test } from '@utils/test';\nimport { ModalInstance, showModal } from './../../utils/modal';\n\ndeclare global {\n interface Window {\n showModal: typeof showModal;\n __counter: number;\n }\n}\n\ntest('closes on Escape key down', async ({ mount, page }) => {\n await mount(``);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n document.body.appendChild(script);\n resolve();\n });\n });\n\n await page.waitForTimeout(1000);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-content>Content</ix-modal-header>\n `;\n window.showModal({\n content: elm,\n });\n });\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n await page.locator('ix-modal-content').click();\n await page.keyboard.down('Escape');\n\n await expect(dialog).not.toBeVisible();\n});\n\ntest.describe('closeOnBackdropClick = true', () => {\n test('should close modal on backdrop click', async ({ mount, page }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n\n document.getElementById('mount').appendChild(script);\n\n function createModalExample() {\n const el = document.createElement('DIV');\n el.style.display = 'contents';\n el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n return el;\n }\n\n setTimeout(() => {\n window.showModal({\n content: createModalExample(),\n closeOnBackdropClick: true,\n });\n\n resolve();\n }, 2000);\n });\n });\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await page.mouse.click(20, 20);\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).not.toBeVisible();\n });\n\n test('should stay open after interacting with input elements', async ({\n mount,\n page,\n }) => {\n await mount(`\n <ix-button>Some background noise</ix-button>\n `);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n\n document.getElementById('mount').appendChild(script);\n\n function createModalExample() {\n const el = document.createElement('DIV');\n el.style.display = 'contents';\n el.innerHTML = `<ix-toggle id=\"toggle\"></ix-toggle>`;\n return el;\n }\n\n setTimeout(() => {\n window.showModal({\n content: createModalExample(),\n closeOnBackdropClick: true,\n });\n\n resolve();\n }, 2000);\n });\n });\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n\n const toggle = page.locator('#toggle');\n await expect(toggle).toBeVisible();\n\n await toggle.locator('input').press('Space');\n\n // needed to skip fade out / in animation\n await page.waitForTimeout(500);\n await expect(page.locator('ix-modal dialog')).toBeVisible();\n });\n});\n\ntest('emits one event on close', async ({ mount, page }) => {\n await mount(``);\n\n await page.evaluate(() => {\n return new Promise<void>((resolve) => {\n const script = document.createElement('script');\n script.type = 'module';\n script.innerHTML = `\n import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';\n window.showModal = ix.showModal;\n `;\n document.body.appendChild(script);\n resolve();\n });\n });\n\n await page.waitForTimeout(1000);\n\n await page.evaluate(() => {\n const elm = document.createElement('ix-modal');\n elm.innerHTML = `\n <ix-modal-header>Title</ix-modal-header>\n <ix-modal-content>Content</ix-modal-header>\n `;\n\n window\n .showModal({\n content: elm,\n // Disable animation to get the direct animation end callback\n animation: false,\n })\n .then((instance: ModalInstance<unknown>) => {\n instance.onDismiss.on(() => {\n const counter = window.__counter;\n if (counter) {\n window.__counter = counter + 1;\n } else {\n window.__counter = 1;\n }\n });\n });\n });\n const dialog = page.locator('ix-modal dialog');\n await expect(dialog).toBeVisible();\n const iconButton = page.locator('ix-icon-button');\n\n await iconButton.click();\n await expect(dialog).not.toBeVisible();\n\n expect(await page.evaluate(() => window.__counter)).toBe(1);\n});\n"]}

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -30,7 +30,7 @@
   display: block;
   position: relative;
   overflow: auto;
-  padding: 0.25rem 0.75rem;
+  padding: 0 0.5rem 0.5rem;
 }
 :host *,
 :host *::after,

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

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalContent {
     render() {
-        return (h(Host, { key: '709b6b9fda6d3560e4a8b2703f8c72f271490a4c' }, h("slot", { key: '900625af9e6dbb6b0254fb13fc6acc8cb4e98fc4' })));
+        return (h(Host, { key: 'c97c81bc60a06d05409259fec414ae8d92cc389d' }, h("slot", { key: 'd05e802ab6a1feed1af6d72902f852c3e2e20b6a' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalFooter {
     render() {
-        return (h(Host, { key: 'ad33c54a40036e5e1905a816957ffdb212bc4587' }, h("slot", { key: 'ad7f526274c316b791b422c7eab0a5efa9a44852' })));
+        return (h(Host, { key: 'ea2142c5c076bc43594a8fca0525374fb4e961e3' }, h("slot", { key: 'fa675d7d19712f1a6272290c7cf6437db28594bf' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,9 +28,9 @@
   /* Handle */
   /* Handle on hover */
   display: flex;
-  padding: 0.5rem;
+  padding: 0.5rem 0 0.5rem 0.5rem;
   align-items: center;
-  align-self: stretch;
+  gap: 1rem;
 }
 :host *,
 :host *::after,
@@ -67,10 +67,9 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
-:host .modal-close {
-  margin-left: auto;
-  margin-right: -1rem;
+:host .modal-title {
+  flex-grow: 1;
 }
-:host .modal-icon {
-  margin-right: 1rem;
+:host .modal-close {
+  align-self: flex-start;
 }

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -39,7 +39,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: 'e0edc0b5eca59209ecbe32b5777383244e6e1153' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: '4981a025990dfc2776afed400aba5cf9114bc44d', variant: 'default-title' }, h("slot", { key: 'd9915d27dbccf15f71b97b6c7e34e294c07e31e7' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
+        return (h(Host, { key: '663a10dcde6d532c7a2bb185cbb74b87ae34dd26' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32" })) : null, h("div", { key: '6e74798b6d54631d2c96abc22267416f75c0e5f3', class: "modal-title" }, h("ix-typography", { key: '56b9c1bf4464163f76031ab4e152030288828682', format: "h5" }, h("slot", { key: '6004390db148e39c5edc6189fccafed720df5e60' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close" })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }
@@ -82,7 +82,7 @@ export class ModalHeader {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Icon of the Header"
@@ -99,7 +99,7 @@ export class ModalHeader {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Icon color"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal-header.js","sourceRoot":"","sources":["../../../src/components/modal-header/modal-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD;;GAEG;AAMH,MAAM,OAAO,WAAW;;yBAMF,KAAK;;;;IAQzB,YAAY,CAAC,~~IAAY~~;~~QACvB~~,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YAClD,CAAC;QACH,CAAC;IACH,CAAC;IAeD,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,iBAAiB,CACnC,IAAI,CAAC,WAAW,EAChB,UAAU,CACW,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAEO,YAAY,CAAC,KAAiB;QACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAClD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,~~eACE~~,~~KAAK,EAAE,YAAY,EACnB,~~IAAI,EAAE,IAAI,CAAC,IAAI,~~EACf~~,KAAK,EAAE,IAAI,CAAC,SAAS,~~GACZ~~,~~CACZ~~,CAAC,CAAC,CAAC,IAAI;YACR,sEAAe,~~OAAO~~,~~EAAE~~,~~eAAe~~;~~gBACrC~~,8DAAa,CACC;~~YACf~~,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,sBACE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,~~EACZ~~,~~KAAK,EAAE,aAAa,GACJ,~~CACnB,CAAC,CAAC,CAAC,IAAI,CACH,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 Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { closestPassShadow } from '../utils/shadow-dom';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-modal-header',\n styleUrl: 'modal-header.scss',\n shadow: true,\n})\nexport class ModalHeader {\n @Element() hostElement!: HTMLIxModalHeaderElement;\n\n /\n Hide the close button\n /\n @Prop() hideClose = false;\n\n /\n Icon of the Header\n /\n @Prop() icon: string;\n\n @Watch('icon')\n onIconChange(icon: string) {\n if (this.parentDialog) {\n if (icon) {\n this.parentDialog.classList.add('with-icon');\n } else {\n this.parentDialog.classList.remove('with-icon');\n }\n }\n }\n\n /\n Icon color\n /\n @Prop() iconColor: string;\n\n /\n Emits when close icon is clicked and closes the modal\n * Can be prevented, in which case only the event is triggered, and the modal remains open\n */\n @Event() closeClick: EventEmitter<MouseEvent>;\n\n private parentDialog: HTMLIxModalElement;\n\n componentDidLoad() {\n this.parentDialog = closestPassShadow(\n this.hostElement,\n 'ix-modal'\n ) as HTMLIxModalElement;\n this.onIconChange(this.icon);\n }\n\n private onCloseClick(event: MouseEvent) {\n const ce = this.closeClick.emit(event);\n if (ce.defaultPrevented \|\| event.defaultPrevented) {\n return;\n }\n\n this.parentDialog.dismissModal();\n }\n\n render() {\n return (\n <Host>\n {this.icon ? (\n <ix-icon~~\n class={'modal-icon'}\n~~ name={this.icon}\n color={this.iconColor}\n ></ix-icon>\n ) : null}\n <~~ix-typography~~ ~~variant={'default~~-title'}>\n <slot></slot>\n </ix-typography>\n {!this.hideClose ? (\n <ix-icon-button\n onClick={(event) => this.onCloseClick(event)}\n ghost\n icon=\"close\"\n ~~class={'modal-close'}\n~~ ></ix-icon-button>\n ) : null}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"modal-header.js","sourceRoot":"","sources":["../../../src/components/modal-header/modal-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD;;GAEG;AAMH,MAAM,OAAO,WAAW;;yBAMF,KAAK;;;;IAQzB,YAAY,CAAC,IAAa;QACxB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YAClD,CAAC;QACH,CAAC;IACH,CAAC;IAeD,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,iBAAiB,CACnC,IAAI,CAAC,WAAW,EAChB,UAAU,CACW,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAEO,YAAY,CAAC,KAAiB;QACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAClD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,IAAI,GAAW,CACtE,CAAC,CAAC,CAAC,IAAI;YACR,4DAAK,KAAK,EAAC,aAAa;gBACtB,sEAAe,MAAM,EAAC,IAAI;oBACxB,8DAAa,CACC,CACZ;YACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,sBACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,GACI,CACnB,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { closestPassShadow } from '../utils/shadow-dom';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-modal-header',\n styleUrl: 'modal-header.scss',\n shadow: true,\n})\nexport class ModalHeader {\n @Element() hostElement!: HTMLIxModalHeaderElement;\n\n /\n Hide the close button\n /\n @Prop() hideClose = false;\n\n /\n Icon of the Header\n /\n @Prop() icon?: string;\n\n @Watch('icon')\n onIconChange(icon?: string) {\n if (this.parentDialog) {\n if (icon) {\n this.parentDialog.classList.add('with-icon');\n } else {\n this.parentDialog.classList.remove('with-icon');\n }\n }\n }\n\n /\n Icon color\n /\n @Prop() iconColor?: string;\n\n /\n Emits when close icon is clicked and closes the modal\n * Can be prevented, in which case only the event is triggered, and the modal remains open\n */\n @Event() closeClick!: EventEmitter<MouseEvent>;\n\n private parentDialog!: HTMLIxModalElement;\n\n componentDidLoad() {\n this.parentDialog = closestPassShadow(\n this.hostElement,\n 'ix-modal'\n ) as HTMLIxModalElement;\n this.onIconChange(this.icon);\n }\n\n private onCloseClick(event: MouseEvent) {\n const ce = this.closeClick.emit(event);\n if (ce.defaultPrevented \|\| event.defaultPrevented) {\n return;\n }\n\n this.parentDialog.dismissModal();\n }\n\n render() {\n return (\n <Host>\n {this.icon ? (\n <ix-icon name={this.icon} color={this.iconColor} size=\"32\"></ix-icon>\n ) : null}\n <div class=\"modal-title\">\n <ix-typography format=\"h5\">\n <slot></slot>\n </ix-typography>\n </div>\n {!this.hideClose ? (\n <ix-icon-button\n class=\"modal-close\"\n onClick={(event) => this.onCloseClick(event)}\n ghost\n icon=\"close\"\n ></ix-icon-button>\n ) : null}\n </Host>\n );\n }\n}\n"]}

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

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: '8e3c29a9c15b121a2da0acebdf1a00dbe0d18c52' }, h("ix-spinner", { key: 'bc602e7bc4b0264b19be3823e78cc63c7adc39fa', variant: "primary" }), h("span", { key: '69d563df6c6a05ece5723c8c94d24d546831aca4', class: 'loading-text' }, h("slot", { key: 'b369c9d0c257a9c0c11584c72f0696eb969bd13d' }))));
+        return (h(Host, { key: 'c454d66d8a1ca8a6fea8a3d29369ba8ccd3f6f32' }, h("ix-spinner", { key: '8022a0fd8ba35334fc5f547d57adbd39e4f360c3', variant: "primary" }), h("span", { key: 'cf1816c8ef4e2b6b0f91a2501efe9cb06b535619', class: 'loading-text' }, h("slot", { key: '6b9b00af22ff8a7282a057cac97d2abc504802f2' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }