@siemens/ix 1.0.0-beta.2

package/dist/components/ix-modal-container.d.ts

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

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

@@ -0,0 +1,6 @@
+import { M as ModalContainer, d as defineCustomElement$1 } from './modal-container.js';
+
+const IxModalContainer = ModalContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModalContainer, defineCustomElement };

package/dist/components/ix-modal-example.d.ts

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

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

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as dismissModal, c as closeModal } from './modal-utils.js';
+import { d as defineCustomElement$6 } from './button.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './modal.js';
+import { d as defineCustomElement$2 } from './modal-container.js';
+
+const ModalExample = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  dismiss() {
+    dismissModal(this.host);
+  }
+  close() {
+    closeModal(this.host, 'Done!');
+  }
+  render() {
+    return (h(Host, null, h("div", null, h("div", { class: "modal-header" }, "Message headline", h("ix-icon-button", { "data-close-button": true, ghost: true, icon: "close", onClick: () => this.dismiss() })), h("div", { class: "modal-body" }, "Message text lorem ipsum"), h("div", { class: "modal-footer" }, h("ix-button", { outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { onClick: () => this.close() }, "OK")))));
+  }
+  get host() { return this; }
+}, [0, "ix-modal-example"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal-example", "ix-button", "ix-icon", "ix-icon-button", "ix-modal", "ix-modal-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal-example":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalExample);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-modal-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxModalExample = ModalExample;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModalExample, defineCustomElement };

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

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

package/dist/components/ix-modal.js

@@ -0,0 +1,6 @@
+import { M as Modal, d as defineCustomElement$1 } from './modal.js';
+
+const IxModal = Modal;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModal, defineCustomElement };

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

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

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const pillCss = ".sc-ix-pill-h{display:inline-flex;position:relative;align-items:center;justify-content:center;border-radius:100px;padding:0px 6px;margin-left:0.25rem;min-width:1.5rem;height:1.25rem;min-height:1.25rem;max-height:1.25rem;cursor:auto}.sc-ix-pill-h .with-icon.sc-ix-pill{margin-right:0.25rem}.align-left.sc-ix-pill-h{justify-content:flex-start}[variant=primary].sc-ix-pill-h{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}[variant=primary].sc-ix-pill-h .close-button.sc-ix-pill{color:var(--theme-chip-primary--color);pointer-events:auto}[variant=primary].outline.sc-ix-pill-h{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}[variant=primary].outline.sc-ix-pill-h .close-button.sc-ix-pill{color:var(--theme-chip-primary-outline--color)}[variant=alarm].sc-ix-pill-h{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-alarm)}[variant=alarm].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=alarm].sc-ix-pill-h:not(.outline).active::after,[variant=alarm].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=alarm].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}[variant=alarm].outline.sc-ix-pill-h:hover::after{display:none}[variant=alarm].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=alarm].outline.active.sc-ix-pill-h::after,[variant=alarm].outline.sc-ix-pill-h:active::after{display:none}[variant=alarm].outline.active.sc-ix-pill-h,[variant=alarm].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=critical].sc-ix-pill-h{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-critical)}[variant=critical].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=critical].sc-ix-pill-h:not(.outline).active::after,[variant=critical].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=critical].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}[variant=critical].outline.sc-ix-pill-h:hover::after{display:none}[variant=critical].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=critical].outline.active.sc-ix-pill-h::after,[variant=critical].outline.sc-ix-pill-h:active::after{display:none}[variant=critical].outline.active.sc-ix-pill-h,[variant=critical].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=warning].sc-ix-pill-h{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-warning)}[variant=warning].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=warning].sc-ix-pill-h:not(.outline).active::after,[variant=warning].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=warning].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}[variant=warning].outline.sc-ix-pill-h:hover::after{display:none}[variant=warning].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=warning].outline.active.sc-ix-pill-h::after,[variant=warning].outline.sc-ix-pill-h:active::after{display:none}[variant=warning].outline.active.sc-ix-pill-h,[variant=warning].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=info].sc-ix-pill-h{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-info)}[variant=info].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=info].sc-ix-pill-h:not(.outline).active::after,[variant=info].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=info].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}[variant=info].outline.sc-ix-pill-h:hover::after{display:none}[variant=info].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=info].outline.active.sc-ix-pill-h::after,[variant=info].outline.sc-ix-pill-h:active::after{display:none}[variant=info].outline.active.sc-ix-pill-h,[variant=info].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=neutral].sc-ix-pill-h{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-neutral)}[variant=neutral].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=neutral].sc-ix-pill-h:not(.outline).active::after,[variant=neutral].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=neutral].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}[variant=neutral].outline.sc-ix-pill-h:hover::after{display:none}[variant=neutral].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=neutral].outline.active.sc-ix-pill-h::after,[variant=neutral].outline.sc-ix-pill-h:active::after{display:none}[variant=neutral].outline.active.sc-ix-pill-h,[variant=neutral].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=success].sc-ix-pill-h{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-pill-h:not(.outline){background-color:var(--theme-color-success)}[variant=success].sc-ix-pill-h:not(.outline) .close-button.sc-ix-pill{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=success].sc-ix-pill-h:not(.outline).active::after,[variant=success].sc-ix-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=success].outline.sc-ix-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}[variant=success].outline.sc-ix-pill-h:hover::after{display:none}[variant=success].outline.sc-ix-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=success].outline.active.sc-ix-pill-h::after,[variant=success].outline.sc-ix-pill-h:active::after{display:none}[variant=success].outline.active.sc-ix-pill-h,[variant=success].outline.sc-ix-pill-h:active{background-color:var(--theme-chip-outline--background--active)}.sc-ix-pill-h .slot.sc-ix-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const Pill = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Pill variant
+     */
+    this.variant = 'primary';
+    /**
+     * Show pill as outline
+     */
+    this.outline = false;
+    /**
+     * Align pill content left
+     */
+    this.alignLeft = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        outline: this.outline,
+        'align-left': this.alignLeft,
+      }, style: this.variant === 'custom'
+        ? {
+          color: this.color,
+          backgroundColor: this.background,
+        }
+        : {}, title: this.el.textContent }, this.icon ? (h("ix-icon", { class: 'with-icon', name: this.icon, size: '16' })) : null, h("div", { class: "slot" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return pillCss; }
+}, [6, "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 };

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

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

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

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

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

@@ -0,0 +1,339 @@
+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;height:calc(2rem - 2 * var(--theme-input--border-thickness));width:100%}.sc-ix-select-h .input-container.allow-clear.sc-ix-select{padding-right:3.5rem}.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-width:70%;flex-shrink:0;margin:auto}.sc-ix-select-h .input-container.sc-ix-select .chips.sc-ix-select>ix-filter-chip.sc-ix-select{margin: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%;-webkit-margin-end:2rem;margin-inline-end:2rem}.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{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 .clear.sc-ix-select{position:absolute;right:2rem}.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{display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 2rem}.sc-ix-select-h ix-dropdown.sc-ix-select{background-color:var(--theme-select-list--background)}";
+
+const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemSelectionChange = createEvent(this, "itemSelectionChange", 7);
+    this.addItem = createEvent(this, "addItem", 7);
+    /**
+     * Indices of selected items
+     */
+    this.selectedIndices = [];
+    /**
+     * Show clear button
+     */
+    this.allowClear = false;
+    /**
+     * Selection mode
+     */
+    this.mode = 'single';
+    /**
+     * Select is extendable
+     */
+    this.editable = false;
+    /**
+     * If true the select will be in disabled state
+     */
+    this.disabled = false;
+    /**
+     * If true the select will be in readonly mode
+     */
+    this.readonly = false;
+    /**
+     * Input field placeholder
+     */
+    this.i18nPlaceholder = 'Select an option';
+    /**
+     * Input field placeholder for editable select
+     */
+    this.i18nPlaceholderEditable = 'Type of select option';
+    /**
+     * Select list header
+     */
+    this.i18nSelectListHeader = 'Please select an option';
+    this.dropdownShow = false;
+    this.isDropdownEmpty = false;
+    this.hasFocus = false;
+  }
+  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([...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) {
+    this.items.forEach((item) => {
+      item.selected = ids.some((i) => i === item.value);
+    });
+    this.value = this.selectedItems.map((item) => item.label);
+  }
+  componentWillLoad() {
+    if (this.selectedIndices) {
+      this.selectValue(Array.isArray(this.selectedIndices)
+        ? this.selectedIndices
+        : [this.selectedIndices]);
+    }
+  }
+  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.editable && !this.itemExists(this.inputText)) {
+      this.emitAddItem(this.inputText);
+      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.inputText = this.inputRef.value;
+    if (this.inputText) {
+      this.items.forEach((item) => {
+        item.classList.remove('d-none');
+        if (!item.label.toLowerCase().includes(this.inputText.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.inputText = '';
+  }
+  clear() {
+    this.clearInput();
+    this.value = [];
+    this.selectedIndices = [];
+    this.itemSelectionChange.emit(null);
+  }
+  getInputValue() {
+    var _a;
+    if (this.isSingleMode) {
+      return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value[0] : null;
+    }
+    return null;
+  }
+  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" }, this.isMultipleMode ? (h("div", { class: "chips" }, (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.emitItemClick(item.value);
+      } }, item.label))))) : null, 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.getInputValue(), ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), 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" }))))), this.allowClear && (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.clear();
+      } })) : null), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, style: {
+        width: '100%',
+      }, class: {
+        'd-none': this.disabled ||
+          this.readonly ||
+          (this.isDropdownEmpty && !this.editable),
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("div", { class: "select-list-header" }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+        'add-item': true,
+        'd-none': !(this.editable && this.inputText),
+      }, label: this.inputText, onItemClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.emitAddItem(this.inputText);
+      } })))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "selectedIndices": ["watchSelectedIndices"],
+    "inputText": ["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],
+    "inputText": [32]
+  }, [[0, "itemClick", "onItemClicked"], [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;
+  } });
+}
+
+const IxSelect = Select;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxSelect, defineCustomElement };

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

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

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

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

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

@@ -0,0 +1,49 @@
+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 = ".sc-ix-split-button-item-h{display:block}";
+
+const SplitButtonItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemClick = createEvent(this, "itemClick", 7);
+  }
+  render() {
+    return (h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+  }
+  get hostElement() { return this; }
+  static get style() { return splitButtonItemCss; }
+}, [2, "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 };