@siemens/ix 1.5.0-beta.0 → 1.5.0-beta.2

package/dist/collection/components/group/group.css

@@ -56,10 +56,9 @@
   height: 4rem;
   min-height: 4rem;
   max-height: 4rem;
-  border-radius: 0.25rem;
+  border-radius: var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;
   display: flex;
   background-color: var(--theme-group-item--background);
-  border: 1px solid var(--theme-group-item--border-color);
   color: var(--theme-group-header--color);
   cursor: pointer;
 }
@@ -68,27 +67,36 @@
 }
 :host .group-header:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-group-item--background--hover);
-  border-color: var(--theme-group-item--border-color--hover);
+}
+:host .group-header:not(.disabled):not(:disabled):hover.selected {
+  background-color: var(--theme-group-item--background--selected);
 }
 :host .group-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
 :host .group-header:not(.disabled):not(:disabled):active {
   background-color: var(--theme-group-item--background--active);
-  border-color: var(--theme-group-item--border-color--active);
+}
+:host .group-header:not(.disabled):not(:disabled):active.selected {
+  background-color: var(--theme-group-item--background--selected);
 }
 :host .group-header:not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--focus--border-color);
-  border-radius: var(--theme-group--border-radius--focus);
+  border: 1px solid var(--theme-color-focus-bdr);
+  border-radius: var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;
   outline: none;
 }
 :host .group-header.selected {
-  border: var(--theme-primary-bdr-2);
   background-color: var(--theme-group-item--background--selected);
 }
+:host .group-header.selected .group-header-selection-indicator {
+  background-color: var(--theme-group-item-indicator--background--selected);
+}
 :host .group-header .group-header-selection-indicator {
   background-color: var(--theme-color-input--focus);
 }
+:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected {
+  background-color: var(--theme-group-item-indicator--background--selected);
+}
 :host .group-header-clickable {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -97,12 +105,9 @@
   width: 100%;
   min-width: 0;
 }
