npm - @siemens/ix - Versions diffs - 1.6.2 → 2.0.0-beta.0 - Mend

@siemens/ix 1.6.2 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1110) hide show

package/dist/components/ix-modal.js CHANGED Viewed

@@ -1,4 +1,151 @@
-import { M as Modal, d as defineCustomElement$1 } from './modal.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y.js';
+import { A as Animation } from './animation.js';
+const modalCss = "::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host dialog{margin:0;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:grid;position:relative;flex-direction:column;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);max-height:80vh;overflow:hidden;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0px;left:0px;pointer-events:none}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";
+const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dialogClose = createEvent(this, "dialogClose", 7);
+    this.dialogDismiss = createEvent(this, "dialogDismiss", 7);
+    this.ariaAttributes = {};
+    this.size = '360';
+    this.animation = true;
+    this.backdrop = true;
+    this.closeOnBackdropClick = false;
+    this.beforeDismiss = undefined;
+    this.centered = false;
+    this.keyboard = true;
+  }
+  get dialog() {
+    return this.hostElement.shadowRoot.querySelector('dialog');
+  }
+  slideInModal() {
+    const duration = this.animation ? Animation.mediumTime : 0;
+    let transformY = this.centered ? '-50' : 40;
+    anime({
+      targets: this.dialog,
+      duration,
+      opacity: [0, 1],
+      translateY: [0, transformY],
+      translateX: ['-50%', '-50%'],
+      easing: 'easeOutSine',
+    });
+  }
+  slideOutModal(completeCallback) {
+    const duration = this.animation ? Animation.mediumTime : 0;
+    let transformY = this.centered ? '-50' : 40;
+    anime({
+      targets: this.dialog,
+      duration,
+      opacity: [1, 0],
+      translateY: [transformY, 0],
+      translateX: ['-50%', '-50%'],
+      easing: 'easeInSine',
+      complete: () => {
+        if (completeCallback) {
+          completeCallback();
+        }
+      },
+    });
+  }
+  onModalClick(event) {
+    const rect = this.dialog.getBoundingClientRect();
+    const isClickOutside = rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width;
+    if (!isClickOutside && this.closeOnBackdropClick) {
+      this.dismissModal();
+    }
+  }
+  /**
+   * Show the dialog
+   */
+  async showModal() {
+    this.dialog.showModal();
+  }
+  /**
+   * Dismiss the dialog
+   */
+  async dismissModal(reason) {
+    let allowDismiss = true;
+    if (this.beforeDismiss !== undefined) {
+      allowDismiss = await this.beforeDismiss(reason);
+    }
+    if (!allowDismiss) {
+      return;
+    }
+    this.slideOutModal(() => {
+      this.dialog.close(JSON.stringify({
+        type: 'dismiss',
+        reason,
+      }, null, 2));
+      this.dialogDismiss.emit(reason);
+    });
+  }
+  /**
+   * Close the dialog
+   */
+  async closeModal(reason) {
+    this.slideOutModal(() => {
+      this.dialog.close(JSON.stringify({
+        type: 'close',
+        reason,
+      }, null, 2));
+      this.dialogClose.emit(reason);
+    });
+  }
+  componentDidLoad() {
+    this.slideInModal();
+  }
+  componentWillLoad() {
+    this.ariaAttributes = a11yHostAttributes(this.hostElement);
+  }
+  render() {
+    return (h(Host, { class: {
+        'no-backdrop': this.backdrop === false,
+        'align-center': this.centered,
+      } }, h("div", { class: "dialog-backdrop" }, h("dialog", { "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: `modal modal-size-${this.size}`, onKeyDown: (e) => {
+        if (e.key === 'Escape' && this.keyboard === false) {
+          e.preventDefault();
+        }
+      }, onClick: (event) => this.onModalClick(event), onCancel: (e) => {
+        e.preventDefault();
+        this.dismissModal();
+      } }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return modalCss; }
+}, [1, "ix-modal", {
+    "size": [1],
+    "animation": [4],
+    "backdrop": [4],
+    "closeOnBackdropClick": [4, "close-on-backdrop-click"],
+    "beforeDismiss": [16],
+    "centered": [4],
+    "keyboard": [4],
+    "showModal": [64],
+    "dismissModal": [64],
+    "closeModal": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Modal);
+      }
+      break;
+  } });
+}
 const IxModal = Modal;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ix-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-modal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
