require("./index.css");

function $parcel$defineInteropFlag(a) {
  Object.defineProperty(a, '__esModule', {value: true, configurable: true});
}
function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}

$parcel$defineInteropFlag(module.exports);

$parcel$export(module.exports, "default", () => $43d7963e56408b24$export$2e2bcd8739ae039);
function $5aca7c389be45fd0$export$b2e1d36bc0be1b2f(dataItem, index) {
    const random = Math.random().toString(36).substring(2, 10);
    let item;
    if ($5aca7c389be45fd0$export$5c0c8aabba12399d(dataItem)) return dataItem;
    else {
        item = {
            id: random,
            title: dataItem,
            value: index
        };
        return item;
    }
}
function $5aca7c389be45fd0$export$11380eda3eb06ca9(data, select) {
    const { placeholder: placeholder , selected: selected  } = data;
    if (placeholder) select.innerText = placeholder;
    else if (selected) select.innerText = selected;
    else select.innerText = "Select...";
    return select;
}
function $5aca7c389be45fd0$export$5c0c8aabba12399d(item) {
    if (item && typeof item !== "object") return false;
    return item.hasOwnProperty("id") && item.hasOwnProperty("title") && item.hasOwnProperty("value");
}
function $5aca7c389be45fd0$export$31b5fa56cc6048cb(element, content, styles) {
    const select = document.createElement("div");
    const selected = document.createElement("p");
    const caret = document.createElement("div");
    select.classList.add("cg-select");
    select.classList.add("classicSelect");
    selected.classList.add("selected");
    caret.classList.add("caret");
    select.appendChild(selected);
    select.appendChild(caret);
    if (content) {
        const text = document.createTextNode(content);
        selected.appendChild(text);
        element.innerHTML = "";
        element?.insertAdjacentElement("afterbegin", select);
    } else if (styles) {
        $5aca7c389be45fd0$export$edf5b2501a573922(element, styles);
        select.setAttribute("style", `${styles}`);
        selected.setAttribute("style", `${styles}`);
        caret.setAttribute("style", `${styles}`);
    }
}
function $5aca7c389be45fd0$export$4474211a0591e3fe(select, element, dataSelectText) {
    const { selectedItems: selectedItems , indexes: indexes , theme: theme , multiselectTag: multiselectTag  } = dataSelectText;
    const options = element.querySelectorAll(".list__item");
    const nativeOption = element.querySelectorAll(".nativeSelect__nativeOption");
    const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
    const checkBox = element.querySelectorAll("li input");
    svgIcon.setAttribute("viewBox", "0 0 10 10");
    path1.setAttribute("d", "M2,8 L8,2");
    path2.setAttribute("d", "M2,2 L8,8");
    svgIcon.appendChild(path1);
    svgIcon.appendChild(path2);
    if (multiselectTag && multiselectTag == true) return;
    switch(theme){
        case "dark":
            path1.classList.add("pathWhite");
            path2.classList.add("pathWhite");
            break;
        case "white":
            path1.classList.add("pathBlack");
            path2.classList.add("pathBlack");
            break;
        default:
            path1.classList.add("pathWhite");
            path2.classList.add("pathWhite");
            break;
    }
    svgIcon.classList.add("svg-icon");
    svgIcon.classList.add("svg-clear");
    select.appendChild(svgIcon);
    svgIcon.addEventListener("click", (e)=>{
        e.preventDefault();
        e.stopPropagation();
        select.innerText = "";
        nativeOption.forEach((option)=>{
            option.removeAttribute("selected");
        });
        if (Array.isArray(selectedItems)) {
            selectedItems.splice(0);
            indexes.splice(0);
        }
        checkBox.forEach((item)=>{
            if (item instanceof HTMLInputElement) item.checked = false;
        });
        $5aca7c389be45fd0$export$11380eda3eb06ca9(dataSelectText, select);
        options.forEach((option)=>{
            option.classList.remove("active");
        });
    });
}
function $5aca7c389be45fd0$export$668f6560249913a1(element, item) {
    element.forEach((option)=>{
        option.removeAttribute("selected");
        if (option.textContent === item) option.setAttribute("selected", "selected");
    });
}
function $5aca7c389be45fd0$export$a240606f327b3da2(element, item, condition) {
    element.forEach((option)=>{
        if (condition == true) {
            if (option.textContent === item) option.setAttribute("selected", "selected");
        } else if (condition == false) {
            if (option.textContent === item) option.removeAttribute("selected");
        } else return;
    });
}
function $5aca7c389be45fd0$export$edf5b2501a573922(element, styles) {
    const cgSelect = element.querySelector(".cg-select");
    const caretSelect = element.querySelector(".caret");
    const placeholderSelect = element.querySelector(".selected");
    const lableItem = element.parentElement.querySelector("h1.label");
    $5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.head, cgSelect);
    $5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.caret, caretSelect);
    $5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.lable, lableItem);
    if (placeholderSelect) $5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.placeholder, placeholderSelect);
}
function $5aca7c389be45fd0$export$5f8f940a0de3e7d(elemOption, selector) {
    if (elemOption) Object.entries(elemOption).forEach(([key, value])=>{
        selector.style[key] = value;
    });
}


