@siemens/ix 0.0.0-pr-1974-20250624072317 → 0.0.0-pr-1974-20250627114851

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
 var makeRef = require('./make-ref-BaH6_YJk.js');
 var menuService = require('./menu-service-D4IDwDz5.js');
@@ -86,15 +86,15 @@ const MenuItem = class {
                 slot: 'bottom',
             };
         }
-        return (index.h(index.Host, Object.assign({ key: '212e4daec733310184aa933f059ca316f2a0e273', class: {
+        return (index.h(index.Host, Object.assign({ key: '3c97be99972609f07b9ebd733c84237e90a2061e', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), index.h("button", { key: '48a07bbbcd0f96f3bcd0d3588914b124042e26b4', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, this.icon && index.h("ix-icon", { key: 'bda340466dabe45e2c350e07ad35ebb4721cc383', 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: 'f96a99a5504474ae3fafab55507fd2138a31148d', class: "tab-text text-default" }, this.label, index.h("slot", { key: '4792a5228724e4bdb2e7f4eeb13f0dae8d74460a' }))), !this.isCategory &&
+            } }, extendedAttributes), index.h("button", { key: '0a8a4ded3ca8f4fdfd8a875a62d2437d30098057', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, this.icon && index.h("ix-icon", { key: '61ffdd54c8123942e05eea275a40e6dc099a0bba', 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: '54a456cb810b2c8c393b5b81ebee9334c58ce1db', class: "tab-text text-default" }, this.label, index.h("slot", { key: 'a4c0d80d3778add2f069dbc0c0597b257b468ec8' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
-            !this.menuExpanded && (index.h("ix-tooltip", { key: '047e3c337d81a46e10175000ef9f76c89eba4642', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+            !this.menuExpanded && (index.h("ix-tooltip", { key: 'e9e5e232cb0e49f1e1e752a8a2baae31179cc86c', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -0,0 +1,123 @@
+'use strict';
+
+var index = require('./index-CbtIH46j.js');
+var index$1 = require('./index-CQjVPqdk.js');
+
+const menuSettingsCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}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 *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host .settings-tabs{margin-bottom:1.5rem}";
+
+const MenuSettings = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.createEvent(this, "tabChange", 7);
+        this.close = index.createEvent(this, "close", 7);
+        /**
+         * Label of first tab
+         */
+        this.label = 'Settings';
+        /** @internal */
+        this.show = false;
+    }
+    updateTab(label) {
+        setTab(this, label);
+    }
+    componentWillLoad() {
+        initialize(this);
+    }
+    componentDidLoad() {
+        index.forceUpdate(this.el);
+    }
+    render() {
+        return index.h(MenuTabs, { key: 'a59dd5a81b91ff4ae7f516cb192700bffaee3f84', context: this });
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "activeTabLabel": ["updateTab"]
+    }; }
+};
+MenuSettings.style = menuSettingsCss;
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function getItems(context) {
+    return Array.from(context.el.querySelectorAll(context instanceof MenuSettings
+        ? 'ix-menu-settings-item'
+        : 'ix-menu-about-item'));
+}
+function setTab(context, label) {
+    const { defaultPrevented } = context.tabChange.emit(label);
+    if (defaultPrevented) {
+        return;
+    }
+    context.activeTabLabel = label;
+    context.items.forEach((i) => {
+        i.style.display = 'none';
+        if (i.label === context.activeTabLabel) {
+            i.style.display = 'block';
+        }
+    });
+}
+function initialize(context) {
+    context.items = getItems(context);
+    if (context.items.length) {
+        const selectedLabel = context.activeTabLabel || context.items[0].label;
+        if (selectedLabel) {
+            setTab(context, selectedLabel);
+        }
+    }
+    context.items.forEach((item) => {
+        item.addEventListener('labelChange', (e) => {
+            context.items = getItems(context);
+            if (e.detail.oldLabel === context.activeTabLabel) {
+                context.activeTabLabel = e.detail.newLabel;
+            }
+        });
+    });
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const getTabItems = (context) => {
+    return context.items.map(({ label }) => {
+        return (index.h("ix-tab-item", { selected: label === context.activeTabLabel, onTabClick: (e) => e.preventDefault(), onClick: () => {
+                if (label) {
+                    setTab(context, label);
+                }
+            } }, label));
+    });
+};
+const MenuTabs = ({ context }) => {
+    const selectedIndex = context.items.findIndex((item) => item.label === context.activeTabLabel);
+    return (index.h(index.Host, { slot: context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about', class: {
+            show: context.show,
+        } },
+        index.h("div", { class: context instanceof MenuSettings ? 'settings-header' : 'about-header' },
+            index.h("h2", { class: "text-h2" }, context.label),
+            index.h("ix-icon-button", { ghost: true, size: "24", icon: index$1.iconClose, onClick: (e) => context.close.emit({
+                    name: context instanceof MenuSettings
+                        ? 'ix-menu-settings'
+                        : 'ix-menu-about',
+                    nativeEvent: e,
+                }) })),
+        index.h("ix-tabs", { selected: selectedIndex !== -1 ? selectedIndex : 0 }, getTabItems(context)),
+        index.h("slot", null)));
+};
+
+exports.MenuSettings = MenuSettings;
+exports.MenuTabs = MenuTabs;
+exports.initialize = initialize;
+exports.setTab = setTab;
+//# sourceMappingURL=ix-menu-settings-Dbt7Q2tj.js.map
+
+//# sourceMappingURL=ix-menu-settings-Dbt7Q2tj.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-menu-settings-Dbt7Q2tj.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@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $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: $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  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /** @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(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","/*\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  const { defaultPrevented } = context.tabChange.emit(label);\n\n  if (defaultPrevented) {\n    return;\n  }\n\n  context.activeTabLabel = label;\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === context.activeTabLabel) {\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          ghost\n          size=\"24\"\n          icon={iconClose}\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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 
 const menuSettingsItemCss = ":host{display:block}";
 
@@ -17,7 +17,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '0b3eefcc50ced96c2d024f44ca3a9ba1e48cd1c2' }, index.h("slot", { key: '86e2570bf9670b222d8bb883af0002100ea78279' })));
+        return (index.h(index.Host, { key: '2c46c471680f6a653d64858cec0f991d9a557c02' }, index.h("slot", { key: 'e840ca9e900cd45d31cbf41fcafa3e1feb4757a7' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var ixMenuSettings_entry = require('./ix-menu-settings-BkPNtMal.js');
-require('./index-BDliOtbY.js');
+var ixMenuSettings_entry = require('./ix-menu-settings-Dbt7Q2tj.js');
+require('./index-CbtIH46j.js');
 require('./index-CQjVPqdk.js');
 
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 var anime_es = require('./anime.es-CgS5X9-e.js');
 var index$2 = require('./index-zz3ynohH.js');
 var context = require('./context-B8bRIFA2.js');
@@ -461,44 +461,44 @@ const Menu = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'f33d825f3a05db6bc2bc3220e6c6145b92def178', class: {
+        return (index.h(index.Host, { key: '0a82c9c443aee1e35eb9177193446311e324235b', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, index.h("nav", { key: '70e3ee98bcf1004a3483466585287701eccda07e', class: {
+            }, slot: "menu" }, index.h("nav", { key: '591c2c777fa786e2ae5c747ddf748a1eb78e3ecb', class: {
                 menu: true,
                 expanded: this.expand,
-            } }, index.h("div", { key: '0bc7a9f77dac1f986fcf4ed9bca92e2ef724e7e0', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { key: 'da9ed4391c3848f828654ccdf31baf0549531055', 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: 'affac70b7988e246bcc1ee1f05117a00c7b06b9a', onClick: () => {
+            } }, index.h("div", { key: 'a5419a281f80e6fa2fcd6a77ea87b035c52919aa', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { key: '26f50499ee3b98b0d4f3d20d798505a6274f78b7', 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: '69b93153a2ecabb8c0673490a466a30e52a2b5bb', onClick: () => {
                 this.showAppSwitch();
-            }, icon: index$1.iconApps, ghost: true }))), index.h("div", { key: 'fb7e2e7a6dfb6345db462c3505b83931abad1c46', id: "menu-tabs", style: {
+            }, icon: index$1.iconApps, ghost: true }))), index.h("div", { key: '648d03ac32f70239abdd06fadeca9906afef9112', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: '0579aefc63155a54eec4676357e9c13d53b532f4', class: "tabs-shadow-container" }, index.h("div", { key: 'f8e8087f402b2e7fae2570c164abf94407d1993b', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: 'f4472d51bf26d28bf83c7a381be6305fe748f001', class: "tabs-shadow-container" }, index.h("div", { key: '84585c74c3b5c6ba7d304298a22a19c79e1d3dde', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), index.h("div", { key: '57760012cd3138ed2642e5763e97b0aba1480e43', class: {
+            } }), index.h("div", { key: '0e7777f3a7ca89b21a9c3b266e3ce4e7fb9ec129', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: '801ebc6ce0a52b7556af7594604d4fff4a141722', class: "menu-avatar" }, index.h("slot", { key: 'f469a4ed48f1d3400b9450eba05cbfeb5ecfa2e8', name: "ix-menu-avatar" })), index.h("slot", { key: 'df73e527ff81ea63c8730354554defd54558776a', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: '1693654345856d262bd850d88740aa4a87c43c74', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: '733c00670337417bd4ffe2e3eec2b8bdbef9f548', class: "menu-avatar" }, index.h("slot", { key: 'a484b0cc47a9ea9ce2ee617e506dec27633db8b8', name: "ix-menu-avatar" })), index.h("slot", { key: 'f31b045d1baf0bedbc334c9b6223a38c30a08b35', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: '504778e5f20b8ff70e34f81b4e626ce3359e5b71', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), index.h("div", { key: '01f18b245c60dbe54fc0d594ec504f92e00b7642', class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), index.h("div", { key: '5a3c4beceeca8824b6efced4cc7811d91fcc7b46', 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, index.h("div", { key: 'd004cb5daa680766d5f7b126ca772694e88913f9', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: '4819e26208049ec8bd02d68c6ceea55c7561b2f8', name: "bottom" })), index.h("div", { key: '08ef3fcca395182cc9e86b8ebbc23148ac2bf1ea', id: "popover-area" }), 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, index.h("div", { key: '7a02278bb6f805c707425c8e23f07c8cb720e8b9', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: '00b073b177178b88f3020a00a4131eba0ca80c11', name: "bottom" })), index.h("div", { key: 'bcc8a61e52c6b4785698f8335446d290645b0b9b', id: "popover-area" }), 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, 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, 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), index.h("div", { key: '58c5b0f708e2a593aa7416a765a446465e37faf7', class: {
+            }, icon: index$1.iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : 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, 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), index.h("div", { key: 'cb9ca1d088c2c212c2e09a9d76867c569c613c8d', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, index.h("div", { key: 'c4ba83dd66595c0fad819a1a490b2e42b0aa38ce', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: '7671f01c78c577993b9abc329a560ac4b07b6ae9', class: 'menu-overlay-container' }, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null))));
+            } }, index.h("div", { key: 'd115e9646a2835c246341ab1f89c4df691cffc40', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: 'af358812d89ac0ac38dca2abd7030660e00ae876', 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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 var anime_es = require('./anime.es-CgS5X9-e.js');
 var index$1 = require('./index-CQjVPqdk.js');
 
@@ -44,7 +44,7 @@ const MessageBar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'bdca530b8707b94e4b94c0976986a127ab9142c4' }, index.h("div", { key: 'a52bc91603d4610f1081947519f7adfcb16de098', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: 'c2ccf0a0f507901f92b2503fdd0d4993f2151bc0', color: this.color, name: this.icon }), index.h("div", { key: '04ef6ca731befb5e3ab8a67f9e36aaf3c5642c55', class: "message-content" }, index.h("slot", { key: '0fb41fed1ee5487f943879dcf3e4635d83bc0a00' })), this.dismissible ? (index.h("ix-icon-button", { icon: index$1.iconClose, size: "24", ghost: true, onClick: () => {
+        return (index.h(index.Host, { key: '0bd38e554e2187671f52e24dce3a98f2adde2a31' }, index.h("div", { key: '45738b43dd3877625f8933e3ae2d0ef96e9c58f6', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: '2355cddb483927e4d8cd046daed919ef0e446eb2', color: this.color, name: this.icon }), index.h("div", { key: '2238498ee5f6210db085a02048f9057a5b8e04d0', class: "message-content" }, index.h("slot", { key: 'b3554201cb4c09d769fa38697e89b784e12c2a71' })), this.dismissible ? (index.h("ix-icon-button", { icon: index$1.iconClose, size: "24", ghost: true, onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 var shadowDom = require('./shadow-dom-DT01VwcB.js');
 var index$1 = require('./index-CQjVPqdk.js');
 
@@ -11,7 +11,7 @@ const ModalContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4be64f4f798e7772dfc27e115ec82cdb9374fb13' }, index.h("slot", { key: 'e284542d3f4686d348c61f04a65b333b7d4ed9bd' })));
+        return (index.h(index.Host, { key: '2bde588bad49f46f6975296eff9eca9606a93a50' }, index.h("slot", { key: '7a933c03c2c1a6558f050cd02759ef7816f225a9' })));
     }
 };
 ModalContent.style = modalContentCss;
@@ -49,7 +49,7 @@ const ModalHeader = class {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (index.h(index.Host, { key: '469260e802d093b4bcc15d159786682ebaf55b19' }, this.icon ? (index.h("ix-icon", { name: this.icon, color: this.iconColor, size: "32" })) : null, index.h("div", { key: '286573f8a153b8ed31ceecacfb3111df228e2a55', class: "modal-title" }, index.h("ix-typography", { key: 'de051186505ce93644011a0193f0bea61b812205', format: "h5" }, index.h("slot", { key: '4497b8ca1360bafcdb3a4438aa18b75caf5b17e4' }))), !this.hideClose ? (index.h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), ghost: true, icon: index$1.iconClose })) : null));
+        return (index.h(index.Host, { key: 'd9e6d78a14a90dc7d90ddcc53d7319655df4cc73' }, this.icon ? (index.h("ix-icon", { name: this.icon, color: this.iconColor, size: "32" })) : null, index.h("div", { key: '0987c59bd84c59e01283d389730a09c993d11ccd', class: "modal-title" }, index.h("ix-typography", { key: '41acad668a08d2c6bcf8f9a3d5b56768798c7ce3', format: "h5" }, index.h("slot", { key: '1533cecaf059d5bae7ba488a177457244552e9c1' }))), !this.hideClose ? (index.h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), ghost: true, icon: index$1.iconClose })) : null));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 
 const modalFooterCss = ":host{display:flex;padding:0.5rem;justify-content:flex-end;align-items:center;gap:0.5rem;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}";
 
@@ -9,7 +9,7 @@ const ModalFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3388ed1336e65682c96eed4a0dbca92385857efc' }, index.h("slot", { key: '528cd596ac9a340002e05e6f0c97c671d6260999' })));
+        return (index.h(index.Host, { key: '9d9c93e9b2a30cb9ebcea1a89b1365c1cfe56a70' }, index.h("slot", { key: '5adfdf039b248800b01a623551ea476e029144b0' })));
     }
 };
 ModalFooter.style = modalFooterCss;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 
 const modalLoadingCss = ":host{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem;overflow:hidden}:host .loading-text{display:block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
@@ -9,7 +9,7 @@ const ModalLoading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c464743230eac8e958ea537de3f106a87998d013' }, index.h("ix-spinner", { key: '75c7dc3ec65b50fdd24c2408edb6a719b31d8195', variant: "primary" }), index.h("span", { key: '5f95a8a338d2ab59faf040ebbf9fb4b79f3adc13', class: 'loading-text' }, index.h("slot", { key: 'faa67dcf4f19eb79e9dbf625d4f616e6a638929d' }))));
+        return (index.h(index.Host, { key: 'dd1c49bcea29fc40509971b2ec9e9a37eb2e16f2' }, index.h("ix-spinner", { key: 'b2cea2316d5cc1a8734b975476b754aacb9e3c8b', variant: "primary" }), index.h("span", { key: 'e258e8ff2f1de504ec43b5d0fee42caba8dd4ed2', class: 'loading-text' }, index.h("slot", { key: '8cfed784918cfac55a7a435d3ca19c5ff5da0170' }))));
     }
 };
 ModalLoading.style = modalLoadingCss;

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-BDliOtbY.js');
+var index = require('./index-CbtIH46j.js');
 var anime_es = require('./anime.es-CgS5X9-e.js');
 var a11y = require('./a11y-B_6chCvu.js');
 var animation = require('./animation-CHJ_toEA.js');
-var listener = require('./listener-BJXzadPO.js');
+var listener = require('./listener-BT212YoD.js');
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -188,17 +188,17 @@ const Modal = class {
         this.ariaAttributes = a11y.a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (index.h(index.Host, { key: 'f2cf319544b05d55221d24f619e50e665ff4d63d', class: {
+        return (index.h(index.Host, { key: 'a1cfb4fb59ef0467cc9ddfe575a448b2aabd55ed', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, index.h("div", { key: '6321a973b57268a1d3b3260691a736664ad8cc7f', class: "dialog-backdrop" }, index.h("dialog", { key: '5e7e0bb5428e3fd1e7103cf3e77edd2df98766f9', "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, index.h("div", { key: '945516bc44adfd9aaf7f6d9deb205ad887b3664c', class: "dialog-backdrop" }, index.h("dialog", { key: 'dc463106666cc225a11caa6d633f67759a21a328', "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(), onClick: (event) => this.onModalClick(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, index.h("slot", { key: '4a031ffdadca078855b3d8389c8de786844e62b5' })))));
+            } }, index.h("slot", { key: '433ec43a22ddaf909ab5933face2d1a5b83cd1e4' })))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ix-modal.entry.cjs.js","mappings":"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","names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean","OnListener"],"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: 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\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    --ix-dialog-padding: 1rem;\n\n    margin: 0;\n    padding: var(--ix-dialog-padding);\n    padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));\n    padding-bottom: calc(\n      var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom)\n    );\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    border-radius: 0;\n    left: 0 !important;\n    top: 0 !important;\n    transform: none !important;\n    box-shadow: none;\n\n    --ix-dialog-full-screen-height: calc(\n      var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n    );\n\n    width: calc(100% - var(--ix-dialog-padding) * 2);\n    min-width: calc(100% - var(--ix-dialog-padding) * 2);\n    max-width: calc(100% - var(--ix-dialog-padding) * 2);\n\n    min-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n    max-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n  }\n\n  dialog.modal-size-full-screen::backdrop {\n    background: var(--theme-modal--background);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0;\n    left: 0;\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: 3rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   */\n  @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  @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   * 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)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    if (event.target !== this.dialog) {\n      return;\n    }\n\n    const rect = this.dialog!.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-modal.entry.cjs.js","mappings":"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","names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean","OnListener"],"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: 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\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    --ix-dialog-padding: 1rem;\n\n    margin: 0;\n    padding: var(--ix-dialog-padding);\n    padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));\n    padding-bottom: calc(\n      var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom)\n    );\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    border-radius: 0;\n    left: 0 !important;\n    top: 0 !important;\n    transform: none !important;\n    box-shadow: none;\n\n    --ix-dialog-full-screen-height: calc(\n      var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n    );\n\n    width: calc(100% - var(--ix-dialog-padding) * 2);\n    min-width: calc(100% - var(--ix-dialog-padding) * 2);\n    max-width: calc(100% - var(--ix-dialog-padding) * 2);\n\n    min-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n    max-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n  }\n\n  dialog.modal-size-full-screen::backdrop {\n    background: var(--theme-modal--background);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0;\n    left: 0;\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: 3rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\nimport { IxModalSize } from './modal.types';\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  @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  @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   * 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)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    if (event.target !== this.dialog) {\n      return;\n    }\n\n    const rect = this.dialog!.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"ix-modal.entry.cjs.js","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: 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\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    --ix-dialog-padding: 1rem;\n\n    margin: 0;\n    padding: var(--ix-dialog-padding);\n    padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));\n    padding-bottom: calc(\n      var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom)\n    );\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    border-radius: 0;\n    left: 0 !important;\n    top: 0 !important;\n    transform: none !important;\n    box-shadow: none;\n\n    --ix-dialog-full-screen-height: calc(\n      var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n    );\n\n    width: calc(100% - var(--ix-dialog-padding) * 2);\n    min-width: calc(100% - var(--ix-dialog-padding) * 2);\n    max-width: calc(100% - var(--ix-dialog-padding) * 2);\n\n    min-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n    max-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n  }\n\n  dialog.modal-size-full-screen::backdrop {\n    background: var(--theme-modal--background);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0;\n    left: 0;\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: 3rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   */\n  @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  @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   * 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)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    if (event.target !== this.dialog) {\n      return;\n    }\n\n    const rect = this.dialog!.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean","OnListener"],"mappings":"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"}
+{"version":3,"file":"ix-modal.entry.cjs.js","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: 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\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    --ix-dialog-padding: 1rem;\n\n    margin: 0;\n    padding: var(--ix-dialog-padding);\n    padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));\n    padding-bottom: calc(\n      var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom)\n    );\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    border-radius: 0;\n    left: 0 !important;\n    top: 0 !important;\n    transform: none !important;\n    box-shadow: none;\n\n    --ix-dialog-full-screen-height: calc(\n      var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n    );\n\n    width: calc(100% - var(--ix-dialog-padding) * 2);\n    min-width: calc(100% - var(--ix-dialog-padding) * 2);\n    max-width: calc(100% - var(--ix-dialog-padding) * 2);\n\n    min-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n    max-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n  }\n\n  dialog.modal-size-full-screen::backdrop {\n    background: var(--theme-modal--background);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0;\n    left: 0;\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: 3rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\nimport { IxModalSize } from './modal.types';\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  @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  @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   * 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)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    if (event.target !== this.dialog) {\n      return;\n    }\n\n    const rect = this.dialog!.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean","OnListener"],"mappings":"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"}