1	+ {"file":"ix-modal.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","./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::backdrop {\n --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n outline: none !important;\n}\n\n:host {\n dialog {\n margin: 0;\n left: 50%;\n }\n\n dialog::backdrop {\n backdrop-filter: blur(2.7182817459106445px);\n }\n\n .modal {\n display: grid;\n position: relative;\n flex-direction: column;\n border: none;\n border-radius: var(--theme-default-border-radius);\n background: var(--theme-modal--background);\n box-shadow: var(--theme-shadow-4);\n color: var(--theme-color-std-text);\n\n max-height: 80vh;\n overflow: hidden;\n pointer-events: all;\n }\n\n .modal-size-360 {\n width: 22.5rem;\n }\n\n .modal-size-480 {\n width: 30rem;\n }\n\n .modal-size-600 {\n width: 37.5rem;\n }\n\n .modal-size-720 {\n width: 45rem;\n }\n\n .modal-size-840 {\n width: 52.5rem;\n }\n\n .modal-size-full-width {\n width: 95%;\n }\n\n .dialog-backdrop {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0px;\n left: 0px;\n\n pointer-events: none;\n }\n}\n\n:host(.align-center) {\n dialog {\n margin: 0;\n left: 50%;\n top: 50%;\n }\n}\n\n:host(.no-backdrop) {\n dialog::backdrop {\n background-color: transparent !important;\n backdrop-filter: none !important;\n }\n}\n\n:host(.with-icon) {\n ::slotted(ix-modal-footer),\n ::slotted(ix-modal-content) {\n margin-left: 2.5rem;\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 /\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 { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\n\nexport type IxModalFixedSize = '360' \| '480' \| '600' \| '720' \| '840';\nexport type IxModalDynamicSize = 'full-width';\nexport type IxModalSize = IxModalFixedSize \| IxModalDynamicSize;\n\n@Component({\n tag: 'ix-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n private ariaAttributes: A11yAttributes = {};\n\n @Element() hostElement!: HTMLIxModalElement;\n\n /\n Modal size\n \n @since 2.0.0\n /\n @Prop() size: IxModalSize = '360';\n\n /\n Should the modal be animated\n /\n @Prop() animation = true;\n\n /\n Show a backdrop behind the modal dialog\n /\n @Prop() backdrop = true;\n\n /\n Dismiss modal on backdrop click\n \n @since 2.0.0\n /\n @Prop() closeOnBackdropClick = false;\n\n /\n Is called before the modal is dismissed.\n \n - Return `true` to proceed in dismissing the modal\n * - Return `false` to abort in dismissing the modal\n /\n @Prop() beforeDismiss: (reason?: any) => boolean \| Promise<boolean>;\n\n /\n Centered modal\n /\n @Prop() centered = false;\n\n /\n Use ESC to dismiss the modal\n /\n @Prop() keyboard = true;\n\n /\n Dialog close\n /\n @Event() dialogClose: EventEmitter;\n\n /\n Dialog cancel\n /\n @Event() dialogDismiss: EventEmitter;\n\n get dialog() {\n return this.hostElement.shadowRoot.querySelector('dialog');\n }\n\n private slideInModal() {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [0, 1],\n translateY: [0, transformY],\n translateX: ['-50%', '-50%'],\n easing: 'easeOutSine',\n });\n }\n\n private slideOutModal(completeCallback: Function) {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [1, 0],\n translateY: [transformY, 0],\n translateX: ['-50%', '-50%'],\n easing: 'easeInSine',\n complete: () => {\n if (completeCallback) {\n completeCallback();\n }\n },\n });\n }\n\n private onModalClick(event: MouseEvent) {\n const rect = this.dialog.getBoundingClientRect();\n const isClickOutside =\n rect.top <= event.clientY &&\n event.clientY <= rect.top + rect.height &&\n rect.left <= event.clientX &&\n event.clientX <= rect.left + rect.width;\n if (!isClickOutside && this.closeOnBackdropClick) {\n this.dismissModal();\n }\n }\n\n /\n Show the dialog\n /\n @Method()\n async showModal() {\n this.dialog.showModal();\n }\n\n /\n Dismiss the dialog\n /\n @Method()\n async dismissModal<T = any>(reason?: T) {\n let allowDismiss = true;\n\n if (this.beforeDismiss !== undefined) {\n allowDismiss = await this.beforeDismiss(reason);\n }\n if (!allowDismiss) {\n return;\n }\n\n this.slideOutModal(() => {\n this.dialog.close(\n JSON.stringify(\n {\n type: 'dismiss',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogDismiss.emit(reason);\n });\n }\n\n /\n Close the dialog\n */\n @Method()\n async closeModal<T = any>(reason: T) {\n this.slideOutModal(() => {\n this.dialog.close(\n JSON.stringify(\n {\n type: 'close',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogClose.emit(reason);\n });\n }\n\n componentDidLoad() {\n this.slideInModal();\n }\n\n componentWillLoad() {\n this.ariaAttributes = a11yHostAttributes(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n 'no-backdrop': this.backdrop === false,\n 'align-center': this.centered,\n }}\n >\n <div class=\"dialog-backdrop\">\n <dialog\n aria-modal={a11yBoolean(true)}\n aria-describedby={this.ariaAttributes['aria-describedby']}\n aria-labelledby={this.ariaAttributes['aria-labelledby']}\n class={`modal modal-size-${this.size}`}\n onKeyDown={(e) => {\n if (e.key === 'Escape' && this.keyboard === false) {\n e.preventDefault();\n }\n }}\n onClick={(event) => this.onModalClick(event)}\n onCancel={(e) => {\n e.preventDefault();\n this.dismissModal();\n }}\n >\n <slot></slot>\n </dialog>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ix-pagination.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$9 } from './dropdown.js';
-import { d as defineCustomElement$8 } from './dropdown-item.js';
-import { d as defineCustomElement$7 } from './filter-chip.js';
-import { d as defineCustomElement$6 } from './icon.js';
-import { d as defineCustomElement$5 } from './icon-button.js';
-import { d as defineCustomElement$4 } from './index-button.js';
-import { d as defineCustomElement$3 } from './select.js';
-import { d as defineCustomElement$2 } from './select-item.js';
+import { d as defineCustomElement$a } from './dropdown.js';
+import { d as defineCustomElement$9 } from './dropdown-item.js';
+import { d as defineCustomElement$8 } from './filter-chip.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './icon-button.js';
+import { d as defineCustomElement$5 } from './index-button.js';
+import { d as defineCustomElement$4 } from './select.js';
+import { d as defineCustomElement$3 } from './select-item.js';
+import { d as defineCustomElement$2 } from './spinner.js';
 const paginationCss = ".sc-ix-pagination-h,.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination,.sc-ix-pagination-h .item-count.sc-ix-pagination{display:inline-flex;align-items:center}.sc-ix-pagination-h .basic-pagination.sc-ix-pagination{padding:0 0.125rem}.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination{padding:0 0.75rem}.sc-ix-pagination-h input.sc-ix-pagination{width:4.125rem;text-align:center;margin:0 0.5rem}.sc-ix-pagination-h .page-buttons.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .total-count.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .item-count.sc-ix-pagination{flex-grow:1;justify-content:flex-end;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h .item-count.sc-ix-pagination ix-select.sc-ix-pagination{width:4.5rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h ix-index-button.sc-ix-pagination+ix-index-button.sc-ix-pagination{-webkit-margin-start:0.125rem;margin-inline-start:0.125rem}";
@@ -54,7 +55,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     this.selectPage(this.selectedPage - 1);
   }
   getPageButton(index) {
-    return (h("ix-index-button", { variant: "Primary", onClick: () => {
+    return (h("ix-index-button", { variant: "primary", onClick: () => {
         this.selectPage(index);
       }, selected: this.selectedPage === index }, index + 1));
   }
@@ -69,7 +70,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     let pageCount = Math.floor((this.maxCountPages - 4) / 2);
     if (hasOverflowStart) {
       pageButtons.push(this.getPageButton(0));
-      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+      pageButtons.push(h("ix-index-button", { variant: "secondary", onClick: () => {
           if (hasOverflowEnd) {
             this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));
           }
@@ -98,7 +99,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
       pageButtons.push(this.getPageButton(i));
     }
     if (hasOverflowEnd) {
-      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+      pageButtons.push(h("ix-index-button", { variant: "secondary", onClick: () => {
           if (hasOverflowStart) {
             this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));
           }
@@ -135,7 +136,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-pagination", "ix-dropdown", "ix-dropdown-item", "ix-filter-chip", "ix-icon", "ix-icon-button", "ix-index-button", "ix-select", "ix-select-item"];
+  const components = ["ix-pagination", "ix-dropdown", "ix-dropdown-item", "ix-filter-chip", "ix-icon", "ix-icon-button", "ix-index-button", "ix-select", "ix-select-item", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-pagination":
       if (!customElements.get(tagName)) {
@@ -144,40 +145,45 @@ function defineCustomElement$1() {
       break;
     case "ix-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "ix-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "ix-filter-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "ix-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "ix-icon-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "ix-index-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "ix-select":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "ix-select-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/ix-pagination.js.map CHANGED Viewed

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

package/dist/components/ix-pill.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
-const pillCss = ".sc-ix-pill-h{display:inline-flex;width:-moz-fit-content;width:fit-content;position:relative;align-items:center;justify-content:center;border-radius:100px;padding:0px 6px;margin-left:0.25rem;min-width:1.5rem;height:1.25rem;min-height:1.25rem;max-height:1.25rem;cursor:auto}.sc-ix-pill-h .with-icon.sc-ix-pill{margin-right:0.25rem}.align-left.sc-ix-pill-h{justify-content:flex-start}[variant=primary].sc-ix-pill-h{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}[variant=primary].sc-ix-pill-h .close-button.sc-ix-pill{color:var(--theme-chip-primary--color);pointer-events:auto}[variant=primary].outline.sc-ix-pill-h{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}[variant=primary].outline.sc-ix-pill-h .close-button.sc-ix-pill{color:var(--theme-chip-primary-outline--color)}[variant=alarm].sc-ix-pill-h{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-alarm)}[variant=alarm].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=alarm].sc-ix-pill-h:not(.outline).active::after,[variant=alarm].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=alarm].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}[variant=alarm].outline.sc-ix-pill-h:hover::after{display:none}[variant=alarm].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=alarm].outline.active.sc-ix-pill-h::after,[variant=alarm].outline.sc-ix-pill-h:active::after{display:none}[variant=alarm].outline.active.sc-ix-pill-h,[variant=alarm].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=critical].sc-ix-pill-h{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-critical)}[variant=critical].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=critical].sc-ix-pill-h:not(.outline).active::after,[variant=critical].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=critical].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}[variant=critical].outline.sc-ix-pill-h:hover::after{display:none}[variant=critical].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=critical].outline.active.sc-ix-pill-h::after,[variant=critical].outline.sc-ix-pill-h:active::after{display:none}[variant=critical].outline.active.sc-ix-pill-h,[variant=critical].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=warning].sc-ix-pill-h{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-warning)}[variant=warning].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=warning].sc-ix-pill-h:not(.outline).active::after,[variant=warning].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=warning].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}[variant=warning].outline.sc-ix-pill-h:hover::after{display:none}[variant=warning].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=warning].outline.active.sc-ix-pill-h::after,[variant=warning].outline.sc-ix-pill-h:active::after{display:none}[variant=warning].outline.active.sc-ix-pill-h,[variant=warning].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=info].sc-ix-pill-h{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-info)}[variant=info].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=info].sc-ix-pill-h:not(.outline).active::after,[variant=info].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=info].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}[variant=info].outline.sc-ix-pill-h:hover::after{display:none}[variant=info].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=info].outline.active.sc-ix-pill-h::after,[variant=info].outline.sc-ix-pill-h:active::after{display:none}[variant=info].outline.active.sc-ix-pill-h,[variant=info].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=neutral].sc-ix-pill-h{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-neutral)}[variant=neutral].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=neutral].sc-ix-pill-h:not(.outline).active::after,[variant=neutral].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=neutral].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}[variant=neutral].outline.sc-ix-pill-h:hover::after{display:none}[variant=neutral].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=neutral].outline.active.sc-ix-pill-h::after,[variant=neutral].outline.sc-ix-pill-h:active::after{display:none}[variant=neutral].outline.active.sc-ix-pill-h,[variant=neutral].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=success].sc-ix-pill-h{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-success)}[variant=success].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=success].sc-ix-pill-h:not(.outline).active::after,[variant=success].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=success].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}[variant=success].outline.sc-ix-pill-h:hover::after{display:none}[variant=success].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=success].outline.active.sc-ix-pill-h::after,[variant=success].outline.sc-ix-pill-h:active::after{display:none}[variant=success].outline.active.sc-ix-pill-h,[variant=success].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=custom].outline.sc-ix-pill-h{border:solid 1px transparent;background-color:transparent}.sc-ix-pill-h .slot.sc-ix-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-pill-h .hidden.sc-ix-pill{width:0px;margin-right:0px}";
+const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .with-icon{margin-right:0.25rem}.container .hidden{width:0px;margin-right:0px}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.icon{padding-left:0.75rem;padding-right:0.75rem}.container.closable{padding-right:0.25rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}:host .container{height:100%;justify-content:center;padding-right:0.5rem}:host(.align-left) .container{justify-content:flex-start}";
 const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.variant = 'primary';
     this.outline = false;
     this.icon = undefined;
@@ -15,22 +16,40 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
     this.alignLeft = false;
   }
   render() {
-    return (h(Host, { class: {
-        outline: this.outline,
-        'align-left': this.alignLeft,
-      }, style: this.variant === 'custom'
+    let customStyle = {};
+    if (this.variant === 'custom') {
+      customStyle = {
+        color: this.color,
+        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
+      };
+    }
+    return (h(Host, { style: this.variant === 'custom'
         ? {
-          color: this.color,
-          backgroundColor: this.background,
+          '--ix-icon-button-color': this.color,
         }
-        : {}, title: this.el.textContent }, h("ix-icon", { class: {
+        : {}, title: this.el.textContent, class: {
+        'align-left': this.alignLeft,
+      } }, h("div", { style: Object.assign({}, customStyle), class: {
+        container: true,
+        outline: this.outline,
+        inactive: false,
+        alarm: this.variant === 'alarm',
+        critical: this.variant === 'critical',
+        info: this.variant === 'info',
+        neutral: this.variant === 'neutral',
+        primary: this.variant === 'primary',
+        success: this.variant === 'success',
+        warning: this.variant === 'warning',
+        closable: false,
+        icon: !!this.icon,
+      } }, h("ix-icon", { class: {
         'with-icon': true,
         hidden: this.icon === undefined || this.icon === '',
-      }, name: this.icon, size: '16' }), h("div", { class: "slot" }, h("slot", null))));
+      }, name: this.icon, size: '16' }), h("span", { class: "slot-container" }, h("slot", null)))));
   }
   get el() { return this; }
   static get style() { return pillCss; }
-}, [6, "ix-pill", {
+}, [1, "ix-pill", {
     "variant": [513],
     "outline": [4],
     "icon": [1],

package/dist/components/ix-pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-pill.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,~~qiPAAqiP~~;;~~MCgBxiP~~,IAAI~~;;;;~~mBAcA,SAAS;mBAKN,KAAK;;;;qBAoBH,KAAK;;EAEzB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;~~QACL~~,~~OAAO~~,EAAE,IAAI,CAAC,~~OAAO~~;~~QACrB~~,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,~~EACD~~,KAAK,~~EACH~~,IAAI,CAAC,OAAO,KAAK~~,QAAQ~~;~~UACrB;UACE~~,KAAK,EAAE,IAAI,CAAC,KAAK;~~UACjB~~,~~eAAe~~,EAAE,IAAI,CAAC,UAAU;~~SACjC~~;~~UACD~~,EAAE,~~EAER~~,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,~~WAAW~~,~~IAE1B~~,eACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;OACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,~~WAAK~~,KAAK,EAAC,~~MAAM~~,~~IACf~~,eAAa,~~CACT~~,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/pill/pill.scss?tag=ix-pill&encapsulation=~~scoped~~","./src/components/pill/pill.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 './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n~~$border-radius~~: ~~100px;\n$chip-height: 1.25rem;\n\n:~~host {\n ~~display:~~ ~~inline~~-~~flex~~;\n ~~width~~: ~~fit~~-~~content~~;\n position: relative;\n ~~align-items~~: ~~center~~;\n ~~justify~~-~~content~~: ~~center~~;\n\n ~~border-radius: $border-radius;\n padding: 0px 6px;\n~~ margin-left: 0.25rem;\n ~~min-width: $large-space;\~~n ~~height: $chip-height;\~~n ~~min-height:~~ $chip-~~height~~;\n ~~max-height: $chip-height;\~~n ~~cursor~~: ~~auto;\n~~\n .~~with-icon~~ {\n ~~margin-right~~: ~~$tiny-space;\~~n ~~}\n\n &.align~~-~~left~~ {\n ~~justify~~-~~content~~: ~~flex-start~~;\n }\n\n ~~@include chip($interaction: false);\n~~\n .~~slot~~ {\n ~~@include ellipsis;\n~~ ~~}\n\n~~ .~~hidden~~ {\n ~~width~~: ~~0px;\n margin~~-~~right: 0px~~;\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 { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n ~~scoped~~: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() color: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n ~~return~~ (\n ~~<Host\n class~~={{\n ~~outline~~: this.~~outline~~,\n '~~align-left~~': this.~~alignLeft~~,\n }}\n style={\n this.variant === 'custom'\n ? {\n color: this.color,\n ~~backgroundColor: this.background,\n~~ }\n : {}\n }\n title={this.el.textContent}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <~~div~~ class=\"slot\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-pill.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,yrHAAyrH;;MCgB5rH,IAAI;;;;;mBAcA,SAAS;mBAKN,KAAK;;;;qBAoBH,KAAK;;EAEzB,MAAM;IACJ,IAAI,WAAW,GAAG,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;MAC7B,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;OACpE,CAAC;KACH;IACD,QACE,EAAC,IAAI,IACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;UACrB;UACE,wBAAwB,EAAE,IAAI,CAAC,KAAK;SACrC;UACD,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,IAED,WACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;QAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;QACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;QAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;OAClB,IAED,eACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;OACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,YAAM,KAAK,EAAC,gBAAgB,IAC1B,eAAa,CACR,CACH,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","./src/components/pill/pill.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: inline-block;\n position: relative;\n height: 1.25rem;\n max-height: 1.25rem;\n margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n .container {\n height: 100%;\n justify-content: center;\n padding-right: 0.5rem;\n }\n}\n\n:host(.align-left) {\n .container {\n justify-content: flex-start;\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 { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n shadow: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() color: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.color,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n return (\n <Host\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.color,\n }\n : {}\n }\n title={this.el.textContent}\n class={{\n 'align-left': this.alignLeft,\n }}\n >\n <div\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: false,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n closable: false,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ix-split-button-item.js CHANGED Viewed

@@ -2,22 +2,23 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$3 } from './dropdown-item.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const splitButtonItemCss = ".sc-ix-split-button-item-h{display:block}";
+const splitButtonItemCss = ":host{display:contents}";
 const SplitButtonItem = /*@__PURE__*/ proxyCustomElement(class SplitButtonItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.itemClick = createEvent(this, "itemClick", 7);
     this.icon = undefined;
     this.label = undefined;
   }
   render() {
-    return (h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+    return (h("ix-dropdown-item", { suppressChecked: true, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
   }
   get hostElement() { return this; }
   static get style() { return splitButtonItemCss; }
-}, [2, "ix-split-button-item", {
+}, [1, "ix-split-button-item", {
     "icon": [1],
     "label": [1]
   }]);

package/dist/components/ix-split-button-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-split-button-item.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,~~2CAA2C~~;;~~MCuBzD~~,eAAe~~;;;;;;;;~~EAkB1B,MAAM;IACJ,QACE,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=~~scoped~~","./src/components/split-button-item/split-button-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 /\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 Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-split-button-item',\n styleUrl: 'split-button-item.css',\n ~~scoped~~: true,\n})\nexport class SplitButtonItem {\n /\n Dropdown icon\n /\n @Prop() icon: string;\n\n /\n Dropdown label\n /\n @Prop() label: string;\n\n /\n Dropdown item clicked\n */\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n render() {\n return (\n <ix-dropdown-item\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-split-button-item.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,yBAAyB;;MCuBvC,eAAe;;;;;;;;;EAkB1B,MAAM;IACJ,QACE,wBACE,eAAe,QACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=shadow","./src/components/split-button-item/split-button-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 /\n\n:host {\n display: contents;\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 Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-split-button-item',\n styleUrl: 'split-button-item.css',\n shadow: true,\n})\nexport class SplitButtonItem {\n /\n Dropdown icon\n /\n @Prop() icon: string;\n\n /\n Dropdown label\n /\n @Prop() label: string;\n\n /\n Dropdown item clicked\n */\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n render() {\n return (\n <ix-dropdown-item\n suppressChecked\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}

package/dist/components/ix-split-button.js CHANGED Viewed

@@ -1,18 +1,20 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getButtonClasses } from './base-button.js';
-import { d as defineCustomElement$3 } from './dropdown.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$6 } from './button.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
-const splitButtonCss = ".sc-ix-split-button-h{display:inline-block}.sc-ix-split-button-h .btn-group.sc-ix-split-button{width:100%}.sc-ix-split-button-h .btn-group.sc-ix-split-button>button.sc-ix-split-button:nth-child(1){width:calc(100% - 2rem)}.sc-ix-split-button-h .btn-group.sc-ix-split-button>button.sc-ix-split-button:nth-child(2){width:2rem}.sc-ix-split-button-h .middle-gap.sc-ix-split-button{gap:0.125rem}.sc-ix-split-button-h .left-button-border.sc-ix-split-button{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
+const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
 const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.buttonClick = createEvent(this, "buttonClick", 7);
-    this.variant = 'Primary';
+    this.variant = 'primary';
     this.outline = false;
-    this.invisible = false;
     this.ghost = false;
     this.label = undefined;
     this.icon = '';
@@ -33,18 +35,23 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
     this.linkTriggerRef();
   }
   render() {
-    return (h(Host, null, h("div", { class: { 'btn-group': true, 'middle-gap': !this.outline } }, h("button", { class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled)), {
+    const buttonAttributes = {
+      variant: this.variant,
+      outline: this.outline,
+      ghost: this.ghost,
+      disabled: this.disabled,
+      class: {
         'left-button-border': !this.outline,
-      }), onClick: (e) => this.buttonClick.emit(e) }, this.icon ? h("ix-icon", { name: this.icon }) : null, " ", this.label), h("button", { ref: (r) => (this.triggerElement = r), class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled)), {
-        anchor: true,
-      }) }, h("ix-icon", { name: this.splitIcon }))), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null))));
+      },
+      onClick: (e) => this.buttonClick.emit(e),
+    };
+    return (h(Host, null, h("div", { class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon }))), h("ix-icon-button", Object.assign({}, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get style() { return splitButtonCss; }
-}, [6, "ix-split-button", {
+}, [1, "ix-split-button", {
     "variant": [1],
     "outline": [4],
-    "invisible": [4],
     "ghost": [4],
     "label": [1],
     "icon": [1],
@@ -57,19 +64,34 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-split-button", "ix-dropdown", "ix-icon"];
+  const components = ["ix-split-button", "ix-button", "ix-dropdown", "ix-icon", "ix-icon-button", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-split-button":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SplitButton);
       }
       break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
     case "ix-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
       }
       break;
     case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }