@siemens/ix 1.1.0-beta.3 → 1.1.0-beta.5

package/dist/components/map-navigation-overlay.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './icon-button.js';
+
+const mapNavigationOverlayCss = ".text-xs.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-map-navigation-overlay{color:var(--theme-color-primary)}.sc-ix-map-navigation-overlay-h{position:absolute;width:100%;height:100%;z-index:2;background-color:var(--theme-overlay--background)}.sc-ix-map-navigation-overlay-h .overlay-header.sc-ix-map-navigation-overlay{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay{display:flex;align-items:center;min-width:0}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay ix-icon.sc-ix-map-navigation-overlay{margin-left:1rem;color:var(--theme-overlay-header--color)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay .overlay-header-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);margin-left:1rem}.sc-ix-map-navigation-overlay-h .color-indicator.sc-ix-map-navigation-overlay{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}.sc-ix-map-navigation-overlay-h .overlay-close.sc-ix-map-navigation-overlay{margin-left:auto;margin-right:1rem}";
+
+const MapNavigationOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.closeClick = createEvent(this, "closeClick", 7);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "overlay-header" }, h("div", { class: {
+        'color-indicator': true,
+        'd-none': this.color === 'undefined' || this.color === undefined,
+      }, style: {
+        'background-color': this.color
+          ? `var(--theme-${this.color})`
+          : '',
+      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", invisible: true, icon: "close", size: "24", onClick: () => this.closeClick.emit() })), h("slot", null)));
+  }
+  static get style() { return mapNavigationOverlayCss; }
+}, [6, "ix-map-navigation-overlay", {
+    "name": [1],
+    "icon": [1],
+    "color": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-map-navigation-overlay", "ix-icon", "ix-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-map-navigation-overlay":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapNavigationOverlay);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { MapNavigationOverlay as M, defineCustomElement as d };

package/dist/components/menu-avatar-item.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './dropdown-item.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const menuAvatarItemCss = ".sc-ix-menu-avatar-item-h{display:block}";
+
+const MenuAvatarItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemClick = createEvent(this, "itemClick", 7);
+  }
+  render() {
+    return (h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+  }
+  get hostElement() { return this; }
+  static get style() { return menuAvatarItemCss; }
+}, [2, "ix-menu-avatar-item", {
+    "icon": [1],
+    "label": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-avatar-item", "ix-dropdown-item", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-avatar-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAvatarItem);
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { MenuAvatarItem as M, defineCustomElement as d };

package/dist/components/menu-item.js

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const menuItemCss = "ix-menu-item{position:relative;display:block}ix-menu-item .tab{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}ix-menu-item .tab:not(.selected){cursor:pointer}ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled).hover,ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled).active,ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}ix-menu-item i.glyph{color:var(--theme-nav-item-primary-icon--color);position:relative}ix-menu-item .tab:focus-visible{outline:none}ix-menu-item:focus-visible{outline:none}ix-menu-item .tab:not(:last-child){margin-bottom:0.5rem}ix-menu-item .notification{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}ix-menu-item .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}ix-menu-item .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}ix-menu-item.active .tab,ix-menu-item.selected .tab{background-color:var(--theme-nav-item-primary--background--selected)}ix-menu-item.active .tab::before,ix-menu-item.selected .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}ix-menu-item.active .tab>.glyph,ix-menu-item.selected .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}ix-menu-item.disabled{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}ix-menu-item.disabled .tab>.glyph{color:var(--theme-color-weak-text)}ix-menu-item.disabled .tab-text{color:var(--theme-color-weak-text)}ix-menu-item.home-tab,ix-menu-item[slot=home]{margin-bottom:1.5rem}ix-menu-item.bottom-tab,ix-menu-item[slot=bottom]{height:2.25rem}ix-menu-item.bottom-tab .tab,ix-menu-item[slot=bottom] .tab{height:2.25rem}ix-menu-item.bottom-tab .tab::before,ix-menu-item[slot=bottom] .tab::before{height:2.25rem}ix-menu-item.bottom-tab.active .tab,ix-menu-item.bottom-tab.selected .tab,ix-menu-item[slot=bottom].active .tab,ix-menu-item[slot=bottom].selected .tab{background-color:var(--theme-color-1)}";
+
+const MenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Move the Tab to a top position.
+     */
+    this.home = false;
+    /**
+     * Place tab on bottom
+     */
+    this.bottom = false;
+    /**
+     * Icon name from @siemens/ix-icons
+     */
+    this.tabIcon = 'document';
+  }
+  get tabLabel() {
+    return this.hostElement.querySelector('.tab-text');
+  }
+  componentDidRender() {
+    const spanElement = this.tabLabel;
+    const newTitle = spanElement.innerHTML.replace('&', '&');
+    if (this.title !== newTitle) {
+      this.title = newTitle;
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        disabled: this.disabled,
+        'home-tab': this.home,
+        'bottom-tab': this.bottom,
+        active: this.active,
+      } }, h("li", { class: "tab", title: this.title }, h("i", { class: `glyph glyph-${this.tabIcon}` }, h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null)), h("span", { class: "tab-text text-default" }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return menuItemCss; }
+}, [4, "ix-menu-item", {
+    "home": [4],
+    "bottom": [4],
+    "tabIcon": [1, "tab-icon"],
+    "notifications": [2],
+    "active": [4],
+    "disabled": [4],
+    "title": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuItem);
+      }
+      break;
+  } });
+}
+
+export { MenuItem as M, defineCustomElement as d };