-:host .group-header.expand {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
 :host .group-header-selection-indicator {
   width: 0.25rem;
+  border-top-left-radius: var(--theme-group--border-radius);
 }
 :host .group-header-content {
   overflow: hidden;
@@ -112,9 +117,9 @@
   flex-direction: row;
   justify-content: space-between;
   min-width: 0;
+  flex-grow: 1;
   padding: 0.5rem;
   padding-left: 0;
-  width: 100%;
 }
 :host .group-header-content .group-header-props-container {
   width: 100%;
@@ -148,6 +153,7 @@
   margin: 0.5rem;
   -webkit-margin-end: 0.25rem;
           margin-inline-end: 0.25rem;
+  min-width: 1.5rem;
 }
 :host .group-content {
   display: flex;
@@ -156,4 +162,7 @@
 :host .footer {
   height: auto;
   min-height: 0;
+}
+:host .hidden {
+  display: none;
 }

package/dist/collection/components/group/group.js

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
 export class Group {
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
@@ -20,7 +21,7 @@ export class Group {
   get footer() {
     return this.hostElement.querySelector('.footer');
   }
-  constructor() { this.suppressHeaderSelection = false; this.header = undefined; this.subHeader = undefined; this.collapsed = true; this.selected = undefined; this.index = undefined; this.expandOnHeaderClick = false; this.dropdownTriggerRef = undefined; }
+  constructor() { this.suppressHeaderSelection = false; this.header = undefined; this.subHeader = undefined; this.collapsed = true; this.selected = undefined; this.index = undefined; this.expandOnHeaderClick = false; this.itemSelected = false; this.dropdownTriggerRef = undefined; this.slotSize = this.groupItems.length; }
   async onKeyDown(event) {
     const targetElement = event.target;
     if (!this.hostElement.contains(targetElement)) {
@@ -42,12 +43,7 @@ export class Group {
     }
   }
   onExpandClick(event) {
-    const wasCollapsed = this.collapsed;
     this.collapsed = !this.collapsed;
-    if (!wasCollapsed && this.index !== undefined) {
-      this.index = undefined;
-      this.setGroupSelection(true);
-    }
     this.collapsedChanged.emit(this.collapsed);
     event.stopPropagation();
   }
@@ -66,6 +62,11 @@ export class Group {
       this.index = index;
       this.selectItem.emit(index);
     }
+    if (this.index >= 0) {
+      this.itemSelected = true;
+    }
+    else
+      this.itemSelected = false;
     this.setGroupSelection(false);
   }
   setGroupSelection(selection) {
@@ -78,11 +79,16 @@ export class Group {
     var _a;
     this.groupItems.forEach((item, index) => {
       var _a;
+      if (this.selected === true) {
+        item.selected = false;
+        this.index = undefined;
+        this.itemSelected = false;
+        return;
+      }
       item.selected = index === this.index;
       item.index = index;
       item.classList.remove('last');
-      if (!((_a = this.footer) === null || _a === void 0 ? void 0 : _a.children.length) &&
-        index === this.groupItems.length - 1) {
+      if (!((_a = this.footer) === null || _a === void 0 ? void 0 : _a.children.length) && index === this.slotSize - 1) {
         item.classList.add('last');
       }
     });
@@ -91,16 +97,32 @@ export class Group {
     }
   }
   componentDidLoad() {
+    this.observer = createMutationObserver(() => {
+      this.slotSize = this.groupItems.length;
+    });
+    this.observer.observe(this.groupContent, {
+      childList: true,
+    });
     this.groupContent.addEventListener('selectedChanged', (evt) => {
       this.onItemClick(evt.detail.index);
     });
   }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
   render() {
     return (h(Host, null, h("div", { class: {
         'group-header': true,
         expand: !this.collapsed,
         selected: this.selected,
-      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: "group-header-selection-indicator" }), h("ix-icon", { class: "btn-expand-header", name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) }), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("ix-group-context-menu", null, h("slot", { name: "dropdown" }))), h("div", { class: {
+      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: {
+        'group-header-selection-indicator': true,
+        'group-header-selection-indicator-item-selected': this.itemSelected,
+      } }), h("div", { class: "btn-expand-header" }, h("ix-icon", { class: {
+        hidden: this.slotSize === 0,
+      }, name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) })), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("ix-group-context-menu", null, h("slot", { name: "dropdown" }))), h("div", { class: {
         'group-content': true,
         'd-none': this.collapsed,
       } }, h("slot", null)), h("div", { class: "d-none" }, h("ix-group-item", { class: "footer last", suppressSelection: true, focusable: false }, h("slot", { name: "footer" })))));
@@ -245,7 +267,9 @@ export class Group {
   }
   static get states() {
     return {
-      "dropdownTriggerRef": {}
+      "itemSelected": {},
+      "dropdownTriggerRef": {},
+      "slotSize": {}
     };
   }
   static get events() {

package/dist/collection/components/group/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  scoped: true,\n})\nexport class Group {\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.querySelector('.group-content');\n  }\n\n  get footer() {\n    return this.hostElement.querySelector('.footer');\n  }\n\n  @State() dropdownTriggerRef: HTMLElement;\n\n  constructor() {}\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      if (targetElement.classList.contains('group-header')) {\n        if (this.suppressHeaderSelection) {\n          this.collapsed = !this.collapsed;\n        } else {\n          this.selected = !this.selected;\n        }\n      } else if (targetElement.matches('ix-group-item')) {\n        const groupItem = targetElement as HTMLIxGroupItemElement;\n        groupItem.selected = !groupItem.selected;\n      }\n    }\n  }\n\n  private onExpandClick(event: Event) {\n    const wasCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n\n    if (!wasCollapsed && this.index !== undefined) {\n      this.index = undefined;\n      this.setGroupSelection(true);\n    }\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n      item.classList.remove('last');\n      if (\n        !this.footer?.children.length &&\n        index === this.groupItems.length - 1\n      ) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  componentDidLoad() {\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div class=\"group-header-selection-indicator\"></div>\n            <ix-icon\n              class=\"btn-expand-header\"\n              name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n              onClick={(e) => this.onExpandClick(e)}\n            ></ix-icon>\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n            'd-none': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div class=\"d-none\">\n          <ix-group-item\n            class=\"footer last\"\n            suppressSelection={true}\n            focusable={false}\n          >\n            <slot name=\"footer\"></slot>\n          </ix-group-item>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  scoped: true,\n})\nexport class Group {\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  @State() itemSelected = false;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.querySelector('.group-content');\n  }\n\n  get footer() {\n    return this.hostElement.querySelector('.footer');\n  }\n\n  @State() dropdownTriggerRef: HTMLElement;\n\n  @State() slotSize = this.groupItems.length;\n\n  constructor() {}\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      if (targetElement.classList.contains('group-header')) {\n        if (this.suppressHeaderSelection) {\n          this.collapsed = !this.collapsed;\n        } else {\n          this.selected = !this.selected;\n        }\n      } else if (targetElement.matches('ix-group-item')) {\n        const groupItem = targetElement as HTMLIxGroupItemElement;\n        groupItem.selected = !groupItem.selected;\n      }\n    }\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n      item.classList.remove('last');\n      if (!this.footer?.children.length && index === this.slotSize - 1) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n            'd-none': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div class=\"d-none\">\n          <ix-group-item\n            class=\"footer last\"\n            suppressSelection={true}\n            focusable={false}\n          >\n            <slot name=\"footer\"></slot>\n          </ix-group-item>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/group-item/group-item.css

@@ -51,7 +51,6 @@
   padding: 0.5rem 1.5rem 0.5rem 2.5rem;
   position: relative;
   margin-top: 0.0625rem;
-  border: 1px solid var(--theme-group-item--border-color);
   outline: none;
   background-color: var(--theme-group-item--background);
 }
@@ -96,6 +95,9 @@
   background-color: var(--theme-group-item--background--hover);
   border-color: var(--theme-group-item--border-color--hover);
 }
+:host:not(.suppress-selection):not(.disabled):not(:disabled):hover.selected {
+  background-color: var(--theme-group-item--background--selected);
+}
 :host:not(.suppress-selection):not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -103,14 +105,16 @@
   background-color: var(--theme-group-item--background--active);
   border-color: var(--theme-group-item--border-color--active);
 }
+:host:not(.suppress-selection):not(.disabled):not(:disabled):active.selected {
+  background-color: var(--theme-group-item--background--selected);
+}
 :host.selected {
   border-top-width: 0.062rem !important;
-  border-color: var(--theme-group-item--border-color--selected);
   background-color: var(--theme-group-item--background--selected);
 }
 :host.selected .group-entry-selection-indicator {
-  background-color: var(--theme-color-input--focus);
+  background-color: var(--theme-group-item-indicator--background--selected);
 }
 :host:not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--focus--border-color) !important;
