@siemens/ix 0.0.0-20240419081748

package/components/row.js.map

@@ -0,0 +1 @@
+{"file":"row.js","mappings":";;AAAA,MAAM,MAAM,GAAG,uHAAuH,CAAC;AACvI,oBAAe,MAAM;;MCkBR,GAAG;;;;;;IACd,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/rwd.util.js

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const convertToRemString = (value) => {
+    const valueRem = value / 16;
+    return `${valueRem}rem`;
+};
+const convertToAbbreviationString = (num) => {
+    if (isNaN(num) || num === null || num === undefined) {
+        return '';
+    }
+    let unit = '';
+    // Metric Units
+    const units = [
+        { unit: 'q', value: Math.pow(10, 15) },
+        { unit: 't', value: Math.pow(10, 12) },
+        { unit: 'B', value: Math.pow(10, 9) },
+        { unit: 'M', value: Math.pow(10, 6) },
+        { unit: 'K', value: Math.pow(10, 3) },
+    ];
+    units.some((pow) => {
+        let formattedNum = Math.abs(num);
+        if (formattedNum >= pow.value) {
+            formattedNum /= pow.value;
+            num = Math.round(formattedNum * 10) / 10;
+            unit = pow.unit;
+            return true;
+        }
+        return false;
+    });
+    return num + unit;
+};
+
+export { convertToRemString as a, convertToAbbreviationString as c };
+
+//# sourceMappingURL=rwd.util.js.map

package/components/rwd.util.js.map

@@ -0,0 +1 @@
+{"file":"rwd.util.js","mappings":"AAAA;;;;;;;;MASa,kBAAkB,GAAG,CAAC,KAAa;IAC9C,MAAM,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC;IAC5B,OAAO,GAAG,QAAQ,KAAK,CAAC;AAC1B,EAAE;MAEW,2BAA2B,GAAG,CAAC,GAAW;IACrD,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE;QACnD,OAAO,EAAE,CAAC;KACX;IAED,IAAI,IAAI,GAAG,EAAE,CAAC;;IAGd,MAAM,KAAK,GAAG;QACZ,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;QACtC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;QACtC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;QACrC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;QACrC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;KACtC,CAAC;IAEF,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG;QACb,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,YAAY,IAAI,GAAG,CAAC,KAAK,EAAE;YAC7B,YAAY,IAAI,GAAG,CAAC,KAAK,CAAC;YAC1B,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;YACzC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAChB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;KACd,CAAC,CAAC;IAEH,OAAO,GAAG,GAAG,IAAI,CAAC;AACpB;;;;","names":[],"sources":["src/components/utils/rwd.util.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport const convertToRemString = (value: number) => {\n  const valueRem = value / 16;\n  return `${valueRem}rem`;\n};\n\nexport const convertToAbbreviationString = (num: number) => {\n  if (isNaN(num) || num === null || num === undefined) {\n    return '';\n  }\n\n  let unit = '';\n\n  // Metric Units\n  const units = [\n    { unit: 'q', value: Math.pow(10, 15) },\n    { unit: 't', value: Math.pow(10, 12) },\n    { unit: 'B', value: Math.pow(10, 9) },\n    { unit: 'M', value: Math.pow(10, 6) },\n    { unit: 'K', value: Math.pow(10, 3) },\n  ];\n\n  units.some((pow) => {\n    let formattedNum = Math.abs(num);\n    if (formattedNum >= pow.value) {\n      formattedNum /= pow.value;\n      num = Math.round(formattedNum * 10) / 10;\n      unit = pow.unit;\n      return true;\n    }\n\n    return false;\n  });\n\n  return num + unit;\n};\n"],"version":3}

package/components/select-item.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './dropdown-item.js';
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class IxSelectItemLabelChangeEvent extends CustomEvent {
+    constructor(detail) {
+        super('ix-select-item:labelChange', {
+            bubbles: true,
+            detail,
+        });
+    }
+}
+
+const selectItemCss = ":host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host ix-dropdown-item{color:var(--theme-color-std-text)}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.d-none){display:none}";
+const IxSelectItemStyle0 = selectItemCss;
+
+const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.itemClick = createEvent(this, "itemClick", 7);
+        this.label = undefined;
+        this.value = undefined;
+        this.selected = false;
+        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 === undefined || this.value === null) {
+            throw Error('ix-select-item must have a `value` property');
+        }
+    }
+    labelChange(newValue, oldValue) {
+        this.hostElement.dispatchEvent(new IxSelectItemLabelChangeEvent({
+            newValue: newValue,
+            oldValue: oldValue,
+        }));
+    }
+    render() {
+        return (h(Host, { key: 'ca61c042dedf75ce6c33406257b9a26072d75865' }, h("ix-dropdown-item", { key: 'ac5bb56f3d7368860379582e4faf1c594dfaeab2', class: {
+                'select-item-checked': this.selected,
+            }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "label": ["labelChange"]
+    }; }
+    static get style() { return IxSelectItemStyle0; }
+}, [1, "ix-select-item", {
+        "label": [513],
+        "value": [520],
+        "selected": [4],
+        "hover": [4],
+        "onItemClick": [64]
+    }, undefined, {
+        "label": ["labelChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-select-item", "ix-dropdown-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-select-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SelectItem);
+            }
+            break;
+        case "ix-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SelectItem as S, defineCustomElement as d };
+
+//# sourceMappingURL=select-item.js.map

package/components/select-item.js.map

@@ -0,0 +1 @@
+{"file":"select-item.js","mappings":";;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;IACA,YAAY,MAA8C;QACxD,KAAK,CAAC,4BAA4B,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,MAAM;SACP,CAAC,CAAC;KACJ;;;ACjBH,MAAM,aAAa,GAAG,4TAA4T,CAAC;AACnV,2BAAe,aAAa;;MC0Bf,UAAU;;;;;;;;wBAmBF,KAAK;qBAKR,KAAK;;;;;;IAYrB,MAAM,WAAW,CAAC,KAA8C;QAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;QACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;QAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;YACnD,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;SAC5D;KACF;IAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;QAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;YAC/B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CACH,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,yEACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  ix-dropdown-item {\n    color: var(--theme-color-std-text);\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.d-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * The value of the item.\n   * Important: The select component uses string values to handle selection and will call toString() on this value.\n   * Therefor a string should be passed to value to prevent unexpected behavior.\n   * @deprecated will be changed to type string with next major release (3.0.0)\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Flag indicating whether the item is selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (this.value === undefined || this.value === null) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/select.js

@@ -0,0 +1,445 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { O as OnListener } from './listener.js';
+import { d as defineCustomElement$6 } from './dropdown.js';
+import { d as defineCustomElement$5 } from './dropdown-item.js';
+import { d as defineCustomElement$4 } from './filter-chip.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './select-item.js';
+import { d as defineCustomElement$1 } from './spinner.js';
+
+const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;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;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly{box-shadow:none !important;border:none;border-radius:0px;border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible{outline:none}:host .select.readonly input{color:var(--theme-color-weak-text)}:host .select.readonly input:focus,:host .select.readonly input:focus-visible{outline:none}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{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%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";
+const IxSelectStyle0 = selectCss;
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.itemSelectionChange = createEvent(this, "itemSelectionChange", 7);
+        this.inputChange = createEvent(this, "inputChange", 7);
+        this.addItem = createEvent(this, "addItem", 7);
+        this.selectedIndices = undefined;
+        this.value = undefined;
+        this.allowClear = false;
+        this.mode = 'single';
+        this.editable = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.i18nPlaceholder = 'Select an option';
+        this.i18nPlaceholderEditable = 'Type of select option';
+        this.i18nSelectListHeader = 'Please select an option';
+        this.i18nNoMatches = 'No matches';
+        this.hideListHeader = false;
+        this.dropdownShow = false;
+        this.selectedLabels = undefined;
+        this.dropdownWrapperRef = undefined;
+        this.dropdownAnchor = undefined;
+        this.isDropdownEmpty = false;
+        this.hasFocus = false;
+        this.navigationItem = undefined;
+        this.inputFilterText = undefined;
+        this.inputValue = undefined;
+    }
+    get items() {
+        return [
+            ...Array.from(this.hostElement.querySelectorAll('ix-select-item')),
+            ...Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item')),
+        ];
+    }
+    get selectedItems() {
+        return this.items.filter((item) => item.selected);
+    }
+    get addItemButton() {
+        return this.hostElement.shadowRoot.querySelector('.add-item');
+    }
+    get isSingleMode() {
+        return this.mode === 'single';
+    }
+    get isMultipleMode() {
+        return this.mode === 'multiple';
+    }
+    get isEveryDropdownItemHidden() {
+        return this.items.every((item) => item.classList.contains('d-none'));
+    }
+    watchSelectedIndices(value) {
+        this.value = value;
+        this.updateSelection();
+    }
+    watchValue(value) {
+        this.selectedIndices = value;
+        this.updateSelection();
+    }
+    onItemClicked(event) {
+        const newId = event.detail;
+        this.itemClick(newId);
+    }
+    itemClick(newId) {
+        this.value = this.toggleValue(newId);
+        this.updateSelection();
+        this.emitValueChange();
+    }
+    emitAddItem(value) {
+        if (value.trim() === '') {
+            return;
+        }
+        const newItem = document.createElement('ix-select-item');
+        newItem.value = value;
+        newItem.label = value;
+        this.addItemRef.appendChild(newItem);
+        this.clearInput();
+        this.itemClick(value);
+        this.addItem.emit(value);
+    }
+    toggleValue(itemValue) {
+        if (!this.isMultipleMode) {
+            return itemValue;
+        }
+        if (!this.value) {
+            return [itemValue];
+        }
+        let value = this.value;
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+        if (value.includes(itemValue)) {
+            return value.filter((value) => value !== itemValue);
+        }
+        else {
+            return [...value, itemValue];
+        }
+    }
+    updateSelection() {
+        var _a;
+        let ids = [];
+        if (this.value) {
+            ids = Array.isArray(this.value) ? [...this.value] : [this.value];
+        }
+        this.items.forEach((item) => {
+            item.selected = ids.some(
+            // Check can be removed if value is type of string in future releases
+            (i) => i ===
+                (item.value !== undefined && item.value !== null
+                    ? item.value.toString()
+                    : ''));
+        });
+        this.selectedLabels = this.selectedItems.map((item) => item.label);
+        if (this.isSingleMode) {
+            this.inputValue = ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)
+                ? this.selectedLabels[0]
+                : null;
+            return;
+        }
+        this.inputValue = null;
+    }
+    emitValueChange() {
+        this.valueChange.emit(this.value);
+        if (!this.value) {
+            this.itemSelectionChange.emit(null);
+        }
+        else {
+            this.itemSelectionChange.emit(Array.isArray(this.value) ? this.value : [this.value]);
+        }
+    }
+    componentDidLoad() {
+        this.inputRef.addEventListener('input', () => {
+            this.dropdownShow = true;
+            this.inputChange.emit(this.inputRef.value);
+        });
+    }
+    componentWillLoad() {
+        if (this.selectedIndices && !this.value) {
+            this.value = this.selectedIndices;
+        }
+        this.updateSelection();
+    }
+    onLabelChange(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.updateSelection();
+    }
+    disconnectedCallback() {
+        if (this.labelMutationObserver) {
+            this.labelMutationObserver.disconnect();
+        }
+    }
+    itemExists(item) {
+        return this.items.find((i) => i.label === item);
+    }
+    dropdownVisibilityChanged(event) {
+        this.dropdownShow = event.detail;
+        this.hasFocus = event.detail;
+        if (event.detail) {
+            this.inputRef.focus();
+            this.inputRef.select();
+            this.removeHiddenFromItems();
+            this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+        }
+        else {
+            this.navigationItem = undefined;
+        }
+    }
+    async onKeyDown(event) {
+        if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
+            this.onArrowNavigation(event, event.code);
+        }
+        if (!this.dropdownShow) {
+            return;
+        }
+        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+            await this.onEnterNavigation();
+        }
+        if (event.code === 'Escape') {
+            this.dropdownShow = false;
+        }
+    }
+    async onEnterNavigation() {
+        var _a, _b;
+        if (this.isMultipleMode) {
+            return;
+        }
+        if (this.editable && !this.itemExists(this.inputFilterText)) {
+            this.emitAddItem(this.inputFilterText);
+            this.navigationItem = this.items[this.items.length - 1];
+        }
+        (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.onItemClick();
+        await ((_b = this.dropdownRef) === null || _b === void 0 ? void 0 : _b.updatePosition());
+        if (this.isSingleMode && !this.editable) {
+            this.dropdownShow = false;
+        }
+    }
+    onArrowNavigation(event, key) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropdownShow = true;
+        const items = this.items.filter((i) => !i.classList.contains('d-none'));
+        if (this.navigationItem === undefined) {
+            this.applyFocusTo(items[0]);
+            return;
+        }
+        let indexOfNavigationItem = items.findIndex((item) => item === this.navigationItem);
+        if (key === 'ArrowDown') {
+            indexOfNavigationItem++;
+        }
+        else {
+            indexOfNavigationItem--;
+        }
+        const newFocusItem = items[indexOfNavigationItem];
+        this.applyFocusTo(newFocusItem);
+    }
+    applyFocusTo(element) {
+        if (!element) {
+            return;
+        }
+        this.navigationItem = element;
+        setTimeout(() => {
+            element.shadowRoot
+                .querySelector('ix-dropdown-item')
+                .shadowRoot.querySelector('button')
+                .focus();
+        });
+    }
+    filterItemsWithTypeahead() {
+        this.inputFilterText = this.inputRef.value;
+        if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
+            return;
+        }
+        if (this.inputFilterText) {
+            this.items.forEach((item) => {
+                item.classList.remove('d-none');
+                if (!item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())) {
+                    item.classList.add('d-none');
+                }
+            });
+        }
+        else {
+            this.removeHiddenFromItems();
+        }
+        this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+    }
+    removeHiddenFromItems() {
+        this.items.forEach((item) => {
+            item.classList.remove('d-none');
+        });
+    }
+    clearInput() {
+        this.inputRef.value = '';
+        this.inputFilterText = '';
+    }
+    clear() {
+        this.clearInput();
+        this.selectedLabels = [];
+        this.value = [];
+        this.valueChange.emit(null);
+        this.dropdownShow = false;
+    }
+    onInputBlur(e) {
+        if (this.editable) {
+            return;
+        }
+        if (this.isSingleMode) {
+            return;
+        }
+        if (!this.dropdownShow && this.mode !== 'multiple') {
+            e.target['value'] = this.selectedLabels;
+        }
+    }
+    placeholderValue() {
+        if (this.editable) {
+            return this.i18nPlaceholderEditable;
+        }
+        if (this.readonly) {
+            return '';
+        }
+        return this.i18nPlaceholder;
+    }
+    isAddItemVisible() {
+        return (!this.itemExists(this.inputFilterText) &&
+            this.editable &&
+            this.inputFilterText);
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: 'c3436b72b89db710173be26ccc34d44eaef48096' }, h("div", { key: '19b6245bdbd79faa3d4bbf25a4d106e2084875d9', class: {
+                select: true,
+                disabled: this.disabled,
+                readonly: this.readonly,
+            }, ref: (ref) => {
+                this.dropdownAnchor = ref;
+                if (!this.editable)
+                    this.dropdownWrapperRef = ref;
+            } }, h("div", { key: '283b9918b77987f4a5c943eeba63679cb4cd979c', class: "input-container" }, h("div", { key: 'eb809d645c40ae085805d0ec3fcbbb48534cfb2c', class: "chips" }, this.isMultipleMode
+            ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.itemClick(item.value);
+                } }, item.label)))
+            : '', h("div", { key: 'e2faa64250d72d63afaf05139a0f6ed144097f69', class: "trigger" }, h("input", { key: '3aa2890f133b801bb14f8cc9d568cbee3eb83d13', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+                'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
+            }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
+                this.navigationItem = undefined;
+            }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
+            (((_c = this.selectedLabels) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.clear();
+            } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
+                if (this.editable)
+                    this.dropdownWrapperRef = ref;
+            } })))))), h("ix-dropdown", { key: '571d47a09fb16445a94a304e9fae4a1a592d078b', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+                'd-none': this.disabled || this.readonly,
+            }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
+                return {
+                    minWidth: `${this.hostElement.clientWidth}px`,
+                };
+            } }, h("div", { key: '2751511a275b502709f59e600eb494cf33085d80', class: {
+                'select-list-header': true,
+                hidden: this.hideListHeader || this.isDropdownEmpty,
+            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", { key: '8f894985df712df0f0b0d4527ee7b136d2c84a60' }), h("div", { key: '4edce84e19a13a67defc8de67ca1e23fb7319be7', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+                'add-item': true,
+            }, label: this.inputFilterText, onItemClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.emitAddItem(this.inputFilterText);
+            } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "selectedIndices": ["watchSelectedIndices"],
+        "value": ["watchValue"]
+    }; }
+    static get style() { return IxSelectStyle0; }
+}, [1, "ix-select", {
+        "selectedIndices": [1025, "selected-indices"],
+        "value": [1025],
+        "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"],
+        "i18nNoMatches": [1, "i-1-8n-no-matches"],
+        "hideListHeader": [4, "hide-list-header"],
+        "dropdownShow": [32],
+        "selectedLabels": [32],
+        "dropdownWrapperRef": [32],
+        "dropdownAnchor": [32],
+        "isDropdownEmpty": [32],
+        "hasFocus": [32],
+        "navigationItem": [32],
+        "inputFilterText": [32],
+        "inputValue": [32]
+    }, [[0, "itemClick", "onItemClicked"], [0, "ix-select-item:labelChange", "onLabelChange"]], {
+        "selectedIndices": ["watchSelectedIndices"],
+        "value": ["watchValue"]
+    }]);
+__decorate([
+    OnListener('keydown', (self) => self.dropdownShow)
+], Select.prototype, "onKeyDown", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-select", "ix-dropdown", "ix-dropdown-item", "ix-filter-chip", "ix-icon-button", "ix-select-item", "ix-spinner"];
+    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$6();
+            }
+            break;
+        case "ix-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-filter-chip":
+            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;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Select as S, defineCustomElement as d };
+
+//# sourceMappingURL=select.js.map