package/dist/components/modal-container.js

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { T as TypedEvent } from './typed-event.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './modal.js';
+
+const modalContainerCss = ".sc-ix-modal-container-h{position:absolute;top:0;left:0;z-index:9999}";
+
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const ModalContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  /**
+   * Display modal dialog
+   *
+   * @param config
+   */
+  async showModal(config) {
+    const onClose = new TypedEvent();
+    const onDismiss = new TypedEvent();
+    const modal = document.createElement('ix-modal');
+    let { title, content } = config, modifiedConfig = __rest(config, ["title", "content"]);
+    Object.assign(modal, Object.assign({ headerTitle: title }, modifiedConfig));
+    if (typeof content === 'string') {
+      const template = document.createElement('template');
+      content = content.trim();
+      template.innerHTML = content;
+      modal.appendChild(template.content.firstChild);
+    }
+    else {
+      modal.appendChild(content);
+    }
+    this.hostElement.appendChild(modal);
+    modal.addEventListener('closed', (event) => {
+      this.hostElement.removeChild(modal);
+      onClose.emit(event.detail);
+    });
+    modal.addEventListener('dismissed', (event) => {
+      this.hostElement.removeChild(modal);
+      onDismiss.emit(event.detail);
+    });
+    return {
+      onClose,
+      onDismiss,
+    };
+  }
+  render() {
+    return h(Host, null);
+  }
+  get hostElement() { return this; }
+  static get style() { return modalContainerCss; }
+}, [2, "ix-modal-container", {
+    "showModal": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal-container", "ix-icon", "ix-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalContainer);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ModalContainer as M, defineCustomElement as d };

package/dist/components/modal-utils.js

@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function getModalContainer() {
+  const containerList = Array.from(document.querySelectorAll('ix-modal-container'));
+  const [container] = containerList;
+  if (containerList.length > 1) {
+    console.warn('Multiple modal container are found. Only there first is used.');
+    return container;
+  }
+  if (!container) {
+    const modalContainer = document.createElement('ix-modal-container');
+    document.body.appendChild(modalContainer);
+    return modalContainer;
+  }
+  return container;
+}
+async function modal(config) {
+  const modalContainer = getModalContainer();
+  const modalInstance = await modalContainer.showModal(config);
+  return modalInstance;
+}
+function getIxModal(element) {
+  return element.closest('ix-modal');
+}
+function closeModal(element, closeResult) {
+  getIxModal(element).close(closeResult);
+}
+function dismissModal(element, dismissResult) {
+  getIxModal(element).dismiss(dismissResult);
+}
+
+export { closeModal as c, dismissModal as d, modal as m };

package/dist/components/modal.js