+  border: 1px solid var(--theme-color-focus-bdr) !important;
 }

package/dist/collection/components/index-button/index-button.css

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+:host {
+  max-height: 2rem;
+}
+:host .btn {
+  min-width: 2rem;
+  height: 2rem;
+}
+:host .btn.selected {
+  background-color: var(--theme-btn-invisible-secondary--background--selected);
+  color: var(--theme-btn-invisible-secondary--color--selected);
+}

package/dist/collection/components/index-button/index-button.js

@@ -0,0 +1,83 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+import { h, Host } from '@stencil/core';
+/**
+ * @internal
+ */
+export class IxIndexButton {
+  constructor() {
+    this.variant = 'Primary';
+    this.selected = undefined;
+  }
+  render() {
+    return (h(Host, null, h("button", { class: {
+        btn: true,
+        'btn-invisible-primary': this.variant === 'Primary',
+        'btn-invisible-secondary': this.variant === 'Secondary',
+        selected: this.selected,
+      } }, h("slot", null))));
+  }
+  static get is() { return "ix-index-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IndexButtonVariant",
+          "resolved": "\"Primary\" | \"Secondary\"",
+          "references": {
+            "IndexButtonVariant": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/index-button/index-button.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button variant"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'Primary'"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Selection state"
+        },
+        "attribute": "selected",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=index-button.js.map

package/dist/collection/components/index-button/index-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-button.js","sourceRoot":"","sources":["../../../src/components/index-button/index-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;GAEG;AAMH,MAAM,OAAO,aAAa;;mBAIc,SAAS;;;EAO/C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cACE,KAAK,EAAE;UACL,GAAG,EAAE,IAAI;UACT,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;UACvD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,eAAa,CACN,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type IndexButtonVariant = ButtonVariant;\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-index-button',\n  styleUrl: 'index-button.scss',\n  scoped: true,\n})\nexport class IxIndexButton {\n  /**\n   * Button variant\n   */\n  @Prop() variant: IndexButtonVariant = 'Primary';\n\n  /**\n   * Selection state\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': this.variant === 'Primary',\n            'btn-invisible-secondary': this.variant === 'Secondary',\n            selected: this.selected,\n          }}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-group/input-group.css

