@siemens/ix 1.0.0-beta.2

package/dist/cjs/ix-message-bar.cjs.entry.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.js');
+const anime_es = require('./anime.es-8822f296.js');
+
+const messageBarCss = ".message-container.sc-ix-message-bar{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;margin:0.5rem 0.5rem 0rem 0.5rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}.danger.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}.warning.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}.info.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}.message-content.sc-ix-message-bar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:bold;white-space:normal}ix-icon.sc-ix-message-bar{margin-top:0.25rem}";
+
+const MessageBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.closedChange = index.createEvent(this, "closedChange", 7);
+    /**
+     * Specifies the type of the alert.
+     */
+    this.type = 'info';
+    /**
+     * If true, close button is enabled and alert can be dismissed by the user
+     */
+    this.dismissible = true;
+  }
+  componentWillRender() {
+    if (this.type === 'danger') {
+      this.icon = 'error';
+      this.color = 'color-alarm';
+    }
+    if (this.type === 'info') {
+      this.icon = 'info';
+      this.color = 'color-info';
+    }
+    if (this.type === 'warning') {
+      this.icon = 'warning';
+      this.color = 'color-warning';
+    }
+  }
+  closeAlert(el) {
+    anime_es.anime({
+      targets: el,
+      duration: MessageBar.duration,
+      opacity: [1, 0],
+      easing: 'easeOutSine',
+      complete: () => {
+        el.classList.add('d-none');
+      },
+    });
+    this.closedChange.emit();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { color: this.color, name: this.icon }), index.h("div", { class: "message-content" }, index.h("slot", null)), this.dismissible ? (index.h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => {
+        this.closeAlert(this.divElement);
+      }, "data-testid": "close-btn" })) : (''))));
+  }
+};
+MessageBar.duration = 300;
+MessageBar.style = messageBarCss;
+
+exports.ix_message_bar = MessageBar;

package/dist/cjs/ix-modal-example.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.js');
+const modalUtils = require('./modal-utils-5d7bb217.js');
+
+const ModalExample = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  dismiss() {
+    modalUtils.dismissModal(this.host);
+  }
+  close() {
+    modalUtils.closeModal(this.host, 'Done!');
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", null, index.h("div", { class: "modal-header" }, "Message headline", index.h("ix-icon-button", { "data-close-button": true, ghost: true, icon: "close", onClick: () => this.dismiss() })), index.h("div", { class: "modal-body" }, "Message text lorem ipsum"), index.h("div", { class: "modal-footer" }, index.h("ix-button", { outline: true, onClick: () => this.dismiss() }, "Cancel"), index.h("ix-button", { onClick: () => this.close() }, "OK")))));
+  }
+  get host() { return index.getElement(this); }
+};
+
+exports.ix_modal_example = ModalExample;

package/dist/cjs/ix-modal_2.cjs.entry.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const modal = require('./modal-5be2b1a3.js');
+require('./index-1e4a348f.js');
+require('./typed-event-8f5a32a2.js');
+require('./anime.es-8822f296.js');
+require('./animation-dfe01edc.js');
+
+
+
+exports.ix_modal = modal.Modal;
+exports.ix_modal_container = modal.ModalContainer;

