@siemens/ix 1.4.2 → 1.5.0-beta.1

package/dist/components/ix-pagination.js

@@ -0,0 +1,185 @@
+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';
+
+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.125rem;-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 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';
+  }
+  selectPage(index) {
+    if (index < 0 || index >= this.count) {
+      console.warn(`ix-pagination - invalid index ${index}`);
+      return;
+    }
+    this.selectedPage = index;
+    this.pageSelected.emit(index);
+  }
+  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", value: this.selectedPage, onChange: (e) => {
+        const index = Number.parseInt(e.target['value']);
+        this.selectPage(index);
+      } }), 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", { 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" })))) : ('')));
+  }
+  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"];
+  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$9();
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ix-filter-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-index-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-select-item":
+      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

@@ -0,0 +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.125rem;\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 { Component, Event, EventEmitter, h, Host, Prop } 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  /**\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  private selectPage(index: number) {\n    if (index < 0 || index >= this.count) {\n      console.warn(`ix-pagination - invalid index ${index}`);\n      return;\n    }\n\n    this.selectedPage = index;\n    this.pageSelected.emit(index);\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              value={this.selectedPage}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index);\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              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

@@ -61,3 +61,5 @@ const IxPill = Pill;
 const defineCustomElement = defineCustomElement$1;
 
 export { IxPill, defineCustomElement };
+
+//# sourceMappingURL=ix-pill.js.map

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

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

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

@@ -4,3 +4,5 @@ const IxSelectItem = SelectItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { IxSelectItem, defineCustomElement };
+
+//# sourceMappingURL=ix-select-item.js.map

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

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

package/dist/components/ix-select.js

@@ -1,346 +1,8 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$7 } from './dropdown.js';
-import { d as defineCustomElement$6 } from './dropdown-item.js';
-import { d as defineCustomElement$5 } from './filter-chip.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './select-item.js';
-
-const selectCss = ".sc-ix-select-h{display:inline-block;position:relative;height:auto;width:100%}.sc-ix-select-h .select.sc-ix-select{position:relative;display:flex;align-items:center;height:auto;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .select.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}.sc-ix-select-h .select.sc-ix-select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff !important;outline-offset:var(--theme-input--focus--outline-offset)}.sc-ix-select-h .trigger.sc-ix-select{display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-select-h .input-container.sc-ix-select{display:flex;position:relative;align-items:flex-start;width:100%}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select>ix-filter-chip.sc-ix-select{margin:0 0.1rem}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:hover,.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select:focus-visible{border:none;outline:none}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::-moz-placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.sc-ix-select::placeholder{color:var(--theme-input-select-icon--color)}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::-moz-placeholder{opacity:0}.sc-ix-select-h .input-container.sc-ix-select input.hide-placeholder.sc-ix-select::placeholder{opacity:0}.sc-ix-select-h .chevron-down-container.sc-ix-select{display:flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:100%}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover)}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-select-h .editable.sc-ix-select .chevron-down-container.sc-ix-select:not(.disabled):not(:disabled):active{background-color:var(--theme-btn-invisible-secondary--background--active)}.sc-ix-select-h .add-item.sc-ix-select{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}.sc-ix-select-h .select-list-header.sc-ix-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 2rem}";
-
-const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.itemSelectionChange = createEvent(this, "itemSelectionChange", 7);
-    this.addItem = createEvent(this, "addItem", 7);
-    this.selectedIndices = [];
-    this.allowClear = false;
-    this.mode = 'single';
-    this.editable = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.i18nPlaceholder = 'Select an option';
-    this.i18nPlaceholderEditable = 'Type of select option';
-    this.i18nSelectListHeader = 'Please select an option';
-    this.dropdownShow = false;
-    this.value = undefined;
-    this.dropdownWrapperRef = undefined;
-    this.dropdownAnchor = undefined;
-    this.isDropdownEmpty = false;
-    this.hasFocus = false;
-    this.navigationItem = undefined;
-    this.inputFilterText = undefined;
-    this.inputValue = undefined;
-  }
-  get items() {
-    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
-  }
-  get selectedItems() {
-    return this.items.filter((item) => item.selected);
-  }
-  get addItemButton() {
-    return this.hostElement.querySelector('.add-item');
-  }
-  get isSingleMode() {
-    return this.mode === 'single';
-  }
-  get isMultipleMode() {
-    return this.mode === 'multiple';
-  }
-  watchSelectedIndices(newId) {
-    if (!newId) {
-      this.selectValue([]);
-      return;
-    }
-    if (Array.isArray(newId)) {
-      this.selectValue([...newId]);
-      return;
-    }
-    this.selectValue([newId]);
-  }
-  onItemClicked(event) {
-    const newId = event.detail;
-    this.emitItemClick(newId);
-  }
-  watchInputText(newValue) {
-    if (!this.editable) {
-      return;
-    }
-    if (this.itemExists(newValue)) {
-      return;
-    }
-  }
-  emitItemClick(newId) {
-    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
-      if (this.selectedIndices.includes(newId)) {
-        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);
-      }
-      else {
-        this.selectedIndices = [...this.selectedIndices, newId];
-      }
-    }
-    else {
-      this.selectedIndices = [newId];
-    }
-    this.selectValue(this.selectedIndices);
-    this.itemSelectionChange.emit(this.selectedIndices);
-  }
-  emitAddItem(value) {
-    if (value.trim() === '') {
-      return;
-    }
-    const test = document.createElement('ix-select-item');
-    test.value = value;
-    test.label = value;
-    this.addItemRef.appendChild(test);
-    this.clearInput();
-    this.emitItemClick(value);
-    this.addItem.emit(value);
-  }
-  selectValue(ids) {
-    var _a;
-    this.items.forEach((item) => {
-      item.selected = ids.some((i) => i === item.value);
-    });
-    this.value = this.selectedItems.map((item) => item.label);
-    if (this.isSingleMode) {
-      this.inputValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value[0] : null;
-      return;
-    }
-    this.inputValue = null;
-  }
-  componentWillLoad() {
-    if (this.selectedIndices) {
-      this.selectValue(Array.isArray(this.selectedIndices)
-        ? this.selectedIndices
-        : [this.selectedIndices]);
-    }
-  }
-  onLabelChange(event) {
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    this.selectValue(Array.isArray(this.selectedIndices)
-      ? this.selectedIndices
-      : [this.selectedIndices]);
-  }
-  disconnectedCallback() {
-    if (this.labelMutationObserver) {
-      this.labelMutationObserver.disconnect();
-    }
-  }
-  itemExists(item) {
-    return this.items.find((i) => i.label === item);
-  }
-  dropdownVisibilityChanged(event) {
-    this.dropdownShow = event.detail;
-    if (event.detail) {
-      this.inputRef.focus();
-      this.inputRef.select();
-      this.navigationItem = this.items[0];
-      this.setHoverEffectForNavigatedSelectItem();
-      this.removeHiddenFromItems();
-    }
-    this.hasFocus = event.detail;
-  }
-  async onKeyDown(event) {
-    if (!this.dropdownShow) {
-      return;
-    }
-    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
-      this.onArrowNavigation(event);
-    }
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      await this.onEnterNavigation();
-    }
-    if (event.code === 'Escape') {
-      this.dropdownShow = false;
-    }
-  }
-  async onEnterNavigation() {
-    var _a, _b;
-    if (this.isMultipleMode) {
-      return;
-    }
-    if (this.editable && !this.itemExists(this.inputFilterText)) {
-      this.emitAddItem(this.inputFilterText);
-      this.navigationItem = this.items[this.items.length - 1];
-    }
-    (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.onItemClick();
-    await ((_b = this.dropdownRef) === null || _b === void 0 ? void 0 : _b.updatePosition());
-    if (this.isSingleMode && !this.editable) {
-      this.dropdownShow = false;
-    }
-  }
-  onArrowNavigation(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    const selectItems = this.items.filter((i) => !i.classList.contains('d-none'));
-    const index = selectItems.indexOf(this.navigationItem);
-    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {
-      this.navigationItem = selectItems[index + 1];
-    }
-    else if (event.code === 'ArrowUp' && index > 0) {
-      this.navigationItem = selectItems[index - 1];
-    }
-    this.setHoverEffectForNavigatedSelectItem();
-  }
-  setHoverEffectForNavigatedSelectItem() {
-    this.items.forEach((item) => {
-      item.hover = item === this.navigationItem;
-    });
-  }
-  filterItemsWithTypeahead() {
-    this.inputFilterText = this.inputRef.value;
-    if (this.inputFilterText) {
-      this.items.forEach((item) => {
-        item.classList.remove('d-none');
-        if (!item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())) {
-          item.classList.add('d-none');
-        }
-      });
-    }
-    else {
-      this.removeHiddenFromItems();
-    }
-    this.isDropdownEmpty = this.items.every((item) => item.classList.contains('d-none'));
-  }
-  removeHiddenFromItems() {
-    this.items.forEach((item) => {
-      item.classList.remove('d-none');
-    });
-  }
-  clearInput() {
-    this.inputRef.value = '';
-    this.inputFilterText = '';
-  }
-  clear() {
-    this.clearInput();
-    this.value = [];
-    this.selectedIndices = [];
-    this.itemSelectionChange.emit(null);
-    this.dropdownShow = false;
-  }
-  render() {
-    var _a, _b, _c;
-    return (h(Host, null, h("div", { class: {
-        'form-control': true,
-        select: true,
-        focus: this.hasFocus,
-        editable: this.editable,
-        disabled: this.disabled,
-        readonly: this.readonly,
-      }, ref: (ref) => {
-        this.dropdownAnchor = ref;
-        if (!this.editable)
-          this.dropdownWrapperRef = ref;
-      } }, h("div", { class: "input-container" }, h("div", { class: "chips" }, this.isMultipleMode
-      ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          this.emitItemClick(item.value);
-        } }, item.label)))
-      : '', h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
-        'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
-      }, placeholder: this.editable
-        ? this.i18nPlaceholderEditable
-        : this.i18nPlaceholder, value: this.inputValue, ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), this.isMultipleMode &&
-      this.allowClear &&
-      (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.clear();
-      } })) : null, this.disabled || this.readonly ? null : (h("div", { class: "chevron-down-container", ref: (ref) => {
-        if (this.editable)
-          this.dropdownWrapperRef = ref;
-      } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, class: {
-        'd-none': this.disabled ||
-          this.readonly ||
-          (this.isDropdownEmpty && !this.editable),
-      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
-        return {
-          width: `${this.hostElement.clientWidth}px`,
-        };
-      } }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
-        'add-item': true,
-        'd-none': !(this.editable && this.inputFilterText),
-      }, label: this.inputFilterText, onItemClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.emitAddItem(this.inputFilterText);
-      } })))));
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "selectedIndices": ["watchSelectedIndices"],
-    "inputFilterText": ["watchInputText"]
-  }; }
-  static get style() { return selectCss; }
-}, [6, "ix-select", {
-    "selectedIndices": [1025, "selected-indices"],
-    "allowClear": [4, "allow-clear"],
-    "mode": [1],
-    "editable": [4],
-    "disabled": [4],
-    "readonly": [4],
-    "i18nPlaceholder": [1, "i-1-8n-placeholder"],
-    "i18nPlaceholderEditable": [1, "i-1-8n-placeholder-editable"],
-    "i18nSelectListHeader": [1, "i-1-8n-select-list-header"],
-    "dropdownShow": [32],
-    "value": [32],
-    "dropdownWrapperRef": [32],
-    "dropdownAnchor": [32],
-    "isDropdownEmpty": [32],
-    "hasFocus": [32],
-    "navigationItem": [32],
-    "inputFilterText": [32],
-    "inputValue": [32]
-  }, [[0, "itemClick", "onItemClicked"], [0, "ix-select-item:labelChange", "onLabelChange"], [8, "keydown", "onKeyDown"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-select", "ix-dropdown", "ix-dropdown-item", "ix-filter-chip", "ix-icon", "ix-icon-button", "ix-select-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-select":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Select);
-      }
-      break;
-    case "ix-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ix-dropdown-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-filter-chip":
-      if (!customElements.get(tagName)) {
-        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-select-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+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

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

package/dist/components/ix-spinner.js

@@ -4,3 +4,5 @@ const IxSpinner = Spinner;
 const defineCustomElement = defineCustomElement$1;
 
 export { IxSpinner, defineCustomElement };
+
+//# sourceMappingURL=ix-spinner.js.map

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

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

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

@@ -49,3 +49,5 @@ const IxSplitButtonItem = SplitButtonItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { IxSplitButtonItem, defineCustomElement };
+
+//# sourceMappingURL=ix-split-button-item.js.map

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

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

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

@@ -81,3 +81,5 @@ const IxSplitButton = SplitButton;
 const defineCustomElement = defineCustomElement$1;
 
 export { IxSplitButton, defineCustomElement };
+
+//# sourceMappingURL=ix-split-button.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-split-button.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,2iBAA2iB;;MC8BrjB,WAAW;;;;;mBAMgB,SAAS;mBAK7B,KAAK;qBAOH,KAAK;iBAKT,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKO,cAAc;kBAE3B,KAAK;;EAUvB,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAC1D,CAAC;GACH;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC5D,cACE,KAAK,kCACA,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,CAAC,IAAI,CAAC,KAAK,EACX,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,CACd,GACE;QACD,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC,GAEH,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvC,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GAAG,IAAI,OAAG,IAAI,CAAC,KAAK,CACtD,EACT,cACE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,kCACA,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,CACd,GACE;QACD,MAAM,EAAE,IAAI;OACb,KAGH,eAAS,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI,CAC1B,CACL,EAEN,mBAAa,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IACjD,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=scoped","./src/components/split-button/split-button.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: inline-block;\n\n  .btn-group {\n    // Overwrite styling from bootstrap button group\n    width: 100%;\n\n    > button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { Placement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  scoped: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'Primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Will be removed in 2.0.0. Use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Splitbutton icon\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  get splitItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-split-button-item')\n    );\n  }\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          <button\n            class={{\n              ...getButtonClasses(\n                this.variant,\n                this.outline,\n                this.ghost || this.invisible,\n                !this.label,\n                false,\n                false,\n                this.disabled\n              ),\n              ...{\n                'left-button-border': !this.outline,\n              },\n            }}\n            onClick={(e) => this.buttonClick.emit(e)}\n          >\n            {this.icon ? <ix-icon name={this.icon} /> : null} {this.label}\n          </button>\n          <button\n            ref={(r) => (this.triggerElement = r)}\n            class={{\n              ...getButtonClasses(\n                this.variant,\n                this.outline,\n                this.ghost || this.invisible,\n                true,\n                false,\n                false,\n                this.disabled\n              ),\n              ...{\n                anchor: true,\n              },\n            }}\n          >\n            <ix-icon name={this.splitIcon} />\n          </button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,3 +4,5 @@ const IxTabItem = TabItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { IxTabItem, defineCustomElement };
+
+//# sourceMappingURL=ix-tab-item.js.map

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

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