@cas-smartdesign/combo-box 7.2.5

package/dist/combo-box.d.ts

@@ -0,0 +1,130 @@
+import { PropertyValues, TemplateResult } from "lit";
+import SDInput, { CustomEventMap as InputCustomEventMap } from "@cas-smartdesign/lit-input";
+import { ItemGenerator } from "@cas-smartdesign/virtual-list";
+import { ItemData } from "@cas-smartdesign/list-item";
+declare const TAG_NAME = "sd-combo-box";
+declare global {
+    interface HTMLElementTagNameMap {
+        [TAG_NAME]: ComboBox;
+    }
+}
+export type ComboBoxValue = {
+    index: number;
+    item: ItemData | any;
+};
+export type InMemoryFilter = (filterText: string, item: any) => boolean;
+export type DataResponse = {
+    items: any[];
+    finalSizeIsKnown: boolean;
+};
+export interface ISelectionEvent {
+    selection: ComboBoxValue | string;
+    isCustomValue: boolean;
+}
+export interface IFilterChangeEvent {
+    value: string;
+}
+export interface CustomEventMap extends InputCustomEventMap {
+    "selection-change": CustomEvent<ISelectionEvent>;
+    "filter-change": CustomEvent<IFilterChangeEvent>;
+}
+export default interface ComboBox {
+    addEventListener<K extends keyof CustomEventMap>(event: K, listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null, options?: AddEventListenerOptions | boolean): void;
+    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+    removeEventListener<K extends keyof CustomEventMap>(type: K, listener: (this: this, ev: CustomEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;
+}
+export default class ComboBox extends SDInput {
+    static readonly ID: string;
+    static ensureDefined: () => void;
+    static formAssociated: boolean;
+    private static readonly DATA_REQUEST_CANCELLED;
+    opened: boolean;
+    itemHeight: number;
+    allowCustomValue: boolean;
+    triggerOnly: boolean;
+    nullSettingDisallowed: boolean;
+    displayValuePath: string;
+    filterProperty: string;
+    id: string;
+    inMemoryFilter: InMemoryFilter;
+    filterText: string;
+    minimumOverlayWidth: number;
+    private _comboBoxValue;
+    private _clearButton;
+    private _toggleButton;
+    private _popper;
+    private _list;
+    private _dataProvider;
+    private _itemGenerator;
+    private _itemCache;
+    private _declarativeItems;
+    private _onDataRequest;
+    private _pendingDataRequest;
+    private _openedByFilterTextChange;
+    private _lastRequestedPage;
+    private _lastRequestedFilterText;
+    constructor();
+    get clearFilterOnLazyLoadedSelection(): boolean;
+    /**
+     * @deprecated The method should not be used.
+     * Use {@link ComboBox#triggerOnly} instead.
+     * @param  {boolean} value
+     */
+    set clearFilterOnLazyLoadedSelection(value: boolean);
+    get itemGenerator(): ItemGenerator;
+    set itemGenerator(value: ItemGenerator);
+    get items(): any[];
+    set items(items: any[]);
+    get finalSizeIsKnown(): boolean;
+    set finalSizeIsKnown(value: boolean);
+    configureLazyLoad(onDataRequest: (filterText: string, page: number) => Promise<DataResponse>): void;
+    get comboBoxValue(): ComboBoxValue | string;
+    set comboBoxValue(value: ComboBoxValue | string);
+    get selectedIndex(): number;
+    get displayValue(): string;
+    open(): void;
+    static get styles(): import("lit").CSSResult[];
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    private updateComboBoxValueFromValue;
+    updated(changedProperties: PropertyValues): void;
+    private initClearButtton;
+    private initToggleButtton;
+    private debouncedFilterItemsInMemory;
+    private filterItemsInMemory;
+    private ensureListAndPopperInitialized;
+    private closeIfNotVisible;
+    private elementFromMiddleOfComboBox;
+    private handleSelection;
+    private handleOpenedStateChange;
+    private updateValueOnClose;
+    private restorePreviousSelection;
+    private updateFocusAndSelectedIndexFromValue;
+    private handleWindowPointerDown;
+    private handleKeyDown;
+    private navigateInList;
+    private updateActiveDescendant;
+    private updateInputValue;
+    private convertToDisplayValue;
+    protected fireValueChange(immediate?: boolean): void;
+    private clearValue;
+    private clearFilter;
+    private updateDropdownSizes;
+    private updateListId;
+    private isCustomValue;
+    private dispatchSelectionChangeEvent;
+    private dispatchFilterChangeEvent;
+    private get isLazyLoadConfigured();
+    /**
+     * Used only when lazy loading is configured.
+     */
+    private debouncedRequestData;
+    private requestData;
+    private get defaultSlot();
+    private onDefaultSlotChange;
+}
+export {};

package/dist/combo-box.mjs

@@ -0,0 +1,439 @@
+import { css as g, unsafeCSS as v, html as b } from "lit";
+import { property as r } from "lit/decorators/property.js";
+import { createPopper as x } from "@popperjs/core";
+import _ from "@cas-smartdesign/lit-input";
+import p, { ListDataProvider as y, SelectionType as u } from "@cas-smartdesign/virtual-list";
+import { generator as w } from "@cas-smartdesign/list-item";
+const I = ":host{display:inline-flex;position:relative;cursor:text;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;color:#111;contain:layout style;flex-direction:column}:host([hidden]),:host([type=hidden]){display:none!important}:host([effective-disabled]){opacity:.6;cursor:default;filter:grayscale(100%)}:host([effective-disabled]) .unfocused-line,:host([effective-disabled]) .focused-line{border-bottom-style:dashed}:host(:not([effective-disabled]):focus) .focused-line,:host(:not([effective-disabled])[focused]) .focused-line{transform:none;transition:transform .25s}:host(:not([effective-disabled]):focus) .label.float,:host(:not([effective-disabled])[focused]) .label.float{color:var(--sd-input-focused-color, #1467ba)}:host([inactive]) .input{pointer-events:none}:host([effective-disabled]:focus),:host([effective-disabled][focused]){box-shadow:0 0 0 1px #111}:host(:not([effective-disabled])[validationlevel]) .focused-line{transform:none;transition:transform .25s}:host([validationlevel=warn i]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #555555)}:host([validationlevel=warn i]) .label,:host([validationlevel=warn i]) .validation-message{color:var(--sd-input-validation-color, #555555)!important}:host([validationlevel=suggest i]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #bf8800)}:host([validationlevel=suggest i]) .label,:host([validationlevel=suggest i]) .validation-message{color:var(--sd-input-validation-color, #bf8800)!important}:host([validationlevel=error i]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #cc0017)}:host([validationlevel=error i]) .label,:host([validationlevel=error i]) .validation-message{color:var(--sd-input-validation-color, #cc0017)!important}:host([validationlevel=warn]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #555555)}:host([validationlevel=warn]) .label,:host([validationlevel=warn]) .validation-message{color:var(--sd-input-validation-color, #555555)!important}:host([validationlevel=suggest]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #bf8800)}:host([validationlevel=suggest]) .label,:host([validationlevel=suggest]) .validation-message{color:var(--sd-input-validation-color, #bf8800)!important}:host([validationlevel=error]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #cc0017)}:host([validationlevel=error]) .label,:host([validationlevel=error]) .validation-message{color:var(--sd-input-validation-color, #cc0017)!important}.validation-message-wrapper{position:relative}.validation-message{position:absolute;left:0;right:0}.label.float{transform:translateY(-75%) scale(.75);width:133%}.label:not(.float){max-width:100%}.floated-label-placeholder{height:20px;width:100%}.label{position:absolute;top:0;left:0;line-height:24px;pointer-events:none;color:var(--sd-input-color, #767676);transition:transform .25s,width .25s;transform-origin:left top}.input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;background-color:var(--input-wrapper-background-color)}:host([extended-prefix]:focus-within:not([effective-disabled])) .input-wrapper{flex-direction:column;align-items:baseline}:host([extended-prefix]:focus-within:not([effective-disabled])) .input-container{width:100%}:host([extended-prefix]:not(:focus-within)) .input-container,:host([extended-prefix][effective-disabled]) .input-container{width:0px}.input-container{line-height:var(--sd-input-line-height, 24px);flex:1 1 auto}.input{width:100%;background:var(--sd-input-background, transparent);font-family:inherit;font-size:inherit;text-align:inherit;color:inherit;border:none;outline:none;resize:none;padding-left:0;padding-right:0}.input:-webkit-autofill{animation-name:onautofillstart}.input:not(:-webkit-autofill){animation-name:onautofillcancel}@keyframes onautofillstart{0%{outline:none}}@keyframes onautofillcancel{0%{outline:none}}.label,input.input,.validation-message{text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.input::-ms-clear{display:none}.input::placeholder{color:var(--sd-input-color, #767676)}.input:-ms-input-placeholder{color:var(--sd-input-color, #767676)}.input::-ms-input-placeholder{color:var(--sd-input-color, #767676)}.underline{height:2px;width:100%;position:relative}.unfocused-line,.focused-line{position:absolute;top:0;right:0;bottom:0;left:0}.unfocused-line{border-bottom:1px solid var(--sd-input-underline-color, #959595)}.focused-line{border-bottom:2px solid var(--sd-input-focused-color, #1467ba);transform-origin:center center;transform:scale3d(0,1,1)}.prefix,.suffix{display:flex;flex-wrap:nowrap}.prefix ::slotted(*),.suffix ::slotted(*){display:flex}:host(:focus){outline:none}.suffix ::slotted(.clear-button),.suffix ::slotted(.toggle-button){cursor:pointer;width:16px;height:32px;padding:0 8px;margin-top:-8px;margin-bottom:-8px;fill:#666;outline:none;flex-shrink:0}.suffix ::slotted(.toggle-button){transition:transform .2s}:host([opened]) .suffix ::slotted(.toggle-button){transform:rotate(180deg)}:host([disabled]) .suffix ::slotted(.clear-button),:host([disabled]) .suffix ::slotted(.toggle-button){display:none!important}:host(:not([has-value])) .suffix ::slotted(.clear-button),:host([null-setting-disallowed]) .suffix ::slotted(.clear-button){display:none!important}:host(:not([allow-custom-value]):not([trigger-only])) .input{caret-color:transparent}:host(:not([allow-custom-value]):not([disabled])) .input{cursor:pointer}#default-slot{display:none}", C = `<svg xmlns="http://www.w3.org/2000/svg" class="toggle-button" slot="suffix" viewBox="0 0 16 16">\r
+  <path d="M13 4v2l-5 5-5-5v-2l5 5z"/>\r
+</svg>\r
+`, V = `<svg xmlns="http://www.w3.org/2000/svg" class="clear-button" slot="suffix" viewBox="0 0 16 16">\r
+  <path d="M12.96 4.46l-1.42-1.42-3.54 3.55-3.54-3.55-1.42 1.42 3.55 3.54-3.55 3.54 1.42 1.42 3.54-3.55 3.54 3.55 1.42-1.42-3.55-3.54 3.55-3.54z"/>\r
+</svg>\r
+`;
+var B = Object.defineProperty, P = Object.getOwnPropertyDescriptor, d = (h, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? P(t, e) : t, n = h.length - 1, l; n >= 0; n--)
+    (l = h[n]) && (s = (i ? l(t, e, s) : l(s)) || s);
+  return i && s && B(t, e, s), s;
+};
+const D = "sd-combo-box";
+function f(h, t) {
+  let e;
+  return function(...i) {
+    e != null && clearTimeout(e), e = window.setTimeout(() => h(...i), t);
+  };
+}
+let S = 0;
+var o;
+const a = (o = class extends _ {
+  constructor() {
+    super(), this.opened = !1, this.itemHeight = 50, this.displayValuePath = "caption", this.id = o.ID + "_" + S++, this.inMemoryFilter = (t, e) => {
+      if (!t)
+        return !0;
+      const i = t.toLowerCase();
+      return !!(typeof e.caption == "string" && e.caption.toLowerCase().includes(i) || typeof e.description == "string" && e.description.toLowerCase().includes(i));
+    }, this.minimumOverlayWidth = 250, this._itemGenerator = w, this._itemCache = [], this.debouncedFilterItemsInMemory = f(this.filterItemsInMemory.bind(this), 200), this.handleSelection = (t) => {
+      const e = this._dataProvider.items[t.detail.index];
+      t.detail.selected || (this._list.selectedIndices = [t.detail.index]), this.comboBoxValue = { index: this._itemCache.indexOf(e), item: e }, this.dispatchSelectionChangeEvent(), this.opened = !1;
+    }, this.handleWindowPointerDown = (t) => {
+      !(t.target instanceof Node && this.contains(t.target)) && this.opened && t.composedPath().indexOf(this._list) === -1 && (this.triggerOnly && (this.value = null), this.opened = !1);
+    }, this.handleKeyDown = (t) => {
+      switch (t.key) {
+        case "Down":
+        case "ArrowDown": {
+          t.preventDefault(), this.navigateInList(1);
+          break;
+        }
+        case "Up":
+        case "ArrowUp": {
+          t.preventDefault(), this.navigateInList(-1);
+          break;
+        }
+        case "Enter": {
+          this.opened && (t.preventDefault(), t.stopPropagation(), this.opened = !1);
+          break;
+        }
+        case "Escape": {
+          this.opened && (t.preventDefault(), t.stopPropagation(), this._list.selectedIndices.indexOf(this._list.focusIndex) > -1 && this._dataProvider.items.length > this._list.focusIndex ? this.opened = !1 : (this.clearFilter(), this.updateInputValue(null), this.updateFocusAndSelectedIndexFromValue(), this._list.selectedIndices.push(this._list.focusIndex)));
+          break;
+        }
+        case "Tab": {
+          this.opened && (this.triggerOnly && (this.value = null), this.opened = !1);
+          break;
+        }
+      }
+    }, this.debouncedRequestData = f(this.requestData.bind(this), 250), this._dataProvider = new y(), this._dataProvider.finalSizeIsKnown = !0;
+  }
+  get clearFilterOnLazyLoadedSelection() {
+    return this.triggerOnly;
+  }
+  /**
+   * @deprecated The method should not be used.
+   * Use {@link ComboBox#triggerOnly} instead.
+   * @param  {boolean} value
+   */
+  set clearFilterOnLazyLoadedSelection(t) {
+    console.warn(
+      "Using clearFilterOnLazyLoadedSelection setting on a combo-box is deprecated. Use triggerOnly instead."
+    ), this.triggerOnly = t;
+  }
+  get itemGenerator() {
+    return this._itemGenerator;
+  }
+  set itemGenerator(t) {
+    this._itemGenerator = t, this._list && (this._list.itemGenerator = this._itemGenerator);
+  }
+  get items() {
+    return this._itemCache;
+  }
+  set items(t) {
+    this._itemCache = t, this.value && !this.comboBoxValue && this.updateComboBoxValueFromValue(), this.filterItemsInMemory(), this.opened && this._popper && this._popper.update();
+  }
+  get finalSizeIsKnown() {
+    return this._dataProvider.finalSizeIsKnown;
+  }
+  set finalSizeIsKnown(t) {
+    this._dataProvider.finalSizeIsKnown = t;
+  }
+  configureLazyLoad(t) {
+    if (!t)
+      throw new Error("It is not possible to configure lazy load without a given onDataRequest calback.");
+    this._dataProvider.finalSizeIsKnown = !1, this._onDataRequest = t, this._dataProvider.onDataRequest = (e) => {
+      this.requestData(e, !1);
+    };
+  }
+  get comboBoxValue() {
+    return this._comboBoxValue;
+  }
+  set comboBoxValue(t) {
+    this._comboBoxValue = t, this.updateInputValue(null);
+  }
+  get selectedIndex() {
+    return this.isCustomValue(this.comboBoxValue) || !this.comboBoxValue ? -1 : this.comboBoxValue.index;
+  }
+  get displayValue() {
+    return this.value;
+  }
+  open() {
+    this.opened = !0;
+  }
+  static get styles() {
+    return [
+      g`
+                ${v(I)}
+            `
+    ];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._popper && (this._popper.destroy(), this._popper = null);
+  }
+  render() {
+    return b`
+            ${super.render()}
+            <slot @slotchange=${this.onDefaultSlotChange} id="default-slot"></slot>
+        `;
+  }
+  attributeChangedCallback(t, e, i) {
+    if (super.attributeChangedCallback(t, e, i), e !== i)
+      switch (t) {
+        case "opened": {
+          this.handleOpenedStateChange();
+          break;
+        }
+        case "item-height": {
+          this._list && (this._list.itemHeight = this.itemHeight);
+          break;
+        }
+        case "id": {
+          this.updateListId();
+          break;
+        }
+      }
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.value && !this.comboBoxValue && this.updateComboBoxValueFromValue(), window.requestAnimationFrame(() => {
+      this.initClearButtton(), this.initToggleButtton(), this.addEventListener("click", () => {
+        this.disabled || (this.opened = !this.opened);
+      }), this.addEventListener("keydown", (e) => {
+        this.disabled || this.handleKeyDown(e);
+      });
+    }), this.inputElement.setAttribute("role", "combobox"), this.inputElement.setAttribute("aria-autocomplete", "list");
+  }
+  updateComboBoxValueFromValue() {
+    if (this.value) {
+      const t = this._itemCache.findIndex((e) => e[this.displayValuePath] === this.value);
+      t > -1 ? this._comboBoxValue = { index: t, item: this._itemCache[t] } : this.allowCustomValue ? this._comboBoxValue = this.value : this._comboBoxValue = null;
+    }
+  }
+  updated(t) {
+    super.updated(t), t.has("currentText") ? this.currentText ? (this.setAttribute("has-value", ""), this._clearButton && (this._clearButton.style.display = "")) : this.removeAttribute("has-value") : t.has("triggerOnly") && this._list && (this._list.selectionType = this.triggerOnly ? u.TriggerOnly : u.Single);
+  }
+  initClearButtton() {
+    const t = document.createElement("template");
+    t.innerHTML = V, this._clearButton = t.content.firstChild, this.appendChild(this._clearButton), this._clearButton.addEventListener("click", (e) => {
+      e.preventDefault(), e.stopPropagation(), this.opened = !1, this.clearValue();
+    });
+  }
+  initToggleButtton() {
+    const t = document.createElement("template");
+    t.innerHTML = C, this._toggleButton = t.content.firstChild, this.appendChild(this._toggleButton), this._toggleButton.addEventListener("click", (e) => {
+      e.preventDefault(), e.stopPropagation(), this.opened = !this.opened, this.select();
+    });
+  }
+  filterItemsInMemory() {
+    if (this.isLazyLoadConfigured)
+      return;
+    let t = !1;
+    this.filterText && (this.filterProperty ? (this._dataProvider.items = this._itemCache.filter((e) => e[this.filterProperty] && String(e[this.filterProperty]).indexOf(this.filterText) > -1), t = !0) : this.inMemoryFilter && (this._dataProvider.items = this._itemCache.filter((e) => this.inMemoryFilter(this.filterText, e)), t = !0)), t ? this._list.focusIndex = null : this._dataProvider.items = this._itemCache, this.opened && this._popper && this._popper.update();
+  }
+  ensureListAndPopperInitialized() {
+    if (this._list || (this._list = document.createElement(p.ID), this.updateListId(), this._list.classList.add("combo-box-dropdown"), this._list.itemHeight = this.itemHeight, this._list.itemGenerator = this.itemGenerator, this._list.selectionType = this.triggerOnly ? u.TriggerOnly : u.Single, this._list.setAttribute("focus-target", ""), Object.assign(this._list.style, {
+      zIndex: "21000",
+      boxShadow: `rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
+                            rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,
+                            rgba(0, 0, 0, 0.2) 0px 3px 1px -2px`,
+      background: "white",
+      overflowY: "auto"
+    }), this._list.addEventListener("selection", this.handleSelection), this._dataProvider.connectList(this._list)), !this._popper) {
+      const t = this;
+      this._popper = x(this, this._list, {
+        placement: "bottom-start",
+        modifiers: [
+          {
+            name: "computeStyles",
+            options: {
+              gpuAcceleration: !0
+            }
+          },
+          {
+            name: "hide",
+            enabled: !1
+          },
+          {
+            name: "closeIfReferenceHidden",
+            enabled: !0,
+            phase: "afterWrite",
+            fn({ state: e }) {
+              e.elements.reference.closeIfNotVisible();
+            }
+          },
+          {
+            name: "offset",
+            options: {
+              offset: ({ placement: e }) => e.indexOf("top") > -1 ? [0, -parseInt(getComputedStyle(t).paddingTop, 10)] : e.indexOf("bottom") > -1 ? [0, -parseInt(getComputedStyle(t).paddingBottom, 10)] : [0, 0]
+            }
+          },
+          {
+            name: "adjustWidthIfNeeded",
+            enabled: !0,
+            phase: "read",
+            fn({ state: e }) {
+              e.elements.popper.increaseWidthOnNextRenderIfNeeded();
+            }
+          }
+        ]
+      });
+    }
+  }
+  closeIfNotVisible() {
+    const t = this.elementFromMiddleOfComboBox();
+    !this.contains(t) && !this.shadowRoot.contains(t) && t !== this._list && (this.triggerOnly && (this.value = null), this.opened = !1);
+  }
+  elementFromMiddleOfComboBox() {
+    const t = this.getBoundingClientRect();
+    return document.elementFromPoint(t.left + t.width / 2, t.top + t.height / 2);
+  }
+  async handleOpenedStateChange() {
+    this.inputElement.setAttribute("aria-expanded", String(this.opened)), this.opened ? (this.disabled || (this.ensureListAndPopperInitialized(), this.isLazyLoadConfigured && (this.items.length == 0 || this._lastRequestedFilterText != this.filterText) && this.requestData(0, this._lastRequestedFilterText != this.filterText), this.updateDropdownSizes(), this.ownerDocument.body.appendChild(this._list), this.updateFocusAndSelectedIndexFromValue(), window.requestAnimationFrame(() => {
+      this._popper && this._popper.update();
+    }), window.addEventListener("pointerdown", this.handleWindowPointerDown), !this.allowCustomValue && !this._openedByFilterTextChange && this.select()), this._openedByFilterTextChange = !1) : (await this._list.updateComplete, this._popper && await this._popper.update, this.ownerDocument.body.removeChild(this._list), window.removeEventListener("pointerdown", this.handleWindowPointerDown), this.updateValueOnClose(), this.clearFilter(), this.setSelectionRange(0, 0), this.inputElement.removeAttribute("aria-activedescendant"), this._popper && (this._popper.destroy(), this._popper = null));
+  }
+  updateValueOnClose() {
+    const t = this.comboBoxValue || "";
+    if (this.nullSettingDisallowed && !this.value && this.comboBoxValue)
+      this.restorePreviousSelection();
+    else if (this.value !== this.convertToDisplayValue(null)) {
+      const e = this._dataProvider.items[this._list.focusIndex];
+      if (e && e[this.displayValuePath] === this.value) {
+        if (e.disabled)
+          return;
+        this.comboBoxValue = { index: this._itemCache.indexOf(e), item: e };
+      } else if (this.allowCustomValue || !this.value)
+        this.comboBoxValue = this.value;
+      else {
+        const i = this._itemCache.findIndex(
+          (s) => s[this.displayValuePath] === this.value && !s.disabled
+        );
+        i > -1 ? this.comboBoxValue = { index: i, item: this._itemCache[i] } : this.restorePreviousSelection();
+      }
+    }
+    t !== (this.comboBoxValue || "") && this.dispatchSelectionChangeEvent();
+  }
+  restorePreviousSelection() {
+    this.updateInputValue(null);
+  }
+  updateFocusAndSelectedIndexFromValue() {
+    if (this.comboBoxValue && !this.isCustomValue(this.comboBoxValue) && !this._openedByFilterTextChange) {
+      let t = this.comboBoxValue.index;
+      if ((t == -1 || this.isLazyLoadConfigured) && (t = this.items.indexOf(this.comboBoxValue.item), t == -1)) {
+        const e = this.comboBoxValue.item.id;
+        e != null && (t = this.items.findIndex((i) => i.id == e));
+      }
+      this._list.focusIndex = t, this._list.selectedIndices = t == -1 ? [] : [t];
+    } else
+      this._list.focusIndex = -1, this._list.selectedIndices = [];
+    this.updateActiveDescendant();
+  }
+  navigateInList(t) {
+    this.opened ? (this._list.focusIndex == null ? t > 0 ? this._list.focusIndex = 0 : this._list.focusIndex = Math.max(0, this._dataProvider.items.length - 1) : this._list.focusIndex = Math.max(
+      0,
+      Math.min(this._dataProvider.items.length - 1, this._list.focusIndex + t)
+    ), this.updateInputValue(this._dataProvider.items[this._list.focusIndex]), this.updateActiveDescendant(), this.allowCustomValue || this.select()) : this.opened = !0;
+  }
+  updateActiveDescendant() {
+    const t = this._list && this._list.getListItem(this._list.focusIndex);
+    t ? this.inputElement.setAttribute("aria-activedescendant", t.id) : this.inputElement.removeAttribute("aria-activedescendant");
+  }
+  updateInputValue(t) {
+    this.updateComplete.then(() => {
+      this.value = this.convertToDisplayValue(t);
+    });
+  }
+  convertToDisplayValue(t) {
+    return t ? t[this.displayValuePath] : this.comboBoxValue ? this.isCustomValue(this.comboBoxValue) ? this.comboBoxValue : this.comboBoxValue.item[this.displayValuePath] : null;
+  }
+  fireValueChange(t) {
+    t && this.filterText !== this.value && (this.filterText = this.value, this.opened || (this._openedByFilterTextChange = !0, this.opened = !0), this.dispatchFilterChangeEvent(), this.debouncedFilterItemsInMemory());
+  }
+  clearValue() {
+    this.nullSettingDisallowed || (this.value = null, this.inputElement.removeAttribute("aria-activedescendant"), this._list && (this._list.selectedIndices = []), this.clearFilter(), this.comboBoxValue && (this.comboBoxValue = null, this.dispatchSelectionChangeEvent()));
+  }
+  clearFilter() {
+    this.filterText != null && (this.filterText = void 0, this.filterItemsInMemory(), this.dispatchFilterChangeEvent());
+  }
+  updateDropdownSizes() {
+    const e = ((window.innerHeight || document.documentElement.clientHeight) - this.offsetHeight) * 0.5;
+    Object.assign(this._list.style, {
+      maxHeight: `${e}px`,
+      minWidth: `${Math.max(this.offsetWidth, this.minimumOverlayWidth)}px`,
+      maxWidth: `max(50vw, ${this.offsetWidth}px)`
+    });
+  }
+  updateListId() {
+    this.inputElement && this._list && (this._list.id = this.id + "_list", this.inputElement.setAttribute("aria-controls", this._list.id));
+  }
+  isCustomValue(t) {
+    return typeof t == "string";
+  }
+  dispatchSelectionChangeEvent() {
+    this.updateComplete.then(() => {
+      var t;
+      if (this.dispatchEvent(
+        new CustomEvent("selection-change", {
+          detail: {
+            selection: this.comboBoxValue,
+            isCustomValue: this.isCustomValue(this.comboBoxValue)
+          }
+        })
+      ), this.triggerOnly)
+        this.comboBoxValue = null;
+      else {
+        const e = this.comboBoxValue;
+        typeof e == "string" ? this.setFormValue(e) : this.setFormValue((t = e == null ? void 0 : e.item) == null ? void 0 : t.caption);
+      }
+    }).catch((t) => {
+      console.error("Could not dispatch selection change event due to:", t);
+    });
+  }
+  dispatchFilterChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("filter-change", {
+        detail: { value: this.filterText },
+        composed: !0
+      })
+    ), this.debouncedRequestData(0, !0);
+  }
+  get isLazyLoadConfigured() {
+    return !!this._onDataRequest;
+  }
+  requestData(t, e) {
+    if (this.isLazyLoadConfigured) {
+      if (!this.opened) {
+        e && (this._dataProvider.items = [], this._itemCache = []);
+        return;
+      }
+      if (this._lastRequestedPage == t && this._lastRequestedFilterText == this.filterText)
+        return;
+      this._pendingDataRequest && this._pendingDataRequest.cancel(o.DATA_REQUEST_CANCELLED);
+      const i = new Promise((s, n) => {
+        this._pendingDataRequest = { cancel: n };
+      });
+      this._lastRequestedPage = t, this._lastRequestedFilterText = this.filterText, this.setAttribute("loading", ""), Promise.race([i, this._onDataRequest(this._lastRequestedFilterText, t)]).then((s) => {
+        if (this.filterText == this._lastRequestedFilterText && this._lastRequestedPage == t && (this._dataProvider.finalSizeIsKnown = s.finalSizeIsKnown, e ? (this._dataProvider.items = s.items, this._itemCache = s.items) : (this._dataProvider.addItems(s.items), this._itemCache = this._dataProvider.items), this._list && (this._list.itemCount = this._dataProvider.items.length), this._popper && this.opened)) {
+          if (this.comboBoxValue && !this.isCustomValue(this.comboBoxValue)) {
+            const n = this.comboBoxValue.item;
+            if (this._list.selectedIndices.length == 0 || this.items[this._list.selectedIndices[0]] != n) {
+              let l = this.items.indexOf(n);
+              if (l == -1) {
+                const c = n.id;
+                c != null && (l = this.items.findIndex((m) => m.id == c));
+              }
+              this.comboBoxValue.index = l, this._list.selectedIndices = l == -1 ? [] : [l];
+            }
+          }
+          this.updateDropdownSizes(), this._popper.update();
+        }
+        this._pendingDataRequest = null, this.removeAttribute("loading");
+      }).catch((s) => {
+        s !== o.DATA_REQUEST_CANCELLED && (console.error(
+          `Data could not be loaded for filter "${this._lastRequestedFilterText}" and page number "${t}" due to the following error:
+${s}`
+        ), this._dataProvider.finalSizeIsKnown = !0, this.items.length == 0 ? this.opened = !1 : this._list && (this._list.itemCount = this.items.length), this.removeAttribute("loading")), this._pendingDataRequest = null;
+      });
+    }
+  }
+  get defaultSlot() {
+    return this.shadowRoot.querySelector("#default-slot");
+  }
+  onDefaultSlotChange() {
+    this._declarativeItems = this.defaultSlot.assignedElements(), this._declarativeItems.length > 0 && (this.finalSizeIsKnown = !0, this.itemGenerator = (t, e) => this._declarativeItems[e].cloneNode(!0), this.items = this._declarativeItems.map((t) => {
+      const e = {
+        caption: t.getAttribute("caption"),
+        description: t.getAttribute("description")
+      };
+      return this.displayValuePath != "caption" && this.displayValuePath != "description" && (e[this.displayValuePath] = t[this.displayValuePath] || t.getAttribute(this.displayValuePath)), e;
+    }));
+  }
+}, o.ID = D, o.ensureDefined = () => {
+  p.ensureDefined(), customElements.get(o.ID) || customElements.define(o.ID, o);
+}, o.formAssociated = !0, o.DATA_REQUEST_CANCELLED = "cancel_data_request", o);
+d([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "opened", 2);
+d([
+  r({ type: Number, attribute: "item-height" })
+], a.prototype, "itemHeight", 2);
+d([
+  r({ type: Boolean, attribute: "allow-custom-value", reflect: !0 })
+], a.prototype, "allowCustomValue", 2);
+d([
+  r({ type: Boolean, attribute: "trigger-only", reflect: !0 })
+], a.prototype, "triggerOnly", 2);
+d([
+  r({ type: Boolean, attribute: "null-setting-disallowed", reflect: !0 })
+], a.prototype, "nullSettingDisallowed", 2);
+d([
+  r({ type: String, attribute: "display-value-path", noAccessor: !0 })
+], a.prototype, "displayValuePath", 2);
+d([
+  r({ type: String, attribute: "filter-property", noAccessor: !0 })
+], a.prototype, "filterProperty", 2);
+d([
+  r({ type: String, attribute: !0, reflect: !0 })
+], a.prototype, "id", 2);
+let L = a;
+L.ensureDefined();
+export {
+  L as default
+};
+//# sourceMappingURL=combo-box.mjs.map