@siemens/ix 1.1.0-beta.1 → 1.1.0-beta.2

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

@@ -1,53 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,38 +0,0 @@
-/*
- * 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

@@ -1,189 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/*
- * 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

@@ -1,11 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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 };