function $3e0e9117e5437319$export$dfb0baf35876628e() {
    const nativeSelect = document.createElement("select");
    nativeSelect.setAttribute("name", "dataSelect");
    nativeSelect.classList.add("nativeSelect");
    return nativeSelect;
}
function $3e0e9117e5437319$export$401096e4c8c5bfbe() {
    const nativeOption = document.createElement("option");
    nativeOption.classList.add("nativeSelect__nativeOption");
    return nativeOption;
}
function $3e0e9117e5437319$export$94c1ad1d6db6a1d0(data, title, index, id) {
    const { element: element , option: option , indexes: indexes , selectedItems: selectedItems  } = data;
    const { placeholder: placeholder , styles: styles  } = option;
    const selected = element?.querySelector(".selected");
    const nativeOption = element.querySelectorAll(".nativeSelect__nativeOption");
    const liChip = document.createElement("li");
    const textNode = document.createTextNode(title);
    const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
    svgIcon.setAttribute("viewBox", "0 0 10 10");
    path1.setAttribute("d", "M3,7 L7,3");
    path2.setAttribute("d", "M3,3 L7,7");
    liChip.setAttribute("id", `tag-${index}-${id}`);
    svgIcon.classList.add("svg-icon");
    svgIcon.appendChild(path1);
    svgIcon.appendChild(path2);
    liChip.appendChild(textNode);
    liChip.appendChild(svgIcon);
    if (styles) {
        const { chips: chips  } = styles;
        (0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(chips, liChip);
    }
    svgIcon.addEventListener("click", (event)=>{
        event.preventDefault();
        event.stopPropagation();
        (0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, title, false);
        const deleteIcon = indexes.indexOf(index);
        let checkBox;
        indexes.splice(deleteIcon, 1);
        selectedItems.splice(deleteIcon, 1);
        if (id) checkBox = document.getElementById(`chbox-${id}`);
        else checkBox = document.getElementById(`chbox-${index}`);
        checkBox.checked = false;
        checkBox.parentElement.classList.remove("active");
        if (!selectedItems.length) selected.innerText = placeholder;
        liChip.parentElement.removeChild(liChip);
    });
    return liChip;
}
function $3e0e9117e5437319$export$3ffa48e55176070e(random, lenguage) {
    const inputSearch = document.createElement("input");
    inputSearch.type = "text";
    inputSearch.classList.add("inputSearch");
    inputSearch.setAttribute("id", `searchSelect-${random}`);
    if (lenguage) inputSearch.setAttribute("placeholder", `${lenguage}`);
    else inputSearch.setAttribute("placeholder", "Search...");
    inputSearch.addEventListener("click", (e)=>{
        e.preventDefault();
    });
    return inputSearch;
}



const $356528c60e5e24f4$export$cf48009033a0126b = {
    selectPlaceholder: "Выберите элемент...",
    placeholder: "Поиск...",
    textInListSearch: "Совпадений нет..."
};
const $356528c60e5e24f4$export$84584c2a98eb6753 = {
    selectPlaceholder: "Select element...",
    placeholder: "Search...",
    textInListSearch: "No matches..."
};



function $e3e030f05caf96c0$export$e6eb54368342cb84(element, theme) {
    const select = element.querySelector(".cg-select");
    const caret = element.querySelector(".caret");
    const list = element.querySelector("ul.list");
    const search = element.querySelector(".inputSearch");
    const path = element.querySelectorAll(".pathWhite");
    const nativeSelect = element.querySelector(".nativeSelect");
    select.classList.remove("classicSelect");
    list.classList.remove("classicList");
    path.forEach((elem)=>{
        elem.classList.remove("pathBlack");
        elem.classList.remove("pathWhite");
    });
    if (typeof theme === "string") switch(theme){
        case "dark":
            select.classList.add("selectDark");
            list.classList.add("listDark");
            nativeSelect?.classList.add("listDark");
            path.forEach((elem)=>{
                elem.classList.add("pathWhite");
            });
            break;
        case "white":
            select.classList.add("selectWhite");
            caret.classList.add("caretWhite");
            list.classList.add("listWhite");
            nativeSelect?.classList.add("listWhite");
            path.forEach((elem)=>{
                elem.classList.add("pathBlack");
            });
            if (search) search.classList.add("inputWhite");
            break;
        default:
            select.classList.add("classicSelect");
            list.classList.add("classicList");
            break;
    }
    else {
        select.classList.add(`${theme.styles.head}`);
        list.classList.add(`${theme.styles.list}`);
    }
}


class $adaec01e28cd9884$export$ba2c4ca7a0a16031 {
    /**
   * Array of indexes of selected elements.
   * @type {number[]}
   */ indexes = [];
    /**
   * @param {ICgSelect} setting Object accepting select settings.
   * @constructor ICgSelect class constructor.
   * @description The constructor takes an object and renders the select.
   * @example
   * options = {
   *  selector: 'Unique selector',
      selected: 'Selected item',
      placeholder: '...',
      label: '...'
      items: [string|number|object],
      theme: string,
      searchMode: true/false,
      closeOnSelect:  true/false,
      nativeSelectMode: true/false,
      listDisplayMode: true/false,
      language: 'ru/en',
      styles: {
        head: {
          background: '...',
        },
        list: {...},
        chips: {...},
        carriage: {...},
        placeholder: {...},
        label: {..},
      },
      event: '...',
      url: 'http/...',
      multiselect: true/false,
      multiselectTag: true/false,
   * } 
   */ constructor(setting){
        this.init(setting);
        this.render();
        this.closeSelectClick();
        this.initEvent();
    }
    //Getters
    /**
   * @returns {string[] | string} Returns the selected element(s) as an array / element / null.
   * @description Getter returning the selected element(s) of the select.
   */ get value() {
        return this.selectedItems ?? null;
    }
    /**
   * @returns {number | number[]} Returns the indices of the selected element(s) as an array / empty array.
   * @description A getter that returns the indexes of the selected element(s) of the select.
   */ get indexesOf() {
        return this.indexes ?? [];
    }
    /**
   * Private method for initializing an instance of the ICgSelect class.
   * @method init
   * @member
   * @private
   * @param {ISgSelect} setting passed select settings.
   * @description Private method. General initialization of the select. Obtaining tinctures and converting select elements.
   * @example
   *  {
        selector: '.cg-dropdown_one',
        placeholder: 'Choose a car',
        items: [
          'BMW',
          {
            id: '213sade',
            title: 'Opel',
            value: 1,
          },
          'Mersedes',
          'MAN',
          'max',
        ],
        multiselect: true,
        multiselectTag: true,
      }
   */ init(setting) {
        const { items: items , multiselect: multiselect , multiselectTag: multiselectTag , url: url , selector: selector , listDisplayMode: listDisplayMode , nativeSelectMode: nativeSelectMode , searchMode: searchMode , language: language , styles: styles , label: label , event: event , selected: selected , placeholder: placeholder , theme: theme ,  } = setting;
        this.options = setting;
        this.multiselect = multiselect;
        this.multiselectTag = multiselectTag;
        this.url = url;
        this.selector = selector;
        this.items = items;
        this.searchMode = searchMode;
        this.language = language;
        this.nativeSelectMode = nativeSelectMode;
        this.listDisplayMode = listDisplayMode;
        this.styles = styles;
        this.label = label;
        this.event = event;
        this.selected = selected;
        this.placeholder = placeholder;
        this.theme = theme;
        const elem = document.querySelector(this.selector);
        this.element = elem;
        this.element?.addEventListener("click", (e)=>{
            e.preventDefault();
            this.open();
        });
        this.items = [];
        if (this.url && !items) {
            this.renderUrl();
            return;
        }
        if (this.label) {
            const labelItem = document.createElement("h1");
            const textLabel = document.createTextNode(this.label);
            labelItem.appendChild(textLabel);
            labelItem.classList.add("label");
            this.element.insertAdjacentElement("beforebegin", labelItem);
        }
        items.forEach((dataItem, index)=>{
            let itemInputs = {
                ItemValue: dataItem,
                category: dataItem.category,
                categoryItems: dataItem.categoryItems
            };
            if (itemInputs.category && itemInputs.categoryItems) {
                this.category = itemInputs.category;
                this.items.push(this.category);
                itemInputs.categoryItems.forEach((categoryItem, indexCategory)=>{
                    this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(categoryItem, indexCategory));
                });
            } else this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(itemInputs.ItemValue, index));
        });
    }
    /**
   * @private
   * @method render
   * @param {string} select  optional element. Passed to the initSelected.
   * @description Render elements in select.
   */ render(select) {
        const random = Math.random().toString(36).substring(2, 10);
        if (select || select && this.styles) {
            this.initSelected(select);
            (0, $5aca7c389be45fd0$export$edf5b2501a573922)(this.element, this.styles);
        } else this.initSelected();
        const ulList = document.createElement("ul");
        const nativeSelect = (0, $3e0e9117e5437319$export$dfb0baf35876628e)();
        let inputSearch;
        let textNode;
        this.randomId = random;
        ulList.classList.add("list");
        ulList.classList.add("classicList");
        if (this.styles) (0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(this.styles.list, ulList);
        if (this.searchMode) {
            if (this.language === "ru") inputSearch = (0, $3e0e9117e5437319$export$3ffa48e55176070e)(random, (0, $356528c60e5e24f4$export$cf48009033a0126b).placeholder);
            else inputSearch = (0, $3e0e9117e5437319$export$3ffa48e55176070e)(random, (0, $356528c60e5e24f4$export$84584c2a98eb6753).placeholder);
            (0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(this.styles?.search, inputSearch);
            ulList.appendChild(inputSearch);
        }
        this.element?.appendChild(ulList);
        this.items.forEach((dataItem)=>{
            this.element?.appendChild(nativeSelect);
            const liItem = document.createElement("li");
            const nativeOption = (0, $3e0e9117e5437319$export$401096e4c8c5bfbe)();
            const strongItem = document.createElement("strong");
            liItem.classList.add("list__item");
            strongItem.classList.add("category");
            if (this.multiselect) {
                const checkBox = document.createElement("input");
                checkBox.type = "checkbox";
                checkBox.setAttribute("id", `chbox-${dataItem.id}`);
                liItem.appendChild(checkBox);
                if (this.multiselectTag) checkBox.classList.add("displayHide");
                nativeSelect.setAttribute("multiple", "multiple");
            }
            if (dataItem.title) {
                nativeOption.text = dataItem.title;
                nativeOption.value = dataItem.title;
                textNode = document.createTextNode(dataItem.title);
                nativeSelect.appendChild(nativeOption);
                liItem.appendChild(textNode);
                ulList.appendChild(liItem);
            } else {
                // Для отрисовки категорий
                textNode = document.createTextNode(dataItem);
                strongItem.appendChild(textNode);
                ulList.appendChild(strongItem);
            }
        });
        this.items.filter((item, index)=>{
            if (typeof item !== "object") this.items.splice(index, 1);
            return item;
        });
        this.list = this.element.querySelector(".list");
        this.carriage = this.element.querySelector(".caret");
        if (this.theme) (0, $e3e030f05caf96c0$export$e6eb54368342cb84)(this.element, this.theme);
        if (this.nativeSelectMode === true) this.selectMode(this.nativeSelectMode);
        if (this.listDisplayMode) this.displayMode(this.listDisplayMode);
        this.addOptionsBehaviour();
    }
    /**
   * @private
   * @method renderUrl
   * @description Rendering elements in the select passed from the URL and setting them up.
   */ async renderUrl() {
        const response = await fetch(this.url);
        const dataUrl = await response.json();
        const nativeSelect = (0, $3e0e9117e5437319$export$dfb0baf35876628e)();
        dataUrl.forEach((dataItem, index)=>{
            const item = {
                id: dataItem.id,
                title: dataItem.title,
                value: index
            };
            const ulUrl = this.element.querySelector(".list");
            const nativeOption = (0, $3e0e9117e5437319$export$401096e4c8c5bfbe)();
            const liUrl = document.createElement("li");
            const textUrl = document.createTextNode(item.title);
            if (this.multiselect) {
                const checkBox = document.createElement("input");
                checkBox.type = "checkbox";
                if (this.multiselectTag) checkBox.classList.add("displayHide");
                checkBox.setAttribute("id", `chbox-${item.id}`);
                nativeSelect.setAttribute("multiple", "multiple");
                liUrl.appendChild(checkBox);
            }
            liUrl.classList.add("list__item");
            nativeOption.value = item.title;
            nativeOption.text = item.title;
            nativeSelect.appendChild(nativeOption);
            liUrl.appendChild(textUrl);
            ulUrl.appendChild(liUrl);
            this.items.push(item);
        });
        this.element.appendChild(nativeSelect);
        this.items.filter((item, index)=>{
            if (typeof item !== "object") this.items.splice(index, 1);
            return item;
        });
        this.addOptionsBehaviour();
    }
    /**
   * @method initSelected
   * @param {string} select optional element. Used in the selectedIndex method.
   * @description Renders and styles the select.
   * @private
   */ initSelected(select) {
        if (this.selected) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, this.selected);
        else if (this.placeholder) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, this.placeholder);
        else if (this.language && this.language === "ru") (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, (0, $356528c60e5e24f4$export$cf48009033a0126b).selectPlaceholder);
        else (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, (0, $356528c60e5e24f4$export$84584c2a98eb6753).selectPlaceholder);
        if (select) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, select, this.styles);
        if (this.styles) (0, $5aca7c389be45fd0$export$edf5b2501a573922)(this.element, this.styles);
    }
    /**
   * @private
   * @description Opens and closes the list by the passed event.
   * @method initEvent
   */ initEvent() {
        if (this.event) {
            if (this.event === "mouseenter") {
                this.element.addEventListener(this.event, ()=>{
                    this.open();
                });
                this.element.addEventListener("mouseleave", ()=>{
                    this.close();
                });
            }
        }
    }
    /**
   * @private
   * @param {boolean} oneClick optional parameter passed from the buttonControl function.
   * @description Opens a list to select an element.
   * @method open
   */ open(oneClick) {
        if (oneClick === true) {
            this.list.classList.add("open");
            this.carriage.classList.add("caret_rotate");
        } else {
            this.list.classList.toggle("open");
            this.carriage.classList.toggle("caret_rotate");
        }
    }
    /**
   * @private
   * @description Closes the list.
   * @method close
   */ close() {
        this.list?.classList.remove("open");
        this.carriage?.classList.remove("caret_rotate");
    }
    /**
   * @private
   * @description Closes the list on click outside of an element.
   * @method closeSelectClick
   */ closeSelectClick() {
        const dropdown = document.querySelector(`${this.options.selector}`);
        document.addEventListener("click", (e)=>{
            const withinBoundaries = e.composedPath().includes(dropdown);
            if (!withinBoundaries) {
                if (this.buttonAction) return;
                else this.close();
            }
        });
    }
    /**
   * @private
   * @description A method that implements the selection of elements in different modes.
   * @method addOptionsBehaviour
   */ addOptionsBehaviour() {
        const options = this.element?.querySelectorAll(".list__item");
        const select = this.element?.querySelector(".selected");
        const nativeOption = this.element.querySelectorAll(".nativeSelect__nativeOption");
        let selectedItemsClear = {
            placeholder: this.placeholder,
            selected: this.selected,
            theme: this.theme
        };
        const ulMultipul = document.createElement("ul");
        if (this.multiselect) {
            this.selectedItems = [];
            ulMultipul.classList.add("multiselect-tag");
            select?.classList.add("overflow-hidden");
        }
        if (this.searchMode) this.searchModeSelect(this.randomId);
        options?.forEach((option, index)=>{
            option.addEventListener("click", (event)=>{
                if (Array.isArray(this.selectedItems)) selectedItemsClear = {
                    placeholder: this.placeholder,
                    selected: this.selected,
                    selectedItems: this.selectedItems,
                    indexes: this.indexes,
                    multiselectTag: this.multiselectTag
                };
                const item = this.items[index];
                const checkIndex = this.indexes.indexOf(index);
                if (this.closeOnSelect == false || this.multiselect) {
                    event.stopPropagation();
                    event.preventDefault();
                }
                if (this.multiselect) {
                    option.classList.toggle("active");
                    const checkBox = option.querySelector('input[type="checkbox"]');
                    if (checkBox) {
                        if (!(event.target instanceof HTMLInputElement)) checkBox.checked = !checkBox.checked;
                        if (checkIndex == -1) {
                            this.indexes.push(index);
                            (0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, item.title, true);
                            select.textContent = "";
                            if (this.multiselectTag) {
                                if (Array.isArray(this.selectedItems)) {
                                    const dataBreadCrumb = {
                                        option: this.options,
                                        element: this.element,
                                        indexes: this.indexes,
                                        selectedItems: this.selectedItems
                                    };
                                    this.selectedItems.push(item.title);
                                    select.appendChild(ulMultipul);
                                    ulMultipul.appendChild((0, $3e0e9117e5437319$export$94c1ad1d6db6a1d0)(dataBreadCrumb, item.title, index, item.id));
                                }
                            } else if (Array.isArray(this.selectedItems)) {
                                this.selectedItems.push(item.title);
                                select.innerText = this.selectedItems.join(",");
                            }
                        } else {
                            if (this.multiselectTag) {
                                const tagItem = document.getElementById(`tag-${index}-${item.id}`);
                                ulMultipul.removeChild(tagItem);
                            }
                            if (Array.isArray(this.selectedItems)) {
                                this.selectedItems.splice(checkIndex, 1);
                                this.indexes.splice(checkIndex, 1);
                                (0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, item.title, false);
                            }
                        }
                        if (!this.selectedItems.length) (0, $5aca7c389be45fd0$export$11380eda3eb06ca9)(selectedItemsClear, select);
                        else {
                            if (this.multiselectTag) select.appendChild(ulMultipul);
                            else if (Array.isArray(this.selectedItems)) select.innerText = this.selectedItems.join(",");
                        }
                    }
                } else {
                    select.textContent = item.title;
                    this.selectedItems = item.title;
                    (0, $5aca7c389be45fd0$export$668f6560249913a1)(nativeOption, item.title);
                    options.forEach((option)=>{
                        option.classList.remove("active");
                    });
                    option.classList.add("active");
                }
                (0, $5aca7c389be45fd0$export$4474211a0591e3fe)(select, this.element, selectedItemsClear);
            });
        });
    }
    /**
   * @private
   * @param {boolean} nativeSelectMode parameter responsible for adding native select.
   * @description Changes the display of the select on mobile devices.
   * @method selectMode
   */ selectMode(nativeSelectMode) {
        let win = window.outerWidth;
        if (nativeSelectMode === true) {
            const select = this.element.querySelector(".cg-select");
            const list = this.element.querySelector(".list");
            const nativeSelect = this.element.querySelector(".nativeSelect");
            if (win < 576) {
                select.classList.add("displayHide");
                list.classList.add("displayHide");
                nativeSelect.classList.add("nativeSelectActive");
            } else if (win > 576) {
                select.classList.remove("displayHide");
                list.classList.remove("displayHide");
                nativeSelect.classList.remove("nativeSelectActive");
                nativeSelect.classList.add("displayHide");
            }
        } else return;
    }
    /**
   * @description The method that implements the search for elements in the select.
   * @private
   * @param {string} random unique value for input element.
   * @method searchMode
   */ searchModeSelect(random) {
        const input = this.element.querySelector(`#searchSelect-${random}`);
        const searchSelect = this.element.querySelectorAll(".list__item");
        const result = document.createElement("p");
        let textNode;
        if (this.language && this.language === "ru") textNode = document.createTextNode(`${(0, $356528c60e5e24f4$export$cf48009033a0126b).textInListSearch}`);
        else textNode = document.createTextNode(`${(0, $356528c60e5e24f4$export$84584c2a98eb6753).textInListSearch}`);
        result.appendChild(textNode);
        result.classList.add("displayHide");
        result.classList.add("noRezult");
        input.parentElement.appendChild(result);
        input.addEventListener("click", (e)=>{
            e.stopPropagation();
        });
        if (input instanceof HTMLInputElement) input.oninput = function() {
            let valueSearch = input.value.trim().toLowerCase();
            let anyMatch = false;
            if (valueSearch != "") {
                searchSelect.forEach((elem)=>{
                    let isMatching = new RegExp(valueSearch, "gi").test(elem.textContent);
                    anyMatch = anyMatch || isMatching;
                    if (elem.textContent.toLowerCase().search(valueSearch) == -1) elem.classList.add("displayHide");
                    else elem.classList.remove("displayHide");
                });
                result.classList.toggle("displayHide", anyMatch);
            } else searchSelect.forEach((elem)=>{
                elem.classList.remove("displayHide");
                result.classList.add("displayHide");
            });
        };
    }
    /**
   * @private
   * @param {boolean} listDisplayMode parameter responsible for displaying the selection in the form of a modal window.
   * @description Changes the display of a sheet with a selection as a modal window.
   * @method displayMode
   */ displayMode(listDisplayMode) {
        if (listDisplayMode) {
            const modal = document.createElement("div");
            const body = document.querySelector("body");
            const list = this.list;
            modal.appendChild(list);
            this.element.appendChild(modal);
            this.element.addEventListener("click", ()=>{
                modal.classList.toggle("modal");
                list.classList.toggle("listModal");
                body.classList.toggle("overflowHide");
            });
        } else return;
    }
    // Public methods
    /**
   * @param {number} numberItem returned element number.
   * @returns {HTMLElement} returns a reference to the selected HTML element.
   * @method getElement
   */ getElement(numberItem) {
        if (numberItem > this.items.length) return;
        return this.items[numberItem];
    }
    /**
   * @param {ILanguage} language the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.
   * @description a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.
   * @method addLanguage
   */ addLanguage(language) {
        const { placeholder: placeholder , textInListSearch: textInListSearch , selectPlaceholder: selectPlaceholder  } = language;
        const select = this.element.querySelector(".selected");
        const textNodeSelect = document.createTextNode(selectPlaceholder);
        select.appendChild(textNodeSelect);
        if (this.searchMode) {
            const search = this.element.querySelector(".inputSearch");
            const textNoRezult = this.element.querySelector(".noRezult");
            const textNode = document.createTextNode(textInListSearch);
            search.setAttribute("placeholder", placeholder);
            search.setAttribute("placeholder", placeholder);
            textNoRezult.textContent = "";
            textNoRezult.appendChild(textNode);
        }
    }
    /**
   * @param {HTMLInputElement} button - HTML button.
   * @param {string} method - open/close method.
   * @description A method that allows you to open / close the select using buttons.
   * @method buttonControl
   */ buttonControl(button, method) {
        if (this.listDisplayMode) return;
        this.buttonAction = button;
        button.addEventListener("click", ()=>{
            if (method.toLowerCase() === "open") this.open(true);
            else if (method.toLowerCase() === "close") this.close();
            else return;
        });
    }
    /**
   * @param {boolean} value - Passed parameter to add the disabled attribute.
   * @description A method that allows you to toggle the state of the disabled select.
   * @method disabled
   */ disabled(value) {
        const select = this.element.querySelector(".cg-select");
        const nativeSelect = this.element.querySelector(".nativeSelect");
        if (value === true) {
            this.element.setAttribute("disabled", "true");
            nativeSelect.setAttribute("disabled", "true");
            select.classList.add("disabled");
        } else {
            this.element.removeAttribute("disabled");
            nativeSelect.removeAttribute("disabled");
            select.classList.remove("disabled");
        }
    }
    /**
   * @param {string | IItems} item added element.
   * @description adds the given element to the end of the list and redraws the list. Cannot be used when passing elements with categories.
   * @method addItem
   */ addItem(item) {
        if (this.category) {
            console.log("can`t add item to category");
            return;
        }
        if (!item) return false;
        const index = this.items.length;
        this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(item, index));
        this.render();
    }
    /**
   * @param {number} index the index of the element to be removed.
   * @description removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.
   * @method deleteItem
   */ deleteItem(index) {
        if (this.category) {
            console.log("can`t add item to category");
            return;
        }
        const item = this.items[index];
        this.items.splice(index, 1);
        this.render();
    }
    /**
   * @description removes all elements from the list and redraws it.
   * @method deleteItemAll
   */ deleteItemAll() {
        this.items.splice(0, this.items.length);
        this.render();
    }
    /**
   * @param {number} index the index of the selected element.
   * @description selects the element that will be initially rendered in the select.
   * @method selectIndex
   */ selectIndex(index) {
        if (this.category) {
            console.log("can`t add item to category");
            return;
        }
        const options = this.element.querySelectorAll(".list__item");
        if (index > options.length) return;
        const select = options[index].innerText;
        this.render(select);
    }
    /**
   * @description Method for tracking the actions of the select, you can pass a callback
   * @param state select state.
   * @param callback
   * @method on
   */ on(state, callback) {
        const options = this.element?.querySelectorAll(".list__item");
        let value = "";
        switch(state){
            case "select":
                options?.forEach((option)=>{
                    option.addEventListener("click", ()=>{
                        console.log("option:select", option.textContent);
                        value = option.textContent;
                        callback(state, value);
                    });
                });
                break;
            case "close":
                this.element.addEventListener("click", ()=>{
                    console.log("list:close", this.list.classList.contains("close"));
                });
                callback(state);
                break;
            case "open":
                this.element.addEventListener("click", ()=>{
                    console.log("list:open", this.list.classList.contains("open"));
                });
                callback(state);
                break;
            case "clear":
                this.element.addEventListener("click", ()=>{
                    const svgIcon = this.element?.querySelector(".svg-icon");
                    svgIcon?.addEventListener("click", ()=>{
                        console.log("list:clear", svgIcon.classList.contains("svg-clear"));
                    });
                });
                callback(state);
                break;
        }
    }
}


var $43d7963e56408b24$export$2e2bcd8739ae039 = (0, $adaec01e28cd9884$export$ba2c4ca7a0a16031);


//# sourceMappingURL=index.js.map