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

package/dist/esm/ix-modal_2.entry.js

@@ -5,11 +5,16 @@ import { T as TypedEvent } from './typed-event-a230184a.js';
 
 const modalCss = ".sc-ix-modal-h{position:relative;width:100vw;height:100vh}.sc-ix-modal-h .modal.sc-ix-modal{display:flex}.sc-ix-modal-h .modal.animation.sc-ix-modal{animation:modal-fade 300ms ease-in-out}.sc-ix-modal-h .modal.backdrop.sc-ix-modal{background-color:var(--theme-color-lightbox);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:none}.sc-ix-modal-h .modal.backdrop.animation.sc-ix-modal{transition:-webkit-backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out, -webkit-backdrop-filter 0ms ease-in-out}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{flex-grow:1}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal{max-height:100%}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal .modal-body.sc-ix-modal{overflow-y:auto}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal{box-shadow:var(--theme-modal--box-shadow);flex-direction:row;background-color:var(--theme-modal--background);border:var(--modal--border-thickness) solid var(--theme-modal--border-color);padding:1.5rem;max-height:100vh}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .state-icon-container.sc-ix-modal{-webkit-margin-end:1rem;margin-inline-end:1rem}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .slot-container.sc-ix-modal{flex-grow:1}@media (min-width: 576px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal:not(.modal-dialog-centered){margin:2.5rem auto}}@media (max-width: 575.98px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{height:100%;margin:0}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal .modal-content.sc-ix-modal{height:100%;border-radius:0}}@keyframes modal-fade{from{opacity:0%}to{opacity:100%}}@keyframes slide-down{from{top:-100%}to{top:32px}}";
 
+let modalInstanceId = 0;
+function getNextModalInstanceId() {
+  return `ix-modal-instance-${++modalInstanceId}`;
+}
 const Modal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.closed = createEvent(this, "closed", 7);
     this.dismissed = createEvent(this, "dismissed", 7);
+    this.modalId = getNextModalInstanceId();
     this.onKeydown = this.handleKeydown.bind(this);
     this.animation = true;
     this.ariaDescribedBy = undefined;
