@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/components/mutation-observer.js

@@ -1,13 +0,0 @@
-/*
- * 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 createMutationObserver = (callback) => new MutationObserver(callback);
-
-export { createMutationObserver as c };
-
-//# sourceMappingURL=mutation-observer.js.map

package/dist/components/mutation-observer.js.map

@@ -1 +0,0 @@
-{"file":"mutation-observer.js","mappings":"AAAA;;;;;;;;MASa,sBAAsB,GAAG,CAAC,QAA0B,KAC/D,IAAI,gBAAgB,CAAC,QAAQ;;;;","names":[],"sources":["./src/components/utils/mutation-observer.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 createMutationObserver = (callback: MutationCallback) =>\n  new MutationObserver(callback);\n"],"version":3}

package/dist/components/my-component.d.ts

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

package/dist/components/my-component.js

@@ -1,34 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const myComponentCss = ".sc-my-component-h{display:block;position:relative;width:100vw;height:100vh;padding:0rem 0rem 0rem 0rem}";
-
-const MyComponent$1 = /*@__PURE__*/ proxyCustomElement(class MyComponent extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return h(Host, null);
-  }
-  static get style() { return myComponentCss; }
-}, [2, "my-component"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["my-component"];
-  components.forEach(tagName => { switch (tagName) {
-    case "my-component":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MyComponent$1);
-      }
-      break;
-  } });
-}
-
-const MyComponent = MyComponent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MyComponent, defineCustomElement };
-
-//# sourceMappingURL=my-component.js.map

package/dist/components/my-component.js.map

@@ -1 +0,0 @@
-{"file":"my-component.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0GAA0G;;MCepHA,aAAW;;;;;EACtB,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["MyComponent"],"sources":["./src/components/my-component/my-component.scss?tag=my-component&encapsulation=scoped","./src/components/my-component/my-component.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  display: block;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  padding: 0rem 0rem 0rem 0rem;\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 */\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss',\n  scoped: true,\n})\nexport class MyComponent {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/components/rwd.util.js

@@ -1,41 +0,0 @@
-/*
- * 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/dist/components/rwd.util.js.map

@@ -1 +0,0 @@
-{"file":"rwd.util.js","mappings":"AAAA;;;;;;;;MASa,kBAAkB,GAAG,CAAC,KAAa;EAC9C,MAAM,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC;EAC5B,OAAO,GAAG,QAAQ,KAAK,CAAC;AAC1B,EAAE;MAEW,2BAA2B,GAAG,CAAC,GAAW;EACrD,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE;IACnD,OAAO,EAAE,CAAC;GACX;EAED,IAAI,IAAI,GAAG,EAAE,CAAC;;EAGd,MAAM,KAAK,GAAG;IACZ,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;IACtC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;IACtC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;IACrC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;IACrC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE;GACtC,CAAC;EAEF,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG;IACb,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,IAAI,YAAY,IAAI,GAAG,CAAC,KAAK,EAAE;MAC7B,YAAY,IAAI,GAAG,CAAC,KAAK,CAAC;MAC1B,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;MACzC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;MAChB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd,CAAC,CAAC;EAEH,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/dist/components/select-item.js

@@ -1,97 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './dropdown-item.js';
-import { d as defineCustomElement$1 } from './icon.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 = ".sc-ix-select-item-h{display:block;position:relative}.sc-ix-select-item-h>ix-dropdown-item.sc-ix-select-item{width:100%}.sc-ix-select-item-h .select-item-checked.sc-ix-select-item{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}.d-none.sc-ix-select-item-h{display:none}";
-
-const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    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) {
-      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, null, h("ix-dropdown-item", { 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 selectItemCss; }
-}, [2, "ix-select-item", {
-    "label": [513],
-    "value": [520],
-    "selected": [4],
-    "hover": [4],
-    "onItemClick": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-select-item", "ix-dropdown-item", "ix-icon"];
-  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$2();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { SelectItem as S, defineCustomElement as d };
-
-//# sourceMappingURL=select-item.js.map

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

@@ -1 +0,0 @@
-{"file":"select-item.js","mappings":";;;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;EACA,YAAY,MAA8C;IACxD,KAAK,CAAC,4BAA4B,EAAE;MAClC,OAAO,EAAE,IAAI;MACb,MAAM;KACP,CAAC,CAAC;GACJ;;;ACjBH,MAAM,aAAa,GAAG,iWAAiW;;MC2B1W,UAAU;;;;;;;oBAgBF,KAAK;iBAKR,KAAK;;;;;;EAYrB,MAAM,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACjC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;GACF;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,wBACE,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACrC,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;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=scoped","./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  .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  scoped: 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   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * 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) {\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/dist/components/select.js

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