@@ -24,4 +24,7 @@
 }
 :host .group-end {
   right: 0px;
+}
+:host ::slotted(*) {
+  display: flex;
 }

package/dist/collection/components/menu-item/menu-item.css

@@ -37,6 +37,13 @@
 :host {
   position: relative;
   display: block;
+  cursor: pointer;
+}
+:host:not(.disabled):not(:disabled).hover, :host:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+:host:not(.disabled):not(:disabled).active, :host:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
 }
 :host .tab {
   display: flex;
@@ -46,15 +53,6 @@
   z-index: 500;
   padding-left: 1.25rem;
 }
-:host .tab:not(.selected) {
-  cursor: pointer;
-}
-:host .tab:not(.selected):not(.disabled):not(:disabled).hover, :host .tab:not(.selected):not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-ghost--background--hover);
-}
-:host .tab:not(.selected):not(.disabled):not(:disabled).active, :host .tab:not(.selected):not(.disabled):not(:disabled):active {
-  background-color: var(--theme-ghost--background--active);
-}
 :host i.glyph {
   color: var(--theme-nav-item-primary-icon--color);
   position: relative;
@@ -137,7 +135,14 @@
 }
 :host.bottom-tab .tab::before, :host[slot=bottom] .tab::before {
   height: 2.25rem;
+  background-color: transparent;
 }
 :host.bottom-tab.active .tab, :host.bottom-tab.selected .tab, :host[slot=bottom].active .tab, :host[slot=bottom].selected .tab {
-  background-color: var(--theme-color-1);
+  background-color: var(--theme-nav-item-secondary--background--selected);
+}
+:host.bottom-tab.active:hover, :host.bottom-tab.selected:hover, :host[slot=bottom].active:hover, :host[slot=bottom].selected:hover {
+  background-color: var(--theme-nav-item-secondary--background--selected);
+}
+:host.bottom-tab.active:active, :host.bottom-tab.selected:active, :host[slot=bottom].active:active, :host[slot=bottom].selected:active {
+  background-color: var(--theme-nav-item-secondary--background--selected);
 }

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

@@ -9,8 +9,13 @@
 import { h, Host, } from '@stencil/core';
 import anime from 'animejs';
 import Animation from '../utils/animation';
