var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
import { u as uuidv4 } from "../chunks/chunk.dcf-utility.js?v=6.1.1";
class DCFSearchSelect {
  static {
    __name(this, "DCFSearchSelect");
  }
  uuid = uuidv4();
  multiple = !1;
  selectID = null;
  selectElement = null;
  parsedSelect = [];
  searchAndSelectID = null;
  searchAndSelectElement = null;
  inputID = null;
  inputElement = null;
  openButtonElement = null;
  searchAreaElement = null;
  availableItemsListID = null;
  availableItemsListElement = null;
  listOfAvailableItems = [];
  selectedItemsListID = null;
  selectedItemsListElement = null;
  selectedItemsHelpID = null;
  currentFocus = null;
  searchAndSelectClassList = [
    "dcf-relative"
  ];
  searchAreaClassList = [
    "dcf-relative",
    "dcf-d-grid",
    "dcf-overflow-x-hidden",
    "dcf-overflow-y-auto"
  ];
  selectedItemsListClassList = [
    "dcf-d-flex",
    "dcf-flex-wrap",
    "dcf-m-0"
  ];
  selectedItemClassList = [
    "dcf-d-flex",
    "dcf-flex-nowrap",
    "dcf-ai-center",
    "dcf-jc-center",
    "dcf-mb-0",
    "dcf-relative"
  ];
  selectedItemButtonClassList = [
    "dcf-btn",
    "dcf-btn-secondary",
    "dcf-h-100%",
    "dcf-z-1"
  ];
  selectedItemButtonSVG = `<svg
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" class="dcf-fill-current dcf-w-4 dcf-h-4">
    <path d="M25.4,22.6L15.8,13l9.6-9.6C25.8,3,26,2.5,26,2s-0.2-1-0.6-1.4c-0.8-0.8-2.1-0.8-2.8,0L13,10.2L3.4,0.6
        c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8l9.6,9.6l-9.6,9.6C0.2,23,0,23.5,0,24c0,0.5,0.2,1,0.6,1.4C1,25.8,1.5,26,2,26
        c0.5,0,1-0.2,1.4-0.6l9.6-9.6l9.6,9.6C23,25.8,23.5,26,24,26c0,0,0,0,0,0c0.5,0,1-0.2,1.4-0.6C25.8,25,26,24.5,26,24
        C26,23.5,25.8,23,25.4,22.6z"/>
</svg>`;
  selectedItemLabelClassList = [
    "dcf-h-100%"
  ];
  toggleButtonContainerClassList = [
    "dcf-sticky",
    "dcf-top-50%",
    "dcf-h-0",
    "dcf-pl-1",
    "dcf-pr-1"
  ];
  toggleButtonClassList = [
    "dcf-btn",
    "dcf-btn-tertiary",
    "dcf-p-3"
  ];
  toggleButtonSVG = `<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="dcf-fill-current dcf-w-3 dcf-h-3"
aria-hidden="true"
>
<path d="M23.936,2.255C23.848,2.098,23.681,2,23.5,2h-23
    C0.32,2,0.153,2.098,0.065,2.255c-0.089,0.157-0.085,0.35,0.008,0.504
    l11.5,19C11.663,21.908,11.826,22,12,22s0.337-0.092,0.428-0.241
    l11.5-19C24.021,2.605,24.025,2.412,23.936,2.255z"></path>
</svg>`;
  inputSingleClassList = [
    "dcf-b-0"
  ];
  inputGroupMultiple = [
    "dcf-d-flex",
    "dcf-flex-wrap"
  ];
  inputMultipleClassList = [
    "dcf-b-0",
    "dcf-flex-grow-1",
    "dcf-flex-shrink-0"
  ];
  availableItemsListClassList = [
    "dcf-absolute",
    "dcf-d-none",
    "dcf-mb-0",
    "dcf-pl-0",
    "dcf-w-100%",
    "dcf-z-2"
  ];
  availableItemsGroupClassList = [
    "dcf-m-0",
    "dcf-pl-0"
  ];
  availableItemsGroupLabelClassList = [
    "dcf-mb-0",
    "dcf-bold"
  ];
  availableItemClassList = [
    "dcf-relative",
    "dcf-d-flex",
    "dcf-flex-row",
    "dcf-flex-nowrap",
    "dcf-jc-between",
    "dcf-ai-center",
    "dcf-mb-0"
  ];
  availableItemIndicatorSVG = `<svg
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="dcf-fill-current dcf-h-4 dcf-w-4">
    <path d="M31,0.4C30.6,0.1,30-0.1,29.4,0c-0.6,0.1-1.1,0.4-1.5,0.9
    L10.1,26.3L3.8,20c-0.4-0.4-1-0.6-1.6-0.6c0,0,0,0,0,0
    c-0.6,0-1.2,0.2-1.6,0.6C0.2,20.5,0,21,0,21.6
    c0,0.6,0.2,1.2,0.7,1.6l8.1,8.1c0.4,0.4,1,0.7,1.6,0.7
    c0.7,0,1.4-0.4,1.8-1L31.6,3.5
    C32.3,2.5,32.1,1.1,31,0.4z"/>
</svg>`;
  availableItemsNoResultsClassList = [
    "dcf-mb-0",
    "dcf-bold"
  ];
  /**
   * Constructor for the multi-select combobox
   * @param { HTMLSelectElement } selectElement The select that will be used to build the component
   */
  constructor(selectElement, options = {}) {
    "searchAndSelectClassList" in options && Array.isArray(options.searchAndSelectClassList) && (this.searchAndSelectClassList = options.searchAndSelectClassList), "searchAreaClassList" in options && Array.isArray(options.searchAreaClassList) && (this.searchAreaClassList = options.searchAreaClassList), "selectedItemsListClassList" in options && Array.isArray(options.selectedItemsListClassList) && (this.selectedItemsListClassList = options.selectedItemsListClassList), "selectedItemClassList" in options && Array.isArray(options.selectedItemClassList) && (this.selectedItemClassList = options.selectedItemClassList), "selectedItemButtonClassList" in options && Array.isArray(options.selectedItemButtonClassList) && (this.selectedItemButtonClassList = options.selectedItemButtonClassList), "selectedItemButtonSVG" in options && typeof options.selectedItemButtonSVG == "string" && (this.selectedItemButtonSVG = options.selectedItemButtonSVG), "selectedItemLabelClassList" in options && Array.isArray(options.selectedItemLabelClassList) && (this.selectedItemLabelClassList = options.selectedItemLabelClassList), "toggleButtonContainerClassList" in options && Array.isArray(options.toggleButtonContainerClassList) && (this.toggleButtonContainerClassList = options.toggleButtonContainerClassList), "toggleButtonClassList" in options && Array.isArray(options.toggleButtonClassList) && (this.toggleButtonClassList = options.toggleButtonClassList), "toggleButtonSVG" in options && typeof options.toggleButtonSVG == "string" && (this.toggleButtonSVG = options.toggleButtonSVG), "inputSingleClassList" in options && Array.isArray(options.inputSingleClassList) && (this.inputSingleClassList = options.inputSingleClassList), "inputGroupMultiple" in options && Array.isArray(options.inputGroupMultiple) && (this.inputGroupMultiple = options.inputGroupMultiple), "inputMultipleClassList" in options && Array.isArray(options.inputMultipleClassList) && (this.inputMultipleClassList = options.inputMultipleClassList), "availableItemsListClassList" in options && Array.isArray(options.availableItemsListClassList) && (this.availableItemsListClassList = options.availableItemsListClassList), "availableItemsGroupClassList" in options && Array.isArray(options.availableItemsGroupClassList) && (this.availableItemsListClassList = options.availableItemsGroupClassList), "availableItemsGroupLabelClassList" in options && Array.isArray(options.availableItemsGroupLabelClassList) && (this.availableItemsGroupLabelClassList = options.availableItemsGroupLabelClassList), "availableItemClassList" in options && Array.isArray(options.availableItemClassList) && (this.availableItemClassList = options.availableItemClassList), "availableItemIndicatorSVG" in options && typeof options.availableItemIndicatorSVG == "string" && (this.availableItemIndicatorSVG = options.availableItemIndicatorSVG), "availableItemsNoResultsClassList" in options && Array.isArray(options.availableItemsNoResultsClassList) && (this.availableItemsNoResultsClassList = options.availableItemsNoResultsClassList), this.selectElement = selectElement, (this.selectElement.getAttribute("id") === "" || this.selectElement.getAttribute("id") === null) && this.selectElement.setAttribute("id", this.uuid.concat("-search-and-select-select")), this.selectElement.getAttribute("multiple") !== null && (this.multiple = !0), this.selectID = this.selectElement.getAttribute("id"), this.searchAndSelectID = this.uuid.concat("-search-and-select"), this.inputID = this.uuid.concat("-search-and-select-input"), this.availableItemsListID = this.uuid.concat("-search-and-select-available-items-list"), this.searchAndSelectElement = document.createElement("div"), this.searchAndSelectElement.innerHTML = `<div
class="dcf-search-and-select-search-area-single ${this.searchAreaClassList.join(" ")}" >
    <input
    class="${this.inputSingleClassList.join(" ")}"
    type="text"
    role="combobox"
    id=${this.inputID}
    aria-haspopup="listbox"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-controls="${this.availableItemsListID}"
    >
    <div class="dcf-search-and-select-open-btn ${this.toggleButtonContainerClassList.join(" ")}">
    <button
        class="${this.toggleButtonClassList.join(" ")}"
        type="button"
        tabindex="-1"
        aria-label="Toggle Selectable List"
        aria-expanded="false"
        aria-controls="${this.availableItemsListID}"
    >
        ${this.toggleButtonSVG}
    </button>
    </div>
</div>`, this.searchAndSelectElement.classList.add("dcf-search-and-select", ...this.searchAndSelectClassList), this.searchAndSelectElement.setAttribute("id", this.searchAndSelectID), this.searchAndSelectElement.setAttribute("hidden", "hidden"), this.searchAndSelectElement.dataset.for = this.selectID, this.inputElement = this.searchAndSelectElement.querySelector("input"), this.openButtonElement = this.searchAndSelectElement.querySelector(".dcf-search-and-select-open-btn button"), this.searchAreaElement = this.searchAndSelectElement.querySelector(".dcf-search-and-select-search-area-single"), this.multiple && (this.selectedItemsListID = this.uuid.concat("-search-and-select-selected-items-list"), this.selectedItemsHelpID = this.uuid.concat("-search-and-select-selected-items-list-help"), this.searchAndSelectElement.innerHTML = `<div
class="dcf-search-and-select-search-area-multiple ${this.searchAreaClassList.join(" ")}" >
    <div class="dcf-search-and-select-multiple-input-group ${this.inputGroupMultiple.join(" ")}">
    <span id="${this.selectedItemsHelpID}" class="dcf-sr-only">Press Delete or Backspace to Remove.</span>
    <ul
        class="dcf-search-and-select-selected-items ${this.selectedItemsListClassList.join(" ")}"
        role="list"
        aria-describedby="${this.selectedItemsHelpID}"
        id=${this.selectedItemsListID}
        aria-label="Selected Items"
    ></ul>
    <input
        class="${this.inputMultipleClassList.join(" ")}"
        type="text"
        role="combobox"
        id=${this.inputID}
        aria-haspopup="listbox"
        aria-autocomplete="list"
        aria-expanded="false"
        aria-controls="${this.availableItemsListID}"
    >
    </div>
    <div class="dcf-search-and-select-open-btn ${this.toggleButtonContainerClassList.join(" ")}">
    <button
        class="${this.toggleButtonClassList.join(" ")}"
        type="button"
        tabindex="-1"
        aria-label="Toggle Selectable List"
        aria-expanded="false"
        aria-controls="${this.availableItemsListID}"
    >
        ${this.toggleButtonSVG}
    </button>
    </div>
</div>`, this.inputElement = this.searchAndSelectElement.querySelector("input"), this.openButtonElement = this.searchAndSelectElement.querySelector(".dcf-search-and-select-open-btn button"), this.selectedItemsListElement = this.searchAndSelectElement.querySelector(".dcf-search-and-select-selected-items"), this.searchAreaElement = this.searchAndSelectElement.querySelector(".dcf-search-and-select-search-area-multiple")), this.parsedSelect = this.#parseSelect(), this.selectElement.after(this.searchAndSelectElement), this.availableItemsListElement = this.#buildAvailableItems(), this.availableItemsListElement.setAttribute("id", this.availableItemsListID), this.availableItemsListElement.classList.add(
      "dcf-search-and-select-available-items",
      ...this.availableItemsListClassList
    ), this.searchAndSelectElement.append(this.availableItemsListElement), this.#fixSelectReferences(), this.#transferSelectAttributes(), this.#setDisabled(this.selectElement.getAttribute("disabled") !== null), this.#setReadOnly(this.selectElement.getAttribute("readonly") !== null), this.#addEventListeners(), this.searchAndSelectElement.removeAttribute("hidden"), this.multiple && this.availableItemsListElement.setAttribute("aria-multiselectable", !0), this.selectElement.classList.add("dcf-search-select-initialized"), this.selectElement.dispatchEvent(new CustomEvent(DCFSearchSelect.events("searchSelectReady"), {
      detail: {
        classInstance: this
      }
    }));
  }
  /**
   * Validates and returns standardized name of events for tabs
   * @static
   * @param { string } name - Name of the event to be returned
   * @returns { string } Standard name of the event
   */
  static events(name) {
    const events = {
      searchSelectReady: "searchSelectReady"
    };
    return Object.freeze(events), name in events ? events[name] : void 0;
  }
  /**
   * Fix any references to the hidden select
   */
  #fixSelectReferences() {
    [
      "for",
      "aria-controls",
      "aria-describedby"
    ].forEach((singleAttr) => {
      document.querySelectorAll(`[${singleAttr}="${this.selectID}"]`).forEach((elementToFix) => {
        elementToFix.setAttribute(singleAttr, this.inputID);
      });
    });
  }
  /**
   * If the select element has attributes set it will transfer them to the input
   */
  #transferSelectAttributes() {
    [
      "aria-describedby",
      "aria-label",
      "aria-labelledby",
      "aria-owns"
    ].forEach((singleAttr) => {
      this.selectElement.getAttribute(singleAttr) !== null && this.inputElement.setAttribute(singleAttr, this.selectElement.getAttribute(singleAttr));
    });
  }
  /**
   * Recursively parses the select/optgroups
   * @returns { Array<ParsedOptgroup> }
   */
  #parseSelect() {
    const returnedData = this.#parseSelectInner(this.selectElement), optgroups = returnedData.optgroups;
    return returnedData.options.length > 0 && optgroups.push({
      tag: "optgroup",
      label: "Other",
      element: this.selectElement,
      items: returnedData.options
    }), optgroups;
  }
  /**
   * Recursively parses the select/optgroups
   * @param { HTMLSelectElement|HTMLOptGroupElement } selectOrOptgroup The select or optgroup to parse
   * @returns { parseSelectInner }
   */
  #parseSelectInner(selectOrOptgroup) {
    const optgroups = [], options = [];
    for (const optgroupOrOption of selectOrOptgroup.children)
      if (optgroupOrOption.tagName === "OPTGROUP") {
        const returnedData = this.#parseSelectInner(optgroupOrOption), returnedOptgroups = returnedData.optgroups;
        optgroups.push(...returnedOptgroups), optgroups.push({
          tag: "optgroup",
          label: optgroupOrOption.getAttribute("label"),
          element: optgroupOrOption,
          items: returnedData.options
        });
      } else optgroupOrOption.tagName === "OPTION" && options.push({
        tag: "option",
        label: optgroupOrOption.innerHTML,
        value: optgroupOrOption.getAttribute("value"),
        selected: optgroupOrOption.getAttribute("selected") !== null,
        disabled: optgroupOrOption.getAttribute("disabled") !== null,
        elemId: uuidv4().concat("-search-and-select-option"),
        element: optgroupOrOption
      });
    return { optgroups, options };
  }
  /**
   * Builds the available items UL from output of parse select
   * @returns { HTMLUListElement }
   */
  #buildAvailableItems() {
    return this.multiple ? this.#buildAvailableItemsMultiple() : this.#buildAvailableItemsSingle();
  }
  /**
   * Builds the available items UL from output of parse select
   * SINGLE
   * @returns { HTMLUListElement }
   */
  #buildAvailableItemsSingle() {
    const availableItems = document.createElement("ul");
    availableItems.setAttribute("role", "listbox");
    let lastSelectedOption = null;
    return this.parsedSelect.forEach((singleOptgroup) => {
      const groupedItems = document.createElement("ul");
      groupedItems.setAttribute("role", "group"), groupedItems.classList.add("dcf-search-and-select-available-items-group", ...this.availableItemsGroupClassList), this.parsedSelect.length !== 1 && (groupedItems.innerHTML = `${groupedItems.innerHTML}
<li
class="${this.availableItemsGroupLabelClassList.join(" ")}"
role="presentation"
>
${singleOptgroup.label}
</li>`), singleOptgroup.items.forEach((singleItem) => {
        const newItem = document.createElement("li");
        newItem.classList.add(
          "dcf-search-and-select-available-item",
          "dcf-search-and-select-clickable",
          ...this.availableItemClassList
        ), newItem.setAttribute("role", "option"), newItem.setAttribute("aria-selected", "false"), newItem.setAttribute("aria-disabled", singleItem.disabled), newItem.setAttribute("id", `${singleItem.elemId}-available`), newItem.dataset.value = singleItem.value, newItem.dataset.label = singleItem.label, newItem.dataset.elemId = singleItem.elemId, newItem.innerHTML = `<span
    class="dcf-search-and-select-available-item-label">
    ${singleItem.label}
</span>
<span class="dcf-search-and-select-available-item-indicator" aria-hidden="true">
    ${this.availableItemIndicatorSVG}
</span>`, groupedItems.append(newItem), singleItem.disabled === !1 && singleItem.selected === !0 && (lastSelectedOption = newItem);
      }), availableItems.append(groupedItems);
    }), lastSelectedOption !== null && (lastSelectedOption.setAttribute("aria-selected", "true"), this.inputElement.value = lastSelectedOption.dataset.label), availableItems;
  }
  /**
   * Builds the available items UL from output of parse select
   * MULTIPLE
   * @returns { HTMLUListElement }
   */
  #buildAvailableItemsMultiple() {
    const availableItems = document.createElement("ul");
    return availableItems.setAttribute("role", "listbox"), this.parsedSelect.forEach((singleOptgroup) => {
      const groupedItems = document.createElement("ul");
      groupedItems.setAttribute("role", "group"), groupedItems.classList.add("dcf-search-and-select-available-items-group", ...this.availableItemsGroupClassList), this.parsedSelect.length !== 1 && (groupedItems.innerHTML = `${groupedItems.innerHTML}
<li
class="${this.availableItemsGroupLabelClassList.join(" ")}"
role="presentation"
>
${singleOptgroup.label}
</li>
            `), singleOptgroup.items.forEach((singleItem) => {
        const newItem = document.createElement("li");
        newItem.classList.add(
          "dcf-search-and-select-available-item",
          "dcf-search-and-select-clickable",
          ...this.availableItemClassList
        ), newItem.setAttribute("role", "option"), newItem.setAttribute("aria-selected", singleItem.disabled ? "false" : singleItem.selected), newItem.setAttribute("aria-disabled", singleItem.disabled), newItem.setAttribute("id", `${singleItem.elemId}-available`), newItem.dataset.value = singleItem.value, newItem.dataset.elemId = singleItem.elemId, newItem.innerHTML = `<span
    class="dcf-search-and-select-available-item-label">
    ${singleItem.label}
</span>
<span class="dcf-search-and-select-available-item-indicator" aria-hidden="true">
    ${this.availableItemIndicatorSVG}
</span>`, groupedItems.append(newItem), singleItem.disabled === !1 && singleItem.selected === !0 && this.#appendNewSelectedItem(newItem);
      }), availableItems.append(groupedItems);
    }), availableItems;
  }
  /**
   * We will build a new selected item element and append it to the list of selected items
   * @param { HTMLLIElement } singleAvailableItem The li from the available items list
   */
  #appendNewSelectedItem(singleAvailableItem) {
    if (!this.#isElementAnAvailableItem(singleAvailableItem))
      throw new Error("Element is not an available item");
    const selectedItemLabel = singleAvailableItem.querySelector(".dcf-search-and-select-available-item-label").innerText, newSelectedItem = document.createElement("li");
    newSelectedItem.dataset.elemId = singleAvailableItem.dataset.elemId, newSelectedItem.setAttribute("id", `${singleAvailableItem.dataset.elemId}-selected`), newSelectedItem.classList.add(
      "dcf-search-and-select-selected-item",
      "dcf-search-and-select-clickable",
      ...this.selectedItemClassList
    ), newSelectedItem.innerHTML = `<button
    class="
        dcf-search-and-select-selected-item-remove-btn
        ${this.selectedItemButtonClassList.join(" ")}
    "
    aria-label="Remove ${selectedItemLabel}"
    type="button"
>
    ${this.selectedItemButtonSVG}
</button>
<span class="
    dcf-search-and-select-selected-item-label
    ${this.selectedItemLabelClassList.join(" ")}">
    ${selectedItemLabel}
</span>`, this.selectedItemsListElement.append(newSelectedItem), this.#isSelectedItemInView(newSelectedItem) || newSelectedItem.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }
  /**
   * Add event listeners for the different parts of the search and select element
   */
  #addEventListeners() {
    return this.multiple ? this.#addEventListenersMultiple() : this.#addEventListenersSingle();
  }
  #addEventListenersSingle() {
    document.body.addEventListener("pointerup", (event) => {
      this.searchAndSelectElement.contains(event.target) || (this.closeAvailableItems(), this.#setVisualFocusOn(!1));
    }, !0), this.searchAreaElement.addEventListener("click", () => {
      this.isComponentDisabled() || (this.#setVisualFocusOn(this.searchAreaElement), this.inputElement.focus(), this.isComponentReadOnly() || this.isAvailableItemsOpen() ? this.closeAvailableItems() : (this.#filterAvailableItems(), this.openAvailableItems()));
    }), this.inputElement.addEventListener("focus", () => {
      this.#setVisualFocusOn(this.searchAreaElement);
    }), this.inputElement.addEventListener("keydown", (event) => {
      if (this.isComponentReadOnly())
        return;
      const altKey = event.altKey;
      let preventDefault = !1;
      const length = this.inputElement.value.length;
      switch (event.code) {
        case "Enter":
          if (this.#visualFocusOnAvailableItems()) {
            const currentItemElement = this.getAvailableItemActiveDescendant();
            currentItemElement !== !1 && (this.#isAvailableItemDisabled(currentItemElement) || (this.#isAvailableItemSelected(currentItemElement) ? this.#removeAvailableItem(currentItemElement) : this.#selectAvailableItem(currentItemElement)));
          } else
            this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()), this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getFirstAvailableItem()), this.#scrollActiveAvailableItemInView();
          preventDefault = !0;
          break;
        case "Down":
        case "ArrowDown":
          altKey ? this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()) : (this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()), this.#visualFocusOnAvailableItems() ? (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getNextAvailableItem()), this.#scrollActiveAvailableItemInView()) : (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getFirstAvailableItem()), this.#scrollActiveAvailableItemInView())), preventDefault = !0;
          break;
        case "Esc":
        case "Escape":
          this.isAvailableItemsOpen() && (this.closeAvailableItems(!0), this.#setVisualFocusOn(this.searchAreaElement)), preventDefault = !0;
          break;
        case "Up":
        case "ArrowUp":
          altKey ? this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()) : (this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()), this.#visualFocusOnAvailableItems() ? (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getPreviousAvailableItem()), this.#scrollActiveAvailableItemInView()) : (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getLastAvailableItem()), this.#scrollActiveAvailableItemInView())), preventDefault = !0;
          break;
        case "Tab":
          this.closeAvailableItems(!0), this.#setVisualFocusOn(!1);
          break;
        case "Home":
          this.inputElement.setSelectionRange(0, 0), preventDefault = !0;
          break;
        case "End":
          this.inputElement.setSelectionRange(length, length), preventDefault = !0;
          break;
      }
      preventDefault && (event.stopPropagation(), event.preventDefault());
    }), this.inputElement.addEventListener("keyup", (event) => {
      if (this.isComponentReadOnly())
        return;
      const char = event.key;
      let preventDefault = !1;
      if (!(event.key === "Escape" || event.key === "Esc")) {
        switch (event.code) {
          case "Backspace":
            this.#setVisualFocusOn(this.searchAreaElement), this.#filterAvailableItems(), this.#setAvailableItemActiveDescendant(!1), preventDefault = !0;
            break;
          case "Left":
          case "ArrowLeft":
          case "Right":
          case "ArrowRight":
          case "Home":
          case "End":
            this.#setVisualFocusOn(this.searchAreaElement), preventDefault = !0;
            break;
          default:
            this.#isPrintableCharacter(char) && (this.#setVisualFocusOn(this.searchAreaElement), this.#filterAvailableItems(), this.openAvailableItems(), this.#setAvailableItemActiveDescendant(!1));
            break;
        }
        preventDefault && (event.stopPropagation(), event.preventDefault());
      }
    }), this.availableItemsListElement.addEventListener("click", (event) => {
      const closestItem = event.target.closest(".dcf-search-and-select-available-item");
      closestItem !== null && (this.#isAvailableItemDisabled(closestItem) || (this.#isAvailableItemSelected(closestItem) ? this.#removeAvailableItem(closestItem) : this.#selectAvailableItem(closestItem)), this.inputElement.focus(), this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(closestItem));
    }), this.availableItemsListElement.addEventListener("pointermove", (event) => {
      const currentItem = this.getAvailableItemActiveDescendant(), closestItem = event.target.closest(".dcf-search-and-select-available-item");
      closestItem !== null && (currentItem === !1 || !closestItem.isSameNode(currentItem)) && this.#setAvailableItemActiveDescendant(closestItem);
    }), this.availableItemsListElement.addEventListener("pointerout", (event) => {
      this.availableItemsListElement.isSameNode(event.target) && this.#setAvailableItemActiveDescendant(!1);
    });
  }
  #addEventListenersMultiple() {
    document.body.addEventListener("pointerup", (event) => {
      this.searchAndSelectElement.contains(event.target) || (this.closeAvailableItems(), this.#setVisualFocusOn(!1));
    }, !0), this.searchAreaElement.addEventListener("click", () => {
      this.isComponentDisabled() || (this.#setVisualFocusOn(this.searchAreaElement), this.inputElement.focus(), this.isAvailableItemsOpen() || this.isComponentReadOnly() ? this.closeAvailableItems() : (this.#filterAvailableItems(), this.openAvailableItems()));
    }), this.inputElement.addEventListener("focus", () => {
      this.#setVisualFocusOn(this.searchAreaElement);
    }), this.inputElement.addEventListener("keydown", (event) => {
      if (this.isComponentReadOnly())
        return;
      const altKey = event.altKey, shiftKey = event.shiftKey;
      let preventDefault = !1;
      const length = this.inputElement.value.length;
      switch (event.code) {
        case "Enter":
          if (this.#visualFocusOnAvailableItems()) {
            const currentItemElement = this.getAvailableItemActiveDescendant();
            currentItemElement !== !1 && (this.#isAvailableItemDisabled(currentItemElement) || (this.#isAvailableItemSelected(currentItemElement) ? this.#removeAvailableItem(currentItemElement) : this.#selectAvailableItem(currentItemElement)));
          } else
            this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()), this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getFirstAvailableItem()), this.#scrollActiveAvailableItemInView();
          preventDefault = !0;
          break;
        case "Down":
        case "ArrowDown":
          altKey ? this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()) : (this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()), this.#visualFocusOnAvailableItems() ? (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getNextAvailableItem()), this.#scrollActiveAvailableItemInView()) : (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getFirstAvailableItem()), this.#scrollActiveAvailableItemInView())), preventDefault = !0;
          break;
        case "Esc":
        case "Escape":
          this.isAvailableItemsOpen() && (this.closeAvailableItems(!0), this.#setVisualFocusOn(this.searchAreaElement)), preventDefault = !0;
          break;
        case "Up":
        case "ArrowUp":
          altKey ? this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()) : (this.isAvailableItemsOpen() || (this.#filterAvailableItems(), this.openAvailableItems()), this.#visualFocusOnAvailableItems() ? (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getPreviousAvailableItem()), this.#scrollActiveAvailableItemInView()) : (this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(this.getLastAvailableItem()), this.#scrollActiveAvailableItemInView())), preventDefault = !0;
          break;
        case "Tab":
          this.closeAvailableItems(!0), shiftKey || this.#setVisualFocusOn(!1);
          break;
        case "Home":
          this.inputElement.setSelectionRange(0, 0), preventDefault = !0;
          break;
        case "End":
          this.inputElement.setSelectionRange(length, length), preventDefault = !0;
          break;
      }
      preventDefault && (event.stopPropagation(), event.preventDefault());
    }), this.inputElement.addEventListener("keyup", (event) => {
      if (this.isComponentReadOnly())
        return;
      const char = event.key;
      let preventDefault = !1;
      if (!(event.key === "Escape" || event.key === "Esc")) {
        switch (event.code) {
          case "Backspace":
            this.#setVisualFocusOn(this.searchAreaElement), this.#filterAvailableItems(), this.#setAvailableItemActiveDescendant(!1), preventDefault = !0;
            break;
          case "Left":
          case "ArrowLeft":
          case "Right":
          case "ArrowRight":
          case "Home":
          case "End":
            this.#setVisualFocusOn(this.searchAreaElement), preventDefault = !0;
            break;
          default:
            this.#isPrintableCharacter(char) && (this.#setVisualFocusOn(this.searchAreaElement), this.#filterAvailableItems(), this.openAvailableItems(), this.#setAvailableItemActiveDescendant(!1));
            break;
        }
        preventDefault && (event.stopPropagation(), event.preventDefault());
      }
    }), this.availableItemsListElement.addEventListener("click", (event) => {
      const closestItem = event.target.closest(".dcf-search-and-select-available-item");
      closestItem !== null && (this.#isAvailableItemDisabled(closestItem) || (this.#isAvailableItemSelected(closestItem) ? this.#removeAvailableItem(closestItem) : this.#selectAvailableItem(closestItem)), this.inputElement.focus(), this.#setVisualFocusOn(this.availableItemsListElement), this.#setAvailableItemActiveDescendant(closestItem));
    }), this.availableItemsListElement.addEventListener("pointermove", (event) => {
      const currentItem = this.getAvailableItemActiveDescendant(), closestItem = event.target.closest(".dcf-search-and-select-available-item");
      closestItem !== null && (currentItem === !1 || !closestItem.isSameNode(currentItem)) && this.#setAvailableItemActiveDescendant(closestItem);
    }), this.availableItemsListElement.addEventListener("pointerout", (event) => {
      this.availableItemsListElement.isSameNode(event.target) && this.#setAvailableItemActiveDescendant(!1);
    }), this.selectedItemsListElement.addEventListener("focus", () => {
      this.#setVisualFocusOn(!1);
    }, !0), this.selectedItemsListElement.addEventListener("click", (event) => {
      if (this.isComponentDisabled())
        return;
      const closestSelectedItem = event.target.closest(".dcf-search-and-select-selected-item");
      if (closestSelectedItem === null)
        return;
      if (event.target.closest(".dcf-search-and-select-selected-item-remove-btn") !== null && !this.isComponentReadOnly()) {
        this.selectedItemsListElement.focus(), this.#removeSelectedItem(closestSelectedItem), this.#setAvailableItemActiveDescendant(!1), event.stopPropagation();
        return;
      }
      event.stopPropagation();
    });
  }
  /**
   * Will turn the component's disabled mode on or off
   * @param { bool } boolDisabled the new disabled state
   */
  #setDisabled(boolDisabled) {
    return this.multiple ? this.#setDisabledMultiple(boolDisabled) : this.#setDisabledSingle(boolDisabled);
  }
  #setDisabledSingle(boolDisabled) {
    let formattedBoolDisabled = boolDisabled;
    typeof formattedBoolDisabled != "boolean" && (formattedBoolDisabled = !1), formattedBoolDisabled ? (this.inputElement.setAttribute("disabled", "disabled"), this.openButtonElement.setAttribute("disabled", "disabled"), this.searchAndSelectElement.classList.add("dcf-search-and-select-disabled"), this.#setVisualFocusOn(!1), this.closeAvailableItems()) : (this.inputElement.removeAttribute("disabled"), this.openButtonElement.removeAttribute("disabled"), this.searchAndSelectElement.classList.remove("dcf-search-and-select-disabled"));
  }
  #setDisabledMultiple(boolDisabled) {
    let formattedBoolDisabled = boolDisabled;
    typeof formattedBoolDisabled != "boolean" && (formattedBoolDisabled = !1), formattedBoolDisabled ? (this.inputElement.setAttribute("disabled", "disabled"), this.openButtonElement.setAttribute("disabled", "disabled"), this.searchAndSelectElement.classList.add("dcf-search-and-select-disabled"), this.selectedItemsListElement.setAttribute("aria-disabled", "true"), this.selectedItemsListElement.querySelectorAll("button").forEach((selectedItemButton) => {
      selectedItemButton.setAttribute("disabled", "disabled");
    }), this.#setVisualFocusOn(!1), this.closeAvailableItems()) : (this.inputElement.removeAttribute("disabled"), this.openButtonElement.removeAttribute("disabled"), this.searchAndSelectElement.classList.remove("dcf-search-and-select-disabled"), this.selectedItemsListElement.removeAttribute("aria-disabled"), this.selectedItemsListElement.querySelectorAll("button").forEach((selectedItemButton) => {
      selectedItemButton.removeAttribute("disabled");
    }));
  }
  /**
   * Determines if the component is in disabled mode
   * @returns { bool } true if the component is disabled
   */
  isComponentDisabled() {
    return this.inputElement.getAttribute("disabled") !== null;
  }
  /**
   * Will turn the component's readonly mode on or off
   * @param { bool } boolReadOnly the new readonly state
   */
  #setReadOnly(boolReadOnly) {
    return this.multiple ? this.#setReadOnlyMultiple(boolReadOnly) : this.#setReadOnlySingle(boolReadOnly);
  }
  #setReadOnlySingle(boolReadOnly) {
    let formattedBoolReadOnly = boolReadOnly;
    typeof formattedBoolReadOnly != "boolean" && (formattedBoolReadOnly = !1), formattedBoolReadOnly ? (this.inputElement.setAttribute("readonly", "readonly"), this.openButtonElement.setAttribute("readonly", "readonly"), this.closeAvailableItems()) : (this.inputElement.removeAttribute("readonly"), this.openButtonElement.removeAttribute("readonly"));
  }
  #setReadOnlyMultiple(boolReadOnly) {
    let formattedBoolReadOnly = boolReadOnly;
    typeof formattedBoolReadOnly != "boolean" && (formattedBoolReadOnly = !1), formattedBoolReadOnly ? (this.inputElement.setAttribute("readonly", "readonly"), this.openButtonElement.setAttribute("readonly", "readonly"), this.selectedItemsListElement.setAttribute("aria-readonly", "true"), this.selectedItemsListElement.querySelectorAll("button").forEach((selectedItemButton) => {
      selectedItemButton.setAttribute("readonly", "readonly");
    }), this.closeAvailableItems()) : (this.inputElement.removeAttribute("readonly"), this.openButtonElement.removeAttribute("readonly"), this.selectedItemsListElement.removeAttribute("aria-readonly"), this.selectedItemsListElement.querySelectorAll("button").forEach((selectedItemButton) => {
      selectedItemButton.removeAttribute("readonly");
    }));
  }
  /**
   * Determines if the component is in readonly mode
   * @returns { bool } true if the component is readonly
   */
  isComponentReadOnly() {
    return this.inputElement.getAttribute("readonly") !== null;
  }
  /**
   * Determines if the keyboard input was a printable character or not
   * @param { string } str string to test
   * @returns { bool } true if the string was a printable character
   */
  #isPrintableCharacter(str) {
    return str.length === 1 && str.match(/\S| /);
  }
  /**
   * Determines if the available items list is expanded or not
   * @returns { bool } true if the available items list is expanded
   */
  isAvailableItemsOpen() {
    return !this.availableItemsListElement.classList.contains("dcf-d-none");
  }
  /**
   * Handles functionality of opening/expanding the available items list
   */
  openAvailableItems() {
    this.inputElement.setAttribute("aria-expanded", "true"), this.openButtonElement.setAttribute("aria-expanded", "true"), this.availableItemsListElement.classList.remove("dcf-d-none");
  }
  /**
   * Handles functionality of closing/un-expanding the available items list
   */
  closeAvailableItems() {
    this.inputElement.setAttribute("aria-expanded", "false"), this.openButtonElement.setAttribute("aria-expanded", "false"), this.availableItemsListElement.classList.add("dcf-d-none");
  }
  /**
   * Determines if the visual focus is on the available items list
   * @returns { bool } true if the available items list has visual focus
   */
  #visualFocusOnAvailableItems() {
    return this.availableItemsListElement.dataset.focused === "true";
  }
  /**
   * Handles functionality of how to set the visual focus on an element
   * @param { HTMLElement|false } elementToFocus The element to focus on or false to not focus on anything
   */
  #setVisualFocusOn(elementToFocus) {
    this.currentFocus !== null && this.availableItemsListElement.isSameNode(this.currentFocus) ? (this.searchAreaElement.classList.remove("dcf-search-and-select-visual-focus"), delete this.availableItemsListElement.dataset.focused) : this.currentFocus !== null && (this.currentFocus.classList.remove("dcf-search-and-select-visual-focus"), delete this.currentFocus.dataset.focused), elementToFocus !== !1 && this.availableItemsListElement.isSameNode(elementToFocus) ? (this.searchAreaElement.classList.add("dcf-search-and-select-visual-focus"), this.availableItemsListElement.dataset.focused = "true", this.currentFocus = elementToFocus) : elementToFocus !== !1 ? (elementToFocus.classList.add("dcf-search-and-select-visual-focus"), elementToFocus.dataset.focused = "true", this.currentFocus = elementToFocus) : this.currentFocus = null;
  }
  /**
   * Handles functionality of how to set the visual hover on an element
   * @param { HTMLElement|false } elementToHover The element to hover on or false to not hover on anything
   */
  #setVisualHover(elementToHover) {
    this.searchAndSelectElement.querySelectorAll(".dcf-search-and-select-visual-hover").forEach((elem) => {
      elem.classList.remove("dcf-search-and-select-visual-hover");
    }), elementToHover !== !1 ? (elementToHover.classList.add("dcf-search-and-select-visual-hover"), this.currentHover = elementToHover) : this.currentHover = null;
  }
  /**
   * Gets the currently active item in the available items list
   * @returns { HTMLLIElement|false } The currently active element in the available items list or false if there is none
   */
  getAvailableItemActiveDescendant() {
    const currentItemID = this.inputElement.getAttribute("aria-activedescendant");
    if (currentItemID !== null && currentItemID !== "") {
      const currentItemElement = document.getElementById(currentItemID);
      if (currentItemElement !== null)
        return currentItemElement;
    }
    return !1;
  }
  /**
   * Handles functionality of setting the active element on the available items list
   * @param { HTMLLIElement|false } itemToSet The list item to set or false if there is none
   */
  #setAvailableItemActiveDescendant(itemToSet) {
    if (itemToSet !== !1 && !this.#isElementAnAvailableItem(itemToSet))
      throw new Error("Element is not an available item");
    itemToSet !== !1 ? (this.inputElement.setAttribute("aria-activedescendant", itemToSet.getAttribute("id")), this.#setVisualHover(itemToSet)) : (this.#setVisualHover(!1), this.inputElement.setAttribute("aria-activedescendant", ""));
  }
  /**
   * Handles functionality of scrolling the current active item into view
   */
  #scrollActiveAvailableItemInView() {
    const currentItemElement = this.getAvailableItemActiveDescendant();
    currentItemElement !== !1 && !this.#isAvailableItemInView(currentItemElement) && currentItemElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }
  /**
   * Gets the next available item that is currently being shown
   * This will loop the beginning if we are at the end of the list
   * @returns { HTMLLIElement|null } The next shown available item or null if there is none
   */
  getNextAvailableItem() {
    let nextElement = null, nextElementFlag = !1;
    for (let index = 0; index < this.listOfAvailableItems.length; index++) {
      if (nextElementFlag) {
        nextElement = this.listOfAvailableItems[index];
        break;
      }
      this.listOfAvailableItems[index].getAttribute("id") === this.inputElement.getAttribute("aria-activedescendant") && (nextElementFlag = !0);
    }
    return nextElement === null ? this.getFirstAvailableItem() : nextElement;
  }
  /**
   * Gets the previous available item that is currently being shown
   * This will loop to the end if we are the beginning of the list
   * @returns { HTMLLIElement|null } The previous shown available item or null if there is none
   */
  getPreviousAvailableItem() {
    let previousElement = null;
    for (let index = 0; index < this.listOfAvailableItems.length && this.listOfAvailableItems[index].getAttribute("id") !== this.inputElement.getAttribute("aria-activedescendant"); index++)
      previousElement = this.listOfAvailableItems[index];
    return previousElement === null ? this.getLastAvailableItem() : previousElement;
  }
  /**
   * Gets the first available item that is currently being shown
   * @returns { HTMLLIElement|null } The first shown available item or null if there is none
   */
  getFirstAvailableItem() {
    return this.listOfAvailableItems.length === 0 ? !1 : this.listOfAvailableItems[0];
  }
  /**
   * Gets the last available item that is currently being shown
   * @returns { HTMLLIElement|null } The last shown available item or null if there is none
   */
  getLastAvailableItem() {
    return this.listOfAvailableItems.length === 0 ? !1 : this.listOfAvailableItems[this.listOfAvailableItems.length - 1];
  }
  /**
   * Handles the functionality of selecting an available item
   * @param { HTMLLIElement } itemToSelect The available item to select
   */
  #selectAvailableItem(itemToSelect) {
    return this.multiple ? this.#selectAvailableItemMultiple(itemToSelect) : this.#selectAvailableItemSingle(itemToSelect);
  }
  #selectAvailableItemSingle(itemToSelect) {
    if (!this.#isElementAnAvailableItem(itemToSelect))
      throw new Error("Element is not an available item");
    this.availableItemsListElement.querySelectorAll("li.dcf-search-and-select-available-item").forEach((singleOption) => {
      singleOption.setAttribute("aria-selected", "false");
    }), itemToSelect.setAttribute("aria-selected", "true"), this.selectElement.querySelectorAll("option").forEach((singleOption) => {
      singleOption.value === itemToSelect.dataset.value ? singleOption.setAttribute("selected", "selected") : singleOption.removeAttribute("selected", "selected");
    }), this.closeAvailableItems(), this.inputElement.value = itemToSelect.dataset.label;
  }
  #selectAvailableItemMultiple(itemToSelect) {
    if (!this.#isElementAnAvailableItem(itemToSelect))
      throw new Error("Element is not an available item");
    itemToSelect.setAttribute("aria-selected", "true"), this.selectElement.querySelectorAll("option").forEach((singleOption) => {
      singleOption.value === itemToSelect.dataset.value && singleOption.setAttribute("selected", "selected");
    }), this.#appendNewSelectedItem(itemToSelect);
  }
  /**
   * Handles the functionality of de-selecting an available item
   * @param { HTMLLIElement } itemToRemove The available item to de-select
   */
  #removeAvailableItem(itemToRemove) {
    if (!this.#isElementAnAvailableItem(itemToRemove))
      throw new Error("Element is not an available item");
    itemToRemove.setAttribute("aria-selected", "false"), this.selectElement.querySelectorAll("option").forEach((singleOption) => {
      singleOption.value === itemToRemove.dataset.value && singleOption.removeAttribute("selected");
    }), this.multiple ? this.selectedItemsListElement.querySelectorAll(`li[data-elem-id="${itemToRemove.dataset.elemId}"]`).forEach((singleSelectedItem) => {
      singleSelectedItem.remove();
    }) : (this.inputElement.value = "", this.#filterAvailableItems());
  }
  /**
   * Handles the functionality of de-selecting a selected item
   * @param { HTMLLIElement } itemToRemove The selected item to de-select
   */
  #removeSelectedItem(itemToRemove) {
    if (!this.#isElementASelectedItem(itemToRemove))
      throw new Error("Element is not a selected item");
    const availableItem = this.availableItemsListElement.querySelector(`li[data-elem-id="${itemToRemove.dataset.elemId}"]`);
    availableItem.setAttribute("aria-selected", "false"), this.selectElement.querySelectorAll("option").forEach((singleOption) => {
      singleOption.value === availableItem.dataset.value && singleOption.removeAttribute("selected");
    }), itemToRemove.remove(), this.selectedItemsListElement.children.length === 0 && (this.selectedItemsListElement.setAttribute("tabindex", "-1"), this.inputElement.focus());
  }
  /**
   * Checks if the element has the class `dcf-search-and-select-available-item`
   * @param { HTMLElement } elementToCheck The element to check
   * @returns { bool } true if it does contain that class
   */
  #isElementAnAvailableItem(elementToCheck) {
    return elementToCheck.classList.contains("dcf-search-and-select-available-item");
  }
  /**
   * Checks if the available item is selected
   * @param { HTMLLIElement } itemToCheck The item to check if it is selected
   * @returns { bool } true if the item is selected
   */
  #isAvailableItemSelected(itemToCheck) {
    if (!this.#isElementAnAvailableItem(itemToCheck))
      throw new Error("Element is not an available item");
    return itemToCheck.getAttribute("aria-selected") === "true";
  }
  /**
   * Checks if the available item is disabled
   * @param { HTMLLIElement } itemToCheck The item to check if it is disabled
   * @returns { bool } true if the item is disabled
   */
  #isAvailableItemDisabled(itemToCheck) {
    if (!this.#isElementAnAvailableItem(itemToCheck))
      throw new Error("Element is not an available item");
    return itemToCheck.getAttribute("aria-disabled") === "true";
  }
  /**
   * Calculates if the available item is in view
   * @param { HTMLLIElement } itemToCheck The item to check if it is in view
   * @returns { bool } true if it is in view
   */
  #isAvailableItemInView(itemToCheck) {
    if (!this.#isElementAnAvailableItem(itemToCheck))
      throw new Error("Element is not an available item");
    const listRect = this.availableItemsListElement.getBoundingClientRect(), itemToCheckRect = itemToCheck.getBoundingClientRect();
    return itemToCheckRect.top >= listRect.top && itemToCheckRect.bottom <= listRect.bottom;
  }
  /**
   * Calculates if the selected item is in view
   * @param { HTMLLIElement } itemToCheck The item to check if it is in view
   * @returns { bool } true if it is in view
   */
  #isSelectedItemInView(itemToCheck) {
    if (!this.#isElementASelectedItem(itemToCheck))
      throw new Error("Element is not a selected item");
    const listRect = this.searchAreaElement.getBoundingClientRect(), itemToCheckRect = itemToCheck.getBoundingClientRect();
    return itemToCheckRect.top >= listRect.top && itemToCheckRect.bottom <= listRect.bottom;
  }
  /**
   * Checks if the element has the class `dcf-search-and-select-selected-item`
   * @param { HTMLElement } elementToCheck The element to check
   * @returns { bool } true if it does contain that class
   */
  #isElementASelectedItem(elementToCheck) {
    return elementToCheck.classList.contains("dcf-search-and-select-selected-item");
  }
  /**
   * Filters available items and hides any item that does not contain the input value's string
   */
  #filterAvailableItems() {
    const searchTerm = this.inputElement.value.trim().toUpperCase(), allItems = this.availableItemsListElement.querySelectorAll("li.dcf-search-and-select-available-item"), allItemGroups = this.availableItemsListElement.querySelectorAll(".dcf-search-and-select-available-items-group");
    this.listOfAvailableItems = [], this.availableItemsListElement.querySelectorAll(".dcf-search-and-select-no-results").forEach((singleNoResult) => {
      singleNoResult.remove();
    });
    let noItemsFound = !0;
    if (allItems.forEach((singleItem) => {
      const itemLabel = singleItem.querySelector(".dcf-search-and-select-available-item-label").innerText.toUpperCase();
      searchTerm === "" || itemLabel.includes(searchTerm) ? (singleItem.classList.remove("dcf-d-none"), singleItem.classList.add("dcf-d-flex"), this.listOfAvailableItems.push(singleItem), noItemsFound = !1) : (singleItem.classList.add("dcf-d-none"), singleItem.classList.remove("dcf-d-flex"));
    }), allItemGroups.forEach((singleGroup) => {
      singleGroup.querySelectorAll(".dcf-search-and-select-available-item:not(.dcf-d-none)").length === 0 ? singleGroup.classList.add("dcf-d-none") : singleGroup.classList.remove("dcf-d-none");
    }), noItemsFound) {
      const noItemsFoundElement = document.createElement("ul");
      noItemsFoundElement.setAttribute("role", "presentation"), noItemsFoundElement.classList.add("dcf-search-and-select-no-results", ...this.availableItemsGroupClassList), noItemsFoundElement.innerHTML = `<li
class="${this.availableItemsNoResultsClassList.join(" ")}" role="option">
    No results found
</li>`, this.availableItemsListElement.append(noItemsFoundElement);
    }
  }
}
class UNLSearchSelect extends DCFSearchSelect {
  static {
    __name(this, "UNLSearchSelect");
  }
  constructor(selectElement, options = {}) {
    "availableItemsListClassList" in options || (options.availableItemsListClassList = [
      "dcf-absolute",
      "dcf-d-none",
      "dcf-mb-0",
      "dcf-pl-0",
      "dcf-w-100%",
      "dcf-z-2",
      "unl-box-shadow"
    ]), "selectedItemButtonClassList" in options || (options.selectedItemButtonClassList = [
      "dcf-btn",
      "dcf-btn-secondary",
      "dcf-h-100%",
      "dcf-p-3",
      "dcf-z-1"
    ]), super(selectElement, options), window.UNL = window.UNL || {}, window.UNL.classes = window.UNL.classes || {}, window.UNL.classes[this.selectElement.getAttribute("id")] = this, this.selectElement.dispatchEvent(new Event("UNLClassReady"));
  }
}
export {
  UNLSearchSelect as default
};
//# sourceMappingURL=component.search-select.js.map
