npm - @siemens/ix - Versions diffs - 2.1.0 → 2.1.1 - Mend

@siemens/ix 2.1.0 → 2.1.1

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

package/components/ix-menu-category.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './dropdown-item.js';
 import { d as defineCustomElement$3 } from './menu-item.js';
 import { d as defineCustomElement$2 } from './typography.js';
-const menuCategoryCss = ":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-chevron{margin-left:auto;margin-right:0px;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0px;transition:var(--theme-default-time) max-height ease-in-out;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--expanded{max-height:999999999px}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";
+const menuCategoryCss = ":host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";
 const IxMenuCategoryStyle0 = menuCategoryCss;
 const DefaultIxMenuItemHeight = 40;
@@ -87,12 +87,16 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
     isCategoryItemListVisible() {
         return this.menuExpand && (this.showItems || this.isNestedItemActive());
     }
-    componentDidLoad() {
+    componentWillLoad() {
         const closestMenu = closestIxMenu(this.hostElement);
         if (!closestMenu) {
             throw Error('ix-menu-category can only be used as a child of ix-menu');
         }
         this.ixMenu = closestMenu;
+        this.menuExpand = this.ixMenu.expand;
+        this.showItems = this.isCategoryItemListVisible();
+    }
+    componentDidLoad() {
         this.observer = createMutationObserver(() => this.onNestedItemsChanged());
         this.observer.observe(this.hostElement, {
             attributes: true,
@@ -104,24 +108,32 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
         });
         this.ixMenu.addEventListener('expandChange', ({ detail: menuExpand }) => {
             this.menuExpand = menuExpand;
+            if (!menuExpand) {
+                this.clearMenuItemStyles();
+            }
             this.showItems = this.isCategoryItemListVisible();
         });
     }
+    clearMenuItemStyles() {
+        this.menuItemsContainer.style.removeProperty('max-height');
+        this.menuItemsContainer.style.removeProperty('opacity');
+    }
     disconnectedCallback() {
         if (this.observer) {
             this.observer.disconnect();
         }
     }
     render() {
-        return (h(Host, { key: '200bff1a548044f19fb8f2280dfbfafe1e5cfcdd', class: {
+        return (h(Host, { key: '3f5dfce349405ecd3798a5dfd952ac42f8487e6d', class: {
                 expanded: this.showItems,
-            } }, h("ix-menu-item", { key: '447015d4ad34f0c2a37ea1c676abb71c062f475c', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { key: 'e0a548b93ea0286298d7d05aa2df2fcafc648fdc', class: "category" }, this.label, h("ix-icon", { key: '1df8ba182dfed3a4b0ce676a4a1e796749d2dacb', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: '6cd75627b0929758afa3c0cb931ba0c32df13bd2', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { key: 'c0022335362c681a5d9bf3ddd688439ea865d20d', class: "category" }, h("div", { key: '77a3681c6bd3a7c8f5dbad2a7527fc91af0c2d3a', class: "category-text" }, this.label), h("ix-icon", { key: '06f46b6d5f1ba7ad020126f297d37972f972bee4', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: 'ade480e9fb57aa93a4796c9c685c1af80db170eb', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: 'd442db2f892f10fd430334664260cd657da22cb8', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '8c0c5c2a17314bf9da36dfc6d0c147ee67c7ac16', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+                'menu-items--collapsed': !this.showItems,
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '3c0d16c043a3f453ce879bae38a35eb02ae646a4', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -131,7 +143,7 @@ const MenuCategory = /*@__PURE__*/ proxyCustomElement(class MenuCategory extends
                         this.showDropdown = false;
                     }
                 }
-            } }, h("ix-dropdown-item", { key: 'd85fdf6132b7214c478547f95ecb28be7b11c3ae', class: 'category-dropdown-header' }, h("ix-typography", { key: 'b41ede61c366cf9ca189f19ccf1b7369bc3907bd', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: '5a354c66b93f5f630f75b519234c8f167a15aec9' }), h("slot", { key: '505699faf4ef92aeaea9a8b098b82b8900c56128' }))));
+            } }, h("ix-dropdown-item", { key: '26f3d0e5bab44a7dbf86a23743f252916887c56a', class: 'category-dropdown-header' }, h("ix-typography", { key: 'd8f1724a07a9b3d050d8e215a6a321e57b54cc82', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: '67b72bfdacc3db1127cf21accce402bf3f10d5b7' }), h("slot", { key: 'bf8ed74c15b32d89ff13509678e7a735ab3f73e0' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxMenuCategoryStyle0; }

package/components/ix-menu-category.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-menu-category.js","mappings":"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","names":[],"sources":["src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"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\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0px;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0px;\n transition: var(--theme-default-time) max-height ease-in-out;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n}\n","/\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\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 @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 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 onCategoryClicked(e?: MouseEvent) {\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n\n this.showDropdown = !this.showDropdown;\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 componentDidLoad() {\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.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\n this.showItems = this.isCategoryItemListVisible();\n }\n );\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 >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClicked(e)}\n >\n <div class=\"category\">\n {this.label}\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 }}\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 }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography variant=\"default-title-single\" 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"],"version":3}
1	+ {"file":"ix-menu-category.js","mappings":"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","names":[],"sources":["src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"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\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-text {\n width: 100%;\n padding-right: 0.25rem;\n @include ellipsis;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0;\n transition: var(--theme-default-time) max-height ease-in-out;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--collapsed {\n display: none;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n padding-left: 0.125rem;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n}\n","/\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\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 @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 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 onCategoryClicked(e?: MouseEvent) {\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n\n this.showDropdown = !this.showDropdown;\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 >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClicked(e)}\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 }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography variant=\"default-title-single\" 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"],"version":3}

package/components/ix-menu-settings-item.js CHANGED Viewed

@@ -19,7 +19,7 @@ const MenuSettingsItem = /*@__PURE__*/ proxyCustomElement(class MenuSettingsItem
         });
     }
     render() {
-        return (h(Host, { key: 'ece4d8e415ca694383a7a2e3bd55733e43521143' }, h("slot", { key: '3da9723abce35580aa1d6382ff936887a538fe9e' })));
+        return (h(Host, { key: '265bf24f492278e364dcdba664e6e919e60b745a' }, h("slot", { key: '2979e025b275b5d031f22f1bfb1f37272d624d1b' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/components/ix-menu.js CHANGED Viewed

@@ -427,14 +427,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'bulb' }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { key: 'ee4db379f8d07738ce3c1fa6f71292a659de314f', class: {
+            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark' }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { key: 'cc7443de9d327194cc7aff083033111642440efc', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: 'b3b166add6d5635863d6b6c665cf073b020ec6d6', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '9e899a47dd33eaf9e78d3150ccc4f078e1ab212f', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: '5a166f1447115082d0578b42768b9bf79f8df406', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '0f29a9bbb6a2acc42744818a1813329220ce5c54', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-menu.js","mappings":"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","names":[],"sources":["src/components/application-sidebar/events.ts","src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","src/components/menu/menu.tsx"],"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\nexport class ApplicationSidebarToggleEvent extends Event {\n public constructor(public readonly force?: boolean) {\n super('application-sidebar-toggle', { bubbles: true, composed: true });\n }\n}\n","/\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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: row;\n position: absolute;\n height: 100%;\n min-height: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\n }\n\n .tabs--shadow {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 0.625rem;\n\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n pointer-events: none;\n z-index: var(--theme-z-index-sticky);\n\n transition: opacity var(--theme-default-time);\n }\n .tabs--shadow-top {\n top: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\n background: linear-gradient(transparent, var(--theme-color-shadow-1));\n }\n\n .tabs--shadow--show {\n opacity: 1;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 3.25rem;\n height: 100%;\n padding-block-end: 1rem;\n overflow: hidden;\n\n &.expanded {\n box-shadow: var(--theme-navigation--box-shadow);\n }\n\n background-color: var(--theme-nav--background);\n transition: width var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay {\n display: none;\n position: absolute;\n width: calc(100vw - 3.25rem);\n height: 100%;\n left: 3.25rem;\n z-index: -1;\n backdrop-filter: blur(1rem);\n background-color: var(--theme-sidebar-overlay-blur);\n transition: left var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay.visible {\n display: block;\n }\n\n .menu.expanded {\n width: $menu-expanded-width;\n }\n\n .menu-overlay.expanded {\n width: calc(100vw - $menu-expanded-width);\n left: $menu-expanded-width;\n }\n\n .menu-overlay-container {\n display: contents;\n }\n\n .menu-avatar {\n max-height: 3rem;\n }\n\n .avatar {\n margin-bottom: 2rem;\n }\n\n #cui-imprint {\n .cui-imprint-product-name {\n margin-bottom: $default-space;\n }\n\n .cui-imprint-product-description {\n margin-bottom: $x-large-space;\n }\n\n .cui-imprint-link-container {\n display: flex;\n align-items: center;\n }\n }\n\n .bottom-tab-divider {\n margin-top: auto;\n }\n\n .menu-buttons {\n margin: 0.5rem 0 0 0.5rem;\n }\n\n .menu-buttons .burger-menu,\n .menu-buttons .app-switch {\n margin-left: 0.125rem;\n }\n\n .menu-buttons > :last-child {\n margin-bottom: 1rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 0.5rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\n width: 100vw;\n }\n}\n\n:host(.breakpoint-lg) {\n position: relative;\n\n .menu.expanded {\n box-shadow: none;\n }\n}\n\n:host {\n ::slotted(a[href]) {\n all: unset;\n }\n}\n","/\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n tag: 'ix-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n @Element() hostElement!: HTMLIxMenuElement;\n\n /\n Is settings tab visible\n /\n @Prop({ mutable: true }) showSettings = false;\n\n /\n Is about tab visible\n /\n @Prop({ mutable: true }) showAbout = false;\n\n /\n Show toggle between light and dark variant. Only if the provided theme have implemented both!\n /\n @Prop() enableToggleTheme = false;\n\n /\n Is settings tab is visible\n /\n @Prop() enableSettings = true;\n\n /\n Internal\n /\n @Prop() enableMapExpand = false;\n\n /\n Should only be set if you use ix-menu standalone\n /\n @Prop() applicationName: string;\n\n /\n Should only be set if you use ix-menu standalone\n /\n @Prop() applicationDescription = '';\n\n /\n Maximum number of menu items to show in case enough vertical space is available.\n * Extra menu items will be collapsed to 'show more' menu item.\n \n @deprecated - Has no effect on component. Will get removed with next major release (v3)\n /\n @Prop() maxVisibleMenuItems = 9;\n\n /\n Accessibility i18n label for the burger menu of the sidebar\n /\n @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n /\n /\n @Prop({ mutable: true, reflect: true }) expand = false;\n\n /*\n Menu stays pinned to the left\n /\n @Prop() pinned = false;\n @Watch('pinned')\n pinnedChange(newPinned: boolean) {\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n console.warn('ix-map-navigation does not support pinning of the menu');\n return;\n }\n this.setPinned(this.pinned);\n if (newPinned) {\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint('lg');\n return;\n }\n\n applicationLayoutService.enableBreakpointDetection();\n }\n\n /\n /\n @Prop() i18nLegal = 'About & legal information';\n\n /*\n /\n @Prop() i18nSettings = 'Settings';\n\n /*\n /\n @Prop() i18nToggleTheme = 'Toggle theme';\n\n /*\n /\n @Prop() i18nExpand = ' Expand';\n\n /*\n /\n @Prop() i18nCollapse = 'Collapse';\n\n /*\n Menu expanded\n /\n @Event() expandChange: EventEmitter<boolean>;\n\n /\n Map Sidebar expanded\n /\n @Event() mapExpandChange: EventEmitter<boolean>;\n\n @State() showPinned = false;\n @State() mapExpand = true;\n @State() activeTab: HTMLIxMenuItemElement \| null;\n @State() breakpoint: Breakpoint = 'lg';\n @State() itemsScrollShadowTop = false;\n @State() itemsScrollShadowBottom = false;\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n private isTransitionDisabled = false;\n\n // FBC IAM workaround #488\n private readonly isVisible = (elm: HTMLElement) => {\n return (\n elm.style.display !== 'none' &&\n elm.parentElement?.parentElement?.style.display !== 'none'\n );\n };\n\n get popoverArea() {\n return this.hostElement.shadowRoot!.querySelector('#popover-area');\n }\n\n get menu() {\n return this.hostElement.shadowRoot!.querySelector('.menu');\n }\n\n get menuItemsContainer(): HTMLDivElement {\n return this.menu!.querySelector('.tabs')!;\n }\n\n get overlayContainer() {\n return this.hostElement.shadowRoot.querySelector(\n '.menu-overlay'\n ) as HTMLDivElement;\n }\n\n get menuItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n )\n ).filter(this.isVisible);\n }\n\n get menuBottomItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n )\n ).filter(this.isVisible);\n }\n\n get homeTab() {\n return this.hostElement.querySelector('ix-menu-item.home-tab');\n }\n\n get moreItemsDropdown(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector(\n '.internal-tab ix-dropdown'\n )!;\n }\n\n get isMoreItemsDropdownEmpty(): boolean {\n return (\n this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown .appended'\n ).length === 0\n );\n }\n\n get moreItemsDropdownItems() {\n return this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown ix-menu-item'\n );\n }\n\n get activeMoreTabContainer() {\n return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n }\n\n get activeMoreTab() {\n return this.hostElement.shadowRoot!.querySelector(\n '.active-more-tab ix-menu-item'\n );\n }\n\n get aboutPopoverContainer(): HTMLElement {\n return this.hostElement.querySelector('.about-news')!;\n }\n\n get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n return (\n document.querySelector('ix-menu-about-news') ??\n this.hostElement.querySelector('ix-menu-about-news')!\n );\n }\n\n get aboutTab(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n }\n\n get about(): HTMLIxMenuAboutElement \| null {\n return this.hostElement.querySelector('ix-menu-about');\n }\n\n get settings(): HTMLIxMenuSettingsElement \| null {\n return this.hostElement.querySelector('ix-menu-settings');\n }\n\n get isSettingsEmpty(): boolean {\n return (\n Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n ).length === 0\n );\n }\n\n get tabsContainer() {\n return this.hostElement;\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.handleOverflowIndicator();\n });\n\n if (this.pinned) {\n this.pinnedChange(this.pinned);\n }\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n this.applicationLayoutContext = ctx;\n if (ctx.hideHeader === true) {\n this.onBreakpointChange('md');\n return;\n }\n\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n },\n true\n );\n\n menuController.register(this.hostElement);\n applicationLayoutService.onChange.on((breakpoint) =>\n this.onBreakpointChange(breakpoint)\n );\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n }\n\n componentWillRender() {\n this.appendTabs();\n }\n\n componentDidRender() {\n this.appendFragments();\n }\n\n private setPinned(pinned: boolean) {\n this.showPinned = pinned;\n menuController.setIsPinned(pinned);\n }\n\n private onBreakpointChange(mode: Breakpoint) {\n if (!this.applicationLayoutContext && mode === 'sm') {\n return;\n }\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n this.breakpoint = 'md';\n return;\n }\n if (!this.applicationLayoutContext) {\n return;\n }\n\n if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n return;\n }\n\n this.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\n }\n\n private appendFragments() {\n this.appendAboutNewsPopover();\n }\n\n private resetActiveTab() {\n this.activeTab = null;\n }\n\n private appendTabs() {\n this.activeTab = null;\n }\n\n private getAboutPopoverVerticalPosition() {\n const heightArrow = 12;\n const offsetArrow = 6;\n const rectAbout = this.aboutTab.getBoundingClientRect();\n const offset =\n window.innerHeight -\n (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n return convertToRemString(offset);\n }\n\n private appendAboutNewsPopover() {\n if (!this.aboutNewsPopover) {\n return;\n }\n\n this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n const showMore = () => {\n if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n this.toggleAbout(true);\n }\n };\n\n this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n document.body.appendChild(this.aboutNewsPopover);\n }\n }\n\n /\n Toggle map sidebar expand\n * @param show\n /\n @Method()\n async toggleMapExpand(show?: boolean) {\n if (show !== undefined) {\n this.mapExpand = show;\n } else {\n this.mapExpand = !this.mapExpand;\n }\n }\n\n /\n Toggle menu\n * @param show\n /\n @Method()\n async toggleMenu(show?: boolean) {\n if (show !== undefined) {\n this.expand = show;\n } else {\n this.expand = !this.expand;\n }\n\n if (this.aboutNewsPopover) {\n this.aboutNewsPopover.expanded = this.expand;\n }\n\n this.expandChange.emit(this.expand);\n\n this.isTransitionDisabled = false;\n this.checkTransition();\n }\n\n /\n Disable transition of overlay while menu animation is running.\n /\n private checkTransition() {\n const container = this.overlayContainer;\n\n if (!container) {\n return;\n }\n\n if (this.isTransitionDisabled) {\n container.style.transitionProperty = 'left';\n } else {\n container.style.transitionProperty = 'all';\n }\n }\n\n private isOverlayVisible() {\n return this.showAbout \|\| this.showSettings;\n }\n\n /\n Toggle Settings tabs\n * @param show\n /\n @Method()\n async toggleSettings(show: boolean) {\n if (!this.settings) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showSettings = show;\n this.settings.show = this.showSettings;\n } else {\n this.onOverlayClose();\n }\n }\n\n /\n Toggle About tabs\n * @param show\n */\n @Method()\n async toggleAbout(show: boolean) {\n if (!this.about) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showAbout = show;\n this.about.show = this.showAbout;\n } else {\n this.onOverlayClose();\n }\n }\n\n private resetOverlay() {\n this.showSettings = false;\n this.showAbout = false;\n\n if (this.settings) {\n this.settings.show = false;\n }\n\n if (this.about) {\n this.about.show = false;\n }\n }\n\n private getCollapseText() {\n return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n }\n\n private getCollapseIcon() {\n return this.mapExpand ? 'navigation-left' : 'navigation-right';\n }\n\n private isMenuItemClicked(event: Event) {\n if (event.target instanceof HTMLElement) {\n return event.target.tagName === 'IX-MENU-ITEM';\n }\n\n return false;\n }\n\n @Listen('resize', { target: 'window' })\n private handleOverflowIndicator() {\n const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n this.itemsScrollShadowTop = scrollTop > 0;\n this.itemsScrollShadowBottom =\n Math.round(scrollTop + clientHeight) < scrollHeight;\n }\n\n @Listen('close')\n onOverlayClose() {\n this.animateOverlayFadeOut(() => {\n this.resetOverlay();\n });\n }\n\n private animateOverlayFadeIn() {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeInSine',\n begin: () => {\n if (this.showPinned) {\n return;\n }\n\n this.toggleMenu(false);\n },\n });\n });\n }\n\n private animateOverlayFadeOut(onComplete: Function) {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => onComplete(),\n });\n });\n }\n\n private onMenuItemsClick(event: Event) {\n if (this.isMenuItemClicked(event)) {\n if (!this.showPinned) {\n this.toggleMenu(false);\n }\n this.onOverlayClose();\n }\n }\n\n private isHiddenFromViewport() {\n return this.breakpoint === 'sm' && this.expand === false;\n }\n\n private sidebarToggle() {\n this.mapExpandChange.emit(this.mapExpand);\n\n this.hostElement.dispatchEvent(\n new ApplicationSidebarToggleEvent(this.mapExpand)\n );\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expand,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"menu\"\n >\n <aside\n class={{\n menu: true,\n expanded: this.expand,\n }}\n onClick={() => {\n this.resetActiveTab();\n }}\n >\n <div class={'menu-buttons'}>\n <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n {this.breakpoint === 'sm' &&\n this.applicationLayoutContext.appSwitchConfig && (\n <ix-icon-button\n onClick={() =>\n showAppSwitch(this.applicationLayoutContext.appSwitchConfig)\n }\n icon=\"apps\"\n ghost\n class=\"app-switch\"\n ></ix-icon-button>\n )}\n </div>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\n </div>\n\n <div\n id=\"menu-tabs\"\n style={{\n display: 'contents',\n }}\n onClick={(e) => this.onMenuItemsClick(e)}\n >\n <div class=\"tabs-top\">\n <slot name=\"home\"></slot>\n </div>\n <div class=\"tabs-shadow-container\">\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-top': true,\n 'tabs--shadow--show': this.itemsScrollShadowTop,\n }}\n ></div>\n <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n {this.breakpoint !== 'sm' \|\| !this.isHiddenFromViewport() ? (\n <slot></slot>\n ) : null}\n </div>\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-bottom': true,\n 'tabs--shadow--show': this.itemsScrollShadowBottom,\n }}\n ></div>\n </div>\n </div>\n <div class=\"bottom-tab-divider\"></div>\n {this.settings ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"settings\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showSettings,\n }}\n icon={'cogwheel'}\n onClick={async () => this.toggleSettings(!this.showSettings)}\n >\n {this.i18nSettings}\n </ix-menu-item>\n ) : null}\n <div onClick={(e) => this.onMenuItemsClick(e)}>\n <slot name=\"bottom\"></slot>\n </div>\n\n <div id=\"popover-area\"></div>\n {this.about ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"aboutAndLegal\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showAbout,\n }}\n icon={'info'}\n onClick={async () => this.toggleAbout(!this.showAbout)}\n >\n {this.i18nLegal}\n </ix-menu-item>\n ) : null}\n {this.enableToggleTheme ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"toggleTheme\"\n onClick={() => themeSwitcher.toggleMode()}\n class=\"internal-tab bottom-tab\"\n icon={'bulb'}\n >\n {this.i18nToggleTheme}\n </ix-menu-item>\n ) : null}\n {this.enableMapExpand \|\| this.applicationLayoutContext?.sidebar ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"menu-collapse\"\n onClick={() => this.sidebarToggle()}\n class=\"internal-tab bottom-tab\"\n icon={`${this.getCollapseIcon()}`}\n >\n {this.getCollapseText()}\n </ix-menu-item>\n ) : null}\n </aside>\n <div\n class={{\n 'menu-overlay': true,\n visible: this.isOverlayVisible(),\n expanded: this.expand,\n }}\n onTransitionEnd={() => {\n this.isTransitionDisabled = true;\n this.checkTransition();\n }}\n >\n <div class={'menu-overlay-container'}>\n {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n </div>\n <div class={'menu-overlay-container'}>\n {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-menu.js","mappings":"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","names":[],"sources":["src/components/application-sidebar/events.ts","src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","src/components/menu/menu.tsx"],"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\nexport class ApplicationSidebarToggleEvent extends Event {\n public constructor(public readonly force?: boolean) {\n super('application-sidebar-toggle', { bubbles: true, composed: true });\n }\n}\n","/\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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: row;\n position: absolute;\n height: 100%;\n min-height: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\n }\n\n .tabs--shadow {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 0.625rem;\n\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n pointer-events: none;\n z-index: var(--theme-z-index-sticky);\n\n transition: opacity var(--theme-default-time);\n }\n .tabs--shadow-top {\n top: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\n background: linear-gradient(transparent, var(--theme-color-shadow-1));\n }\n\n .tabs--shadow--show {\n opacity: 1;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 3.25rem;\n height: 100%;\n padding-block-end: 1rem;\n overflow: hidden;\n\n &.expanded {\n box-shadow: var(--theme-navigation--box-shadow);\n }\n\n background-color: var(--theme-nav--background);\n transition: width var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay {\n display: none;\n position: absolute;\n width: calc(100vw - 3.25rem);\n height: 100%;\n left: 3.25rem;\n z-index: -1;\n backdrop-filter: blur(1rem);\n background-color: var(--theme-sidebar-overlay-blur);\n transition: left var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay.visible {\n display: block;\n }\n\n .menu.expanded {\n width: $menu-expanded-width;\n }\n\n .menu-overlay.expanded {\n width: calc(100vw - $menu-expanded-width);\n left: $menu-expanded-width;\n }\n\n .menu-overlay-container {\n display: contents;\n }\n\n .menu-avatar {\n max-height: 3rem;\n }\n\n .avatar {\n margin-bottom: 2rem;\n }\n\n #cui-imprint {\n .cui-imprint-product-name {\n margin-bottom: $default-space;\n }\n\n .cui-imprint-product-description {\n margin-bottom: $x-large-space;\n }\n\n .cui-imprint-link-container {\n display: flex;\n align-items: center;\n }\n }\n\n .bottom-tab-divider {\n margin-top: auto;\n }\n\n .menu-buttons {\n margin: 0.5rem 0 0 0.5rem;\n }\n\n .menu-buttons .burger-menu,\n .menu-buttons .app-switch {\n margin-left: 0.125rem;\n }\n\n .menu-buttons > :last-child {\n margin-bottom: 1rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 0.5rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\n width: 100vw;\n }\n}\n\n:host(.breakpoint-lg) {\n position: relative;\n\n .menu.expanded {\n box-shadow: none;\n }\n}\n\n:host {\n ::slotted(a[href]) {\n all: unset;\n }\n}\n","/\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n tag: 'ix-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n @Element() hostElement!: HTMLIxMenuElement;\n\n /\n Is settings tab visible\n /\n @Prop({ mutable: true }) showSettings = false;\n\n /\n Is about tab visible\n /\n @Prop({ mutable: true }) showAbout = false;\n\n /\n Show toggle between light and dark variant. Only if the provided theme have implemented both!\n /\n @Prop() enableToggleTheme = false;\n\n /\n Is settings tab is visible\n /\n @Prop() enableSettings = true;\n\n /\n Internal\n /\n @Prop() enableMapExpand = false;\n\n /\n Should only be set if you use ix-menu standalone\n /\n @Prop() applicationName: string;\n\n /\n Should only be set if you use ix-menu standalone\n /\n @Prop() applicationDescription = '';\n\n /\n Maximum number of menu items to show in case enough vertical space is available.\n * Extra menu items will be collapsed to 'show more' menu item.\n \n @deprecated - Has no effect on component. Will get removed with next major release (v3)\n /\n @Prop() maxVisibleMenuItems = 9;\n\n /\n Accessibility i18n label for the burger menu of the sidebar\n /\n @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n /\n /\n @Prop({ mutable: true, reflect: true }) expand = false;\n\n /*\n Menu stays pinned to the left\n /\n @Prop() pinned = false;\n @Watch('pinned')\n pinnedChange(newPinned: boolean) {\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n console.warn('ix-map-navigation does not support pinning of the menu');\n return;\n }\n this.setPinned(this.pinned);\n if (newPinned) {\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint('lg');\n return;\n }\n\n applicationLayoutService.enableBreakpointDetection();\n }\n\n /\n /\n @Prop() i18nLegal = 'About & legal information';\n\n /*\n /\n @Prop() i18nSettings = 'Settings';\n\n /*\n /\n @Prop() i18nToggleTheme = 'Toggle theme';\n\n /*\n /\n @Prop() i18nExpand = ' Expand';\n\n /*\n /\n @Prop() i18nCollapse = 'Collapse';\n\n /*\n Menu expanded\n /\n @Event() expandChange: EventEmitter<boolean>;\n\n /\n Map Sidebar expanded\n /\n @Event() mapExpandChange: EventEmitter<boolean>;\n\n @State() showPinned = false;\n @State() mapExpand = true;\n @State() activeTab: HTMLIxMenuItemElement \| null;\n @State() breakpoint: Breakpoint = 'lg';\n @State() itemsScrollShadowTop = false;\n @State() itemsScrollShadowBottom = false;\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n private isTransitionDisabled = false;\n\n // FBC IAM workaround #488\n private readonly isVisible = (elm: HTMLElement) => {\n return (\n elm.style.display !== 'none' &&\n elm.parentElement?.parentElement?.style.display !== 'none'\n );\n };\n\n get popoverArea() {\n return this.hostElement.shadowRoot!.querySelector('#popover-area');\n }\n\n get menu() {\n return this.hostElement.shadowRoot!.querySelector('.menu');\n }\n\n get menuItemsContainer(): HTMLDivElement {\n return this.menu!.querySelector('.tabs')!;\n }\n\n get overlayContainer() {\n return this.hostElement.shadowRoot.querySelector(\n '.menu-overlay'\n ) as HTMLDivElement;\n }\n\n get menuItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n )\n ).filter(this.isVisible);\n }\n\n get menuBottomItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n )\n ).filter(this.isVisible);\n }\n\n get homeTab() {\n return this.hostElement.querySelector('ix-menu-item.home-tab');\n }\n\n get moreItemsDropdown(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector(\n '.internal-tab ix-dropdown'\n )!;\n }\n\n get isMoreItemsDropdownEmpty(): boolean {\n return (\n this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown .appended'\n ).length === 0\n );\n }\n\n get moreItemsDropdownItems() {\n return this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown ix-menu-item'\n );\n }\n\n get activeMoreTabContainer() {\n return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n }\n\n get activeMoreTab() {\n return this.hostElement.shadowRoot!.querySelector(\n '.active-more-tab ix-menu-item'\n );\n }\n\n get aboutPopoverContainer(): HTMLElement {\n return this.hostElement.querySelector('.about-news')!;\n }\n\n get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n return (\n document.querySelector('ix-menu-about-news') ??\n this.hostElement.querySelector('ix-menu-about-news')!\n );\n }\n\n get aboutTab(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n }\n\n get about(): HTMLIxMenuAboutElement \| null {\n return this.hostElement.querySelector('ix-menu-about');\n }\n\n get settings(): HTMLIxMenuSettingsElement \| null {\n return this.hostElement.querySelector('ix-menu-settings');\n }\n\n get isSettingsEmpty(): boolean {\n return (\n Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n ).length === 0\n );\n }\n\n get tabsContainer() {\n return this.hostElement;\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.handleOverflowIndicator();\n });\n\n if (this.pinned) {\n this.pinnedChange(this.pinned);\n }\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n this.applicationLayoutContext = ctx;\n if (ctx.hideHeader === true) {\n this.onBreakpointChange('md');\n return;\n }\n\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n },\n true\n );\n\n menuController.register(this.hostElement);\n applicationLayoutService.onChange.on((breakpoint) =>\n this.onBreakpointChange(breakpoint)\n );\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n }\n\n componentWillRender() {\n this.appendTabs();\n }\n\n componentDidRender() {\n this.appendFragments();\n }\n\n private setPinned(pinned: boolean) {\n this.showPinned = pinned;\n menuController.setIsPinned(pinned);\n }\n\n private onBreakpointChange(mode: Breakpoint) {\n if (!this.applicationLayoutContext && mode === 'sm') {\n return;\n }\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n this.breakpoint = 'md';\n return;\n }\n if (!this.applicationLayoutContext) {\n return;\n }\n\n if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n return;\n }\n\n this.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\n }\n\n private appendFragments() {\n this.appendAboutNewsPopover();\n }\n\n private resetActiveTab() {\n this.activeTab = null;\n }\n\n private appendTabs() {\n this.activeTab = null;\n }\n\n private getAboutPopoverVerticalPosition() {\n const heightArrow = 12;\n const offsetArrow = 6;\n const rectAbout = this.aboutTab.getBoundingClientRect();\n const offset =\n window.innerHeight -\n (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n return convertToRemString(offset);\n }\n\n private appendAboutNewsPopover() {\n if (!this.aboutNewsPopover) {\n return;\n }\n\n this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n const showMore = () => {\n if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n this.toggleAbout(true);\n }\n };\n\n this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n document.body.appendChild(this.aboutNewsPopover);\n }\n }\n\n /\n Toggle map sidebar expand\n * @param show\n /\n @Method()\n async toggleMapExpand(show?: boolean) {\n if (show !== undefined) {\n this.mapExpand = show;\n } else {\n this.mapExpand = !this.mapExpand;\n }\n }\n\n /\n Toggle menu\n * @param show\n /\n @Method()\n async toggleMenu(show?: boolean) {\n if (show !== undefined) {\n this.expand = show;\n } else {\n this.expand = !this.expand;\n }\n\n if (this.aboutNewsPopover) {\n this.aboutNewsPopover.expanded = this.expand;\n }\n\n this.expandChange.emit(this.expand);\n\n this.isTransitionDisabled = false;\n this.checkTransition();\n }\n\n /\n Disable transition of overlay while menu animation is running.\n /\n private checkTransition() {\n const container = this.overlayContainer;\n\n if (!container) {\n return;\n }\n\n if (this.isTransitionDisabled) {\n container.style.transitionProperty = 'left';\n } else {\n container.style.transitionProperty = 'all';\n }\n }\n\n private isOverlayVisible() {\n return this.showAbout \|\| this.showSettings;\n }\n\n /\n Toggle Settings tabs\n * @param show\n /\n @Method()\n async toggleSettings(show: boolean) {\n if (!this.settings) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showSettings = show;\n this.settings.show = this.showSettings;\n } else {\n this.onOverlayClose();\n }\n }\n\n /\n Toggle About tabs\n * @param show\n */\n @Method()\n async toggleAbout(show: boolean) {\n if (!this.about) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showAbout = show;\n this.about.show = this.showAbout;\n } else {\n this.onOverlayClose();\n }\n }\n\n private resetOverlay() {\n this.showSettings = false;\n this.showAbout = false;\n\n if (this.settings) {\n this.settings.show = false;\n }\n\n if (this.about) {\n this.about.show = false;\n }\n }\n\n private getCollapseText() {\n return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n }\n\n private getCollapseIcon() {\n return this.mapExpand ? 'navigation-left' : 'navigation-right';\n }\n\n private isMenuItemClicked(event: Event) {\n if (event.target instanceof HTMLElement) {\n return event.target.tagName === 'IX-MENU-ITEM';\n }\n\n return false;\n }\n\n @Listen('resize', { target: 'window' })\n private handleOverflowIndicator() {\n const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n this.itemsScrollShadowTop = scrollTop > 0;\n this.itemsScrollShadowBottom =\n Math.round(scrollTop + clientHeight) < scrollHeight;\n }\n\n @Listen('close')\n onOverlayClose() {\n this.animateOverlayFadeOut(() => {\n this.resetOverlay();\n });\n }\n\n private animateOverlayFadeIn() {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeInSine',\n begin: () => {\n if (this.showPinned) {\n return;\n }\n\n this.toggleMenu(false);\n },\n });\n });\n }\n\n private animateOverlayFadeOut(onComplete: Function) {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => onComplete(),\n });\n });\n }\n\n private onMenuItemsClick(event: Event) {\n if (this.isMenuItemClicked(event)) {\n if (!this.showPinned) {\n this.toggleMenu(false);\n }\n this.onOverlayClose();\n }\n }\n\n private isHiddenFromViewport() {\n return this.breakpoint === 'sm' && this.expand === false;\n }\n\n private sidebarToggle() {\n this.mapExpandChange.emit(this.mapExpand);\n\n this.hostElement.dispatchEvent(\n new ApplicationSidebarToggleEvent(this.mapExpand)\n );\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expand,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"menu\"\n >\n <aside\n class={{\n menu: true,\n expanded: this.expand,\n }}\n onClick={() => {\n this.resetActiveTab();\n }}\n >\n <div class={'menu-buttons'}>\n <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n {this.breakpoint === 'sm' &&\n this.applicationLayoutContext.appSwitchConfig && (\n <ix-icon-button\n onClick={() =>\n showAppSwitch(this.applicationLayoutContext.appSwitchConfig)\n }\n icon=\"apps\"\n ghost\n class=\"app-switch\"\n ></ix-icon-button>\n )}\n </div>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\n </div>\n\n <div\n id=\"menu-tabs\"\n style={{\n display: 'contents',\n }}\n onClick={(e) => this.onMenuItemsClick(e)}\n >\n <div class=\"tabs-top\">\n <slot name=\"home\"></slot>\n </div>\n <div class=\"tabs-shadow-container\">\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-top': true,\n 'tabs--shadow--show': this.itemsScrollShadowTop,\n }}\n ></div>\n <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n {this.breakpoint !== 'sm' \|\| !this.isHiddenFromViewport() ? (\n <slot></slot>\n ) : null}\n </div>\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-bottom': true,\n 'tabs--shadow--show': this.itemsScrollShadowBottom,\n }}\n ></div>\n </div>\n </div>\n <div class=\"bottom-tab-divider\"></div>\n {this.settings ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"settings\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showSettings,\n }}\n icon={'cogwheel'}\n onClick={async () => this.toggleSettings(!this.showSettings)}\n >\n {this.i18nSettings}\n </ix-menu-item>\n ) : null}\n <div onClick={(e) => this.onMenuItemsClick(e)}>\n <slot name=\"bottom\"></slot>\n </div>\n\n <div id=\"popover-area\"></div>\n {this.about ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"aboutAndLegal\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showAbout,\n }}\n icon={'info'}\n onClick={async () => this.toggleAbout(!this.showAbout)}\n >\n {this.i18nLegal}\n </ix-menu-item>\n ) : null}\n {this.enableToggleTheme ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"toggleTheme\"\n onClick={() => themeSwitcher.toggleMode()}\n class=\"internal-tab bottom-tab\"\n icon={'light-dark'}\n >\n {this.i18nToggleTheme}\n </ix-menu-item>\n ) : null}\n {this.enableMapExpand \|\| this.applicationLayoutContext?.sidebar ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"menu-collapse\"\n onClick={() => this.sidebarToggle()}\n class=\"internal-tab bottom-tab\"\n icon={`${this.getCollapseIcon()}`}\n >\n {this.getCollapseText()}\n </ix-menu-item>\n ) : null}\n </aside>\n <div\n class={{\n 'menu-overlay': true,\n visible: this.isOverlayVisible(),\n expanded: this.expand,\n }}\n onTransitionEnd={() => {\n this.isTransitionDisabled = true;\n this.checkTransition();\n }}\n >\n <div class={'menu-overlay-container'}>\n {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n </div>\n <div class={'menu-overlay-container'}>\n {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-message-bar.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { a as anime } from './anime.es.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
-const messageBarCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;margin:0.5rem 0.5rem 0rem 0.5rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:bold;white-space:normal}:host ix-icon{margin-top:0.25rem}";
+const messageBarCss = ":host{margin:0.5rem 0.5rem 0rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:normal;white-space:normal}:host ix-icon{margin-top:0.25rem}";
 const IxMessageBarStyle0 = messageBarCss;
 const MessageBar = /*@__PURE__*/ proxyCustomElement(class MessageBar extends HTMLElement {
@@ -44,7 +44,7 @@ const MessageBar = /*@__PURE__*/ proxyCustomElement(class MessageBar extends HTM
         this.closedChange.emit();
     }
     render() {
-        return (h(Host, { key: '1e6b060fd39fb008c5ce8e56553b7ee235d5db2d' }, h("div", { key: 'a0f00d550a6c2e2f61918bbccd2c342100e73dcd', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '5bbfa1b8fcd0025b4d2fa0b488c604458fc4e131', color: this.color, name: this.icon }), h("div", { key: '78e83b8a02ea46b6b3ba65690d5939f00a63ca78', class: "message-content" }, h("slot", { key: 'b5813c317b7ea1b0c0e6919488016a43140dd68f' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+        return (h(Host, { key: '5cc13238fef0bf93a4f91f40123472a30ec2fe2d' }, h("div", { key: 'cd868ebcf84cc4966bd994955ced1e57044369bd', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'daaa40da03fd93443bda977a939520160dc0a5dd', color: this.color, name: this.icon }), h("div", { key: '6fdcec14e3734f904ceb35588147fd8c9d9f14eb', class: "message-content" }, h("slot", { key: 'aceac73042a70e8ddf386a8ddb4afb9d1a012639' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
                 this.closeAlert(this.divElement);
             }, "data-testid": "close-btn" })) : (''))));
     }

package/components/ix-message-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-message-bar.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,~~kgDAAkgD~~,CAAC;~~AACzhD~~,2BAAe,aAAa;;MCyBf,UAAU;;;;;;oBAIyB,MAAM;2BAK9B,IAAI;;;;IAe1B,mBAAmB;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;SAC5B;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;YACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;SAC3B;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;SAC9B;KACF;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;gBACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aAC5B;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAElD,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACvD,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAa,CACT,EACL,IAAI,CAAC,WAAW,IACf,sBACE,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE;gBACP,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aAClC,iBACW,WAAW,GACP,KAElB,EAAE,CACH,CACG,CACD,EACP;KACH;;;;;;;;AA9DuB,mBAAQ,GAAG,GAAH,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=shadow","src/components/message-bar/message-bar.tsx"],"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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .message-container {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n flex-wrap: nowrap;\n justify-content: space-between;\n min-height: 3.375rem;\n ~~margin: $small-space $small-space 0rem $small-space;\n~~ padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n $medium-space\n calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n $default-space;\n border-radius: var(--theme-message-bar--border-radius);\n background-color: var(--theme-messagebar--background);\n }\n\n .danger {\n border: solid var(--theme-message-bar--border-thickness)\n var(--theme-color-alarm);\n }\n\n .warning {\n border: solid var(--theme-message-bar--border-thickness)\n var(--theme-color-warning);\n }\n\n .info {\n border: solid var(--theme-message-bar--border-thickness)\n var(--theme-color-info);\n }\n\n .message-content {\n @include ellipsis;\n flex-grow: 1;\n align-self: center;\n min-height: 1.25rem;\n padding: 0 $default-space;\n font-weight: ~~bold~~;\n white-space: normal;\n }\n\n ix-icon {\n margin-top: $tiny-space;\n }\n}\n","/\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"],"version":3}
1	+ {"file":"ix-message-bar.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,mgDAAmgD,CAAC;AAC1hD,2BAAe,aAAa;;MCyBf,UAAU;;;;;;oBAIyB,MAAM;2BAK9B,IAAI;;;;IAe1B,mBAAmB;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;SAC5B;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;YACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;SAC3B;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;SAC9B;KACF;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;gBACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aAC5B;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAElD,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACvD,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAa,CACT,EACL,IAAI,CAAC,WAAW,IACf,sBACE,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE;gBACP,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aAClC,iBACW,WAAW,GACP,KAElB,EAAE,CACH,CACG,CACD,EACP;KACH;;;;;;;;AA9DuB,mBAAQ,GAAG,GAAH,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=shadow","src/components/message-bar/message-bar.tsx"],"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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n margin: $small-space $small-space 0rem $small-space;\n\n .message-container {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n flex-wrap: nowrap;\n justify-content: space-between;\n min-height: 3.375rem;\n padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n $medium-space\n calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n $default-space;\n border-radius: var(--theme-message-bar--border-radius);\n background-color: var(--theme-messagebar--background);\n }\n\n .danger {\n border: solid var(--theme-message-bar--border-thickness)\n var(--theme-color-alarm);\n }\n\n .warning {\n border: solid var(--theme-message-bar--border-thickness)\n var(--theme-color-warning);\n }\n\n .info {\n border: solid var(--theme-message-bar--border-thickness)\n var(--theme-color-info);\n }\n\n .message-content {\n @include ellipsis;\n flex-grow: 1;\n align-self: center;\n min-height: 1.25rem;\n padding: 0 $default-space;\n font-weight: normal;\n white-space: normal;\n }\n\n ix-icon {\n margin-top: $tiny-space;\n }\n}\n","/\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"],"version":3}

package/components/ix-modal-example.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ModalExample = /*@__PURE__*/ proxyCustomElement(class ModalExample extends
         closeModal(this.host, 'Done!');
     }
     render() {
-        return (h(Host, { key: 'e219bbf7bea6f929aa522982cbdf055b3fc45a92' }, h("div", { key: '186e10c89c6fd9f626a8fa7642a3a2efe9b4e899' }, h("div", { key: '2919c50fa62881cc689d659657bd5b55fb7c6f81', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '3dc6851c96c9140f1b13a0c312100acd71762fcd', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: '4b202214dad7f1502f4201969d7cf1a378a55957', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: 'b8df28789d9cede8b78117a8b2cd88b7088e9ea1', class: "modal-footer" }, h("ix-button", { key: 'eace38404f5761f3ead889d477481dfd33a5de3a', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: '38d00bad14606c86ea9ca37bae984579a43475e6', onClick: () => this.close() }, "OK")))));
+        return (h(Host, { key: '85333f30e3940babe00480e30095861fa379f123' }, h("div", { key: '9805d492738ea84091a7bcf3f50192afc6e76344' }, h("div", { key: '5af465ed1d115c884c6f3c88119e4622f1ca18e5', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '08a1f2c1b74ff92701ec759d7820852116f2be39', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: '82d08e54b5bd9b6d61540b29ee4ceca1865dbad0', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: '0ea9fcb2af82f857e57ff0824bc8d57810d476b1', class: "modal-footer" }, h("ix-button", { key: '5848a921f72c98aa1357f9be22aaf59b5f0f731f', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: 'c8c59ada2bb35d46add0b0c1333ec0c28ab6e83d', onClick: () => this.close() }, "OK")))));
     }
     get host() { return this; }
 }, [0, "ix-modal-example"]);

package/components/ix-modal-footer.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ModalFooter = /*@__PURE__*/ proxyCustomElement(class ModalFooter extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '10d32ee56938d12d5300cc8bccb401a4492ddb85' }, h("slot", { key: '63b0a1b1611bfd377192b6f49e22fc22861f809b' })));
+        return (h(Host, { key: '62e35b423b00c0ad75954e735188dce705f7ff3e' }, h("slot", { key: '29a2a22875ae6197dab3c056329125dcefe70032' })));
     }
     static get style() { return IxModalFooterStyle0; }
 }, [1, "ix-modal-footer"]);

package/components/ix-modal-loading.js CHANGED Viewed

@@ -11,7 +11,7 @@ const ModalLoading = /*@__PURE__*/ proxyCustomElement(class ModalLoading extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'f6d440918bef7125ac06449ab6d0cd4088f5fefb' }, h("ix-spinner", { key: '3efc2e66c193f2af94f4f5d6dc3e91daa2049008', variant: "primary" }), h("span", { key: '4d81c46bedae034801a35637ca78bd8f2b618124', class: 'loading-text' }, h("slot", { key: '90bf6e1aeac791f70c203fb6bf32dcb7cb313719' }))));
+        return (h(Host, { key: '80c2129a12f6f9e3791ef200fc023be50e462123' }, h("ix-spinner", { key: '219e4c39e89e9280794db9feea031cb92154cb15', variant: "primary" }), h("span", { key: '5f652d8ee2de0438f635938564264380a0ad7e0d', class: 'loading-text' }, h("slot", { key: 'c780d132e75994f7d12088e2e1d273cc02fc7de0' }))));
     }
     static get style() { return IxModalLoadingStyle0; }
 }, [1, "ix-modal-loading"]);

