@siemens/ix 1.1.0-beta.1 → 1.1.0-beta.2

package/dist/components/ix-message-bar.js

@@ -1,88 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as anime } from './anime.es.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.closedChange = 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({
-      targets: el,
-      duration: MessageBar.duration,
-      opacity: [1, 0],
-      easing: 'easeOutSine',
-      complete: () => {
-        el.classList.add('d-none');
-      },
-    });
-    this.closedChange.emit();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { color: this.color, name: this.icon }), h("div", { class: "message-content" }, h("slot", null)), this.dismissible ? (h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => {
-        this.closeAlert(this.divElement);
-      }, "data-testid": "close-btn" })) : (''))));
-  }
-  static get style() { return messageBarCss; }
-}, [6, "ix-message-bar", {
-    "type": [1],
-    "dismissible": [4],
-    "icon": [32],
-    "color": [32]
-  }]);
-MessageBar.duration = 300;
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-message-bar", "ix-icon", "ix-icon-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-message-bar":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MessageBar);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxMessageBar = MessageBar;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxMessageBar, defineCustomElement };

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

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

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

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

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

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

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

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

package/dist/components/ix-pill.js

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

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

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

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

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

package/dist/components/ix-select.js

@@ -1,339 +0,0 @@
-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-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 .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 };