@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -1 +0,0 @@
-{"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.d.ts

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

package/dist/components/ix-pagination.js

@@ -1,199 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-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}";
-
-const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.pageSelected = createEvent(this, "pageSelected", 7);
-    this.itemCountChanged = createEvent(this, "itemCountChanged", 7);
-    this.maxCountPages = 7;
-    this.advanced = undefined;
-    this.itemCount = 15;
-    this.showItemCount = true;
-    this.count = undefined;
-    this.selectedPage = 0;
-    this.i18nPage = 'Page';
-    this.i18nOf = 'of';
-    this.i18nItems = 'Items';
-  }
-  get pageInput() {
-    return this.hostElement.querySelector('.advanced-pagination input.form-control');
-  }
-  selectPage(index) {
-    if (index < 0) {
-      this.selectedPage = 0;
-    }
-    else if (index > this.count - 1) {
-      this.selectedPage = this.count - 1;
-    }
-    else {
-      this.selectedPage = index;
-    }
-    this.pageSelected.emit(this.selectedPage);
-  }
-  increase() {
-    if (this.selectedPage === this.count - 1) {
-      return;
-    }
-    this.selectPage(this.selectedPage + 1);
-  }
-  decrease() {
-    if (this.selectedPage === 0) {
-      return;
-    }
-    this.selectPage(this.selectedPage - 1);
-  }
-  getPageButton(index) {
-    return (h("ix-index-button", { variant: "primary", onClick: () => {
-        this.selectPage(index);
-      }, selected: this.selectedPage === index }, index + 1));
-  }
-  renderPageButtons() {
-    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);
-    const hasOverflow = this.count > this.maxCountPages;
-    const hasOverflowStart = hasOverflow && this.selectedPage > pagesBeforeOverflow;
-    const hasOverflowEnd = hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;
-    const pageButtons = [];
-    let start = 0;
-    let end = Math.min(this.count, this.maxCountPages);
-    let pageCount = Math.floor((this.maxCountPages - 4) / 2);
-    if (hasOverflowStart) {
-      pageButtons.push(this.getPageButton(0));
-      pageButtons.push(h("ix-index-button", { variant: "secondary", onClick: () => {
-          if (hasOverflowEnd) {
-            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));
-          }
-          else {
-            this.selectPage(this.count - this.maxCountPages);
-          }
-        } }, "..."));
-      if (hasOverflowEnd) {
-        start = this.count - this.maxCountPages + 2;
-      }
-      else {
-        start = this.count - this.maxCountPages + 2;
-        end = this.count;
-      }
-    }
-    if (hasOverflowEnd) {
-      if (hasOverflowStart) {
-        start = this.selectedPage - pageCount;
-        end = this.selectedPage + pageCount + 1;
-      }
-      else {
-        end = this.maxCountPages - 2;
-      }
-    }
-    for (let i = start; i < end; i++) {
-      pageButtons.push(this.getPageButton(i));
-    }
-    if (hasOverflowEnd) {
-      pageButtons.push(h("ix-index-button", { variant: "secondary", onClick: () => {
-          if (hasOverflowStart) {
-            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));
-          }
-          else {
-            this.selectPage(this.maxCountPages - 1);
-          }
-        } }, "..."));
-      pageButtons.push(this.getPageButton(this.count - 1));
-    }
-    return h("span", { class: "page-buttons" }, pageButtons);
-  }
-  render() {
-    return (h(Host, null, h("ix-icon-button", { disabled: this.selectedPage === 0, ghost: true, icon: "chevron-left-small", onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, this.i18nPage, h("input", { class: "form-control", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
-        const index = Number.parseInt(e.target['value']);
-        this.selectPage(index - 1);
-      } }), h("span", { class: "total-count" }, this.i18nOf, " ", this.count))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { disabled: this.selectedPage === this.count - 1, ghost: true, icon: "chevron-right-small", onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, this.i18nItems, h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", "selected-indices": this.itemCount, onItemSelectionChange: (e) => {
-        const count = Number.parseInt(e.detail[0]);
-        this.itemCountChanged.emit(count);
-      } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
-  }
-  get hostElement() { return this; }
-  static get style() { return paginationCss; }
-}, [2, "ix-pagination", {
-    "advanced": [4],
-    "itemCount": [2, "item-count"],
-    "showItemCount": [4, "show-item-count"],
-    "count": [2],
-    "selectedPage": [1026, "selected-page"],
-    "i18nPage": [1, "i-1-8n-page"],
-    "i18nOf": [1, "i-1-8n-of"],
-    "i18nItems": [1, "i-1-8n-items"]
-  }]);
-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", "ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-pagination":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Pagination);
-      }
-      break;
-    case "ix-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "ix-dropdown-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "ix-filter-chip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-index-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-select":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-select-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxPagination = Pagination;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxPagination, defineCustomElement };
-
-//# sourceMappingURL=ix-pagination.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

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

package/dist/components/ix-pill.js