package/components/ix-modal.js CHANGED Viewed

@@ -102,6 +102,9 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         });
     }
     onModalClick(event) {
+        if (event.target !== this.dialog) {
+            return;
+        }
         const rect = this.dialog.getBoundingClientRect();
         const isClickOutside = rect.top <= event.clientY &&
             event.clientY <= rect.top + rect.height &&
@@ -163,17 +166,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'c96bf18eeec05c1363ca83f0cc68ab65f1e50b60', class: {
+        return (h(Host, { key: '185b4d7fdc54c5657f7a1b11f08ff0e53114f633', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, h("div", { key: 'ad4c5d6d14c7c20ef8d4150372b6d147217aa7f4', class: "dialog-backdrop" }, h("dialog", { key: 'e9cc1d8ab815b6809266eadde437244639eb9597', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '455364c00c366ae949cbaab74a9d7c47c3c822f1', class: "dialog-backdrop" }, h("dialog", { key: '6603b83c715d18aa0f7aa32524e82ff01453235d', "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: '96d3bad846bbb2541aa8a99313574dd539e9b2e5' })))));
+            } }, h("slot", { key: 'b5d0d5a56fa225d229822c4c6a00376f2a73f03c' })))));
     }
     get hostElement() { return this; }
     static get style() { return IxModalStyle0; }

package/components/ix-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-modal.js","mappings":"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","names":[],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"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\nexport function waitForElement<R extends HTMLElement>(\n selector: string,\n doc: any,\n timeout = 3000\n): Promise<R> {\n return new Promise<R>((resolve, reject) => {\n const startTime = Date.now();\n\n const checkIfElementExist = () => {\n const dialog = doc.querySelector(selector) satisfies R;\n\n if (dialog) {\n resolve(dialog);\n } else {\n if (Date.now() - startTime < timeout) {\n setTimeout(checkIfElementExist);\n } else {\n reject();\n }\n }\n };\n\n checkIfElementExist();\n });\n}\n","/\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\n::backdrop {\n --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n outline: none !important;\n}\n\n:host {\n display: none;\n\n dialog {\n margin: 0;\n left: 50%;\n }\n\n dialog::backdrop {\n backdrop-filter: blur(2.7182817459106445px);\n }\n\n .modal {\n display: flex;\n flex-direction: column;\n position: relative;\n border: none;\n border-radius: var(--theme-default-border-radius);\n background: var(--theme-modal--background);\n box-shadow: var(--theme-shadow-4);\n color: var(--theme-color-std-text);\n overflow: visible;\n max-height: 80vh;\n pointer-events: all;\n }\n\n .modal-size-360 {\n width: 22.5rem;\n }\n\n .modal-size-480 {\n width: 30rem;\n }\n\n .modal-size-600 {\n width: 37.5rem;\n }\n\n .modal-size-720 {\n width: 45rem;\n }\n\n .modal-size-840 {\n width: 52.5rem;\n }\n\n .modal-size-full-width {\n width: 95%;\n }\n\n .modal-size-full-screen {\n left: 0px !important;\n top: 0px !important;\n transform: none !important;\n\n width: calc(100% - 28px);\n min-width: calc(100% - 28px);\n max-width: calc(100% - 28px);\n\n height: calc(100% - 28px);\n min-height: calc(100% - 28px);\n max-height: calc(100% - 28px);\n }\n\n .dialog-backdrop {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0px;\n left: 0px;\n\n pointer-events: none;\n }\n\n ::slotted(ix-modal-footer) {\n margin-top: auto;\n }\n}\n\n:host(.visible) {\n display: block;\n}\n\n:host(.align-center) {\n dialog {\n margin: 0;\n left: 50%;\n top: 50%;\n }\n}\n\n:host(.no-backdrop) {\n dialog::backdrop {\n background-color: transparent !important;\n backdrop-filter: none !important;\n }\n}\n\n:host(.with-icon) {\n ::slotted(ix-modal-footer),\n ::slotted(ix-modal-content) {\n margin-left: 2.5rem;\n }\n}\n","/\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 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 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"],"version":3}
1	+ {"file":"ix-modal.js","mappings":";;;;;;AAAA;;;;;;;;SASgB,cAAc,CAC5B,QAAgB,EAChB,GAAQ,EACR,OAAO,GAAG,IAAI;IAEd,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE7B,MAAM,mBAAmB,GAAG;YAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAa,CAAC;YAEvD,IAAI,MAAM,EAAE;gBACV,OAAO,CAAC,MAAM,CAAC,CAAC;aACjB;iBAAM;gBACL,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,GAAG,OAAO,EAAE;oBACpC,UAAU,CAAC,mBAAmB,CAAC,CAAC;iBACjC;qBAAM;oBACL,MAAM,EAAE,CAAC;iBACV;aACF;SACF,CAAC;QAEF,mBAAmB,EAAE,CAAC;KACvB,CAAC,CAAC;AACL;;ACjCA,MAAM,QAAQ,GAAG,8/CAA8/C,CAAC;AAChhD,sBAAe,QAAQ;;;;;;;;;;;;MCiCV,KAAK;;;;;;;QACR,mBAAc,GAAmB,EAAE,CAAC;oBAShB,KAAK;yBAKb,IAAI;wBAKL,IAAI;oCAOQ,KAAK;;wBAajB,KAAK;wBAML,IAAI;6BAKC,IAAI;4BAYJ,KAAK;;IAG7B,KAAK,CAAC,CAAgB;QACpB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;KACF;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAEO,YAAY;QAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;QAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;QAE7C,KAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,MAAM;YACpB,QAAQ;YACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;YAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;YAC5B,MAAM,EAAE,aAAa;SACtB,CAAC,CAAC;KACJ;IAEO,aAAa,CAAC,gBAA0B;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;QAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;QAE7C,KAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,MAAM;YACpB,QAAQ;YACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,UAAU,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;YAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;YAC5B,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE;gBACR,IAAI,gBAAgB,EAAE;oBACpB,gBAAgB,EAAE,CAAC;iBACpB;aACF;SACF,CAAC,CAAC;KACJ;IAEO,YAAY,CAAC,KAAiB;QACpC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;YAChC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACjD,MAAM,cAAc,GAClB,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO;YACzB,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;YACvC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO;YAC1B,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1C,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAChD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;;;;IAMD,MAAM,SAAS;QACb,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,cAAc,CACjC,QAAQ,EACR,IAAI,CAAC,WAAW,CAAC,UAAU,CAC5B,CAAC;YACF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,MAAM,CAAC,SAAS,EAAE,CAAC;SACpB;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACjD;KACF;;;;IAMD,MAAM,YAAY,CAAU,MAAU;QACpC,IAAI,YAAY,GAAG,IAAI,CAAC;QAExB,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;YACpC,YAAY,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;SACjD;QACD,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,CAAC;YACjB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;gBACE,IAAI,EAAE,SAAS;gBACf,MAAM;aACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;YAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACjC,CAAC,CAAC;KACJ;;;;IAMD,MAAM,UAAU,CAAU,MAAS;QACjC,IAAI,CAAC,aAAa,CAAC;YACjB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;gBACE,IAAI,EAAE,OAAO;gBACb,MAAM;aACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;YAEF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC/B,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC5D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,YAAY;gBAC1B,aAAa,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK;gBACtC,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6EACc,WAAW,CAAC,IAAI,CAAC,sBACX,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBACxC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvD,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBACX,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;aAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB,IAED,8DAAa,CACN,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;AAzKD;IADC,UAAU,CAAQ,SAAS,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;kCAK7E;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"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\nexport function waitForElement<R extends HTMLElement>(\n selector: string,\n doc: any,\n timeout = 3000\n): Promise<R> {\n return new Promise<R>((resolve, reject) => {\n const startTime = Date.now();\n\n const checkIfElementExist = () => {\n const dialog = doc.querySelector(selector) satisfies R;\n\n if (dialog) {\n resolve(dialog);\n } else {\n if (Date.now() - startTime < timeout) {\n setTimeout(checkIfElementExist);\n } else {\n reject();\n }\n }\n };\n\n checkIfElementExist();\n });\n}\n","/\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\n::backdrop {\n --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n outline: none !important;\n}\n\n:host {\n display: none;\n\n dialog {\n margin: 0;\n left: 50%;\n }\n\n dialog::backdrop {\n backdrop-filter: blur(2.7182817459106445px);\n }\n\n .modal {\n display: flex;\n flex-direction: column;\n position: relative;\n border: none;\n border-radius: var(--theme-default-border-radius);\n background: var(--theme-modal--background);\n box-shadow: var(--theme-shadow-4);\n color: var(--theme-color-std-text);\n overflow: visible;\n max-height: 80vh;\n pointer-events: all;\n }\n\n .modal-size-360 {\n width: 22.5rem;\n }\n\n .modal-size-480 {\n width: 30rem;\n }\n\n .modal-size-600 {\n width: 37.5rem;\n }\n\n .modal-size-720 {\n width: 45rem;\n }\n\n .modal-size-840 {\n width: 52.5rem;\n }\n\n .modal-size-full-width {\n width: 95%;\n }\n\n .modal-size-full-screen {\n left: 0px !important;\n top: 0px !important;\n transform: none !important;\n\n width: calc(100% - 28px);\n min-width: calc(100% - 28px);\n max-width: calc(100% - 28px);\n\n height: calc(100% - 28px);\n min-height: calc(100% - 28px);\n max-height: calc(100% - 28px);\n }\n\n .dialog-backdrop {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0px;\n left: 0px;\n\n pointer-events: none;\n }\n\n ::slotted(ix-modal-footer) {\n margin-top: auto;\n }\n}\n\n:host(.visible) {\n display: block;\n}\n\n:host(.align-center) {\n dialog {\n margin: 0;\n left: 50%;\n top: 50%;\n }\n}\n\n:host(.no-backdrop) {\n dialog::backdrop {\n background-color: transparent !important;\n backdrop-filter: none !important;\n }\n}\n\n:host(.with-icon) {\n ::slotted(ix-modal-footer),\n ::slotted(ix-modal-content) {\n margin-left: 2.5rem;\n }\n}\n","/\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"],"version":3}

package/components/ix-pagination.js CHANGED Viewed

@@ -130,10 +130,10 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: '0d3ee03dc65b4178ad572d753d2c01f35c853d0e' }, h("ix-icon-button", { key: '58af8c5d7a36d3ddf24f1dde1b39cac9c3c2d929', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (h(Host, { key: '6840b0fa7590f8babfc3e57b3d64f753d532452c' }, h("ix-icon-button", { key: '32192548fbbc92c457a6f83f5fcec5d9ed39dec0', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'bac7c247befd2262c9c01c95d2feba78dc4dfa12', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'c4d35198996a18407de1963492403f27def2b36f', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));