+let modalInstanceId = 0;
+function getNextModalInstanceId() {
+  return `ix-modal-instance-${++modalInstanceId}`;
+}
 export class Modal {
   constructor() {
+    this.modalId = getNextModalInstanceId();
     this.onKeydown = this.handleKeydown.bind(this);
     this.animation = true;
     this.ariaDescribedBy = undefined;
@@ -121,7 +126,7 @@ export class Modal {
     this.slideUp(this.modalContent, () => this.closed.emit(result));
   }
   render() {
-    return (h(Host, null, h("div", { class: {
+    return (h(Host, { id: this.modalId }, h("div", { class: {
         animation: this.animation,
         modal: true,
         backdrop: this.backdrop === 'static' || this.backdrop,

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  scoped: true,\n})\nexport class Modal {\n  @Element() hostElement: HTMLIxModalElement;\n\n  /**\n   * Should the modal be animtated\n   */\n  @Prop() animation = true;\n\n  /**\n   *\n   */\n  @Prop() ariaDescribedBy: string;\n\n  /**\n   *\n   */\n  @Prop() ariaLabelledBy = 'modal-title';\n\n  /**\n   * Adds a dimming layer to the modal.\n   * This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks).\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Backdrop class\n   */\n  @Prop() backdropClass: string;\n\n  /**\n   * BeforeDismiss callback\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Content of modal\n   */\n  @Prop() content: HTMLElement | string;\n\n  /**\n   * ESC close modal dialog\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Optional icon displayed next to the title\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of the header {@see ix-icon}\n   */\n  @Prop() iconColor: NotificationColor = 'color-std-text';\n\n  /**\n   * Modal dialog class\n   */\n  @Prop() modalDialogClass: string;\n\n  /**\n   * Modal scollable\n   */\n  @Prop() scrollable = true;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: 'sm' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Header title\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Window class\n   */\n  @Prop() windowClass: string;\n\n  /**\n   * Modal closed\n   */\n  @Event() closed: EventEmitter;\n\n  /**\n   * Modal dismissed\n   */\n  @Event() dismissed: EventEmitter;\n\n  private readonly onKeydown = this.handleKeydown.bind(this);\n\n  get modal() {\n    return this.hostElement.querySelector('.modal');\n  }\n\n  get modalDialog() {\n    return this.modal.querySelector('.modal-dialog');\n  }\n\n  get modalContent() {\n    return this.modalDialog.querySelector('.modal-content');\n  }\n\n  get modalBackdrop() {\n    return this.hostElement.querySelector('.backdrop');\n  }\n\n  private slideDown(modal: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [0, 1],\n      translateY: ['-100%', 0],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideUp(modal: any, completeCallback?: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [1, 0],\n      translateY: [0, '-100%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onBackdropClick(event: Event) {\n    const target = event.target as Element;\n    if (target.classList.contains('backdrop')) {\n      this.dismiss(event);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.backdrop === 'static') {\n      this.modalBackdrop.addEventListener('click', (event) =>\n        this.onBackdropClick(event)\n      );\n    }\n\n    if (this.backdropClass) {\n      this.modalBackdrop.classList.add(this.backdropClass);\n    }\n\n    if (this.modalDialogClass) {\n      this.modalDialog.classList.add(this.modalDialogClass);\n    }\n\n    if (this.windowClass) {\n      this.modal.classList.add(this.windowClass);\n    }\n\n    if (this.keyboard) {\n      window.addEventListener('keydown', this.onKeydown);\n    }\n\n    this.slideDown(this.modalContent);\n  }\n\n  private handleKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.dismiss(ev.key);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.onKeydown);\n  }\n\n  /**\n   * Dismiss modal instance\n   * @param reason\n   */\n  @Method()\n  async dismiss<T = any>(reason?: T) {\n    if (this.beforeDismiss) {\n      const result = await this.beforeDismiss(reason);\n      if (result !== false) {\n        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n      }\n    } else {\n      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n    }\n  }\n\n  /**\n   * Close modal\n   * @param result\n   */\n  @Method()\n  async close<T = any>(result: T) {\n    this.slideUp(this.modalContent, () => this.closed.emit(result));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            animation: this.animation,\n            modal: true,\n            backdrop: this.backdrop === 'static' || this.backdrop,\n            'align-items-center': this.centered,\n            scrollable: this.scrollable,\n          }}\n          aria-describedby={this.ariaDescribedBy}\n          aria-labelledby={this.ariaLabelledBy}\n        >\n          <div\n            class={{\n              'modal-dialog': true,\n              'modal-sm': this.size === 'sm',\n              'modal-lg': this.size === 'lg',\n              'modal-xl': this.size === 'xl',\n            }}\n          >\n            <div class=\"modal-content\">\n              {this.icon === undefined || this.icon === '' ? (\n                ''\n              ) : (\n                <div class=\"state-icon-container\">\n                  <ix-icon\n                    name={this.icon}\n                    size=\"32\"\n                    color={this.iconColor}\n                  ></ix-icon>\n                </div>\n              )}\n              <div class=\"slot-container\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { NotificationColor } from '../utils/notification-color';\n\nlet modalInstanceId = 0;\n\nfunction getNextModalInstanceId() {\n  return `ix-modal-instance-${++modalInstanceId}`;\n}\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  scoped: true,\n})\nexport class Modal {\n  @Element() hostElement: HTMLIxModalElement;\n\n  /**\n   * Should the modal be animtated\n   */\n  @Prop() animation = true;\n\n  /**\n   *\n   */\n  @Prop() ariaDescribedBy: string;\n\n  /**\n   *\n   */\n  @Prop() ariaLabelledBy = 'modal-title';\n\n  /**\n   * Adds a dimming layer to the modal.\n   * This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks).\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Backdrop class\n   */\n  @Prop() backdropClass: string;\n\n  /**\n   * BeforeDismiss callback\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Content of modal\n   */\n  @Prop() content: HTMLElement | string;\n\n  /**\n   * ESC close modal dialog\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Optional icon displayed next to the title\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of the header {@see ix-icon}\n   */\n  @Prop() iconColor: NotificationColor = 'color-std-text';\n\n  /**\n   * Modal dialog class\n   */\n  @Prop() modalDialogClass: string;\n\n  /**\n   * Modal scollable\n   */\n  @Prop() scrollable = true;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: 'sm' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Header title\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Window class\n   */\n  @Prop() windowClass: string;\n\n  /**\n   * Modal closed\n   */\n  @Event() closed: EventEmitter;\n\n  /**\n   * Modal dismissed\n   */\n  @Event() dismissed: EventEmitter;\n\n  private modalId = getNextModalInstanceId();\n  private readonly onKeydown = this.handleKeydown.bind(this);\n\n  get modal() {\n    return this.hostElement.querySelector('.modal');\n  }\n\n  get modalDialog() {\n    return this.modal.querySelector('.modal-dialog');\n  }\n\n  get modalContent() {\n    return this.modalDialog.querySelector('.modal-content');\n  }\n\n  get modalBackdrop() {\n    return this.hostElement.querySelector('.backdrop');\n  }\n\n  private slideDown(modal: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [0, 1],\n      translateY: ['-100%', 0],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideUp(modal: any, completeCallback?: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [1, 0],\n      translateY: [0, '-100%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onBackdropClick(event: Event) {\n    const target = event.target as Element;\n    if (target.classList.contains('backdrop')) {\n      this.dismiss(event);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.backdrop === 'static') {\n      this.modalBackdrop.addEventListener('click', (event) =>\n        this.onBackdropClick(event)\n      );\n    }\n\n    if (this.backdropClass) {\n      this.modalBackdrop.classList.add(this.backdropClass);\n    }\n\n    if (this.modalDialogClass) {\n      this.modalDialog.classList.add(this.modalDialogClass);\n    }\n\n    if (this.windowClass) {\n      this.modal.classList.add(this.windowClass);\n    }\n\n    if (this.keyboard) {\n      window.addEventListener('keydown', this.onKeydown);\n    }\n\n    this.slideDown(this.modalContent);\n  }\n\n  private handleKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.dismiss(ev.key);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.onKeydown);\n  }\n\n  /**\n   * Dismiss modal instance\n   * @param reason\n   */\n  @Method()\n  async dismiss<T = any>(reason?: T) {\n    if (this.beforeDismiss) {\n      const result = await this.beforeDismiss(reason);\n      if (result !== false) {\n        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n      }\n    } else {\n      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n    }\n  }\n\n  /**\n   * Close modal\n   * @param result\n   */\n  @Method()\n  async close<T = any>(result: T) {\n    this.slideUp(this.modalContent, () => this.closed.emit(result));\n  }\n\n  render() {\n    return (\n      <Host id={this.modalId}>\n        <div\n          class={{\n            animation: this.animation,\n            modal: true,\n            backdrop: this.backdrop === 'static' || this.backdrop,\n            'align-items-center': this.centered,\n            scrollable: this.scrollable,\n          }}\n          aria-describedby={this.ariaDescribedBy}\n          aria-labelledby={this.ariaLabelledBy}\n        >\n          <div\n            class={{\n              'modal-dialog': true,\n              'modal-sm': this.size === 'sm',\n              'modal-lg': this.size === 'lg',\n              'modal-xl': this.size === 'xl',\n            }}\n          >\n            <div class=\"modal-content\">\n              {this.icon === undefined || this.icon === '' ? (\n                ''\n              ) : (\n                <div class=\"state-icon-container\">\n                  <ix-icon\n                    name={this.icon}\n                    size=\"32\"\n                    color={this.iconColor}\n                  ></ix-icon>\n                </div>\n              )}\n              <div class=\"slot-container\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/modal-container/modal-container.js

@@ -21,6 +21,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { h, Host } from '@stencil/core';
 import { TypedEvent } from '../utils/typed-event';
 export class ModalContainer {
+  get modalStack() {
+    return this.hostElement.querySelector(':scope > div.modal-stack');
+  }
   /**
    * Display modal dialog
    *
@@ -41,13 +44,17 @@ export class ModalContainer {
     else {
       modal.appendChild(content);
     }
-    this.hostElement.appendChild(modal);
+    this.modalStack.appendChild(modal);
     modal.addEventListener('closed', (event) => {
-      this.hostElement.removeChild(modal);
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.modalStack.removeChild(modal);
       onClose.emit(event.detail);
     });
     modal.addEventListener('dismissed', (event) => {
-      this.hostElement.removeChild(modal);
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.modalStack.removeChild(modal);
       onDismiss.emit(event.detail);
     });
     return {
@@ -57,7 +64,7 @@ export class ModalContainer {
     };
   }
   render() {
-    return h(Host, null);
+    return (h(Host, null, h("div", { class: "modal-stack" })));
   }
   static get is() { return "ix-modal-container"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/modal-container/modal-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-container.js","sourceRoot":"","sources":["../../../src/components/modal-container/modal-container.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;;;;;;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOlD,MAAM,OAAO,cAAc;EAGzB;;;;KAIG;EAEH,KAAK,CAAC,SAAS,CAAU,MAAsB;IAC7C,MAAM,OAAO,GAAG,IAAI,UAAU,EAAK,CAAC;IACpC,MAAM,SAAS,GAAG,IAAI,UAAU,EAAK,CAAC;IAEtC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,KAAK,EAAE,OAAO,KAAwB,MAAM,EAAzB,cAAc,UAAK,MAAM,EAA9C,oBAAqC,CAAS,CAAC;IACnD,MAAM,CAAC,MAAM,CAAC,KAAK,kBAAI,WAAW,EAAE,KAAK,IAAK,cAAc,EAAG,CAAC;IAEhE,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;MAC/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACpD,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;MACzB,QAAQ,CAAC,SAAS,GAAG,OAAO,CAAC;MAC7B,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;KAChD;SAAM;MACL,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;KAC5B;IAED,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAEpC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAqB,EAAE,EAAE;MACzD,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACpC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAqB,EAAE,EAAE;MAC5D,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACpC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,OAAO;MACL,WAAW,EAAE,KAAK;MAClB,OAAO;MACP,SAAS;KACV,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Method } from '@stencil/core';\nimport { ModalConfig, ModalInstance } from '../modal/modal-utils';\nimport { TypedEvent } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-modal-container',\n  styleUrl: 'modal-container.scss',\n  scoped: true,\n})\nexport class ModalContainer {\n  @Element() hostElement: HTMLIxModalContainerElement;\n\n  /**\n   * Display modal dialog\n   *\n   * @param config\n   */\n  @Method()\n  async showModal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>> {\n    const onClose = new TypedEvent<T>();\n    const onDismiss = new TypedEvent<T>();\n\n    const modal = document.createElement('ix-modal');\n    let { title, content, ...modifiedConfig } = config;\n    Object.assign(modal, { headerTitle: title, ...modifiedConfig });\n\n    if (typeof content === 'string') {\n      const template = document.createElement('template');\n      content = content.trim();\n      template.innerHTML = content;\n      modal.appendChild(template.content.firstChild);\n    } else {\n      modal.appendChild(content);\n    }\n\n    this.hostElement.appendChild(modal);\n\n    modal.addEventListener('closed', (event: CustomEvent<T>) => {\n      this.hostElement.removeChild(modal);\n      onClose.emit(event.detail);\n    });\n    modal.addEventListener('dismissed', (event: CustomEvent<T>) => {\n      this.hostElement.removeChild(modal);\n      onDismiss.emit(event.detail);\n    });\n\n    return {\n      htmlElement: modal,\n      onClose,\n      onDismiss,\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}
+{"version":3,"file":"modal-container.js","sourceRoot":"","sources":["../../../src/components/modal-container/modal-container.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;;;;;;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOlD,MAAM,OAAO,cAAc;EAGzB,IAAI,UAAU;IACZ,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;EACpE,CAAC;EAED;;;;KAIG;EAEH,KAAK,CAAC,SAAS,CAAU,MAAsB;IAC7C,MAAM,OAAO,GAAG,IAAI,UAAU,EAAK,CAAC;IACpC,MAAM,SAAS,GAAG,IAAI,UAAU,EAAK,CAAC;IAEtC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,KAAK,EAAE,OAAO,KAAwB,MAAM,EAAzB,cAAc,UAAK,MAAM,EAA9C,oBAAqC,CAAS,CAAC;IACnD,MAAM,CAAC,MAAM,CAAC,KAAK,kBAAI,WAAW,EAAE,KAAK,IAAK,cAAc,EAAG,CAAC;IAEhE,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;MAC/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACpD,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;MACzB,QAAQ,CAAC,SAAS,GAAG,OAAO,CAAC;MAC7B,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;KAChD;SAAM;MACL,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;KAC5B;IACD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAEnC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAqB,EAAE,EAAE;MACzD,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAqB,EAAE,EAAE;MAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACnC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,OAAO;MACL,WAAW,EAAE,KAAK;MAClB,OAAO;MACP,SAAS;KACV,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,aAAa,GAAO,CAC1B,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Method } from '@stencil/core';\nimport { ModalConfig, ModalInstance } from '../modal/modal-utils';\nimport { TypedEvent } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-modal-container',\n  styleUrl: 'modal-container.scss',\n  scoped: true,\n})\nexport class ModalContainer {\n  @Element() hostElement: HTMLIxModalContainerElement;\n\n  get modalStack() {\n    return this.hostElement.querySelector(':scope > div.modal-stack');\n  }\n\n  /**\n   * Display modal dialog\n   *\n   * @param config\n   */\n  @Method()\n  async showModal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>> {\n    const onClose = new TypedEvent<T>();\n    const onDismiss = new TypedEvent<T>();\n\n    const modal = document.createElement('ix-modal');\n    let { title, content, ...modifiedConfig } = config;\n    Object.assign(modal, { headerTitle: title, ...modifiedConfig });\n\n    if (typeof content === 'string') {\n      const template = document.createElement('template');\n      content = content.trim();\n      template.innerHTML = content;\n      modal.appendChild(template.content.firstChild);\n    } else {\n      modal.appendChild(content);\n    }\n    this.modalStack.appendChild(modal);\n\n    modal.addEventListener('closed', (event: CustomEvent<T>) => {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      this.modalStack.removeChild(modal);\n      onClose.emit(event.detail);\n    });\n    modal.addEventListener('dismissed', (event: CustomEvent<T>) => {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      this.modalStack.removeChild(modal);\n      onDismiss.emit(event.detail);\n    });\n\n    return {\n      htmlElement: modal,\n      onClose,\n      onDismiss,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"modal-stack\"></div>\n      </Host>\n    );\n  }\n}\n"]}