@@ -120,7 +125,7 @@ const Modal = class {
     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,
@@ -163,6 +168,9 @@ const ModalContainer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
+  get modalStack() {
+    return this.hostElement.querySelector(':scope > div.modal-stack');
+  }
   /**
    * Display modal dialog
    *
@@ -183,13 +191,17 @@ const ModalContainer = class {
     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 {
@@ -199,7 +211,7 @@ const ModalContainer = class {
     };
   }
   render() {
-    return h(Host, null);
+    return (h(Host, null, h("div", { class: "modal-stack" })));
   }
   get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-modal_2.entry.js.map

@@ -1 +1 @@
-{"file":"ix-modal.ix-modal-container.entry.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=scoped","./src/components/modal/modal.tsx","./src/components/modal-container/modal-container.scss?tag=ix-modal-container&encapsulation=scoped","./src/components/modal-container/modal-container.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 '~bootstrap/scss/_functions';\n@import '~bootstrap/scss/mixins/_breakpoints.scss';\n@import '~bootstrap/scss/_variables.scss';\n\n@import 'common-variables';\n\n:host {\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n\n  .modal {\n    display: flex;\n\n    &.animation {\n      animation: modal-fade $medium-time ease-in-out;\n    }\n\n    &.backdrop {\n      background-color: var(--theme-color-lightbox);\n      backdrop-filter: blur(4px);\n      transition: none;\n\n      &.animation {\n        transition: backdrop-filter $short-time ease-in-out;\n      }\n    }\n\n    .modal-dialog {\n      flex-grow: 1;\n    }\n\n    &.scrollable {\n      .modal-content {\n        max-height: 100%;\n        .modal-body {\n          overflow-y: auto;\n        }\n      }\n    }\n\n    .modal-content {\n      box-shadow: var(--theme-modal--box-shadow);\n      flex-direction: row;\n      background-color: var(--theme-modal--background);\n      border: var(--modal--border-thickness) solid\n        var(--theme-modal--border-color);\n      padding: $large-space;\n      max-height: 100vh;\n\n      .state-icon-container {\n        margin-inline-end: $default-space;\n      }\n\n      .slot-container {\n        flex-grow: 1;\n      }\n    }\n\n    @include media-breakpoint-up(sm) {\n      .modal-dialog:not(.modal-dialog-centered) {\n        margin: 2.5rem auto;\n      }\n    }\n\n    @include media-breakpoint-down(sm) {\n      .modal-dialog {\n        height: 100%;\n        margin: 0;\n\n        .modal-content {\n          height: 100%;\n          border-radius: 0;\n        }\n      }\n    }\n\n    @keyframes modal-fade {\n      from {\n        opacity: 0%;\n      }\n      to {\n        opacity: 100%;\n      }\n    }\n\n    @keyframes slide-down {\n      from {\n        top: -100%;\n      }\n      to {\n        top: 32px;\n      }\n    }\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  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","/*\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  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 9999;\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, 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":"ix-modal.ix-modal-container.entry.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=scoped","./src/components/modal/modal.tsx","./src/components/modal-container/modal-container.scss?tag=ix-modal-container&encapsulation=scoped","./src/components/modal-container/modal-container.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 '~bootstrap/scss/_functions';\n@import '~bootstrap/scss/mixins/_breakpoints.scss';\n@import '~bootstrap/scss/_variables.scss';\n\n@import 'common-variables';\n\n:host {\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n\n  .modal {\n    display: flex;\n\n    &.animation {\n      animation: modal-fade $medium-time ease-in-out;\n    }\n\n    &.backdrop {\n      background-color: var(--theme-color-lightbox);\n      backdrop-filter: blur(4px);\n      transition: none;\n\n      &.animation {\n        transition: backdrop-filter $short-time ease-in-out;\n      }\n    }\n\n    .modal-dialog {\n      flex-grow: 1;\n    }\n\n    &.scrollable {\n      .modal-content {\n        max-height: 100%;\n        .modal-body {\n          overflow-y: auto;\n        }\n      }\n    }\n\n    .modal-content {\n      box-shadow: var(--theme-modal--box-shadow);\n      flex-direction: row;\n      background-color: var(--theme-modal--background);\n      border: var(--modal--border-thickness) solid\n        var(--theme-modal--border-color);\n      padding: $large-space;\n      max-height: 100vh;\n\n      .state-icon-container {\n        margin-inline-end: $default-space;\n      }\n\n      .slot-container {\n        flex-grow: 1;\n      }\n    }\n\n    @include media-breakpoint-up(sm) {\n      .modal-dialog:not(.modal-dialog-centered) {\n        margin: 2.5rem auto;\n      }\n    }\n\n    @include media-breakpoint-down(sm) {\n      .modal-dialog {\n        height: 100%;\n        margin: 0;\n\n        .modal-content {\n          height: 100%;\n          border-radius: 0;\n        }\n      }\n    }\n\n    @keyframes modal-fade {\n      from {\n        opacity: 0%;\n      }\n      to {\n        opacity: 100%;\n      }\n    }\n\n    @keyframes slide-down {\n      from {\n        top: -100%;\n      }\n      to {\n        top: 32px;\n      }\n    }\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  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","/*\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  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 9999;\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, 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"],"version":3}

package/dist/esm/ix-pagination.entry.js

@@ -0,0 +1,119 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d163acd.js';
+
+const paginationCss = ".sc-ix-pagination-h,.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination,.sc-ix-pagination-h .item-count.sc-ix-pagination{display:inline-flex;align-items:center}.sc-ix-pagination-h .basic-pagination.sc-ix-pagination{padding:0 0.125rem}.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination{padding:0 0.75rem}.sc-ix-pagination-h input.sc-ix-pagination{width:4.125rem;text-align:center;margin:0 0.5rem}.sc-ix-pagination-h .page-buttons.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .total-count.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .item-count.sc-ix-pagination{flex-grow:1;justify-content:flex-end;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h .item-count.sc-ix-pagination ix-select.sc-ix-pagination{width:4.5rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h ix-index-button.sc-ix-pagination+ix-index-button.sc-ix-pagination{-webkit-margin-start:0.125rem;margin-inline-start:0.125rem}";
+
+const Pagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageSelected = createEvent(this, "pageSelected", 7);
+    this.itemCountChanged = createEvent(this, "itemCountChanged", 7);
+    this.maxCountPages = 7;
+    this.advanced = undefined;
+    this.itemCount = 15;
+    this.showItemCount = true;
+    this.count = undefined;
+    this.selectedPage = 0;
+    this.i18nPage = 'Page';
+    this.i18nOf = 'of';
+    this.i18nItems = 'Items';
+  }
+  get pageInput() {
+    return this.hostElement.querySelector('.advanced-pagination input.form-control');
+  }
+  selectPage(index) {
+    if (index < 0) {
+      this.selectedPage = 0;
+    }
+    else if (index > this.count - 1) {
+      this.selectedPage = this.count - 1;
+    }
+    else {
+      this.selectedPage = index;
+    }
+    this.pageSelected.emit(this.selectedPage);
+  }
+  increase() {
+    if (this.selectedPage === this.count - 1) {
+      return;
+    }
+    this.selectPage(this.selectedPage + 1);
+  }
+  decrease() {
+    if (this.selectedPage === 0) {
+      return;
+    }
+    this.selectPage(this.selectedPage - 1);
+  }
+  getPageButton(index) {
+    return (h("ix-index-button", { variant: "Primary", onClick: () => {
+        this.selectPage(index);
+      }, selected: this.selectedPage === index }, index + 1));
+  }
+  renderPageButtons() {
+    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);
+    const hasOverflow = this.count > this.maxCountPages;
+    const hasOverflowStart = hasOverflow && this.selectedPage > pagesBeforeOverflow;
+    const hasOverflowEnd = hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;
+    const pageButtons = [];
+    let start = 0;
+    let end = Math.min(this.count, this.maxCountPages);
+    let pageCount = Math.floor((this.maxCountPages - 4) / 2);
+    if (hasOverflowStart) {
+      pageButtons.push(this.getPageButton(0));
+      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+          if (hasOverflowEnd) {
+            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));
+          }
+          else {
+            this.selectPage(this.count - this.maxCountPages);
+          }
+        } }, "..."));
+      if (hasOverflowEnd) {
+        start = this.count - this.maxCountPages + 2;
+      }
+      else {
+        start = this.count - this.maxCountPages + 2;
+        end = this.count;
+      }
+    }
+    if (hasOverflowEnd) {
+      if (hasOverflowStart) {
+        start = this.selectedPage - pageCount;
+        end = this.selectedPage + pageCount + 1;
+      }
+      else {
+        end = this.maxCountPages - 2;
+      }
+    }
+    for (let i = start; i < end; i++) {
+      pageButtons.push(this.getPageButton(i));
+    }
+    if (hasOverflowEnd) {
+      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+          if (hasOverflowStart) {
+            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));
+          }
+          else {
+            this.selectPage(this.maxCountPages - 1);
+          }
+        } }, "..."));
+      pageButtons.push(this.getPageButton(this.count - 1));
+    }
+    return h("span", { class: "page-buttons" }, pageButtons);
+  }
+  render() {
+    return (h(Host, null, h("ix-icon-button", { disabled: this.selectedPage === 0, ghost: true, icon: "chevron-left-small", onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, this.i18nPage, h("input", { class: "form-control", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        const index = Number.parseInt(e.target['value']);
+        this.selectPage(index - 1);
+      } }), h("span", { class: "total-count" }, this.i18nOf, " ", this.count))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { disabled: this.selectedPage === this.count - 1, ghost: true, icon: "chevron-right-small", onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, this.i18nItems, h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", "selected-indices": this.itemCount, onItemSelectionChange: (e) => {
+        const count = Number.parseInt(e.detail[0]);
+        this.itemCountChanged.emit(count);
+      } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
+  }
+  get hostElement() { return getElement(this); }
+};
+Pagination.style = paginationCss;
+
+export { Pagination as ix_pagination };
+
+//# sourceMappingURL=ix-pagination.entry.js.map

package/dist/esm/ix-pagination.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-pagination.entry.js","mappings":"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","names":[],"sources":["./src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=scoped","./src/components/pagination/pagination.tsx"],"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\n@import 'common-variables';\n\n:host {\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  input {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  ix-index-button + ix-index-button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  scoped: true,\n})\nexport class Pagination {\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  get pageInput() {\n    return this.hostElement.querySelector(\n      '.advanced-pagination input.form-control'\n    );\n  }\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    return (\n      <ix-index-button\n        variant=\"Primary\"\n        onClick={() => {\n          this.selectPage(index);\n        }}\n        selected={this.selectedPage === index}\n      >\n        {index + 1}\n      </ix-index-button>\n    );\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(\n        <ix-index-button\n          variant=\"Secondary\"\n          onClick={() => {\n            if (hasOverflowEnd) {\n              this.selectPage(\n                this.selectedPage - Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.count - this.maxCountPages);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      pageButtons.push(\n        <ix-index-button\n          variant=\"Secondary\"\n          onClick={() => {\n            if (hasOverflowStart) {\n              this.selectPage(\n                this.selectedPage + Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.maxCountPages - 1);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon=\"chevron-left-small\"\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            {this.i18nPage}\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              {this.i18nOf} {this.count}\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon=\"chevron-right-small\"\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            {this.i18nItems}\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              selected-indices={this.itemCount}\n              onItemSelectionChange={(e) => {\n                const count = Number.parseInt(e.detail[0]);\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-select_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d163acd.js';
 
-const selectCss = ".sc-ix-select-h{display:inline-block;position:relative;height:auto;width:100%}.sc-ix-select-h .select.sc-ix-select{position:relative;display:flex;align-items:center;height:auto;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}.sc-ix-select-h .select.sc-ix-select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff !important;outline-offset:var(--theme-input--focus--outline-offset)}.sc-ix-select-h .trigger.sc-ix-select{display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-select-h .input-container.sc-ix-select{display:flex;position:relative;align-items:flex-start;width:100%}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select>ix-filter-chip.sc-ix-select{margin:0 0.1rem}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:hover,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:focus-visible{border:none;outline:none}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::-moz-placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::-moz-placeholder{opacity:0}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::placeholder{opacity:0}.sc-ix-select-h .chevron-down-container.sc-ix-select{display:flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:100%}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover)}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):active{background-color:var(--theme-btn-invisible-secondary--background--active)}.sc-ix-select-h .add-item.sc-ix-select{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}.sc-ix-select-h .select-list-header.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 2rem}";
+const selectCss = ".sc-ix-select-h{display:inline-block;position:relative;height:auto;width:100%}.sc-ix-select-h .select.sc-ix-select{position:relative;display:flex;align-items:center;height:auto;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}.sc-ix-select-h .select.sc-ix-select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff !important;outline-offset:var(--theme-input--focus--outline-offset)}.sc-ix-select-h .hidden.sc-ix-select{display:none !important}.sc-ix-select-h .trigger.sc-ix-select{display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-select-h .input-container.sc-ix-select{display:flex;position:relative;align-items:flex-start;width:100%}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select>ix-filter-chip.sc-ix-select{margin:0.1rem}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:hover,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:focus-visible{border:none;outline:none}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::-moz-placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::-moz-placeholder{opacity:0}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::placeholder{opacity:0}.sc-ix-select-h .chevron-down-container.sc-ix-select{display:flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:100%}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover)}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):active{background-color:var(--theme-btn-invisible-secondary--background--active)}.sc-ix-select-h .add-item.sc-ix-select{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}.sc-ix-select-h .select-list-header.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 2rem}";
 
 const Select = class {
   constructor(hostRef) {
@@ -16,6 +16,8 @@ const Select = class {
     this.i18nPlaceholder = 'Select an option';
     this.i18nPlaceholderEditable = 'Type of select option';
     this.i18nSelectListHeader = 'Please select an option';
+    this.i18nNoMatches = 'No matches';
+    this.hideListHeader = false;
     this.dropdownShow = false;
     this.value = undefined;
     this.dropdownWrapperRef = undefined;
@@ -41,6 +43,9 @@ const Select = class {
   get isMultipleMode() {
     return this.mode === 'multiple';
   }
+  get isEveryDropdownItemHidden() {
+    return this.items.every((item) => item.classList.contains('d-none'));
+  }
   watchSelectedIndices(newId) {
     if (!newId) {
       this.selectValue([]);
@@ -56,14 +61,6 @@ const Select = class {
     const newId = event.detail;
     this.emitItemClick(newId);
   }
-  watchInputText(newValue) {
-    if (!this.editable) {
-      return;
-    }
-    if (this.itemExists(newValue)) {
-      return;
-    }
-  }
   emitItemClick(newId) {
     if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
       if (this.selectedIndices.includes(newId)) {
@@ -83,10 +80,10 @@ const Select = class {
     if (value.trim() === '') {
       return;
     }
-    const test = document.createElement('ix-select-item');
-    test.value = value;
-    test.label = value;
-    this.addItemRef.appendChild(test);
+    const newItem = document.createElement('ix-select-item');
+    newItem.value = value;
+    newItem.label = value;
+    this.addItemRef.appendChild(newItem);
     this.clearInput();
     this.emitItemClick(value);
     this.addItem.emit(value);
@@ -127,14 +124,16 @@ const Select = class {
   }
   dropdownVisibilityChanged(event) {
     this.dropdownShow = event.detail;
+    this.hasFocus = event.detail;
     if (event.detail) {
       this.inputRef.focus();
       this.inputRef.select();
-      this.navigationItem = this.items[0];
-      this.setHoverEffectForNavigatedSelectItem();
       this.removeHiddenFromItems();
+      this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+    }
+    else {
+      this.navigationItem = undefined;
     }
-    this.hasFocus = event.detail;
   }
   async onKeyDown(event) {
     if (!this.dropdownShow) {
@@ -168,6 +167,8 @@ const Select = class {
   onArrowNavigation(event) {
     event.stopPropagation();
     event.preventDefault();
+    const focusItem = this.items.find((item) => document.activeElement === item.querySelector('button'));
+    this.navigationItem = focusItem;
     const selectItems = this.items.filter((i) => !i.classList.contains('d-none'));
     const index = selectItems.indexOf(this.navigationItem);
     if (event.code === 'ArrowDown' && index < selectItems.length - 1) {
@@ -179,9 +180,8 @@ const Select = class {
     this.setHoverEffectForNavigatedSelectItem();
   }
   setHoverEffectForNavigatedSelectItem() {
-    this.items.forEach((item) => {
-      item.hover = item === this.navigationItem;
-    });
+    var _a;
+    (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.querySelector('button').focus();
   }
   filterItemsWithTypeahead() {
     this.inputFilterText = this.inputRef.value;
@@ -196,7 +196,7 @@ const Select = class {
     else {
       this.removeHiddenFromItems();
     }
-    this.isDropdownEmpty = this.items.every((item) => item.classList.contains('d-none'));
+    this.isDropdownEmpty = this.isEveryDropdownItemHidden;
   }
   removeHiddenFromItems() {
     this.items.forEach((item) => {
@@ -214,6 +214,28 @@ const Select = class {
     this.itemSelectionChange.emit(null);
     this.dropdownShow = false;
   }
+  onInputBlur(e) {
+    if (this.editable) {
+      return;
+    }
+    if (this.isSingleMode) {
+      if (this.dropdownShow && this.isDropdownEmpty) {
+        this.dropdownShow = false;
+      }
+    }
+    if (!this.dropdownShow && this.mode !== 'multiple') {
+      e.target['value'] = this.value;
+    }
+  }
+  placeholderValue() {
+    if (this.editable) {
+      return this.i18nPlaceholderEditable;
+    }
+    if (this.readonly) {
+      return '';
+    }
+    return this.i18nPlaceholder;
+  }
   render() {
     var _a, _b, _c;
     return (h(Host, null, h("div", { class: {
@@ -228,18 +250,15 @@ const Select = class {
         if (!this.editable)
           this.dropdownWrapperRef = ref;
       } }, h("div", { class: "input-container" }, h("div", { 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, onCloseClick: (e) => {
+      ? (_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.emitItemClick(item.value);
         } }, item.label)))
       : '', h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
         'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
-      }, placeholder: this.editable
-        ? this.i18nPlaceholderEditable
-        : this.i18nPlaceholder, value: this.inputValue, ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), this.isMultipleMode &&
-      this.allowClear &&
-      (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
+      }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onInput: () => this.filterItemsWithTypeahead() }), this.allowClear &&
+      (((_c = this.value) === 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) => {
         e.preventDefault();
         e.stopPropagation();
         this.clear();
@@ -247,26 +266,26 @@ const Select = class {
         if (this.editable)
           this.dropdownWrapperRef = ref;
       } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, class: {
-        'd-none': this.disabled ||
-          this.readonly ||
-          (this.isDropdownEmpty && !this.editable),
-      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async (delegateConfig) => {
+        'd-none': this.disabled || this.readonly,
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
         return {
-          width: `${delegateConfig.triggerRef.clientWidth}px`,
+          minWidth: `${this.hostElement.clientWidth}px`,
         };
-      } }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+      } }, h("div", { class: {
+        'select-list-header': true,
+        hidden: this.hideListHeader || this.isDropdownEmpty,
+      }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
         'add-item': true,
         'd-none': !(this.editable && this.inputFilterText),
       }, label: this.inputFilterText, onItemClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         this.emitAddItem(this.inputFilterText);
-      } })))));
+      } })), this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
-    "selectedIndices": ["watchSelectedIndices"],
-    "inputFilterText": ["watchInputText"]
+    "selectedIndices": ["watchSelectedIndices"]
   }; }
 };
 Select.style = selectCss;
@@ -288,7 +307,7 @@ class IxSelectItemLabelChangeEvent extends CustomEvent {
   }
 }
 
-const selectItemCss = ".sc-ix-select-item-h{display:block}.sc-ix-select-item-h ix-dropdown-item.sc-ix-select-item button.sc-ix-select-item{margin-left:1rem}";
+const selectItemCss = ".sc-ix-select-item-h{display:block}";
 
 const SelectItem = class {
   constructor(hostRef) {
@@ -320,7 +339,7 @@ const SelectItem = class {
     }));
   }
   render() {
-    return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, hover: this.hover, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+    return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {