@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/components/modal.js

@@ -1,185 +1,245 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as anime } from './anime.es.js';
-import { A as Animation } from './animation.js';
-import { d as defineCustomElement$1 } from './icon.js';
+import { T as TypedEvent } from './typed-event.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;border-radius:var(--theme-default-border-radius)}.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 = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    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;
-    this.ariaLabelledBy = 'modal-title';
-    this.backdrop = true;
-    this.backdropClass = undefined;
-    this.beforeDismiss = undefined;
-    this.centered = false;
-    this.content = undefined;
-    this.keyboard = true;
-    this.icon = undefined;
-    this.iconColor = 'color-std-text';
-    this.modalDialogClass = undefined;
-    this.scrollable = true;
-    this.size = 'sm';
-    this.headerTitle = undefined;
-    this.windowClass = undefined;
-  }
-  get modal() {
-    return this.hostElement.querySelector('.modal');
-  }
-  get modalDialog() {
-    return this.modal.querySelector('.modal-dialog');
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class DefaultFrameworkDelegate {
+  async attachView(view, config) {
+    var _a;
+    const attachToElement = (_a = config === null || config === void 0 ? void 0 : config.parentElement) !== null && _a !== void 0 ? _a : document.body;
+    attachToElement.appendChild(view);
+    return view;
   }
-  get modalContent() {
-    return this.modalDialog.querySelector('.modal-content');
+  async removeView(view) {
+    view.remove();
   }
-  get modalBackdrop() {
-    return this.hostElement.querySelector('.backdrop');
+}
+const coreDelegate = new DefaultFrameworkDelegate();
+let currentDelegate = coreDelegate;
+function registerFrameworkDelegate(delegate) {
+  currentDelegate = delegate;
+}
+const resolveDelegate = () => {
+  return currentDelegate;
+};
+const getCoreDelegate = () => coreDelegate;
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function setA11yAttributes$1(element, config) {
+  const ariaDescribedby = config.ariaDescribedby;
+  const ariaLabelledby = config.ariaLabelledby;
+  delete config['ariaDescribedby'];
+  delete config['ariaLabelledby'];
+  if (ariaDescribedby) {
+    element.setAttribute('aria-describedby', ariaDescribedby);
   }
-  slideDown(modal) {
-    const duration = this.animation ? Animation.mediumTime : 0;
-    anime({
-      targets: modal,
-      duration,
-      opacity: [0, 1],
-      translateY: ['-100%', 0],
-      easing: 'easeOutSine',
-    });
+  if (ariaLabelledby) {
+    element.setAttribute('aria-labelledby', ariaLabelledby);
   }
-  slideUp(modal, completeCallback) {
-    const duration = this.animation ? Animation.mediumTime : 0;
-    anime({
-      targets: modal,
-      duration,
-      opacity: [1, 0],
-      translateY: [0, '-100%'],
-      easing: 'easeInSine',
-      complete: () => {
-        if (completeCallback) {
-          completeCallback();
-        }
+}
+function createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel) {
+  let actions = [];
+  if (textCancel !== undefined) {
+    actions = [
+      ...actions,
+      {
+        id: 'cancel',
+        text: textCancel,
+        type: 'cancel',
+        payload: payloadCancel,
       },
-    });
-  }
-  onBackdropClick(event) {
-    const target = event.target;
-    if (target.classList.contains('backdrop')) {
-      this.dismiss(event);
-    }
+    ];
   }
-  componentDidLoad() {
-    if (this.backdrop === 'static') {
-      this.modalBackdrop.addEventListener('click', (event) => this.onBackdropClick(event));
-    }
-    if (this.backdropClass) {
-      this.modalBackdrop.classList.add(this.backdropClass);
-    }
-    if (this.modalDialogClass) {
-      this.modalDialog.classList.add(this.modalDialogClass);
-    }
-    if (this.windowClass) {
-      this.modal.classList.add(this.windowClass);
+  return [
+    ...actions,
+    {
+      id: 'okay',
+      text: textOkay,
+      type: 'okay',
+      payload: payloadOkay,
+    },
+  ];
+}
+async function showMessage(config) {
+  const onMessageAction = new TypedEvent();
+  const dialog = document.createElement('ix-modal');
+  const header = document.createElement('ix-modal-header');
+  const content = document.createElement('ix-modal-content');
+  const footer = document.createElement('ix-modal-footer');
+  setA11yAttributes$1(dialog, config);
+  Object.assign(header, config);
+  Object.assign(content, config);
+  Object.assign(footer, config);
+  header.innerText = config.messageTitle;
+  content.innerText = config.message;
+  config.actions.forEach(({ id, text, type, payload }) => {
+    const button = document.createElement('ix-button');
+    button.innerText = text;
+    footer.appendChild(button);
+    if (type === 'okay') {
+      button.variant = 'primary';
+      button.addEventListener('click', () => dialog.closeModal({
+        actionId: id,
+        payload,
+      }));
+      return;
     }
-    if (this.keyboard) {
-      window.addEventListener('keydown', this.onKeydown);
+    if (type === 'cancel') {
+      button.variant = 'primary';
+      button.outline = true;
+      button.addEventListener('click', () => dialog.dismissModal({
+        actionId: id,
+        payload,
+      }));
+      return;
     }
-    this.slideDown(this.modalContent);
+  });
+  dialog.appendChild(header);
+  dialog.appendChild(content);
+  dialog.appendChild(footer);
+  const dialogRef = await getCoreDelegate().attachView(dialog);
+  dialogRef.addEventListener('dialogClose', (event) => {
+    onMessageAction.emit(event.detail);
+    dialogRef.remove();
+  });
+  dialogRef.addEventListener('dialogDismiss', (event) => {
+    onMessageAction.emit(event.detail);
+    dialogRef.remove();
+  });
+  dialogRef.showModal();
+  return onMessageAction;
+}
+showMessage.info = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'info',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.warning = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'warning',
+    iconColor: 'color-warning',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.error = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'error',
+    iconColor: 'color-alarm',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.success = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'success',
+    iconColor: 'color-success',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.question = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'question',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function setA11yAttributes(element, config) {
+  const ariaDescribedby = config.ariaDescribedby;
+  const ariaLabelledby = config.ariaLabelledby;
+  delete config['ariaDescribedby'];
+  delete config['ariaLabelledby'];
+  if (ariaDescribedby) {
+    element.setAttribute('aria-describedby', ariaDescribedby);
   }
-  handleKeydown(ev) {
-    if (ev.key === 'Escape') {
-      this.dismiss(ev.key);
-    }
+  if (ariaLabelledby) {
+    element.setAttribute('aria-labelledby', ariaLabelledby);
   }
-  disconnectedCallback() {
-    window.removeEventListener('keydown', this.onKeydown);
+}
+function getIxModal(element) {
+  return element.closest('ix-modal');
+}
+function closeModal(element, closeResult) {
+  const dialog = getIxModal(element);
+  if (dialog) {
+    dialog.closeModal(closeResult);
+    return;
   }
-  /**
-   * Dismiss modal instance
-   * @param reason
-   */
-  async dismiss(reason) {
-    if (this.beforeDismiss) {
-      const result = await this.beforeDismiss(reason);
-      if (result !== false) {
-        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
-      }
-    }
-    else {
-      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
-    }
+}
+function dismissModal(element, dismissResult) {
+  const dialog = getIxModal(element);
+  if (dialog) {
+    dialog.dismissModal(dismissResult);
+    return;
   }
-  /**
-   * Close modal
-   * @param result
-   */
-  async close(result) {
-    this.slideUp(this.modalContent, () => this.closed.emit(result));
+}
+async function showModal(config) {
+  const delegate = resolveDelegate();
+  let dialogRef;
+  const onClose = new TypedEvent();
+  const onDismiss = new TypedEvent();
+  if (typeof config.content === 'string') {
+    const dialog = document.createElement('ix-modal');
+    dialog.innerText = config.content;
+    dialogRef = await getCoreDelegate().attachView(dialog);
   }
-  render() {
-    return (h(Host, { id: this.modalId }, h("div", { class: {
-        animation: this.animation,
-        modal: true,
-        backdrop: this.backdrop === 'static' || this.backdrop,
-        'align-items-center': this.centered,
-        scrollable: this.scrollable,
-      }, "aria-describedby": this.ariaDescribedBy, "aria-labelledby": this.ariaLabelledBy }, h("div", { class: {
-        'modal-dialog': true,
-        'modal-sm': this.size === 'sm',
-        'modal-lg': this.size === 'lg',
-        'modal-xl': this.size === 'xl',
-      } }, h("div", { class: "modal-content" }, this.icon === undefined || this.icon === '' ? ('') : (h("div", { class: "state-icon-container" }, h("ix-icon", { name: this.icon, size: "32", color: this.iconColor }))), h("div", { class: "slot-container" }, h("slot", null)))))));
+  if (config.content instanceof HTMLElement &&
+    config.content.tagName !== 'IX-MODAL') {
+    const dialog = document.createElement('ix-modal');
+    dialog.appendChild(config.content);
+    dialogRef = await getCoreDelegate().attachView(dialog);
   }
-  get hostElement() { return this; }
-  static get style() { return modalCss; }
-}, [6, "ix-modal", {
-    "animation": [4],
-    "ariaDescribedBy": [1, "aria-described-by"],
-    "ariaLabelledBy": [1, "aria-labelled-by"],
-    "backdrop": [8],
-    "backdropClass": [1, "backdrop-class"],
-    "beforeDismiss": [16],
-    "centered": [4],
-    "content": [1],
-    "keyboard": [4],
-    "icon": [1],
-    "iconColor": [1, "icon-color"],
-    "modalDialogClass": [1, "modal-dialog-class"],
-    "scrollable": [4],
-    "size": [1],
-    "headerTitle": [1, "header-title"],
-    "windowClass": [1, "window-class"],
-    "dismiss": [64],
-    "close": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
+  if (!dialogRef) {
+    dialogRef = await delegate.attachView(config.content);
   }
-  const components = ["ix-modal", "ix-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Modal);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+  setA11yAttributes(dialogRef, config);
+  Object.assign(dialogRef, config);
+  dialogRef.setAttribute('ariaDescribedby', 'Test');
+  dialogRef.showModal();
+  dialogRef.addEventListener('dialogClose', async ({ detail }) => {
+    onClose.emit(detail);
+    await delegate.removeView(dialogRef);
+  });
+  dialogRef.addEventListener('dialogDismiss', async ({ detail }) => {
+    onDismiss.emit(detail);
+    await delegate.removeView(dialogRef);
+  });
+  return {
+    htmlElement: dialogRef,
+    onClose,
+    onDismiss,
+  };
 }
 
-export { Modal as M, defineCustomElement as d };
+export { resolveDelegate as a, showModal as b, closeModal as c, dismissModal as d, getCoreDelegate as g, registerFrameworkDelegate as r, showMessage as s };
 
 //# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"file":"modal.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=scoped","./src/components/modal/modal.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      border-radius: var(--theme-default-border-radius);\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"],"version":3}
+{"file":"modal.js","mappings":"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","names":["setA11yAttributes"],"sources":["./src/components/utils/delegate.ts","./src/components/utils/modal/message.ts","./src/components/utils/modal/modal.ts"],"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\nexport type DelegateConfig = {\n  parentElement?: Element;\n};\n\nexport interface FrameworkDelegate {\n  attachView<R = HTMLElement>(view: any, config?: DelegateConfig): Promise<R>;\n  removeView(view: any): Promise<void>;\n}\n\nclass DefaultFrameworkDelegate implements FrameworkDelegate {\n  async attachView<R = HTMLElement>(\n    view: any,\n    config?: DelegateConfig\n  ): Promise<R> {\n    const attachToElement = config?.parentElement ?? document.body;\n    attachToElement.appendChild(view);\n    return view;\n  }\n\n  async removeView(view: any) {\n    view.remove();\n  }\n}\n\nconst coreDelegate = new DefaultFrameworkDelegate();\nlet currentDelegate: FrameworkDelegate = coreDelegate;\n\nexport function registerFrameworkDelegate(delegate: FrameworkDelegate) {\n  currentDelegate = delegate;\n}\n\nexport const resolveDelegate = () => {\n  return currentDelegate;\n};\n\nexport const getCoreDelegate = () => coreDelegate;\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 { getCoreDelegate } from '../delegate';\nimport { TypedEvent } from '../typed-event';\n\nfunction setA11yAttributes(element: HTMLElement, config: MessageContent) {\n  const ariaDescribedby = config.ariaDescribedby;\n  const ariaLabelledby = config.ariaLabelledby;\n\n  delete config['ariaDescribedby'];\n  delete config['ariaLabelledby'];\n\n  if (ariaDescribedby) {\n    element.setAttribute('aria-describedby', ariaDescribedby);\n  }\n\n  if (ariaLabelledby) {\n    element.setAttribute('aria-labelledby', ariaLabelledby);\n  }\n}\n\nfunction createConfirmButtons(\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) {\n  let actions = [];\n  if (textCancel !== undefined) {\n    actions = [\n      ...actions,\n      {\n        id: 'cancel',\n        text: textCancel,\n        type: 'cancel',\n        payload: payloadCancel,\n      },\n    ];\n  }\n  return [\n    ...actions,\n    {\n      id: 'okay',\n      text: textOkay,\n      type: 'okay',\n      payload: payloadOkay,\n    },\n  ];\n}\n\nexport type MessageContent = {\n  icon: string;\n  iconColor?: string;\n  messageTitle: string;\n  message: string;\n  actions: {\n    id: string;\n    type: 'button-primary' | 'button-secondary' | 'okay' | 'cancel';\n    text: string;\n    payload?: any;\n  }[];\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n};\n\nexport async function showMessage<T>(config: MessageContent) {\n  const onMessageAction = new TypedEvent<{\n    actionId: string;\n    payload: T;\n  }>();\n  const dialog = document.createElement('ix-modal');\n  const header = document.createElement('ix-modal-header');\n  const content = document.createElement('ix-modal-content');\n  const footer = document.createElement('ix-modal-footer');\n\n  setA11yAttributes(dialog, config);\n\n  Object.assign(header, config);\n  Object.assign(content, config);\n  Object.assign(footer, config);\n\n  header.innerText = config.messageTitle;\n  content.innerText = config.message;\n\n  config.actions.forEach(({ id, text, type, payload }) => {\n    const button = document.createElement('ix-button');\n    button.innerText = text;\n    footer.appendChild(button);\n\n    if (type === 'okay') {\n      button.variant = 'primary';\n      button.addEventListener('click', () =>\n        dialog.closeModal({\n          actionId: id,\n          payload,\n        })\n      );\n      return;\n    }\n    if (type === 'cancel') {\n      button.variant = 'primary';\n      button.outline = true;\n      button.addEventListener('click', () =>\n        dialog.dismissModal({\n          actionId: id,\n          payload,\n        })\n      );\n      return;\n    }\n  });\n\n  dialog.appendChild(header);\n  dialog.appendChild(content);\n  dialog.appendChild(footer);\n\n  const dialogRef = await getCoreDelegate().attachView<HTMLIxModalElement>(\n    dialog\n  );\n\n  dialogRef.addEventListener(\n    'dialogClose',\n    (\n      event: CustomEvent<{\n        actionId: string;\n        payload: T;\n      }>\n    ) => {\n      onMessageAction.emit(event.detail);\n      dialogRef.remove();\n    }\n  );\n\n  dialogRef.addEventListener(\n    'dialogDismiss',\n    (\n      event: CustomEvent<{\n        actionId: string;\n        payload: T;\n      }>\n    ) => {\n      onMessageAction.emit(event.detail);\n      dialogRef.remove();\n    }\n  );\n\n  dialogRef.showModal();\n  return onMessageAction;\n}\n\nshowMessage.info = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'info',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.warning = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'warning',\n    iconColor: 'color-warning',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.error = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'error',\n    iconColor: 'color-alarm',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.success = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'success',\n    iconColor: 'color-success',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.question = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'question',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\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 { IxModalSize } from '../../modal/modal';\nimport { getCoreDelegate, resolveDelegate } from '../delegate';\nimport { TypedEvent } from '../typed-event';\n\nexport function setA11yAttributes(element: HTMLElement, config: ModalConfig) {\n  const ariaDescribedby = config.ariaDescribedby;\n  const ariaLabelledby = config.ariaLabelledby;\n\n  delete config['ariaDescribedby'];\n  delete config['ariaLabelledby'];\n\n  if (ariaDescribedby) {\n    element.setAttribute('aria-describedby', ariaDescribedby);\n  }\n\n  if (ariaLabelledby) {\n    element.setAttribute('aria-labelledby', ariaLabelledby);\n  }\n}\n\nexport interface ModalConfig<TReason = any, CONTENT = any> {\n  animation?: boolean;\n  ariaDescribedby?: string;\n  ariaLabelledby?: string;\n  backdrop?: boolean;\n  closeOnBackdropClick?: boolean;\n  beforeDismiss?: (reason?: TReason) => boolean | Promise<boolean>;\n  centered?: boolean;\n  container?: string | HTMLElement;\n  content: CONTENT | string;\n  keyboard?: boolean;\n  size?: IxModalSize;\n  title?: string;\n}\n\nexport interface ModalInstance<TReason = any> {\n  htmlElement: HTMLIxModalElement;\n  onClose: TypedEvent<TReason>;\n  onDismiss: TypedEvent<TReason>;\n}\n\nfunction getIxModal(element: Element) {\n  return element.closest('ix-modal');\n}\n\nexport function closeModal<TClose = any>(\n  element: Element,\n  closeResult: TClose\n) {\n  const dialog = getIxModal(element);\n  if (dialog) {\n    dialog.closeModal(closeResult);\n    return;\n  }\n}\n\nexport function dismissModal(element: Element, dismissResult?: any) {\n  const dialog = getIxModal(element);\n  if (dialog) {\n    dialog.dismissModal(dismissResult);\n    return;\n  }\n}\n\nexport async function showModal<T>(\n  config: ModalConfig<T>\n): Promise<ModalInstance<T>> {\n  const delegate = resolveDelegate();\n  let dialogRef: HTMLIxModalElement;\n  const onClose = new TypedEvent<T>();\n  const onDismiss = new TypedEvent<T>();\n\n  if (typeof config.content === 'string') {\n    const dialog = document.createElement('ix-modal');\n    dialog.innerText = config.content;\n    dialogRef = await getCoreDelegate().attachView(dialog);\n  }\n\n  if (\n    config.content instanceof HTMLElement &&\n    config.content.tagName !== 'IX-MODAL'\n  ) {\n    const dialog = document.createElement('ix-modal');\n    dialog.appendChild(config.content);\n    dialogRef = await getCoreDelegate().attachView(dialog);\n  }\n\n  if (!dialogRef) {\n    dialogRef = await delegate.attachView<HTMLIxModalElement>(config.content);\n  }\n\n  setA11yAttributes(dialogRef, config);\n  Object.assign(dialogRef, config);\n\n  dialogRef.setAttribute('ariaDescribedby', 'Test');\n\n  dialogRef.showModal();\n  dialogRef.addEventListener('dialogClose', async ({ detail }: CustomEvent) => {\n    onClose.emit(detail);\n    await delegate.removeView(dialogRef);\n  });\n\n  dialogRef.addEventListener(\n    'dialogDismiss',\n    async ({ detail }: CustomEvent) => {\n      onDismiss.emit(detail);\n      await delegate.removeView(dialogRef);\n    }\n  );\n\n  return {\n    htmlElement: dialogRef,\n    onClose,\n    onDismiss,\n  };\n}\n"],"version":3}

package/dist/components/my-component.js.map

@@ -1 +1 @@
-{"file":"my-component.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0GAA0G;;MCgBpHA,aAAW;;;;;EACtB,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["MyComponent"],"sources":["./src/components/my-component/my-component.scss?tag=my-component&encapsulation=scoped","./src/components/my-component/my-component.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\n:host {\n  display: block;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  padding: 0rem 0rem 0rem 0rem;\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@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss',\n  scoped: true,\n})\nexport class MyComponent {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"my-component.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0GAA0G;;MCepHA,aAAW;;;;;EACtB,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["MyComponent"],"sources":["./src/components/my-component/my-component.scss?tag=my-component&encapsulation=scoped","./src/components/my-component/my-component.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\n:host {\n  display: block;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  padding: 0rem 0rem 0rem 0rem;\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 * LICENxSE file in the root directory of this source tree.\n */\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss',\n  scoped: true,\n})\nexport class MyComponent {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/components/select-item.js

@@ -19,12 +19,13 @@ class IxSelectItemLabelChangeEvent extends CustomEvent {
   }
 }
 
-const selectItemCss = ".sc-ix-select-item-h{display:block}";
+const selectItemCss = ":host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.d-none){display:none}";
 
 const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.itemClick = createEvent(this, "itemClick", 7);
     this.label = undefined;
     this.value = undefined;
@@ -52,14 +53,16 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTM
     }));
   }
   render() {
-    return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+    return (h(Host, null, h("ix-dropdown-item", { class: {
+        'select-item-checked': this.selected,
+      }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
   }
   get hostElement() { return this; }
   static get watchers() { return {
     "label": ["labelChange"]
   }; }
   static get style() { return selectItemCss; }
-}, [2, "ix-select-item", {
+}, [1, "ix-select-item", {
     "label": [513],
     "value": [520],
     "selected": [4],

package/dist/components/select-item.js.map

@@ -1 +1 @@
-{"file":"select-item.js","mappings":";;;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;EACA,YAAY,MAA8C;IACxD,KAAK,CAAC,4BAA4B,EAAE;MAClC,OAAO,EAAE,IAAI;MACb,MAAM;KACP,CAAC,CAAC;GACJ;;;ACjBH,MAAM,aAAa,GAAG,qCAAqC;;MC2B9C,UAAU;;;;;;;oBAgBF,KAAK;iBAKR,KAAK;;;;;;EAYrB,MAAM,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACjC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;GACF;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,wBACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=scoped","./src/components/select-item/select-item.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 */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\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  display: block;\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  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  scoped: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"select-item.js","mappings":";;;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;EACA,YAAY,MAA8C;IACxD,KAAK,CAAC,4BAA4B,EAAE;MAClC,OAAO,EAAE,IAAI;MACb,MAAM;KACP,CAAC,CAAC;GACJ;;;ACjBH,MAAM,aAAa,GAAG,mQAAmQ;;MC2B5Q,UAAU;;;;;;;;oBAgBF,KAAK;iBAKR,KAAK;;;;;;EAYrB,MAAM,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACjC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;GACF;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,wBACE,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","./src/components/select-item/select-item.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 */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\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  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.d-none) {\n  display: none;\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  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}