@siemens/ix 4.0.0 → 4.1.0

package/dist/cjs/ix-menu-about.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C8Xo8L1k.js');
-var ixMenuSettings_entry = require('./ix-menu-settings-Cdqo0r8E.js');
+var ixMenuSettings_entry = require('./ix-menu-settings-CtWl0bME.js');
 require('./index-Dyz3z1FD.js');
 
 const menuAboutCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";
@@ -18,8 +18,10 @@ const MenuAbout = class {
         /** @internal */
         this.show = false;
     }
-    updateTab(label) {
-        ixMenuSettings_entry.setTab(this, label);
+    updateTab(newLabel, oldLabel) {
+        if (newLabel !== oldLabel) {
+            ixMenuSettings_entry.syncTabDisplay(this, newLabel);
+        }
     }
     componentWillLoad() {
         ixMenuSettings_entry.initialize(this);
@@ -28,7 +30,7 @@ const MenuAbout = class {
         index.forceUpdate(this.el);
     }
     render() {
-        return index.h(ixMenuSettings_entry.MenuTabs, { key: 'f39b61fd405141b8e2e7061bd76194ee4beb3a3d', context: this });
+        return index.h(ixMenuSettings_entry.MenuTabs, { key: 'e49c1819db2fcba5b330c776c84e905d6f1aef87', context: this });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-menu-about.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-menu-about.entry.cjs.js","sources":["src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=shadow","src/components/menu-about/menu-about.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@use './common-variables' as vars;\n@use 'legacy/fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: vars.$medium-space vars.$default-space vars.$default-space\n    vars.$x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: vars.$x-large-space;\n    margin-bottom: vars.$small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  ix-menu-about-item {\n    display: none;\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  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Content of the header\n   */\n  @Prop() label = 'About & legal information';\n\n  /** @internal */\n  @Prop() show = false;\n\n  /**\n   * Active tab changed\n   * @since 3.0.0\n   */\n  @Event() tabChange!: EventEmitter<string>;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuAboutItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"],"names":["setTab","initialize","forceUpdate","h","MenuTabs"],"mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ozGAAozG;;MCgC5zG,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAcE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,2BAA2B;;AAGnC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AA+BrB;AAfC,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAAA,2BAAM,CAAC,IAAI,EAAE,KAAK,CAAC;;IAGrB,iBAAiB,GAAA;QACfC,+BAAU,CAAC,IAAI,CAAC;;IAGlB,gBAAgB,GAAA;AACd,QAAAC,iBAAW,CAAC,IAAI,CAAC,EAAE,CAAC;;IAGtB,MAAM,GAAA;AACJ,QAAA,OAAOC,QAACC,6BAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,GAAI;;;;;;;;;;;"}
+{"version":3,"file":"ix-menu-about.entry.cjs.js","sources":["src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=shadow","src/components/menu-about/menu-about.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@use './common-variables' as vars;\n@use 'legacy/fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: vars.$medium-space vars.$default-space vars.$default-space\n    vars.$x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: vars.$x-large-space;\n    margin-bottom: vars.$small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  ix-menu-about-item {\n    display: none;\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  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  syncTabDisplay,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Content of the header\n   */\n  @Prop() label = 'About & legal information';\n\n  /** @internal */\n  @Prop() show = false;\n\n  /**\n   * Active tab changed\n   * @since 3.0.0\n   */\n  @Event() tabChange!: EventEmitter<string>;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuAboutItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(newLabel: string, oldLabel: string) {\n    if (newLabel !== oldLabel) {\n      syncTabDisplay(this, newLabel);\n    }\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"],"names":["syncTabDisplay","initialize","forceUpdate","h","MenuTabs"],"mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ozGAAozG;;MCgC5zG,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAcE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,2BAA2B;;AAGnC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAiCrB;IAjBC,SAAS,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC1C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAAA,mCAAc,CAAC,IAAI,EAAE,QAAQ,CAAC;;;IAIlC,iBAAiB,GAAA;QACfC,+BAAU,CAAC,IAAI,CAAC;;IAGlB,gBAAgB,GAAA;AACd,QAAAC,iBAAW,CAAC,IAAI,CAAC,EAAE,CAAC;;IAGtB,MAAM,GAAA;AACJ,QAAA,OAAOC,QAACC,6BAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,GAAI;;;;;;;;;;;"}

package/dist/cjs/ix-menu-avatar.cjs.entry.js

@@ -33,9 +33,9 @@ const MenuAvatar = class {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (index.h(index.Host, { key: '342ba4b67b3532da978048158cf9b9abfbc7e33d', slot: "ix-menu-avatar" }, index.h("button", { key: '68924d460574cde4c655a1f95e3c6ed5bc415c44', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '2170181905320f58961a70ab8cb5b25d1c439393', image: this.image, initials: this.initials }), index.h("div", { key: 'c9f0275dec453f57756d3faefe9988c71d3b54b6', class: "avatar-name" }, index.h("span", { key: '56536ddb8d6b591433ad6bd88d82691de91b81ad', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: 'a9b5bbed878e3a0282f770b97bb691f360035416', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: '9974a1b413104016d5366f72103f3712e93813a4', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        return (index.h(index.Host, { key: '6cff313b74cbbd668ed30dd7c04e060867ae0095', slot: "ix-menu-avatar" }, index.h("button", { key: 'c387330d89a9d5740f0af21ec4e7d0f077510064', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '82f6207b4005ad8a799d29ce52a629d805d60b36', image: this.image, initials: this.initials }), index.h("div", { key: 'c1a6a4e03b3dda5b36a3caa6c7595a32407b9c19', class: "avatar-name" }, index.h("span", { key: 'a8b413ee5ec9a9f60d26ce695df3d9359831867d', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: 'b333a5337d49199f9545eb30361fe5166d8a8725', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: '31b4149a67636711972e1f682da62a60f833e9f3', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
                 mainAxis: 16,
-            } }, index.h("slot", { key: 'b642dd168efdf7f4659c3a0e5d032fccb93df9a5', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (index.h("ix-menu-avatar-item", { key: '4b7e853e0522208bebd10535885731af9dc4d3f6', label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
+            } }, index.h("slot", { key: 'a17ca070258b8b892c647f4cc2429b21562072c1', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (index.h("ix-menu-avatar-item", { key: 'cbc2544543237b2874744c0678838b701ec89d4a', label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
             } })))));
     }

package/dist/cjs/ix-menu-category.cjs.entry.js

@@ -182,7 +182,7 @@ const MenuCategory = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '40ae8539715815c94e99313fad8694e4115e5482', class: {
+        return (index.h(index.Host, { key: '13ac63c3321e33e4781ab642577464fde79c6bf2', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -191,14 +191,14 @@ const MenuCategory = class {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, index.h("ix-menu-item", { key: '60b77e0aae87b55e7934cbd0fccb18cab83772bb', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, index.h("div", { key: 'f87df62dd73af5968c4d62b657d0a0538e10ade3', class: "category" }, index.h("div", { key: '855411c78407fa712fddb8c177801db4c3c9780a', class: "category-text" }, this.label), index.h("ix-icon", { key: 'e94bbb4ad9f4fc5612daa12e8812d26ff6ecea70', name: index$1.iconChevronDownSmall, class: {
+            } }, index.h("ix-menu-item", { key: '25e8a0a50ea1540e346e830045275e6a0c63327d', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, index.h("div", { key: '5b0dcefb391bada721218f4d3ba690c1a2de966e', class: "category" }, index.h("div", { key: 'f65e560cb7a6ab490220b814f9e66bbfd010bc44', class: "category-text" }, this.label), index.h("ix-icon", { key: '672a4f90f58ad0cdf023d050d4b3f75114a4ee52', name: index$1.iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), index.h("div", { key: '9725f1a5f5f7aa7e1835d054ec8155644c5516e8', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), index.h("div", { key: 'd7f0f085f33a09d7c57ca18818a90125b3c2e2bf', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? index.h("slot", null) : null), index.h("ix-dropdown", { key: '69fd00ce9dd45b99069a891318008e25b214a218', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? index.h("slot", null) : null), index.h("ix-dropdown", { key: 'e5b6be4ba14c97ef2e85abd01833bed929b1efa4', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -211,7 +211,7 @@ const MenuCategory = class {
                         e.preventDefault();
                     }
                 }
-            } }, index.h("ix-dropdown-item", { key: '101355b915d54d5e7a309c26aa9480191db1fb3e', class: 'category-dropdown-header' }, index.h("ix-typography", { key: '301de701167a6e09a741d2cdc7ed9c8555242a59', format: "label", bold: true, textColor: "std" }, this.label)), index.h("ix-divider", { key: '5cdcca1d2025554f5d11ea8f6d819b4c7a2d7ff2' }), index.h("slot", { key: 'a69dc8bdb237da234ab39cb251fda9cbd33da35d' }))));
+            } }, index.h("ix-dropdown-item", { key: '90e095e2d61e5d359c29c742e4e84457ef47426f', class: 'category-dropdown-header' }, index.h("ix-typography", { key: '67efee1940b51e0457ccec7f0a271684ea6df881', format: "label", bold: true, textColor: "std" }, this.label)), index.h("ix-divider", { key: '2ec48cbab9dc6a223fcc636e59b497b1db315369' }), index.h("slot", { key: 'e32fb89cf4045faae851af8d1ed1c4ab394e1709' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-menu-expand-icon.cjs.entry.js

@@ -36,7 +36,7 @@ const MenuExpandIcon = class {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (index.h(index.Host, { key: 'c39c90a459dee53b29d4ccd8de683d35dc4abd22', class: {
+        return (index.h(index.Host, { key: '702baa75b182df885e9488301b2747fb37f96c52', class: {
                 expanded: this.expanded,
             }, type: "button", "aria-label": this.ixAriaLabel, "aria-pressed": a11y.a11yBoolean(this.expanded) }, this.getMenuIcon()));
     }

package/dist/cjs/ix-menu-item.cjs.entry.js

@@ -117,11 +117,11 @@ const MenuItem = class {
             tabIndex: this.disabled ? -1 : 0,
         };
         const menuContent = [
-            this.icon && index.h("ix-icon", { key: '2c1c698aadcb3dd8090c067c3dd746e8a9baaf93', class: 'tab-icon', name: this.icon }),
+            this.icon && index.h("ix-icon", { key: 'cf444eeb0b3478721a77ee1dc52436689e4c0102', class: 'tab-icon', name: this.icon }),
             this.notifications ? (index.h("div", { class: "notification" }, index.h("div", { class: "pill" }, this.notifications))) : null,
-            index.h("span", { key: 'c02f479113a2c1914df317d21561b657acf6af92', id: this.internalItemId, class: "tab-text text-default" }, this.label, index.h("slot", { key: '33f38c81be26d10edc993efd1a7434e04678e2c1' })),
+            index.h("span", { key: '93ac9e24f2c8634f9bfcef42c8a167d219ff764e', id: this.internalItemId, class: "tab-text text-default" }, this.label, index.h("slot", { key: 'c98d81e6a16ff3304c1c2c489a71cc892fc6e287' })),
         ];
-        return (index.h(index.Host, Object.assign({ key: '58699b09d27cd2caa4d688378e1bd274b9467ee7', class: {
+        return (index.h(index.Host, Object.assign({ key: '2bed98070395e9df578f968f317a16f214bf5627', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
@@ -132,7 +132,7 @@ const MenuItem = class {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (index.h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), index.h("ix-tooltip", { key: 'f7d1c226c4cde303427a1b38c85bdf93693807b4', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11y.a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }), menuContent)) : (index.h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), index.h("ix-tooltip", { key: '691d40c1d8df8ab9111165be8320190a5c893de0', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11y.a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{ix-menu-settings-Cdqo0r8E.js → ix-menu-settings-CtWl0bME.js}

@@ -17,8 +17,10 @@ const MenuSettings = class {
         /** @internal */
         this.show = false;
     }
-    updateTab(label) {
-        setTab(this, label);
+    updateTab(newLabel, oldLabel) {
+        if (newLabel !== oldLabel) {
+            syncTabDisplay(this, newLabel);
+        }
     }
     componentWillLoad() {
         initialize(this);
@@ -27,7 +29,7 @@ const MenuSettings = class {
         index.forceUpdate(this.el);
     }
     render() {
-        return index.h(MenuTabs, { key: 'a59dd5a81b91ff4ae7f516cb192700bffaee3f84', context: this });
+        return index.h(MenuTabs, { key: 'bff35655d1e57ea807a1d8a6bd0879f8804e3ef4', context: this });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -50,14 +52,19 @@ function getItems(context) {
         : 'ix-menu-about-item'));
 }
 function setTab(context, label) {
+    if (context.activeTabLabel === label) {
+        return;
+    }
     const { defaultPrevented } = context.tabChange.emit(label);
     if (defaultPrevented) {
         return;
     }
     context.activeTabLabel = label;
+}
+function syncTabDisplay(context, label) {
     context.items.forEach((i) => {
         i.style.display = 'none';
-        if (i.label === context.activeTabLabel) {
+        if (i.label === label) {
             i.style.display = 'block';
         }
     });
@@ -112,7 +119,7 @@ const MenuTabs = ({ context }) => {
 exports.MenuSettings = MenuSettings;
 exports.MenuTabs = MenuTabs;
 exports.initialize = initialize;
-exports.setTab = setTab;
-//# sourceMappingURL=ix-menu-settings-Cdqo0r8E.js.map
+exports.syncTabDisplay = syncTabDisplay;
+//# sourceMappingURL=ix-menu-settings-CtWl0bME.js.map
 
-//# sourceMappingURL=ix-menu-settings-Cdqo0r8E.js.map
+//# sourceMappingURL=ix-menu-settings-CtWl0bME.js.map

package/dist/cjs/ix-menu-settings-CtWl0bME.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-menu-settings-CtWl0bME.js","sources":["src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/utils/menu-tabs/menu-tabs-fc.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@use './common-variables' as vars;\n@use 'legacy/fonts';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: vars.$medium-space vars.$default-space vars.$default-space vars.$x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  @include component.ix-component;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: vars.$x-large-space;\n    margin-bottom: vars.$small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  .settings-tabs {\n    margin-bottom: vars.$large-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  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  syncTabDisplay,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /** @internal */\n  @Prop() show = false;\n\n  /**\n   * Active tab changed\n   * @since 3.0.0\n   */\n  @Event() tabChange!: EventEmitter<string>;\n\n  /**\n   * Popover closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(newLabel: string, oldLabel: string) {\n    if (newLabel !== oldLabel) {\n      syncTabDisplay(this, newLabel);\n    }\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n","/*\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 { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\n\nfunction getItems(\n  context: MenuSettings | MenuAbout\n): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] {\n  return Array.from(\n    context.el.querySelectorAll(\n      context instanceof MenuSettings\n        ? 'ix-menu-settings-item'\n        : 'ix-menu-about-item'\n    )\n  );\n}\n\nexport function setTab(context: MenuSettings | MenuAbout, label: string) {\n  if (context.activeTabLabel === label) {\n    return;\n  }\n  const { defaultPrevented } = context.tabChange.emit(label);\n\n  if (defaultPrevented) {\n    return;\n  }\n  context.activeTabLabel = label;\n}\n\nexport function syncTabDisplay(\n  context: MenuSettings | MenuAbout,\n  label: string\n) {\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === label) {\n      i.style.display = 'block';\n    }\n  });\n}\n\nexport function initialize(context: MenuSettings | MenuAbout) {\n  context.items = getItems(context);\n\n  if (context.items.length) {\n    const selectedLabel = context.activeTabLabel || context.items[0].label;\n    if (selectedLabel) {\n      setTab(context, selectedLabel);\n    }\n  }\n\n  context.items.forEach((item) => {\n    item.addEventListener('labelChange', (e: CustomEvent) => {\n      context.items = getItems(context);\n\n      if (e.detail.oldLabel === context.activeTabLabel) {\n        context.activeTabLabel = e.detail.newLabel;\n      }\n    });\n  });\n}\n\nexport interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\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 { FunctionalComponent, h, Host } from '@stencil/core';\nimport { setTab } from './menu-tabs-utils';\nimport { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\nimport { iconClose } from '@siemens/ix-icons/icons';\n\ninterface MenuTabsProps {\n  context: MenuSettings | MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings | MenuAbout) => {\n  return context.items.map(({ label }) => {\n    return (\n      <ix-tab-item\n        selected={label === context.activeTabLabel}\n        onTabClick={(e) => e.preventDefault()}\n        onClick={() => {\n          if (label) {\n            setTab(context, label);\n          }\n        }}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => {\n  const selectedIndex = context.items.findIndex(\n    (item) => item.label === context.activeTabLabel\n  );\n  return (\n    <Host\n      slot={\n        context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n      }\n      class={{\n        show: context.show,\n      }}\n    >\n      <div\n        class={\n          context instanceof MenuSettings ? 'settings-header' : 'about-header'\n        }\n      >\n        <h2 class=\"text-h2\">{context.label}</h2>\n        <ix-icon-button\n          variant=\"tertiary\"\n          size=\"24\"\n          icon={iconClose}\n          iconColor=\"color-soft-text\"\n          onClick={(e) =>\n            context.close.emit({\n              name:\n                context instanceof MenuSettings\n                  ? 'ix-menu-settings'\n                  : 'ix-menu-about',\n              nativeEvent: e,\n            })\n          }\n        ></ix-icon-button>\n      </div>\n      <ix-tabs selected={selectedIndex !== -1 ? selectedIndex : 0}>\n        {getTabItems(context)}\n      </ix-tabs>\n      <slot></slot>\n    </Host>\n  );\n};\n"],"names":["forceUpdate","h","Host","iconClose"],"mappings":"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"}

package/dist/cjs/ix-menu-settings-item.cjs.entry.js

@@ -17,7 +17,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '82d134ab9cdb58a29c6fd02a165a9925a9a55912' }, index.h("slot", { key: 'dfb95edb5325b70072cc422a48c78f8a50a9b589' })));
+        return (index.h(index.Host, { key: '69dac244a2c3b427237e8dceec64fad9c16600e9' }, index.h("slot", { key: 'ccfc87d1f061f0d4195f943dec3782b655626aae' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/dist/cjs/ix-menu-settings.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ixMenuSettings_entry = require('./ix-menu-settings-Cdqo0r8E.js');
+var ixMenuSettings_entry = require('./ix-menu-settings-CtWl0bME.js');
 require('./index-C8Xo8L1k.js');
 require('./index-Dyz3z1FD.js');
 

package/dist/cjs/ix-menu.cjs.entry.js

@@ -450,44 +450,44 @@ const Menu = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '7c30f31880d51956013f87fe21ea0abf4129f67b', class: {
+        return (index.h(index.Host, { key: 'b36f27c9c7b9342fd8f984dd5d00ad73d735b2ff', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, index.h("nav", { key: 'ff157fa24a58cd522b33ac035d99086a8dfec7bc', class: {
+            }, slot: "menu" }, index.h("nav", { key: '4f4b1378ddfe2cb243d0a5305679c98084490e8b', class: {
                 menu: true,
                 expanded: this.expand,
-            } }, index.h("div", { key: 'a3935afe8ee867e934f1c778583d22d11f5cf957', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { key: '067059b37dc7e99ac05bdf3f96f4f417403e1915', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (index.h("ix-icon-button", { key: 'd9c3d29552e6e8adeba3c44c04a563da430ea9b8', onClick: () => {
+            } }, index.h("div", { key: '70d117cfe299bdb3f3b0ed9639d5ee83bfc33cf1', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { key: 'fa76b253e6cf1ae30e3257cc3c186dc23215b516', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (index.h("ix-icon-button", { key: '927aede1c7824c6c21eed072e7dba6db8d5f8df5', onClick: () => {
                 this.showAppSwitch();
-            }, icon: index$1.iconApps, variant: "subtle-tertiary" }))), index.h("div", { key: 'bf2a827004f7e2d337ba55fc288e7abe418ec6dd', id: "menu-tabs", style: {
+            }, icon: index$1.iconApps, variant: "subtle-tertiary" }))), index.h("div", { key: '795f32dc8f94404a75c9a0d0cfb7c8e8d429d8d2', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: 'ee11e15bb3d0e4b6cd3263788aac1eba043dae99', class: "tabs-shadow-container" }, index.h("div", { key: '0803887ba70d6558cf5e4a890e0eca39b49ff518', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: '4d609cfd70659c0adfcb1cfca0485edff3b05d08', class: "tabs-shadow-container" }, index.h("div", { key: 'b8b81a13d75c56f9a460f0db382acef185b1c11c', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), index.h("div", { key: '7e43e530408b8a5408e2a0c00d4e89b695d0d871', class: {
+            } }), index.h("div", { key: '1095f30e782665f9d66d7f2619eb3a68806ccf54', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: 'e9f5421b30d3505a1a80ecdea28d78770a2f25fd', class: "menu-avatar" }, index.h("slot", { key: 'c0d0ab2965a271540b41165eaf95fcd13072ae07', name: "ix-menu-avatar" })), index.h("slot", { key: '3b427bbba570fc61bbe44f6138f338025b144725', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: 'c7bb85da2610aef008b75fe560af46aac221ffc5', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: '55ec2b8a3b535c8ed7dfc4c80ecdeedf9add4d34', class: "menu-avatar" }, index.h("slot", { key: 'a893aea63d56c2b4e7fd5997904704639257f65b', name: "ix-menu-avatar" })), index.h("slot", { key: '85505735fc0f7c9075340389597565bd99e64801', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: '7a0013bb20500931471b1ee1273615d0ae740d11', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), index.h("div", { key: '80b67bd3408917c424661ff603b6b12a08b5c256', class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), index.h("div", { key: '92a48e39684e2bbbb6078dcafc5c8b7103a693de', class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: index$1.iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: index$1.iconLightDark, label: this.i18nToggleTheme })) : null, index.h("div", { key: '93bc9bfe4c557cbfcc66eaac5cc21118578b050a', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: '9910c841207e3a62b3699cc5e54843155557bb65', name: "bottom" })), index.h("div", { key: 'f3bd210849640e293625b418f928eb12eb6bb8a5', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: index$1.iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: index$1.iconLightDark, label: this.i18nToggleTheme })) : null, index.h("div", { key: '2a5bad2eb493be6ee59fc101fab300bdb154feb0', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: '5a1e19962a88ceeb1f82ac385dba49d0c311e3d7', name: "bottom" })), index.h("div", { key: '65802881403efad9dbae84ef9bf5d441e3915150', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: index$1.iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), index.h("div", { key: '54785101f98f046af558820493555a3d4739ace3', class: {
+            }, icon: index$1.iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), index.h("div", { key: 'e6dd7e53abbd5e4ce11cc5d2be882dd52e335275', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, index.h("div", { key: '740f1a98fe2bafb8da7d5457395dee136a5ce9ec', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: '3e2f774925487e9da132a3d7b3633486bece3976', class: 'menu-overlay-container' }, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null))));
+            } }, index.h("div", { key: 'd8a49e3983b5d060190f1440b4aacd44243894a8', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: '92ddf6c21d3d08c5d1961200ac598a6135c9ef89', class: 'menu-overlay-container' }, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-message-bar.cjs.entry.js

@@ -42,7 +42,7 @@ const MessageBar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '22bbc355ba3fca3209fab0491ae186f59bb64b02' }, index.h("div", { key: 'a84b47392ddfd8a8b0863ce99aa17985fbf39b4d', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: '6528c7bd5a8b484858c97ca0e072704dcf37ad1c', color: this.color, name: this.icon }), index.h("div", { key: '07eed52e33baa107ebdebb10ef478d775901faf3', class: "message-content" }, index.h("slot", { key: 'cd5981304f6998d55edc38fa3fb0c67e139b8278' })), !this.persistent && (index.h("ix-icon-button", { key: 'ac6a235e1080bbb942c102f7c0e5c04672176557', icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (index.h(index.Host, { key: '538fcc08ad07fe808f424e067a361f4a56f4c0ec' }, index.h("div", { key: '4a75052efe1b22c247dcfcd298aabbd1098ff7b6', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: 'd348829692e38a1023e044834aefa45516b4d916', color: this.color, name: this.icon }), index.h("div", { key: '0ac0a509efe1dd246f7732660e4cf16416c8655d', class: "message-content" }, index.h("slot", { key: '6143bfa9cf39d32d149c2893b7712358337833c9' })), !this.persistent && (index.h("ix-icon-button", { key: 'b118c91956af0fd00d02cfefdb7da36d46f2d360', icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

package/dist/cjs/ix-modal-content_2.cjs.entry.js

@@ -11,7 +11,7 @@ const ModalContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '91592e2a2681326a99cafd1709581a29ecf48d61' }, index.h("slot", { key: '259ab95ce19cafdc7dbbe67c362e424590fe02c8' })));
+        return (index.h(index.Host, { key: 'b45bdd4b47ca580de9e3419c9c081f8e30b1da09' }, index.h("slot", { key: 'ad2d19f3f3053ea927d6d45ff54bcfff1e74345d' })));
     }
 };
 ModalContent.style = modalContentCss;
@@ -49,7 +49,7 @@ const ModalHeader = class {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (index.h(index.Host, { key: 'b41da77283ecc896aa62fced50290fe487526fbd' }, this.icon ? (index.h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, index.h("div", { key: 'c084a12acb4d137a55e45b0f98e662d181b1901e', class: "modal-title" }, index.h("ix-typography", { key: '9e82bdb91af4273454254d3c2fc03803d787dde1', format: "h5" }, index.h("slot", { key: '209d60c82e6b12c28d95eb538e8f4499becfeb8e' }))), !this.hideClose ? (index.h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: index$1.iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (index.h(index.Host, { key: '7dd6b1964ed537b20a90f9007afb767414fad240' }, this.icon ? (index.h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, index.h("div", { key: '4c6d8c7716ba99eed36e7b9c741dce4ebb0bb092', class: "modal-title" }, index.h("ix-typography", { key: '1db5a1e1cd434c67578a8c276b497284e5447f8d', format: "h5" }, index.h("slot", { key: '920833a9e7d2c8e15dc4bff1b18c6daa8a9ee4b5' }))), !this.hideClose ? (index.h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: index$1.iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-modal-footer.cjs.entry.js

@@ -9,7 +9,7 @@ const ModalFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'bab5a43ac92a13caca46d241091c27c773990aba' }, index.h("slot", { key: 'fefe386636d486a7e1d4b35a23eafe0d04b7270c' })));
+        return (index.h(index.Host, { key: '11eb649edd163b25fdeb4b533bf513a861c1d7ec' }, index.h("slot", { key: '9a2cb92b8df8220ed2307d98ec7a1ce6a6d9196b' })));
     }
 };
 ModalFooter.style = modalFooterCss;

package/dist/cjs/ix-modal-loading.cjs.entry.js

@@ -9,7 +9,7 @@ const ModalLoading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'dac65dc36124b038728e843240d126432d85e987' }, index.h("ix-spinner", { key: '639371732304b733f79cf8498e46442ff6a442df', variant: "primary" }), index.h("span", { key: 'a9bf046b8c00552a4135cc5046789027abd1803e', class: 'loading-text' }, index.h("slot", { key: '362185ef3806ddb57c90f6fdf776cb3563baf903' }))));
+        return (index.h(index.Host, { key: '404214a461e55c9ee78aad8dc277dab5be8a9b42' }, index.h("ix-spinner", { key: '96278c04d8c7798b411f6807e5c7a1ea26b03d45', variant: "primary" }), index.h("span", { key: 'cad3eec78defa832ffc679f86941ffc301bc5b5c', class: 'loading-text' }, index.h("slot", { key: '96cf92b74f62260ee97b7bdae73557a2ee5517ec' }))));
     }
 };
 ModalLoading.style = modalLoadingCss;

package/dist/cjs/ix-modal.cjs.entry.js

@@ -189,17 +189,17 @@ const Modal = class {
         this.ariaAttributes = a11y.a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (index.h(index.Host, { key: '192ded80682348ff755d91a613faaca1a8b0753f', class: {
+        return (index.h(index.Host, { key: '0170729f63356223c39bcd6b0bb7124b2036f2c4', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
-            } }, index.h("div", { key: '709679987ecf4e1b1e03374c7c9373332fe01a74', class: "dialog-backdrop" }, index.h("dialog", { key: '10222a2e51235c3be195eb6b2e7d2ad2e1d887f9', "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, index.h("div", { key: '436b9f2efce7279defa936c9ee79fa44d090e388', class: "dialog-backdrop" }, index.h("dialog", { key: 'e3bc4891433993a5dcbe186011fd91d70277ca3d', "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, index.h("slot", { key: 'a9c321d71d3e08d581bb2e6ad9e3d377663a2c52' })))));
+            } }, index.h("slot", { key: '5a3e86b9c04f8e1564be6026b0352940978f0666' })))));
     }
     get hostElement() { return index.getElement(this); }
 };