package/dist/cjs/ix-pill.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Pill variant
+     */
+    this.variant = 'primary';
+    /**
+     * Show pill as outline
+     */
+    this.outline = false;
+    /**
+     * Align pill content left
+     */
+    this.alignLeft = false;
+  }
+  render() {
+    return (index.h(index.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 ? (index.h("ix-icon", { class: 'with-icon', name: this.icon, size: '16' })) : null, index.h("div", { class: "slot" }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+Pill.style = pillCss;
+
+exports.ix_pill = Pill;

package/dist/cjs/ix-select_2.cjs.entry.js

@@ -0,0 +1,309 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemSelectionChange = index.createEvent(this, "itemSelectionChange", 7);
+    this.addItem = index.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 (index.h(index.Host, null, index.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;
+      } }, index.h("div", { class: "input-container" }, this.isMultipleMode ? (index.h("div", { class: "chips" }, (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.emitItemClick(item.value);
+      } }, item.label))))) : null, index.h("div", { class: "trigger" }, index.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 : (index.h("div", { class: "chevron-down-container", ref: (ref) => {
+        if (this.editable)
+          this.dropdownWrapperRef = ref;
+      } }, index.h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))), this.allowClear && (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputText) ? (index.h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.clear();
+      } })) : null), index.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 }, index.h("div", { class: "select-list-header" }, this.i18nSelectListHeader), index.h("slot", null), index.h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputText) ? ('') : (index.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 index.getElement(this); }
+  static get watchers() { return {
+    "selectedIndices": ["watchSelectedIndices"],
+    "inputText": ["watchInputText"]
+  }; }
+};
+Select.style = selectCss;
+
+const selectItemCss = ".sc-ix-select-item-h{display:block}.sc-ix-select-item-h ix-dropdown-item.sc-ix-select-item button.sc-ix-select-item{margin-left:1rem}";
+
+const SelectItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemClick = index.createEvent(this, "itemClick", 7);
+    /**
+     * Whether the item is selected.
+     */
+    this.selected = false;
+    /**
+     * ***Internal***
+     */
+    this.hover = false;
+  }
+  /**
+   * Internal
+   * @param event
+   */
+  async onItemClick(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.itemClick.emit(this.value);
+  }
+  componentDidRender() {
+    if (!this.value) {
+      throw Error('ix-select-item must have a `value` property');
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ix-dropdown-item", { checked: this.selected, hover: this.hover, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+SelectItem.style = selectItemCss;
+
+exports.ix_select = Select;
+exports.ix_select_item = SelectItem;

package/dist/cjs/ix-spinner.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.js');
+
+const spinnerCss = ".sc-ix-spinner-h{display:flex;position:relative;height:2rem;width:2rem;justify-content:center;align-items:center}.sc-ix-spinner-h svg.sc-ix-spinner{height:2rem;width:2rem}.sc-ix-spinner-h #fill.sc-ix-spinner{fill:var(--theme-color-weak-text)}.sc-ix-spinner-h #stroke.sc-ix-spinner{stroke:var(--theme-color-weak-text)}.primary.sc-ix-spinner-h #fill.sc-ix-spinner{fill:var(--theme-color-primary)}.primary.sc-ix-spinner-h #stroke.sc-ix-spinner{stroke:var(--theme-color-primary)}.large.sc-ix-spinner-h{height:6rem;width:6rem}.large.sc-ix-spinner-h svg.sc-ix-spinner{height:5.75rem;width:6rem}";
+
+const Spinner = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Variant of spinner
+     */
+    this.variant = 'secondary';
+    /**
+     * Size of spinner
+     */
+    this.size = 'medium';
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        primary: this.variant === 'primary',
+        large: this.size === 'large',
+      } }, index.h("svg", { viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { id: "waiting-anim", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { id: "stroke", transform: "translate(4.5, 3)", "fill-rule": "nonzero", stroke: "#0F8287", "stroke-linejoin": "round" }, index.h("polygon", { id: "w1", points: "11.2583302 0 11.2583302 6.5 11.2583302 13", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "0s;w6ul.end", to: "visible" }), index.h("animate", { id: "w1l", attributeName: "points", calcMode: "spline", begin: "0s;w6ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 6.5 11.2583302 13", to: "11.2583302 0 22.5166605 6.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "w1ul", attributeName: "points", calcMode: "spline", begin: "f6uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 22.5166605 6.5 11.2583302 13", to: "16.88749535 9.25 22.5166605 6.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "w1ul.end", to: "hidden" })), index.h("polygon", { id: "w2", points: "22.5166605 6.5 16.88749535 10 11.2583302 13", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "w1l.end", to: "visible" }), index.h("animate", { id: "w2l", attributeName: "points", calcMode: "spline", begin: "w1l.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 16.88749535 10 11.2583302 13", to: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "w2ul", attributeName: "points", calcMode: "spline", begin: "w1ul.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", to: "16.88749535 16.25 22.5166605 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "w2ul.end", to: "hidden" })), index.h("polygon", { id: "w3", points: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "w2l.end", to: "visible" }), index.h("animate", { id: "w3l", attributeName: "points", calcMode: "spline", begin: "w2l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", to: "11.2583302 13 22.5166605 19.5 11.2583302 26", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "w3ul", attributeName: "points", calcMode: "spline", begin: "w2ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 11.2583302 26", to: "11.2583302 13 11.2583302 19.5 11.2583302 26", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "w3ul.end", to: "hidden" })), index.h("polygon", { id: "w4", points: "11.2583302 26 11.2583302 19.5 11.2583302 13", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "w3l.end", to: "visible" }), index.h("animate", { id: "w4l", attributeName: "points", calcMode: "spline", begin: "w3l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 11.2583302 19.5 11.2583302 13", to: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "w4ul", attributeName: "points", calcMode: "spline", begin: "w3ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", to: "5.62651 16.25 4.4408921e-15 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "w4ul.end", to: "hidden" })), index.h("polygon", { id: "w5", points: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "w4l.end", to: "visible" }), index.h("animate", { id: "w5l", attributeName: "points", calcMode: "spline", begin: "w4l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", to: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "w5ul", attributeName: "points", calcMode: "spline", begin: "w4ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", to: "11.2583302 13 5.6291651 9.75 1.687539e-14 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "w5ul.end", to: "hidden" })), index.h("polygon", { id: "w6", points: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "w5l.end", to: "visible" }), index.h("animate", { id: "w6l", attributeName: "points", calcMode: "spline", begin: "w5l.end", dur: "0.4s", keyTimes: "0;1", from: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "w6ul", attributeName: "points", calcMode: "spline", begin: "w5ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 11.2583302 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "w6ul.end", to: "hidden" }))), index.h("g", { id: "fill", transform: "translate(4.5, 3)", fill: "#0F8287", "fill-rule": "nonzero" }, index.h("polygon", { id: "f1", points: "11.2583302 0 11.2583302 6.5 11.2583302 13", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "w6l.end", to: "visible" }), index.h("animate", { id: "f1f", attributeName: "points", calcMode: "spline", begin: "w6l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 6.5 11.2583302 13", to: "11.2583302 0 22.5166605 6.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "f1uf", attributeName: "points", calcMode: "spline", begin: "f6f.end + 0.2s", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 22.5166605 6.5 11.2583302 13", to: "16.88749535 9.25 22.5166605 6.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "f1uf.end", to: "hidden" })), index.h("polygon", { id: "f2", points: "22.5166605 6.5 16.88749535 10 11.2583302 13", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "f1f.end", to: "visible" }), index.h("animate", { id: "f2f", attributeName: "points", calcMode: "spline", begin: "f1f.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 16.88749535 10 11.2583302 13", to: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "f2uf", attributeName: "points", calcMode: "spline", begin: "f1uf.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", to: "16.88749535 16.25 22.5166605 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "f2uf.end", to: "hidden" })), index.h("polygon", { id: "f3", points: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "f2f.end", to: "visible" }), index.h("animate", { id: "f3f", attributeName: "points", calcMode: "spline", begin: "f2f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", to: "11.2583302 13 22.5166605 19.5 11.2583302 26", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "f3uf", attributeName: "points", calcMode: "spline", begin: "f2uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 11.2583302 26", to: "11.2583302 13 11.2583302 19.5 11.2583302 26", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "f3uf.end", to: "hidden" })), index.h("polygon", { id: "f4", points: "11.2583302 26 11.2583302 19.5 11.2583302 13", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "f3f.end", to: "visible" }), index.h("animate", { id: "f4f", attributeName: "points", calcMode: "spline", begin: "f3f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 11.2583302 19.5 11.2583302 13", to: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "f4uf", attributeName: "points", calcMode: "spline", begin: "f3uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", to: "5.62651 16.25 4.4408921e-15 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "f4uf.end", to: "hidden" })), index.h("polygon", { id: "f5", points: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "f4f.end", to: "visible" }), index.h("animate", { id: "f5f", attributeName: "points", calcMode: "spline", begin: "f4f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", to: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "f5uf", attributeName: "points", calcMode: "spline", begin: "f4uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", to: "11.2583302 13 5.6291651 9.75 1.687539e-14 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "f5uf.end", to: "hidden" })), index.h("polygon", { id: "f6", points: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", visibility: "hidden" }, index.h("set", { attributeName: "visibility", begin: "f5f.end", to: "visible" }), index.h("animate", { id: "f6f", attributeName: "points", calcMode: "spline", begin: "f5f.end", dur: "0.4s", keyTimes: "0;1", from: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), index.h("animate", { id: "f6uf", attributeName: "points", calcMode: "spline", begin: "f5uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 11.2583302 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), index.h("set", { attributeName: "visibility", begin: "f6uf.end", to: "hidden" })))))));
+  }
+};
+Spinner.style = spinnerCss;
+
+exports.ix_spinner = Spinner;

package/dist/cjs/ix-split-button_2.cjs.entry.js

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.js');
+const baseButton = require('./base-button-eb1d47db.js');
+const popper = require('./popper-d7a0f999.js');
+
+const splitButtonCss = ".sc-ix-split-button-h{display:block}";
+
+const SplitButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.buttonClick = index.createEvent(this, "buttonClick", 7);
+    /**
+     * Color variant of button
+     */
+    this.variant = 'Primary';
+    /**
+     * Button outline variant
+     */
+    this.outline = false;
+    /**
+     * Button invisible
+     *
+     * @deprecated use ghost property
+     */
+    this.invisible = false;
+    /**
+     * Button invisible
+     */
+    this.ghost = false;
+    /**
+     * Button icon
+     */
+    this.icon = '';
+    /**
+     * Splitbutton icon
+     */
+    this.splitIcon = 'context-menu';
+    /**
+     * Disabled
+     */
+    this.disabled = false;
+    /**
+     * Placement of the dropdown
+     */
+    this.placement = 'bottom-start';
+    this.toggle = false;
+  }
+  get splitItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-split-button-item'));
+  }
+  clickOutside(e) {
+    if (!this.hostElement.contains(e.target)) {
+      this.toggle = false;
+    }
+  }
+  componentDidLoad() {
+    const element = this.hostElement.querySelector('.anchor');
+    this.popover = this.hostElement.querySelector('ix-dropdown');
+    this.popperInstance = popper.createPopper(element, this.popover, {
+      strategy: 'fixed',
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 0],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            padding: 8,
+          },
+        },
+      ],
+    });
+    window.addEventListener('click', this.clickOutside.bind(this));
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+    window.removeEventListener('click', this.clickOutside.bind(this));
+  }
+  toggleDropdown() {
+    this.toggle = !this.toggle;
+  }
+  render() {
+    return (index.h(index.Host, { class: "btn-group" }, index.h("button", { class: baseButton.getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled), onClick: (e) => this.buttonClick.emit(e) }, this.icon ? index.h("ix-icon", { name: this.icon }) : null, " ", this.label), index.h("button", { class: Object.assign(Object.assign({}, baseButton.getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled)), {
+        anchor: true,
+      }), onClick: () => this.toggleDropdown() }, index.h("ix-icon", { name: this.splitIcon }), index.h("ix-dropdown", { show: this.toggle }, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+SplitButton.style = splitButtonCss;
+
+const splitButtonItemCss = ".sc-ix-split-button-item-h{display:block}";
+
+const SplitButtonItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemClick = index.createEvent(this, "itemClick", 7);
+  }
+  render() {
+    return (index.h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+SplitButtonItem.style = splitButtonItemCss;
+
+exports.ix_split_button = SplitButton;
+exports.ix_split_button_item = SplitButtonItem;