@@ -0,0 +1,189 @@
+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';
+
+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}.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}}";
+
+const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.closed = createEvent(this, "closed", 7);
+    this.dismissed = createEvent(this, "dismissed", 7);
+    /**
+     * Should the modal be animtated
+     */
+    this.animation = true;
+    /**
+     *
+     */
+    this.ariaLabelledBy = 'modal-title';
+    /**
+     * Adds a dimming layer to the modal.
+     * 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).
+     */
+    this.backdrop = true;
+    /**
+     * Centered modal
+     */
+    this.centered = false;
+    /**
+     * ESC close modal dialog
+     */
+    this.keyboard = true;
+    /**
+     * Color of the header {@link icon}
+     */
+    this.iconColor = 'color-std-text';
+    /**
+     * Modal scollable
+     */
+    this.scrollable = true;
+    /**
+     * Modal size
+     */
+    this.size = 'sm';
+    this.onKeydown = this.handleKeydown.bind(this);
+  }
+  get modal() {
+    return this.hostElement.querySelector('.modal');
+  }
+  get modalDialog() {
+    return this.modal.querySelector('.modal-dialog');
+  }
+  get modalContent() {
+    return this.modalDialog.querySelector('.modal-content');
+  }
+  get modalBackdrop() {
+    return this.hostElement.querySelector('.backdrop');
+  }
+  slideDown(modal) {
+    const duration = this.animation ? Animation.mediumTime : 0;
+    anime({
+      targets: modal,
+      duration,
+      opacity: [0, 1],
+      translateY: ['-100%', 0],
+      easing: 'easeOutSine',
+    });
+  }
+  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();
+        }
+      },
+    });
+  }
+  componentDidLoad() {
+    if (this.backdrop === 'static') {
+      this.modalBackdrop.addEventListener('click', this.dismiss.bind(this));
+    }
+    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);
+    }
+    if (this.keyboard) {
+      window.addEventListener('keydown', this.onKeydown);
+    }
+    this.slideDown(this.modalContent);
+  }
+  handleKeydown(ev) {
+    if (ev.key === 'Escape') {
+      this.dismiss(ev.key);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.onKeydown);
+  }
+  /**
+   * 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));
+    }
+  }
+  /**
+   * Close modal
+   * @param result
+   */
+  async close(result) {
+    this.slideUp(this.modalContent, () => this.closed.emit(result));
+  }
+  render() {
+    return (h(Host, null, 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)))))));
+  }
+  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;
+  }
+  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;
+  } });
+}
+
+export { Modal as M, defineCustomElement as d };

package/dist/components/mutation-observer.js

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const createMutationObserver = (callback) => new MutationObserver(callback);
+
+export { createMutationObserver as c };

package/dist/components/my-component.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MyComponent extends Components.MyComponent, HTMLElement {}
+export const MyComponent: {
+  prototype: MyComponent;
+  new (): MyComponent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/my-component.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const myComponentCss = ".sc-my-component-h{display:flex;flex-direction:column;width:100vw;height:100vh}.sc-my-component-h main.sc-my-component{width:100%;padding:2rem}.sc-my-component-h ix-chip.sc-my-component{-webkit-margin-after:1rem;margin-block-end:1rem}";
+
+const MyComponent$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get style() { return myComponentCss; }
+}, [2, "my-component"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["my-component"];
+  components.forEach(tagName => { switch (tagName) {
+    case "my-component":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MyComponent$1);
+      }
+      break;
+  } });
+}
+
+const MyComponent = MyComponent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MyComponent, defineCustomElement };

package/dist/components/popover.util.js

@@ -0,0 +1,36 @@
+import { a as convertToRemString } from './rwd.util.js';
+
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class Popover {
+  constructor(hostElement, popoverElement, outsideCallback) {
+    this.hostElement = hostElement;
+    this.popoverElement = popoverElement;
+    this.outsideCallback = outsideCallback;
+  }
+  outside(e) {
+    var _a;
+    if (!((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+      this.outsideCallback(e);
+    }
+  }
+  open(maxWidth = 256) {
+    this.popoverElement.style.transform = `
+      translateX(${this.hostElement.offsetLeft + this.hostElement.offsetWidth}px)
+      translateY(-${this.hostElement.offsetHeight}px)
+    `;
+    this.popoverElement.style.maxWidth = convertToRemString(maxWidth);
+    document.body.addEventListener('click', this.outside.bind(this));
+  }
+  destroy() {
+    document.body.removeEventListener('click', this.outside.bind(this));
+  }
+}
+
+export { Popover as P };