@@ -1,84 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
-
-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;
-    this.background = undefined;
-    this.color = undefined;
-    this.alignLeft = false;
-  }
-  render() {
-    let customStyle = {};
-    if (this.variant === 'custom') {
-      customStyle = {
-        color: this.color,
-        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
-      };
-    }
-    return (h(Host, { style: this.variant === 'custom'
-        ? {
-          '--ix-icon-button-color': this.color,
-        }
-        : {}, 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("span", { class: "slot-container" }, h("slot", null)))));
-  }
-  get el() { return this; }
-  static get style() { return pillCss; }
-}, [1, "ix-pill", {
-    "variant": [513],
-    "outline": [4],
-    "icon": [1],
-    "background": [1],
-    "color": [1],
-    "alignLeft": [4, "align-left"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-pill", "ix-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-pill":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Pill);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxPill = Pill;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxPill, defineCustomElement };
-
-//# sourceMappingURL=ix-pill.js.map

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

@@ -1 +0,0 @@
-{"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-push-card.d.ts

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

package/dist/components/ix-push-card.js

@@ -1,83 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$7 } from './card.js';
-import { d as defineCustomElement$6 } from './card-accordion.js';
-import { d as defineCustomElement$5 } from './card-content.js';
-import { d as defineCustomElement$4 } from './card-title.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './typography.js';
-
-const pushCardCss = ":host{display:block;position:relative}:host .icon{transform:scale(1.25)}:host .notification{font-size:40px}:host ix-card-title{height:3rem}:host ix-card-content{height:7.875rem}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}";
-
-const PushCard = /*@__PURE__*/ proxyCustomElement(class PushCard extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.icon = undefined;
-    this.notification = undefined;
-    this.heading = undefined;
-    this.subheading = undefined;
-    this.variant = 'insight';
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("ix-card", { variant: this.variant }, h("ix-card-title", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { name: "title-action" })), h("ix-card-content", null, h("ix-typography", { variant: "default-title-single" }, this.heading), h("ix-typography", null, this.subheading)), h("ix-card-accordion", null, h("slot", null)))));
-  }
-  static get style() { return pushCardCss; }
-}, [1, "ix-push-card", {
-    "icon": [1],
-    "notification": [1],
-    "heading": [1],
-    "subheading": [1],
-    "variant": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-push-card", "ix-card", "ix-card-accordion", "ix-card-content", "ix-card-title", "ix-icon", "ix-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-push-card":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PushCard);
-      }
-      break;
-    case "ix-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ix-card-accordion":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-card-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-card-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxPushCard = PushCard;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxPushCard, defineCustomElement };
-
-//# sourceMappingURL=ix-push-card.js.map

package/dist/components/ix-push-card.js.map

@@ -1 +0,0 @@
-{"file":"ix-push-card.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,ysDAAysD;;MCsBhtD,QAAQ;;;;;gBAIgB,SAAS;;;;mBAoBT,SAAS;;EAE5C,MAAM;;IACJ,QACE,EAAC,IAAI,QACH,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,yBACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,YAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ,EAC5D,YAAM,IAAI,EAAC,cAAc,GAAQ,CACnB,EAChB,2BACE,qBAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,OAAO,CACC,EAChB,yBAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC,EAClB,6BACE,eAAa,CACK,CACZ,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","./src/components/push-card/push-card.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  position: relative;\n\n  .icon {\n    transform: scale(1.25);\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-title {\n    height: 3rem;\n  }\n\n  ix-card-content {\n    height: 7.875rem;\n  }\n}\n\n:host(:hover) {\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n}\n\n:host(:active) {\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\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, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  render() {\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-title>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <span class={'notification'}>{this.notification ?? 0}</span>\n            <slot name=\"title-action\"></slot>\n          </ix-card-title>\n          <ix-card-content>\n            <ix-typography variant=\"default-title-single\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-select-item.d.ts

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

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

@@ -1,8 +0,0 @@
-import { S as SelectItem, d as defineCustomElement$1 } from './select-item.js';
-
-const IxSelectItem = SelectItem;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxSelectItem, defineCustomElement };
-
-//# sourceMappingURL=ix-select-item.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-select-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-select.d.ts

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

package/dist/components/ix-select.js

@@ -1,8 +0,0 @@
-import { S as Select, d as defineCustomElement$1 } from './select.js';
-
-const IxSelect = Select;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxSelect, defineCustomElement };
-
-//# sourceMappingURL=ix-select.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-select.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-spinner.d.ts

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

package/dist/components/ix-spinner.js

@@ -1,8 +0,0 @@
-import { S as Spinner, d as defineCustomElement$1 } from './spinner.js';
-
-const IxSpinner = Spinner;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxSpinner, defineCustomElement };
-
-//# sourceMappingURL=ix-spinner.js.map

package/dist/components/ix-spinner.js.map

@@ -1 +0,0 @@
-{"file":"ix-spinner.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-split-button-item.d.ts

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

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

@@ -1,54 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './dropdown-item.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-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", { suppressChecked: true, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
-  }
-  get hostElement() { return this; }
-  static get style() { return splitButtonItemCss; }
-}, [1, "ix-split-button-item", {
-    "icon": [1],
-    "label": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-split-button-item", "ix-dropdown-item", "ix-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-split-button-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SplitButtonItem);
-      }
-      break;
-    case "ix-dropdown-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxSplitButtonItem = SplitButtonItem;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxSplitButtonItem, defineCustomElement };
-
-//# sourceMappingURL=ix-split-button-item.js.map