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

package/components/menu-tabs-fc.js

@@ -28,7 +28,7 @@ const MenuSettings = /*@__PURE__*/ proxyCustomElement(class MenuSettings extends
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: 'f2d6521b17f591cbdd009b220d85ccf1daa2f09c', context: this });
+        return h(MenuTabs, { key: '4b288fa42f784e8ae6828fcba63ce7f4b86bd067', context: this });
     }
     get el() { return this; }
     static get watchers() { return {
@@ -127,19 +127,22 @@ const getTabItems = (context) => {
         return (h("ix-tab-item", { selected: label === context.activeTabLabel, onClick: () => setTab(context, label) }, label));
     });
 };
-const MenuTabs = ({ context }) => (h(Host, { slot: context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about', class: {
-        show: context.show,
-    } },
-    h("div", { class: context instanceof MenuSettings ? 'settings-header' : 'about-header' },
-        h("h2", { class: "text-h2" }, context.label),
-        h("ix-icon-button", { ghost: true, size: "24", icon: 'close', onClick: (e) => context.close.emit({
-                name: context instanceof MenuSettings
-                    ? 'ix-menu-settings'
-                    : 'ix-menu-about',
-                nativeEvent: e,
-            }) })),
-    h("ix-tabs", null, getTabItems(context)),
-    h("slot", null)));
+const MenuTabs = ({ context }) => {
+    const selectedIndex = context.items.findIndex((item) => item.label === context.activeTabLabel);
+    return (h(Host, { slot: context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about', class: {
+            show: context.show,
+        } },
+        h("div", { class: context instanceof MenuSettings ? 'settings-header' : 'about-header' },
+            h("h2", { class: "text-h2" }, context.label),
+            h("ix-icon-button", { ghost: true, size: "24", icon: 'close', onClick: (e) => context.close.emit({
+                    name: context instanceof MenuSettings
+                        ? 'ix-menu-settings'
+                        : 'ix-menu-about',
+                    nativeEvent: e,
+                }) })),
+        h("ix-tabs", { selected: selectedIndex !== -1 ? selectedIndex : 0 }, getTabItems(context)),
+        h("slot", null)));
+};
 
 export { MenuTabs as M, MenuSettings as a, defineCustomElement as d, initialize as i, setTab as s };
 

package/components/menu-tabs-fc.js.map

@@ -1 +1 @@
-{"file":"menu-tabs-fc.js","mappings":"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","names":[],"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  /**\n   * Internal\n   */\n  @Prop() show = false;\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  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    setTab(context, context.activeTabLabel || context.items[0].label);\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';\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        onClick={() => setTab(context, label)}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => (\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={'close'}\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>{getTabItems(context)}</ix-tabs>\n    <slot></slot>\n  </Host>\n);\n"],"version":3}
+{"file":"menu-tabs-fc.js","mappings":"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","names":[],"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  /**\n   * Internal\n   */\n  @Prop() show = false;\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  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    setTab(context, context.activeTabLabel || context.items[0].label);\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';\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        onClick={() => setTab(context, label)}\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={'close'}\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"],"version":3}

package/components/modal-content.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const modalContentCss = ":host{display:block;position:relative;overflow:auto;padding:0.25rem 0.75rem}: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}";
+const modalContentCss = ":host{display:block;position:relative;overflow:auto;padding:0 0.5rem 0.5rem}: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}";
 const IxModalContentStyle0 = modalContentCss;
 
 const ModalContent = /*@__PURE__*/ proxyCustomElement(class ModalContent extends HTMLElement {
@@ -10,7 +10,7 @@ const ModalContent = /*@__PURE__*/ proxyCustomElement(class ModalContent extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '709b6b9fda6d3560e4a8b2703f8c72f271490a4c' }, h("slot", { key: '900625af9e6dbb6b0254fb13fc6acc8cb4e98fc4' })));
+        return (h(Host, { key: 'c97c81bc60a06d05409259fec414ae8d92cc389d' }, h("slot", { key: 'd05e802ab6a1feed1af6d72902f852c3e2e20b6a' })));
     }
     static get style() { return IxModalContentStyle0; }
 }, [1, "ix-modal-content"]);

package/components/modal-content.js.map

@@ -1 +1 @@
-{"file":"modal-content.js","mappings":";;AAAA,MAAM,eAAe,GAAG,s0BAAs0B,CAAC;AAC/1B,6BAAe,eAAe;;MCkBjB,YAAY;;;;;;IACvB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","src/components/modal-content/modal-content.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0.25rem 0.75rem;\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 { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"modal-content.js","mappings":";;AAAA,MAAM,eAAe,GAAG,s0BAAs0B,CAAC;AAC/1B,6BAAe,eAAe;;MCkBjB,YAAY;;;;;;IACvB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","src/components/modal-content/modal-content.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0 0.5rem 0.5rem;\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 { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/modal-header.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 import { d as defineCustomElement$1 } from './typography.js';
 
-const modalHeaderCss = ":host{display:flex;padding:0.5rem;align-items:center;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}:host .modal-close{margin-left:auto;margin-right:-1rem}:host .modal-icon{margin-right:1rem}";
+const modalHeaderCss = ":host{display:flex;padding:0.5rem 0 0.5rem 0.5rem;align-items:center;gap:1rem}: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 .modal-title{flex-grow:1}:host .modal-close{align-self:flex-start}";
 const IxModalHeaderStyle0 = modalHeaderCss;
 
 const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends HTMLElement {
@@ -39,7 +39,7 @@ const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends H
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: 'e0edc0b5eca59209ecbe32b5777383244e6e1153' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: '4981a025990dfc2776afed400aba5cf9114bc44d', variant: 'default-title' }, h("slot", { key: 'd9915d27dbccf15f71b97b6c7e34e294c07e31e7' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
+        return (h(Host, { key: '663a10dcde6d532c7a2bb185cbb74b87ae34dd26' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32" })) : null, h("div", { key: '6e74798b6d54631d2c96abc22267416f75c0e5f3', class: "modal-title" }, h("ix-typography", { key: '56b9c1bf4464163f76031ab4e152030288828682', format: "h5" }, h("slot", { key: '6004390db148e39c5edc6189fccafed720df5e60' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close" })) : null));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/modal-header.js.map

@@ -1 +1 @@
-{"file":"modal-header.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,65BAA65B,CAAC;AACr7B,4BAAe,cAAc;;MC4BhB,WAAW;;;;;;yBAMF,KAAK;;;;IAQzB,YAAY,CAAC,IAAY;QACvB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aAC9C;iBAAM;gBACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;aACjD;SACF;KACF;IAeD,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,iBAAiB,CACnC,IAAI,CAAC,WAAW,EAChB,UAAU,CACW,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,YAAY,CAAC,KAAiB;QACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACjD,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;KAClC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,eACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,IACT,IAAI,EACR,sEAAe,OAAO,EAAE,eAAe,IACrC,8DAAa,CACC,EACf,CAAC,IAAI,CAAC,SAAS,IACd,sBACE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,IAChB,IAAI,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","src/components/modal-header/modal-header.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  align-self: stretch;\n\n  .modal-close {\n    margin-left: auto;\n    margin-right: -1rem;\n  }\n\n  .modal-icon {\n    margin-right: 1rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { closestPassShadow } from '../utils/shadow-dom';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (this.parentDialog) {\n      if (icon) {\n        this.parentDialog.classList.add('with-icon');\n      } else {\n        this.parentDialog.classList.remove('with-icon');\n      }\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Emits when close icon is clicked and closes the modal\n   * Can be prevented, in which case only the event is triggered, and the modal remains open\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = closestPassShadow(\n      this.hostElement,\n      'ix-modal'\n    ) as HTMLIxModalElement;\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"modal-header.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,g5BAAg5B,CAAC;AACx6B,4BAAe,cAAc;;MC4BhB,WAAW;;;;;;yBAMF,KAAK;;;;IAQzB,YAAY,CAAC,IAAa;QACxB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aAC9C;iBAAM;gBACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;aACjD;SACF;KACF;IAeD,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,iBAAiB,CACnC,IAAI,CAAC,WAAW,EAChB,UAAU,CACW,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,YAAY,CAAC,KAAiB;QACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACjD,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;KAClC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,IAAI,GAAW,IACnE,IAAI,EACR,4DAAK,KAAK,EAAC,aAAa,IACtB,sEAAe,MAAM,EAAC,IAAI,IACxB,8DAAa,CACC,CACZ,EACL,CAAC,IAAI,CAAC,SAAS,IACd,sBACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,GACI,IAChB,IAAI,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","src/components/modal-header/modal-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.5rem 0 0.5rem 0.5rem;\n  align-items: center;\n  gap: 1rem;\n\n  .modal-title {\n    flex-grow: 1;\n  }\n\n  .modal-close  {\n    align-self: flex-start;\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\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { closestPassShadow } from '../utils/shadow-dom';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon?: string;\n\n  @Watch('icon')\n  onIconChange(icon?: string) {\n    if (this.parentDialog) {\n      if (icon) {\n        this.parentDialog.classList.add('with-icon');\n      } else {\n        this.parentDialog.classList.remove('with-icon');\n      }\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Emits when close icon is clicked and closes the modal\n   * Can be prevented, in which case only the event is triggered, and the modal remains open\n   */\n  @Event() closeClick!: EventEmitter<MouseEvent>;\n\n  private parentDialog!: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = closestPassShadow(\n      this.hostElement,\n      'ix-modal'\n    ) as HTMLIxModalElement;\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon name={this.icon} color={this.iconColor} size=\"32\"></ix-icon>\n        ) : null}\n        <div class=\"modal-title\">\n          <ix-typography format=\"h5\">\n            <slot></slot>\n          </ix-typography>\n        </div>\n        {!this.hideClose ? (\n          <ix-icon-button\n            class=\"modal-close\"\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/row.js

@@ -10,7 +10,7 @@ const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'b8813e92c151d3f0a6d063a4f03b50f384ef1127' }, h("slot", { key: '5246811d7fb18593758b07a32e58fee15ba34d51' })));
+        return (h(Host, { key: '4066b481009cdc88355059c77770ca83044ca455' }, h("slot", { key: 'afd322e81fa653152fcdd76249c632119eaa9933' })));
     }
     static get style() { return IxRowStyle0; }
 }, [1, "ix-row"]);

package/components/row.js.map

@@ -1 +1 @@
-{"file":"row.js","mappings":";;AAAA,MAAM,MAAM,GAAG,uHAAuH,CAAC;AACvI,oBAAe,MAAM;;MCkBR,GAAG;;;;;;IACd,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.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:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\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 { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"row.js","mappings":";;AAAA,MAAM,MAAM,GAAG,uHAAuH,CAAC;AACvI,oBAAe,MAAM;;MCkBR,GAAG;;;;;;IACd,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.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\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\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\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/select-item.js

@@ -60,7 +60,7 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTM
         }));
     }
     render() {
-        return (h(Host, { key: '73a6d9e2c4df3541658f2bdce0a4ec42aea2c5e1' }, h("ix-dropdown-item", { key: 'c8d0563af535129de120a4899d683038f02dad57', class: {
+        return (h(Host, { key: 'e16e2c99443d82ca1bf160c08f2d9e59ff916453' }, h("ix-dropdown-item", { key: '8e86f4b6de6128c3dc071baf53a773b22c44a828', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }

package/components/select.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { A as ArrowFocusController, d as defineCustomElement$6 } from './dropdown.js';
 import { O as OnListener } from './listener.js';
 import { c as createMutationObserver } from './mutation-observer.js';
+import { m as makeRef } from './make-ref.js';
 import { d as defineCustomElement$5 } from './dropdown-item.js';
 import { d as defineCustomElement$4 } from './filter-chip.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
@@ -38,8 +39,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.itemSelectionChange = createEvent(this, "itemSelectionChange", 7);
         this.inputChange = createEvent(this, "inputChange", 7);
         this.addItem = createEvent(this, "addItem", 7);
-        this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+        this.dropdownWrapperRef = makeRef();
+        this.dropdownAnchor = makeRef();
         this.itemObserver = createMutationObserver(() => {
+            if (!this.arrowFocusController) {
+                return;
+            }
             this.arrowFocusController.items = this.visibleNonShadowItems;
         });
         this.selectedIndices = undefined;
@@ -55,13 +60,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.i18nNoMatches = 'No matches';
         this.hideListHeader = false;
         this.dropdownShow = false;
-        this.selectedLabels = undefined;
-        this.dropdownWrapperRef = undefined;
-        this.dropdownAnchor = undefined;
+        this.selectedLabels = [];
         this.isDropdownEmpty = false;
         this.navigationItem = undefined;
-        this.inputFilterText = undefined;
-        this.inputValue = undefined;
+        this.inputFilterText = '';
+        this.inputValue = '';
     }
     get nonShadowItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
@@ -85,7 +88,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         return this.items.filter((item) => item.selected);
     }
     get addItemButton() {
-        return this.hostElement.shadowRoot.querySelector('.add-item');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.add-item');
     }
     get isSingleMode() {
         return this.mode === 'single';
@@ -105,8 +109,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.updateSelection();
     }
     watchDropdownShow(show) {
-        if (show) {
-            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, this.focusControllerCallbackBind);
+        if (show && this.dropdownRef) {
+            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, (index) => this.focusDropdownItem(index));
             this.arrowFocusController.wrap = !this.editable;
             this.itemObserver.observe(this.dropdownRef, {
                 childList: true,
@@ -114,35 +118,43 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             });
         }
         else {
-            this.arrowFocusController.disconnect();
-            this.arrowFocusController = undefined;
-            this.itemObserver.disconnect();
+            this.cleanupResources();
         }
     }
+    cleanupResources() {
+        var _a, _b;
+        (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.arrowFocusController = undefined;
+        (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
     onItemClicked(event) {
         const newId = event.detail;
         this.itemClick(newId);
     }
     focusDropdownItem(index) {
-        var _a;
+        var _a, _b;
         this.navigationItem = undefined;
         if (index < this.visibleNonShadowItems.length) {
-            const nestedDropdownItem = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('ix-dropdown-item');
+            const nestedDropdownItem = (_b = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ix-dropdown-item');
             requestAnimationFrame(() => {
-                nestedDropdownItem.shadowRoot.querySelector('button').focus();
+                var _a, _b;
+                (_b = (_a = nestedDropdownItem === null || nestedDropdownItem === void 0 ? void 0 : nestedDropdownItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
             });
         }
     }
     itemClick(newId) {
+        const oldValue = this.value;
         const value = this.toggleValue(newId);
+        this.value = value;
         const defaultPrevented = this.emitValueChange(value);
         if (defaultPrevented) {
+            this.value = oldValue;
             return;
         }
-        this.value = value;
         this.updateSelection();
     }
     emitAddItem(value) {
+        var _a;
         if (value === undefined || value.trim() === '') {
             return false;
         }
@@ -153,7 +165,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         const newItem = document.createElement('ix-select-item');
         newItem.value = value;
         newItem.label = value;
-        this.customItemsContainerRef.appendChild(newItem);
+        (_a = this.customItemsContainerRef) === null || _a === void 0 ? void 0 : _a.appendChild(newItem);
         this.clearInput();
         this.itemClick(value);
         return false;
@@ -193,12 +205,13 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             });
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label);
-        if (this.isSingleMode && ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length) && this.isSingleMode) {
             this.inputValue = this.selectedLabels[0];
-            this.inputRef && (this.inputRef.value = this.inputValue);
-            return;
         }
-        this.inputValue = null;
+        else {
+            this.inputValue = '';
+        }
+        this.inputRef && (this.inputRef.value = this.inputValue);
     }
     emitValueChange(value) {
         const { defaultPrevented } = this.valueChange.emit(value);
@@ -206,7 +219,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return true;
         }
         if (!value) {
-            this.itemSelectionChange.emit(null);
+            this.itemSelectionChange.emit(undefined);
         }
         else {
             this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);
@@ -214,9 +227,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         return false;
     }
     componentDidLoad() {
-        this.inputRef.addEventListener('input', () => {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.addEventListener('input', () => {
+            var _a;
             this.dropdownShow = true;
-            this.inputChange.emit(this.inputRef.value);
+            this.inputChange.emit((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
         });
     }
     componentWillLoad() {
@@ -231,18 +246,17 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.updateSelection();
     }
     disconnectedCallback() {
-        if (this.itemMutationObserver) {
-            this.itemMutationObserver.disconnect();
-        }
+        this.cleanupResources();
     }
     itemExists(item) {
         return this.items.find((i) => i.label === item);
     }
     dropdownVisibilityChanged(event) {
+        var _a, _b;
         this.dropdownShow = event.detail;
         if (event.detail) {
-            this.inputRef.focus();
-            this.inputRef.select();
+            (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.select();
             this.removeHiddenFromItems();
             this.isDropdownEmpty = this.isEveryDropdownItemHidden;
         }
@@ -260,34 +274,30 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return;
         }
         if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-            await this.onEnterNavigation();
+            await this.onEnterNavigation(event.target);
         }
         if (event.code === 'Escape') {
             this.dropdownShow = false;
         }
     }
-    async onEnterNavigation() {
-        var _a;
+    async onEnterNavigation(el) {
         if (this.isMultipleMode) {
             return;
         }
-        let item;
-        if (this.editable && !this.itemExists(this.inputFilterText)) {
-            const defaultPrevented = this.emitAddItem(this.inputFilterText);
-            if (defaultPrevented) {
-                return;
+        if (!this.itemExists(this.inputFilterText.trim()) &&
+            !this.itemExists(el === null || el === void 0 ? void 0 : el.label)) {
+            if (this.editable) {
+                const defaultPrevented = this.emitAddItem(this.inputFilterText.trim());
+                if (defaultPrevented) {
+                    return;
+                }
             }
-            item = this.items[this.items.length - 1];
-        }
-        if (item) {
-            item.onItemClick();
-        }
-        await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.updatePosition());
-        if (this.isSingleMode && !this.editable) {
-            this.dropdownShow = false;
         }
+        this.dropdownShow = false;
+        this.updateSelection();
     }
     async onArrowNavigation(event, key) {
+        var _a, _b;
         if (event.defaultPrevented) {
             return;
         }
@@ -326,7 +336,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return;
         }
         if (this.isAddItemVisible() &&
-            this.addItemRef.contains(await this.navigationItem.getDropdownItemElement())) {
+            ((_a = this.addItemRef) === null || _a === void 0 ? void 0 : _a.contains((await ((_b = this.navigationItem) === null || _b === void 0 ? void 0 : _b.getDropdownItemElement())) || null))) {
             if (moveUp) {
                 this.applyFocusTo(this.visibleItems.pop());
             }
@@ -372,20 +382,20 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
         this.navigationItem = element;
         setTimeout(() => {
-            element.shadowRoot
-                .querySelector('ix-dropdown-item')
-                .shadowRoot.querySelector('button')
-                .focus();
+            var _a, _b, _c, _d;
+            (_d = (_c = (_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-dropdown-item')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button')) === null || _d === void 0 ? void 0 : _d.focus();
         });
     }
     focusAddItemButton() {
+        var _a, _b;
         if (this.addItemButton) {
-            this.addItemButton.shadowRoot.querySelector('button').focus();
+            (_b = (_a = this.addItemButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
             this.navigationItem = this.addItemRef;
         }
     }
     filterItemsWithTypeahead() {
-        this.inputFilterText = this.inputRef.value;
+        var _a;
+        this.inputFilterText = ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value) || '';
         if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
             return;
         }
@@ -411,26 +421,29 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         });
     }
     clearInput() {
-        this.inputRef.value = '';
+        if (this.inputRef) {
+            this.inputRef.value = '';
+        }
         this.inputFilterText = '';
     }
     clear() {
         this.clearInput();
         this.selectedLabels = [];
         this.value = [];
-        this.valueChange.emit(null);
+        this.valueChange.emit(undefined);
         this.dropdownShow = false;
     }
-    onInputBlur(e) {
+    onInputBlur() {
         if (this.editable) {
             return;
         }
         if (this.isSingleMode) {
             return;
         }
-        if (!this.dropdownShow && this.mode !== 'multiple') {
-            e.target['value'] = this.selectedLabels;
+        if (this.dropdownShow) {
+            return;
         }
+        this.value = this.selectedLabels;
     }
     placeholderValue() {
         if (this.disabled) {
@@ -451,23 +464,23 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ef836653267a38d82ead34cf82285997083f4086' }, h("div", { key: '23e903c9849f58f70d9c843a7258f913d6811cf2', class: {
+        return (h(Host, { key: '9d82f1db52dd35e9ad53770cb72d4af1cdcfcd45' }, h("div", { key: 'cd6821962939f072a5b5178694443bca4632d815', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
-                this.dropdownAnchor = ref;
+                this.dropdownAnchor(ref);
                 if (!this.editable)
-                    this.dropdownWrapperRef = ref;
-            } }, h("div", { key: '56b38a998a44ddc6b8f380cc049e813be30ad711', class: "input-container" }, h("div", { key: 'b3e152d2ab35f3e2bcf2ac8c8df4cb3bc97f6e3c', class: "chips" }, this.isMultipleMode
+                    this.dropdownWrapperRef(ref);
+            } }, h("div", { key: '813a9074998686a2fa58f49c4c7e57fd59c9db1b', class: "input-container" }, h("div", { key: 'af61142f7b3261743f19306fd5927caffa0cb55f', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: 'f411e24b3c4512731593a4afd5c51f0223254cc9', class: "trigger" }, h("input", { key: '3c16a408ed58a3d2430ed86df32b6d990acb2b49', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', h("div", { key: 'f9caaabe83123616e5dbd7c7421aae0a387090f4', class: "trigger" }, h("input", { key: '387891a2a3e92b3b11ac30b398733d3fde6e6760', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
-            }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
+            }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: () => this.onInputBlur(), onFocus: () => {
                 this.navigationItem = undefined;
             }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
             (((_c = this.selectedLabels) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
@@ -476,23 +489,22 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 this.clear();
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
-                    this.dropdownWrapperRef = ref;
-            } })))))), h("ix-dropdown", { key: '6c838166f4366d760f30dc102d3dad4611b369b5', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+                    this.dropdownWrapperRef(ref);
+            } })))))), h("ix-dropdown", { key: 'e7f921957ee555565c0e9a5cf1638f6e7a7bfb0d', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
-            }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
+            }, anchor: this.dropdownAnchor.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 return {
                     minWidth: `${this.hostElement.clientWidth}px`,
                 };
-            } }, h("div", { key: '8f7b41436b7f15311dd4d46cbacbb95879de501e', class: {
+            } }, h("div", { key: 'c996819e19367421551249e2776e2537f2ce94cd', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'dc2913881d407f2cdaaa30efc15fa05193117b1c' }), h("div", { key: '706abca5e8fef621d36b560b6ca5629c235a6a32', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'b502b564668efc1a9907a75112341d59f5171720' }), h("div", { key: 'b4ff647412c888cd86094f25033c3dd6f5129a84', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
-                if (this.emitAddItem(this.inputFilterText)) {
-                    e.stopPropagation();
-                }
+                e.stopPropagation();
+                this.emitAddItem(this.inputFilterText);
             }, onFocus: () => (this.navigationItem = this.addItemRef), ref: (ref) => {
                 this.addItemRef = ref;
             } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
@@ -519,8 +531,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "hideListHeader": [4, "hide-list-header"],
         "dropdownShow": [32],
         "selectedLabels": [32],
-        "dropdownWrapperRef": [32],
-        "dropdownAnchor": [32],
         "isDropdownEmpty": [32],
         "navigationItem": [32],
         "inputFilterText": [32],