/*
 # -----------------------------------------------------------------------------
 # ~/assets/themes/j1/modules/msDropdown/js/msDropdown.js
 # Provides JS Core and API for MSDropdown
 #
 # Product/Info:
 # http://jekyll.one
 # https://www.marghoobsuleman.com/
 #
 # Copyright (C) 2021 Juergen Adams
 #
 # msDropdown is licensed under MIT License.
 # See: https://github.com/marghoobsuleman/ms-Dropdown/blob/master/MIT-LICENSE.txt
 # J1 Template is licensed under MIT License.
 # See: https://github.com/jekyll-one/J1 Template/blob/master/LICENSE
 # -----------------------------------------------------------------------------
 # NOTE:
 # https://github.com/marghoobsuleman/ms-Dropdown
 # https://www.marghoobsuleman.com/image-dropdown/help
 # https://www.marghoobsuleman.com/image-dropdown/advanced-help
 # -----------------------------------------------------------------------------

/*!
 * /**
 *  * MSDropdown - msDropdown.js
 *  * @author: Marghoob Suleman
 *  * @website: https://www.marghoobsuleman.com/
 *  * @version: 4.0.2
 *  * @date: Sun Oct 24 2021 10:46:05 GMT+0200 (GMT+02:00)
 *  * msDropdown is free web component: you can redistribute it and/or modify
 *  * it under the terms of the either the MIT License or the Gnu General Public License (GPL) Version 2
 *  * /
 *//******/ (() => { // webpackBootstrap
/******/ 	"use strict";
var __webpack_exports__ = {};

;// CONCATENATED MODULE: ./src/js/lib/ddmaker.js
/**
 * MSDropdown - ddmaker.js
 * @author: Marghoob Suleman
 * @website: https://www.marghoobsuleman.com/
 * @version: 4.0.3
 * @revision: 6
 * @date: 21st Sep 2021
 * msDropdown is free web component: you can redistribute it and/or modify
 * it under the terms of the either the MIT License or the Gnu General Public License (GPL) Version 2
 */

let _oldC = null;
class ddMaker {

    constructor(ele, settings) {
        let defaultSettings = {
            byJson: {
                data: null, selectedIndex: 0, name: null,
                size: 0, multiple: false, width: 250
                },
            mainCss: 'ms-dd',
            rowHeight: null,
            visibleRows: null,
            showIcon: true,
            zIndex: 9999,
            event:'click',
            style: '',
            childWidth:null,
            childHeight:null,
            enableCheckbox:false, //this needs to be multiple or it will set the element to multiple
            checkboxNameSuffix:'_mscheck',
            showPlusItemCounter:true,
            enableAutoFilter:true,
            showFilterAlways:false,
            showListCounter:false,
            imagePosition:'left',
            errorMessage:'Please select an item from this list',
            on: {create: null,open: null,close: null,add: null,remove: null,change: null,blur: null,click: null,dblclick: null,mousemove: null,mouseover: null,mouseout: null,focus: null,mousedown: null,mouseup: null}
        };
        this.ele = ele;
        //merge with data settings
        this._settings = {...defaultSettings, ...settings};
        this._css = {};
        this._onDocumentClick = null; this._onDocumentKeyDown = null; this._onDocumentKeyUp = null;
        this._isOpen = false;
        this._DOWN_ARROW = 40; this._UP_ARROW = 38; this._LEFT_ARROW=37; this._RIGHT_ARROW=39;
        this._ESCAPE = 27; this._ENTER = 13; this._ALPHABETS_START = 47; this._SHIFT=16;
        this._CONTROL = 17; this._MAC_CONTROL = 91; this._BACKSPACE=8; this._DELETE=46; this._SPACE=32;
        this._shiftHolded = false; this._controlHolded = false;
        this._isFirstTime = true; this._cacheEle = {};
        this._isMouseDown = false; this._itemsArr = [];

        this._css = {dd:this._settings.mainCss+ " ms-pr",
            wrapperDisabled:'disabled',
            headerA:"ms-list-option option-selected",
            header: 'ms-dd-header',
            headerMiddleContent: 'ms-header-middle-content',
            arrow: 'ms-dd-arrow',
            arrowDown: 'ms-dd-pointer-down',
            arrowUp: 'ms-dd-pointer-up',
            headerCounter:'ms-header-counter',
            listOfItems: 'ms-options',
            itemContent:'ms-dd-option-content',
            item: 'ms-list-option',
            itemSpan:'ms-middle',
            itemSpanOpt:'ms-optgroup-padding',
            itemLabel:'ms-dd-label',
            itemImage:'ms-dd-option-image',
            itemDesc: 'ms-dd-desc',
            itemSelected: 'option-selected',
            itemDisabled:'disabled',
            itemEnabled:'enabled',
            optgroup: "ms-optgroup",
            listCounter:'ms-list-counter',
            valueInput:'ms-value-input',
            checkbox:'ms-checkbox',
            imageRight:'ico-align-right'
        };

        //init
        this._wrapper = {};
        this._createByJson();
        this._checkDataSettings();
        this._isList = (this.ele.size>1);
        this._isMultiple =  this.ele.multiple;

        this._enableCheckbox = this._settings.enableCheckbox;

        if (this._isList || this._enableCheckbox.toString() === "true") {
            this._isMultiple = this.ele.multiple = true;
        }

        this._isFilterApplied = false;
        this._nexPrevCounter = 0;

        this._init();

    }

    /**
     * Init
     * @private
     */
    _init() {
        //console.log(this.name, this.selectedIndex)
        this._makeLayout();

        this._updateUiAndValueByIndex(this.selectedIndex);

        if(this.ele.size > 1) {
            this._makeUiAsList(true, this.ele.size);
            this._scrollToItem();
        }

        //adjust child width
        if(this._settings.childWidth !== null) {
            this._wrapper.listOfItems.style.width = this._settings.childWidth;
        }
        //hide original
        this._showHideOriginal(false);


        if(this._settings.showFilterAlways.toString() === "true") {
            this._settings.enableAutoFilter = true;
            this._showHideFilterBox(true);
        }

        if(this.ele.autofocus) {
            this._wrapper.holder.focus();
            this._wrapper.filterInput.focus();
        } else {
            this._wrapper.filterInput.blur();
        }

        this.updateUiAndValue();

        this._fireLocalEventIfExist("create");
        this._fireEventIfExist("onCreate");
    }

    /**
     * Show hide Original
     * @param isShow
     * @private
     */
    _showHideOriginal(isShow=true) {
        if(isShow) {
            this._show(this.ele);
        } else {
            this._hide(this.ele);
        }

    }

    /**
     * Check data settings.
     * Read from select data-* attributes
     * @private
     */
    _checkDataSettings() {
        let dataSet = this._getDataSet(this.ele);
        let settings = this._settings;
        settings.mainCss = dataSet?.mainCss || settings.mainCss;
        settings.showIcon = dataSet?.showIcon || settings.showIcon;
        settings.event = dataSet?.event || settings.event;
        settings.childWidth = dataSet?.childWidth || settings.childWidth;
        settings.childHeight = dataSet?.childHeight || settings.childHeight;
        settings.enableCheckbox = dataSet?.enableCheckbox || settings.enableCheckbox;
        settings.checkboxNameSuffix = dataSet?.checkboxNameSuffix || settings.checkboxNameSuffix;
        /*settings.append = dataSet.append || settings.append;
        settings.prepend = dataSet.prepend || settings.prepend;*/
        settings.enableAutoFilter = dataSet?.enableAutoFilter || settings.enableAutoFilter;
        settings.visibleRows = dataSet?.visibleRows || settings.visibleRows;
        settings.showPlusItemCounter = dataSet?.showPlusItemCounter || settings.showPlusItemCounter;
        settings.errorMessage = dataSet?.errorMessage || settings.errorMessage;
        settings.showFilterAlways = dataSet?.showFilterAlways || settings.showFilterAlways;
        settings.showListCounter = dataSet?.showListCounter || settings.showListCounter;
        settings.imagePosition = dataSet?.imagePosition || settings.imagePosition;

        this._settings = {...this._settings, ...settings};

    }

    /**
     * Set setting attribute
     * @param key
     * @param value
     */
    setSettingAttribute(key, value) {
        this._settings[key] = value;
    }


    /**
     * Create by json
     * @private
     */
    _createByJson() {
        if (this._settings.byJson.data) {
            try {
                let json = this._settings.byJson;
                //this._settings.byJson.data = settings.byJson.data;
                //change element
                let obj = {};
                obj.name = json.name || this.ele.id || "";
                if (json.size>0) {
                    obj.size = json.size;
                }
                if(json.multiple) {
                    obj.multiple = json.multiple;
                }

                let oSelect = this._createEle("select", obj);
                let total = json.data.length;
                for(let i=0;i<total;i++) {
                    let current = json.data[i];
                    let opt = new Option(current.text, current.value);
                    if(current.disabled) {
                        opt.disabled = true;
                    }
                    for(let p in current) {
                        if (current.hasOwnProperty(p) && p.toLowerCase() !== 'text') {
                            let key = `data-${p}`;
                            key = key.replace(/([A-Z])/g, "-$1").toLowerCase(); //replace caps letter with -letter
                            opt.setAttribute(key, current[p]);
                        }
                    }
                    oSelect.options[i] = opt;
                }
                //add this
                this.ele.appendChild(oSelect);

                oSelect.selectedIndex = json.selectedIndex;
                if(json.width) {
                    this.ele.style.width = json.width+'px';
                }

                //now change element for the base ele
                this.ele = oSelect;

            } catch(e) {
                throw "There is an error in json data.";
            }
        }
    }

    /**
     * Scroll to item
     * @param item
     * @param behavior
     */
    _scrollToItem(item, behavior='smooth') {
        item = item || this.uiData.ui;
        if(item) {
            item = item.length > 1 ? item[0] : item;
            this._scrollToIfNeeded(item);
        }
    }

    /**
     * Show filter box
     * @param isShow
     * @private
     */
    _showHideFilterBox(isShow=true) {
        if(isShow) {
            this._show(this._wrapper.filterHolder);
            this._wrapper.filterInput.focus();
            if(this._settings.showFilterAlways.toString() === "false") {
                this._hide(this._wrapper.headerA);
            }
        } else {
            this._wrapper.filterInput.value = "";
            this._hide(this._wrapper.filterHolder);
            this._show(this._wrapper.headerA);
        }

    }

    /**
     * Apply filters
     * @param e
     * @private
     */
    _applyFilters(e) {
        let sText = this._wrapper.filterInput.value;
        if (sText.length === 0) {
            this._show(this._wrapper.headerA);
            this._makeChildren();
            this._isFilterApplied = false;
        } else {

            if(this._settings.showFilterAlways.toString() === "false") {
                this._hide(this._wrapper.headerA);
            }
            if(!this._isOpen) {
                this.open(null);
            }

            //hide all
            let options = [...this.options];
            let filterOptions = options.filter(function(item) {
                return item.nodeName !== "OPTGROUP" && item.disabled === false && item.text.toLowerCase().indexOf(sText.toLowerCase()) >= 0;
            });
            this._makeChildren(filterOptions);
            this._isFilterApplied = true;
            this._nexPrevCounter = -1;
            this._scrollToIfNeeded(null, 0);
        }

    }

    /**
     * Make filter box
     * @return {any}
     * @private
     */
    _makeFilterBox() {
        let div = this._createEle("div", {className:'ms-filter-box'})
        let input = this._createEle("input", {type:"text"});
        div.appendChild(input);
        this._wrapper.filterInput = input;
        this._wrapper.filterHolder = div;

        this._bindEvents(input, "input", (evt)=> {
            this._applyFilters(evt);
        });

        return div;
    }

    /**
     * Make header
     * @return {any}
     * @private
     */
    _makeHeader() {
        let css = this._css;
        let divHeader = this._createEle("div", {className:css.header});
        let headerA = this._createEle("a", {className:css.headerA});
        let headerContent = this._createEle("span", {className:css.headerMiddleContent});
        let arrow = this._createEle("span", {className:css.arrow + ' '+css.arrowDown});
        headerA.appendChild(arrow);
        headerA.appendChild(headerContent);
        divHeader.appendChild(headerA);
        this._wrapper.header = divHeader;
        this._wrapper.headerA = headerA;
        this._wrapper.headerContent = headerContent;
        this._wrapper.arrow = arrow;

        if(this._settings.imagePosition !== "left") {
            headerA.classList.add(css.imageRight);
        }

        this._bindEvents(divHeader, this._settings.event, (evt)=> {
            this.open(evt);
        });

        return divHeader;
    }

    /**
     * Make children
     * @param byOption
     * @return {*}
     * @private
     */
    _makeChildren(byOption=null) {
        let css = this._css;
        let isCheckbox = (this._enableCheckbox.toString() === "true");
        let ul, $this=this;

        /**
         * Make Object
         * @param opts
         * @param counter
         * @return {{opt: *, itemObj: *}}
         * @private
         */
        let _makeObject = function (opts, counter) {
            let opt = {};
            opt = $this._parseOption(opts);
            //{image, title, description, value, text, className, imageCss, index, selected, disabled}
            let itemObj = {
                label: {
                    text:opt.text,
                    css:css.itemLabel
                },
                img: {
                    src:opt.image,
                    css:css.itemImage
                },
                desc: {
                    text:opt.description,
                    css:css.itemDesc
                },
                isDisabled:(opts.disabled || false),
                isSelected:(opts.selected || false),
                isCheckbox:isCheckbox,
                value:opt.value,
                title:opt.title,
                imageCss:`${opt.imageCss} ${opt.className}`,
                counter:counter+1,
                isOptGroup: (opts.nodeName === "OPTGROUP"),
                innerSpanCss:css.itemContent
            };
            return {opt, itemObj};
        };

        /**
         * Bind events
         * @param li
         * @param itemObj
         */
        let bindEvents = function (li, itemObj) {
            if(!itemObj.isDisabled) {
                $this._bindEvents(li, "mouseup", (evt)=> {

                    $this._isMouseDown = false;
                    if(!isCheckbox || evt.target.nodeName !== "INPUT") {
                        if(!$this._isList) {
                            $this.close(evt);
                        }
                    }
                });

                $this._bindEvents(li, "mousedown", (evt)=> {
                    $this._isMouseDown = true;

                    if(!isCheckbox || evt.target.nodeName !== "INPUT") {
                        if($this._shiftHolded && $this._isMultiple) {
                            //multiple select if shift is pressed
                            let oldIndex = $this.selectedIndex;
                            let newIndex = li.index;
                            $this._setSelectedByIndexFromTo(oldIndex, newIndex);
                        } else if($this._controlHolded && $this._isMultiple) {
                            //select another one without resetting
                            $this._setSelectedByItem(li, false, false);
                        } else {
                            //normal click
                            $this._setSelectedByItem(li);
                        }
                    } else {
                        //this is checkbox - make it toggle
                        $this._setSelectedByItemToggle(li._refCheckbox, li);
                    }
                });

                $this._bindEvents(li, "mouseover", (evt)=> {

                    if($this._isMouseDown && $this._isMultiple) {
                        $this._setSelectedByItem(li, false, false);
                    }

                });
            }
        };


        //use old one holder if required
        if(!this._wrapper.listOfItems) {
            ul = this._createEle("ul", {className:css.listOfItems, zIndex: this._settings.zIndex});
            this._wrapper.listOfItems = ul;
        } else {
            ul = this._wrapper.listOfItems;
        }
        ul.innerHTML = ""; //clear old one
        let options = (byOption === null) ? this.ele.children : byOption;
        let optLen = options.length;
        for (let i=0;i<optLen;i++) {
            let current = options[i];
            let parseObj = _makeObject(current, i);
            let opt = parseObj.opt;
            let itemObj = parseObj.itemObj;
            let li = this._createRow(itemObj);

            if(opt.className !== '') {
                li.className = li.className + " "+opt.className;
            }
            if(opt.internalStyle !== '') {
                li.style = opt.internalStyle;
            }

            li.index = opt.index;
            li.setAttribute("data-ms-index", opt.index);
                if(itemObj.isOptGroup) {
                //let make children of optgroup
                let c_options = current.children;
                let c_optLen = c_options.length;
                let ul2 = this._createEle("ul");
                for (let j=0;j<c_optLen;j++) {
                    let c_current = c_options[j];
                    let c_parseObj = _makeObject(c_current, j);
                    let c_opt = c_parseObj.opt;
                    let c_itemObj = c_parseObj.itemObj;
                    let c_li = this._createRow(c_itemObj);

                    if(c_opt.className !== '') {
                        c_li.className = c_li.className + " "+c_opt.className;
                    }
                    if(c_opt.internalStyle !== '') {
                        c_li.style = c_opt.internalStyle;
                    }

                    c_li.index = c_opt.index;
                    c_li.setAttribute("data-ms-index", c_opt.index);
                    if(c_itemObj.isSelected) {
                        this._setSelectedByItem(c_li, true);
                    }
                    bindEvents(c_li, c_itemObj);

                    if(this._settings.imagePosition !== "left") {
                        c_li.classList.add(css.imageRight);
                    }
                    ul2.appendChild(c_li);
                }
                li.appendChild(ul2);
            }
            if(!itemObj.isOptGroup) {
                bindEvents(li, itemObj);
            }
            if(this._settings.imagePosition !== "left") {
                li.classList.add(css.imageRight);
            }
            ul.appendChild(li);

            if(itemObj.isSelected) {
                this._setSelectedByItem(li, true);
            }


        }
        if(this._settings.childHeight !== null) {
            ul.style.maxHeight = this._settings.childHeight+'px';
        }
        return ul;
    }

    /**
     * Make Layout
     * @return {any}
     * @private
     */
    _makeLayout() {
        this.ele.tabIndex = -1;
        let css = this._css;

        let wrapper = this._createEle("div", {tabIndex:0, className:css.dd});

        let name = this.ele.name;
        let isRequired = this.ele.required;

        let valueBox = this._createEle("input", {tabIndex:-1, name:name, type:"text", className:this._css.valueInput, required:isRequired});
        wrapper.appendChild(valueBox);
        this.ele.required = false;
        this.ele.name = "";

        //This is for multiple select
        let moreValueBox = this._createEle("div", {className:"more", style:"display:none"});
        wrapper.appendChild(moreValueBox);

        this._wrapper.valueBox = valueBox;
        this._wrapper.moreValueBox = moreValueBox;


        //Make header
        let divHeader = this._makeHeader();

        //Filter box
        let filterBox = this._makeFilterBox();
        divHeader.appendChild(filterBox);
        this._showHideFilterBox(false);

        //make options
        let ul = this._makeChildren();
        wrapper.appendChild(divHeader);
        wrapper.appendChild(ul);

        this._wrapper.holder = wrapper;


        //add in document
        this._insertAfter(wrapper, this.ele);

        //hide children
        this._hide(ul);

        if(this.disabled) {
            wrapper.classList.add(css.wrapperDisabled);
        }

        let style = this._getInternalStyle(this.ele);
        wrapper.setAttribute("style", style);

        if(this._settings.byJson.data !== null) {
            wrapper.setAttribute("style", `width:${this._settings.byJson.width}px`);
        }


        //clear
        let div = this._createEle("div", {style:"clear:both"});
        wrapper.appendChild(div);

        this._bindEvents(this._wrapper.holder, "focus", (evt) => {
            if(this._isList) {
                this._bindDocumentEvents(null, false, true);
            } else {
                if(_oldC) {
                    _oldC.close(null);
                    _oldC = null;
                }
                this._bindDocumentEvents(null, true, true);
                _oldC = this;
            }
            this._fireLocalEventIfExist("focus");
            this._fireEventIfExist("focus");
        });

        this._bindEvents(this._wrapper.holder, "blur", (evt) => {
            if(this._isList) {
                this._unbindDocumentEvents();
            }
            this._fireLocalEventIfExist("blur");
            this._fireEventIfExist("blur");
        });

        this._bindEvents(this._wrapper.holder, "dblclick", (evt) => {
            this._fireLocalEventIfExist("blur");
            this._fireEventIfExist("blur");
        });

        //For custom message on required
        this._bindEvents(valueBox, "invalid", (evt)=> {
            evt.target.setCustomValidity("");
            if (!evt.target.validity.valid) {
                evt.target.setCustomValidity(this._settings.errorMessage);
            }
        });

        this._bindEvents(valueBox, "input", (evt)=> {
            evt.target.setCustomValidity("");
        });

        let events = ["click", "dblclick", "mousemove", "mouseover", "mouseout", "mousedown", "mouseup"];
        for (let i=0,len=events.length;i<len;i++) {
            let evtName = events[i];
            this._bindEvents(this._wrapper.holder, evtName, (evt) => {
                this._fireLocalEventIfExist(evtName);
                this._fireEventIfExist(evtName);
            });

        }

        return wrapper;
    }

    /**
     * Create a row
     * @param obj
     * @return {any}
     */
    _createRow(obj) {

        let itemCss = (obj.isOptGroup) ? this._css.optgroup : this._css.item;

        let li = this._createEle("li", {className:itemCss});
       if(obj.isCheckbox && !obj.isOptGroup) {
            let checkbox = this._createEle("input", {tabIndex:-1, className:this._css.checkbox,type:"checkbox", disabled:obj.isDisabled, "checked":false, value:obj.value, name:this._wrapper.valueBox.name+this._settings.checkboxNameSuffix+"[]"})
            li.appendChild(checkbox);
            li._refCheckbox = checkbox;
        }

        let optTxtCss = (obj.isOptGroup) ? " "+this._css.itemSpanOpt : "";

        let itemSpan = this._createEle("span", {className:this._css.itemSpan+optTxtCss});

        let text = (this._settings.showListCounter.toString() === "true") ? `<span class='${this._css.listCounter}'>${obj.counter}</span> ${obj.label.text}` : obj.label.text;

        let textSpan = this._createEle("span", {className:obj.label.css}, text);

        let itemInnerSpan = this._createEle("span", {className:obj.innerSpanCss});
        itemInnerSpan.appendChild(textSpan);

        if(obj.img.src !== null) {
            let img = this._createEle("img", {className:obj.img.css, src:obj.img.src});
            itemSpan.appendChild(img);
        }

        if(obj.img.src === null && obj.imageCss.replace(/\s/g, '') !== '') {
            let imgSpan = this._createEle("span", {className:obj.img.css+' '+obj.imageCss}, "&nbsp;");
            itemSpan.appendChild(imgSpan);
        }

        if(obj.desc.text !== null) {
            let spanDesc = this._createEle("span", {className:obj.desc.css}, obj.desc.text);
            itemInnerSpan.appendChild(spanDesc);
        }

        itemSpan.appendChild(itemInnerSpan);



        li.appendChild(itemSpan);

        if(obj.isDisabled) {
            li.classList.add(this._css.itemDisabled);
        } else if(!obj.isOptGroup) {
            li.classList.add(this._css.itemEnabled);
        }

        if(obj.title !== '') {
            li.title = obj.title;
        }
        return li;
    }

    /**
     * Parse option
     * @param opt
     * @return {{image: *, description: *, index: *, className: *, disabled: *, text: *, imageCss: *, title: *, internalStyle: *, value: *, selected: *}}
     * @private
     */
    _parseOption(opt) {

        let image = null, title ='', description='', value='', text='', className='', imageCss = '', index=-1, selected, disabled, internalStyle;
        if (opt !== undefined) {
            let optionType = opt.nodeName;
            let dataSet = opt.dataset;
            if(optionType === "OPTGROUP") {
                text = opt.label;
            } else {
                text = opt.text;
                value = opt.value || text;
            }
            index = opt.index;
            selected = opt.selected;
            disabled = opt.disabled;

            className = opt.className || "";
            title = dataSet.title || '';
            description = dataSet.description || '';
            image = dataSet.image || image;
            imageCss = dataSet.imageCss || '';
            internalStyle = this._getInternalStyle(opt);

        }

        return {image, title, description, value, text, className, imageCss, index, selected, disabled, internalStyle};

    }

    /**
     * remove old selected
     * @private
     */
    _removeOldSelected() {
        let oldSelected = this._getAllEle("ul li."+this._css.itemSelected, this._wrapper.holder);

        //remove old selected
        for(let i=0;i<oldSelected.length;i++) {
            oldSelected[i].classList.remove(this._css.itemSelected);
            if(this._isMultiple && this._enableCheckbox.toString() === "true") {
                oldSelected[i]._refCheckbox.checked = false;
                //this._getEle("input", oldSelected[i]).checked = false;
            }
        }

    }

    /**
     * Select by index a to b
     * @param indexA
     * @param indexB
     * @private
     */
    _setSelectedByIndexFromTo(indexA, indexB) {

        let min = Math.min(indexA, indexB);
        let max = Math.max(indexA, indexB);
        let options = this.optionsUI;

        for(let i=min;i<=max;i++) {

            this._setSelectedByItem(options[i], false, false);
        }
    }
    /**
     * Toggle Select
     * @private
     * @param checkbox
     * @param li
     */
    _setSelectedByItemToggle(checkbox, li) {
        let isChecked = !checkbox.checked;
        let index = li.index;
        if(isChecked) {
            li.classList.add(this._css.itemSelected);
            this.ele.options[index].selected = true;
        } else {
            li.classList.remove(this._css.itemSelected);
            this.ele.options[index].selected = false;
        }
        this.updateUiAndValue();
    }

    /**
     * Set selected by an item
     * @param ele
     * @param dontThink
     * @param resetOldSelected
     * @private
     */
    _setSelectedByItem(ele, dontThink=false, resetOldSelected=true) {

        if(dontThink && ele) {

            ele.classList.add(this._css.itemSelected);

        } else {
            let index = ele.index;

            if(resetOldSelected === true) {
                this._removeOldSelected();
                this.ele.selectedIndex = index
                //this.selectedIndex = index;
            } else {
                //it could be multiple
                this.ele.options[index].selected = true;
            }
            ele?.classList?.add(this._css.itemSelected);
            this.updateUiAndValue();
        }
        if(this._enableCheckbox.toString() === "true") {
            if(ele?._refCheckbox) {
                ele._refCheckbox.checked = true;
            }
        }
        if(this._isFirstTime === false) {
            this._fireLocalEventIfExist("change");
            this._fireEventIfExist("change");
        }
        this._isFirstTime = false;
    }

    /**
     * Set selected by an select option item
     * @param option
     * @param dontThink
     * @private
     */
    _setSelectedByOptionItem(option, dontThink=false) {
        let index = option.index;
        let dataAndUI = this._getDataAndUI(index);
        this._setSelectedByItem(dataAndUI.ui, dontThink);
    }

    /**
     * Update header ui
     * @param byData
     * @param innerHTML
     * @private
     */
    _updateHeaderUI(byData=null, innerHTML=null) {

        let dataAndUI = (byData === null) ? this.uiData : byData;

        let text = this._isArray(dataAndUI.index) ? dataAndUI.ui[0].innerHTML : null;

        this._wrapper.headerContent.innerHTML = (innerHTML !== null) ? innerHTML : text || dataAndUI?.ui?.innerHTML || "&nbsp;";

        let contentHolder = this._getEle("."+this._css.itemLabel, this._wrapper.headerContent);

        if(this._settings.showPlusItemCounter.toString() === "true" && dataAndUI.ui !== null && dataAndUI.ui.length > 1) {
            contentHolder.innerHTML = contentHolder.innerHTML +  `<span class="${this._css.headerCounter}">&nbsp; (+${dataAndUI.ui.length-1})</span>`;
        }

        if(this._settings.showIcon.toString() === "false") {
            let img = this._getEle("img", this._wrapper.headerContent);
            if(img) {
                this._hide(img);
            }
        }

        this._setTitleMinHeight(false);

    }

    /**
     * Find index By index prop
     * @param index
     * @return {null|*}
     * @private
     */
    _findElementByIndexProp(index) {
        let options = this._getAllEle(`ul li.${this._css.item}`, this._wrapper.holder);
        let total = options.length;
        for(let i=0;i<total;i++) {
            let current = options[i];
            if(current.index === index) {
                return options[i];
            }
        }
        return null;
    }

    /**
     * Get data and value
     * @param byIndex
     * @return {{data: *, ui: *, index: *, option: *, multiple:boolean}}
     * @private
     */
    _getDataAndUI(byIndex=null) {

        let ele = this.ele;
        let data, ui, option=null, index=-1;
        let obj, $this=this;
        let isArray = false;
        let getByIndex = function(byIndex) {
            let option = ele.options[byIndex];
            let data = $this._parseOption(option);
            let index = byIndex;
            let ui = $this._findElementByIndexProp(index);
            return {option, data, index, ui};
        };

        if(byIndex !== null) {
            obj = getByIndex(byIndex);
            option = obj.option;
            data = obj.data;
            index = obj.index;
            ui = obj.ui;
        } else {
            ui = this._getAllEle("ul li." + this._css.itemSelected, this._wrapper.holder);

            // if this is multiple
            if (ui.length > 1) {
                let data_a = [], opt_a = [], ind_a = [], ui_a = [];
                for (let i = 0; i < ui.length; i++) {
                    obj = getByIndex(ui[i].index);
                    data_a.push(obj.data);
                    opt_a.push(obj.option);
                    ind_a.push(obj.index);
                    ui_a.push(obj.ui);
                }
                data = data_a;
                option = opt_a;
                index = ind_a;
                ui = ui_a;
                isArray = true;
            } else {
                obj = getByIndex(ui[0]?.index || this.selectedIndex);
                option = obj.option || null;
                data = obj.data || null;
                index = obj.index || -1;
                ui = obj.ui || null;
            }
        }


        return {data, ui, index, option, isArray};
    }

    /**
     * Is Array
     * @param obj
     * @return {boolean}
     * @private
     */
    _isArray = function(obj) {
        return (Object.prototype.toString.call(obj) === "[object Array]");
    };

    /**
     * Update Header UI by data
     * @param byData
     *
     */
    updateUiAndValue(byData=null) {
        let dataAndUI = (byData === null) ? this.uiData : byData;
        this._updateHeaderUI(dataAndUI);
        let valueBox = this._wrapper.valueBox;
        valueBox.value = this.ele.value;

        //this is multiple
        if(this._isMultiple && valueBox.name.substr(valueBox.name.length-2, valueBox.name.length) === "[]") {
            this._wrapper.moreValueBox.innerHTML = "";
            for (let i=1;i<dataAndUI.data.length;i++) {
                let valueBoxM = this._createEle("input", {type:"hidden", name:valueBox.name, value:dataAndUI.data[i].value});
                this._wrapper.moreValueBox.appendChild(valueBoxM);
            }
        }
    }

    /**
     * Update Ui by index
     * @param index
     * @private
     */
    _updateUiAndValueByIndex(index) {
        let dataAndUI = this._getDataAndUI(index);
        //this._updateHeaderUI(dataAndUI);
        this.updateUiAndValue(dataAndUI);
    }

    /****  Elements and Helpers ****/
    /**
     * Create an element
     * @param nm
     * @param attr
     * @param html
     * @return {any}
     * @private
     */
    _createEle(nm, attr, html) {
        let tag = document.createElement(nm);
        if (attr) {
            for(let i in attr) {
                if(i === "style") {
                    tag.style.cssText = attr[i];
                } else {
                    tag[i]  = attr[i];
                }
            }
        }
        if (html) {
            tag.innerHTML = html;
        }
        return tag;
    }

    /**
     * Get one element
     * @param ele
     * @param where
     * @return {*}
     * @private
     */
    _getEle(ele, where=null) {
        return (where === null) ? document.querySelector(ele) : where.querySelector(ele);
    }

    /**
     * Get all elements
     * @param ele
     * @param where
     * @return {any}
     * @private
     */
    _getAllEle(ele, where=null) {
        return where === null ? document.querySelectorAll(ele) : where.querySelectorAll(ele);
    }

    /**
     * Get internal style of an element
     * @param ele
     * @return {string|*}
     * @private
     */
    _getInternalStyle(ele) {
        return (ele.style === undefined) ? "" : ele.style.cssText;
    }

    /**
     * Toggle show
     * @param ele
     * @private
     */
    _toggleShow(ele) {
        ele.style.display = (ele.style.display === "none" || ele.style.display === "") ? "inherit" : "none";
    }

    /**
     * Show an element
     * @param ele
     * @private
     */
    _show(ele, dispaly="block") {
        ele.style.display = dispaly;
    }

    /**
     * Hide an element
     * @param ele
     * @private
     */
    _hide(ele) {
        ele.style.display = "none";
    }

    /**
     * Insert an element after an element
     * @param ele
     * @param targetEle
     * @return {*}
     * @private
     */
    _insertAfter(ele, targetEle) {
        return targetEle.parentNode.insertBefore(ele, targetEle.nextSibling);
    }

    /**
     * Not using for now
     * Insert an element before a target element
     * @param ele
     * @param targetEle
     * @return {*}
     * @private
     */
    _insertBefore(ele, targetEle) {
        return targetEle.insertBefore(ele, targetEle);
    }

    /**
     * get index of a li - not in used
     * @param li
     * @return {number}
     * @private
     */
    _getIndex(li) {
        let LIs = this._getAllEle("ul li",this._wrapper.holder);
        return [...LIs].indexOf(li);
    }

    /**
     * Get properties or a property - not in used
     * @param ele
     * @param key
     * @return {null|*}
     * @private
     */
    _getProp(ele, key) {
        let obj = {};
        for (let i = 0; i < ele.attributes.length; i++) {
            let k = ele.attributes[i].nodeName;
            let v = ele.attributes[i].nodeValue;
            if(key === k) {
                return v;
            }
            obj[k] = v;
        }
        return (typeof key === "undefined") ? obj : null;
    }

    /**
     * Get dataset
     * @param ele
     * @param key
     * @return {*|null}
     * @private
     */
    _getDataSet(ele, key=null) {
        return (key === null) ? ele.dataset : ele.dataset[key] || null;
    }

    /**
     * Bind an event
     * @param ele
     * @param type
     * @param cb
     * @private
     */
    _bindEvents(ele, type, cb) {
        ele.addEventListener(type, cb);
    }

    /**
     * Remove events
     * @param ele
     * @param type
     * @param fn
     * @private
     */
    _unbindEvents(ele, type, fn) {
        ele.removeEventListener(type, fn);
    }

    /**
     * Adjust child height
     * @param row
     * @private
     */
    _adjustChildHeight(row=null) {
        row = (row === null) ? parseInt(this._settings.visibleRows) : row;
        if(row !== null) {
            let li = this._getEle("li[data-ms-index='0']", this._wrapper.listOfItems);
            let size = (this._settings.rowHeight !== null) ? this._settings.rowHeight : li.clientHeight;
            this._wrapper.listOfItems.style.height = (row * size)+'px';
        }

    }

    /**
     * Set max height
     * @param autoHeightByMax
     * @private
     */
    _setTitleMinHeight(autoHeightByMax=true) {
        let max = 0;
        if(autoHeightByMax === true) {
            let lis = this._getAllEle("li", this._wrapper.listOfItems);
            let len = lis.length;
            for(let i=0;i<len;i++) {
                let current = lis[i];
                max = (current.clientHeight > max) ? current.clientHeight : max;
            }
        } else {
            //this is after selection
            max = this._wrapper.headerA.clientHeight;
        }

        this._wrapper.header.style.minHeight = max+"px";
    }


    /**
     * Make Ui as list
     * @param val
     * @param row
     * @private
     */
    _makeUiAsList(val, row) {
        if(val === true) {
            //make ui as list
            //update height
            this._hide(this._wrapper.header);
            this.open(null, true);
            this._adjustChildHeight(row);
            this._wrapper.listOfItems.style.position = "relative";
            this._wrapper.listOfItems.style.display = "inline-block";
            this._wrapper.listOfItems.style.zIndex = 0;
            this._wrapper.holder.style.zIndex = 0;
            this._isList = true;
        } else {
            //reset to dropdown
            this._show(this._wrapper.header);
            this._wrapper.listOfItems.style.height = null;
            this._wrapper.listOfItems.style.position = "absolute";
            this._wrapper.listOfItems.style.zIndex = this._settings.zIndex;
            this._wrapper.holder.style.zIndex = 0;
            this._isList = false;
            this.close(null);
        }
    }

    /**
     * Bind document events
     * @param evt
     * @private
     */
    _bindDocumentEvents(evt, documentClick=true, documentKeyDown=true) {

        this._unbindDocumentEvents();

        this._onDocumentClick = (evt) => {
            //is outside?
            let box = this._wrapper.listOfItems.getBoundingClientRect();
            let headerBox = this._wrapper.header.getBoundingClientRect();
            let areaX = box.left + box.width;
            let areaY = (headerBox.top + box.height+headerBox.height);

            if(evt.clientX < box.left || evt.clientX > areaX || evt.clientY < headerBox.y || evt.clientY > areaY) {
                this.close(evt);
            }
        };

        this._onDocumentKeyDown = (evt) => {
            switch (evt.keyCode) {
                case this._DOWN_ARROW:
                case this._RIGHT_ARROW:
                    evt.preventDefault();
                    evt.stopPropagation();
                    this._show(this._wrapper.listOfItems);
                    this._isOpen = true;
                    this.next();
                    break;
                case this._UP_ARROW:
                case this._LEFT_ARROW:
                    evt.preventDefault();
                    evt.stopPropagation();
                    this.previous();

                    break;
                case this._ESCAPE:
                case this._ENTER:
                    evt.preventDefault();
                    evt.stopPropagation();
                    this.close(null);
                    break;
                case this._SHIFT:
                    this._shiftHolded = true;

                    break;
                case this._CONTROL:
                case this._MAC_CONTROL:
                    this._controlHolded = true;
                    break;
                case this._SPACE:
                    this._show(this._wrapper.listOfItems);
                    this._isOpen = true;
                    break;
                default:
                    if (evt.keyCode >= this._ALPHABETS_START && this._isList === false && this._settings.enableAutoFilter.toString() === "true") {
                        this._showHideFilterBox(true);
                    }
                    this._shiftHolded = false;
                    this._controlHolded = false;
                    break;
            }
        };

        this._onDocumentKeyUp = (evt) => {
            this._shiftHolded = false;
            this._controlHolded = false;
        };

        if(documentClick === true) {
            this._bindEvents(document, "mouseup", this._onDocumentClick);
        }

        if(documentKeyDown === true) {
            this._bindEvents(document, "keydown", this._onDocumentKeyDown);
            this._bindEvents(document, "keyup", this._onDocumentKeyUp);

        }

    }

    /**
     * Unbind document events
     * @private
     */
    _unbindDocumentEvents() {
        //remove events
        if(this._onDocumentClick !== null) {
            this._unbindEvents(document, "mouseup", this._onDocumentClick);
        }
        if(this._onDocumentKeyDown !== null) {
            this._unbindEvents(document, "keydown", this._onDocumentKeyDown);
        }
        if(this._onDocumentKeyUp !== null) {
            this._unbindEvents(document, "keyup", this._onDocumentKeyUp);
        }


        this._onDocumentClick = null;
        this._onDocumentKeyDown = null;
        this._onDocumentKeyUp = null;
    }

    /**
     * Scroll if needed
     * @param item
     * @param pos
     * @param goingWhere
     * @private
     */
    _scrollToIfNeeded(item=null, pos=null, goingWhere="next") {
        let child = this._wrapper.listOfItems;
        let childBound = child.getBoundingClientRect();
        if(item === null && pos !== null) {
            child.scrollTop = pos;
        }
        //if scroll is needed
        item = (item !== undefined) ? item : this._getEle( "li." + this._css.itemSelected);
        if (item) {
            let itemPos = item.offsetTop;
            let ch = child.clientHeight;
            let itemHeight = (item.clientHeight); //for next

            if ((itemPos+itemHeight) - child.scrollTop > ch && goingWhere==='next') {
                child.scrollTop = (itemPos+itemHeight) - ch;
            } else if((itemPos - child.scrollTop) < 0   && goingWhere==='previous') {
                child.scrollTop = (itemPos);
            }
        }
    }

    /**
     * Fire event that is bind on settings
     * @param evt_n
     * @private
     */
    _fireLocalEventIfExist(evt_n, data=null) {
        if (typeof this._settings.on[evt_n] === "function") {
            let dataAndUI = (data===null) ? this._getDataAndUI() : data;
            let fn = this._settings.on[evt_n];
            try {
                fn(dataAndUI);
            } catch (e) {
                console.error(e.message);
            }

        }
    }

    /**
     * Fire event if exist
     * @param evt_n
     * @return {boolean}
     * @private
     */
    _fireEventIfExist(evt_n) {
        //data event
        if(this.ele.dataset[evt_n]) {
            let fn = new Function(this.ele.dataset[evt_n]);
            try {
                fn();
            } catch (e) {
                console.error(e.message);
            }
        }

        //check if original has some
        if (this._has_handler(evt_n).hasEvent) {
            if (this._has_handler(evt_n).byElement) {
                try {
                    this.ele[evt_n]();
                } catch (e) {
                    try {
                        this.ele["on" + evt_n]();
                    }catch (e2) {

                    }
                }

            } else if (this._has_handler(evt_n).byJQuery) {
                switch (evt_n) {
                    case "keydown":
                    case "keyup":
                            //key down/up will check later
                        break;
                    default:
                        try {
                            if(typeof jQuery !== "undefined") {
                                jQuery(this.ele).triggerHandler(evt_n);
                            }
                        } catch (e) {
                            //silence is bliss
                        }

                        break;
                }
            }
            return false;
        }
    }

    /**
     * Has any event
     * @param name
     * @return {{byJQuery: boolean, hasEvent: boolean, byElement: boolean}}
     * @private
     */
    _has_handler(name) {
        //True if a handler has been added in the html.
        let evt = {byElement: false, local:false, byJQuery: false, hasEvent: false};

        if (this._settings.on[name] !== null) {
            evt.hasEvent = true;
            evt.local = true;
        }

        //console.log(name)
        try {
            //console.log(obj.prop("on" + name) + " "+name);
            if (this._getProp(this.ele, "on" + name) !== null) {
                evt.hasEvent = true;
                evt.byElement = true;
            }
        } catch(e) {
            //console.log(e.message);
        }
        // True if a handler has been added using jQuery.
        if(typeof jQuery !== "undefined") {
            let obj = jQuery(this.ele);
            let evs;
            if (typeof jQuery?._data === "function") { //1.8
                evs = jQuery?._data(this.ele, "events");
            } else {
                evs = obj.data("events");
            }
            if (evs && evs[name]) {
                evt.hasEvent = true;
                evt.byJQuery = true;
            }
        }
        return evt;
    }

    /*****************  Public methods and props *********** /
     /**
     * Add an item to select
     * Object can be pass as below
     * new Option("Label", "value") or
     * {text:"Label", value:"value"}
     * or Label as string
     * or full object ie {text:"", value:"", description:'', image:'', className:'' title:'', imageCss:''}
     * @param obj
     * @param index
     */

    add(obj, index=null) {
        //
        let text, value, title, image, description, imageCss;
        let opt;
        if(obj instanceof HTMLOptionElement) {
            opt = obj;
        } else if(typeof obj === "string") {
            //passing as string
            text = value = obj;
            opt = new Option(text, value);
        } else if(obj instanceof Object) {
            text = obj.text || '';
            value = obj.value || text;
            title = obj.title || '';
            image = obj.image || '';
            imageCss = obj.imageCss || '';
            description = obj.description || '';
            opt = new Option(text, value);
            opt.setAttribute("data-description", description);
            opt.setAttribute("data-image", image);
            opt.setAttribute("data-title", title);
            opt.setAttribute("data-image-css", imageCss);
        }
        this.ele.add(opt, index);
        this._makeChildren();
        this._fireLocalEventIfExist("add");
    }

    /**
     * Remove an item from select
     * @param index
     */
    remove(index) {
        let uiAndData = this._getDataAndUI(index);
        this.ele.remove(index);
        this._makeChildren();
        this._fireLocalEventIfExist("remove", uiAndData);
        return uiAndData;
    }

    /**
     * Move to next index
     */
    next() {
        let $this = this;
        let allOptions = this.optionsUI;
        let totalOpt = allOptions.length;
        let counterStart;
        if(this._isFilterApplied) {
            counterStart = this._nexPrevCounter;
        } else {
            counterStart = this.selectedIndex;
        }

        let _getNextElem = function() {
            let i = counterStart;
            for(i;i<totalOpt;i++) {
                let next = i+1;
                next = next >= totalOpt ? totalOpt-1 : next;
                $this._nexPrevCounter++;
                if(!allOptions[next].classList.contains($this._css.itemDisabled)) {
                    return allOptions[next];
                }
            }
            return null;
        };

        if(totalOpt > 0) {
            let nextEle = _getNextElem();
            if(nextEle) {
                this._setSelectedByItem(nextEle, false, true);
                this._scrollToIfNeeded(nextEle);
            }
        }

    }

    /**
     * Move to previous index
     */
    previous() {
        let $this = this;
        let allOptions = this.optionsUI;//$this._getAllEle(`li.${$this._css.item}`, $this._wrapper.listOfItems);
        let totalOpt = allOptions.length;
        let counterStart;
        if(this._isFilterApplied) {
            counterStart = this._nexPrevCounter;
        } else {
            counterStart = this.selectedIndex;
        }
        let _getPreviousElem = function(ele) {
            let i = counterStart;
            for(i;i>0;i--) {
                let next = i-1;
                next = next >= 0 ? next: 0;
                $this._nexPrevCounter--;
                if(!allOptions[next].classList.contains($this._css.itemDisabled)) {
                    return allOptions[next];
                }
            }
            return null;
        };

        if(allOptions.length > 0) {
            let prevEle = _getPreviousElem();
            if(prevEle) {
                this._setSelectedByItem(prevEle, false, true);
                this._scrollToIfNeeded(prevEle, null,"previous");
            }
        }

    }

    /**
     * Open this dropdown
     */
    open(evt, justOpen=false) {

        if (this.disabled) {
            return;
        }
        if(!this._isOpen) {
            this._isOpen = true;
            this._show(this._wrapper.listOfItems);

            //don't bind event if just opening - useful when making as list
            if(justOpen === false) {
                this._bindDocumentEvents(evt);
            }
            //Change arrow
            this._wrapper.arrow.classList.remove(this._css.arrowDown);
            this._wrapper.arrow.classList.add(this._css.arrowUp);
            this._adjustChildHeight();
            this._scrollToItem();

            this._fireLocalEventIfExist("open");

        } else {
            this.close(null);
        }
    }

    /**
     * Close this dropdown
     * @param evt
     */
    close(evt) {
        let isList = this._isList;
        let isDisable = false; // clicking on disabled list - it can be true based on below statement

        if(evt !== null) {
            evt.stopImmediatePropagation();
            let li = evt.target.closest('li');
            isDisable = (li !== null) ? li.classList.contains("disabled") : false;
        }

        if (this.disabled || isList || isDisable) {
            return;
        }
        this._scrollToIfNeeded(null, 0);
        this._hide(this._wrapper.listOfItems);
        this._wrapper.arrow.classList.add(this._css.arrowDown);
        this._wrapper.arrow.classList.remove(this._css.arrowUp);

        //reset few things
        this._isOpen = false;
        this._isMouseDown = false;
        this._shiftHolded = false;
        this._controlHolded = false;
        this._isFilterApplied = false;
        this._wrapper.filterInput.value = "";
        this._wrapper.filterInput.blur();
        if(this._settings.showFilterAlways.toString() === "false") {
            this._showHideFilterBox(false);
        }
        this._applyFilters()
        this._unbindDocumentEvents();

        this._updateHeaderUI();

        //reset list if required
        if(this.ele.length !== this._getAllEle(`li.${this._css.item}`, this._wrapper.listOfItems).length) {
            this._makeChildren();
            this.updateUiAndValue();
        }

        this._fireLocalEventIfExist("close");

    }

    /**
     * Return named item element with data
     * @param name
     * @param withData
     */
    namedItem(name, withData=false) {
        let obj = null;
        let ele = this.ele.querySelector(`option[name='${name}']`);
        if(ele && withData) {
            obj = {};
            let data = this._parseOption(ele);
            obj.option = ele;
            obj.data = data;
        } else {
            obj = ele;
        }
        return obj;
    }

    /**
     * Get data by index
     * @param index
     * @param withData
     */
    item(index, withData=false) {
        let obj = null;
        let ele = this.ele.options[index];
        if(ele && withData) {
            obj = {};
            let data = this._parseOption(ele);
            obj.option = ele;
            obj.data = data;
        } else {
            obj = ele;
        }
        return obj;
    }

    /**
     * Show hide or get status of visibility
     * @param isShow
     * @return {boolean}
     */
    visible(isShow=null) {

        if(isShow === true) {
            this._show(this._wrapper.holder, "inline-block");
        } else if(isShow === false) {
            this._hide(this._wrapper.holder);
        }
        if(isShow === null) {
            return (this._wrapper.holder.style.display !== "none");
        }
    }

    /**
     * Calculate item height and set child height
     * @param numberOfRows
     */
    showRows(numberOfRows) {
        this._settings.visibleRows = (numberOfRows > this.length) ? this.length : numberOfRows;
        this._adjustChildHeight();
    }

    /**
     * Alias of showRows - undecided
     * @param numberOfRows
     */
    visibleRows(numberOfRows) {
        this.showRows(numberOfRows);
    }

    /**
     * Add event listener
     * @param type
     * @param fn
     */
    on(type, fn) {
       //this._bindEvents(this.ele, type, fn);
        this._settings.on[type] = fn;
    }

    /**
     * Remove event listener
     * @param type
     * @param fn
     */
    off(type, fn) {
        //this._unbindEvents(this.ele, type, fn);
        this._settings.on[type] = null;
    };

    /**
     * Remake Everything
     */
    refresh() {
        this._makeChildren();
        this.updateUiAndValue();
    }

    /**
     * Destroy UI
     */
    destroy() {
        //show original
        this._show(this.ele);
        this.ele.required = this._wrapper.valueBox.required;
        this.ele.name = this._wrapper.valueBox.name;
        this._wrapper.holder.parentNode.removeChild(this._wrapper.holder);
    }


    /*** Props ***/
    /**
     * Get selected index
     * @return {*}
     */
    get selectedIndex() {
        return this.ele.selectedIndex;
    }

    /**
     * Set Index
     * @param index
     */
    set selectedIndex(index) {
        let $this = this;
        let selectNow = function (ind) {
            $this.ele.selectedIndex = ind;
            if(ind === -1) {
                //blank
                $this._updateHeaderUI(null, "");
                $this._removeOldSelected();
            } else {
                $this._setSelectedByOptionItem($this.ele.options[ind]);
            }
        };

        if(index < this.length && !this._isArray(index)) {
            selectNow(index);
        } else {
            if(this._isMultiple  && this._isArray(index)) {
                for (let i=0,len=index.length;i<len;i++) {
                    if(index[i] < this.length && index[i] !== -1) {
                        this._setSelectedByOptionItem(this.ele.options[index[i]], i>0);
                    }
                }
                this._updateHeaderUI(null);
            } else {
                selectNow(index);
            }
        }

    }

    /**
     * Get options
     * @return {*}
     */
    get options() {
        return this.ele.options;
    }

    /**
     * Set options length
     * @param option
     */
    set options(option) {

        if(option instanceof HTMLOptionElement) {
            this.ele.add(option);
            this._makeChildren();
            this.updateUiAndValue();
        } else if (typeof option === "number") {
            this.ele.length = option;
            this._makeChildren();
            this.updateUiAndValue();
        }
    }

    /**
     * get options UI
     * @return {any}
     */
    get optionsUI() {
        if(this._cacheEle["allItems"]) {
           //return this._cacheEle["allItems"];
        }
        return this._cacheEle["allItems"] = this._getAllEle(`li.${this._css.item}`, this._wrapper.listOfItems);
    }

    /**
     * Get length
     * @return {*}
     */
    get length() {
        return this.ele.length;
    }

    /**
     * Set length
     * @param size
     */
    set length(size) {
        this.ele.options.length = size;
        this._makeChildren();
        this.updateUiAndValue();
    }


    /**
     * Get value
     * @return {*}
     */
    get value() {
        return this.ele.value;
    }

    /**
     * Set value
     * @param val
     */
    set value(val) {
        this.ele.value = val;
        this.selectedIndex = this.ele.selectedIndex;
    }

    /**
     * get selected text
     * @return {string}
     */
    get selectedText() {
        return ( this.selectedIndex >=0 ) ? this.ele.options[this.selectedIndex].text : ""
    }

    /**
     * Check if this is disabled
     * @return {boolean | * | Function}
     */
    get disabled() {
        return this.ele.hasAttribute('disabled');
    }

    /**
     * Set disabled
     * @param val
     */
    set disabled(val) {
        if (val) {
            this.ele.setAttribute('disabled', '');
            this._wrapper.holder.classList.add(this._css.wrapperDisabled);
        } else {
            this.ele.removeAttribute('disabled');
            this._wrapper.holder.classList.remove(this._css.wrapperDisabled);
        }
    }

    /**
     * Get form name if this is inside a form
     * @return {*}
     */
    get form() {
        return this.ele.form;
    }


    /**
     * Get multiple
     * @return {*}
     */
    get multiple() {
        return this.ele.multiple;
    }

    /**
     * Set multiple
     * @param val
     */
    set multiple(val) {
        if (val) {
            this.ele.setAttribute('multiple', '');
            this._enableCheckbox = this._settings.enableCheckbox;
        } else {
            this.ele.removeAttribute('multiple');
        }
        this._isMultiple = val;
        //reset if this is not multiple
        if(!val) {
            this.selectedIndex = this.ele.selectedIndex;
            this._enableCheckbox = false;
        }
        this._makeChildren();
    }

    /**
     * Get the name
     * @return {*}
     */
    get name() {
        if(this._wrapper?.valueBox) {
            return this._wrapper.valueBox.name || "";
        }
        return this.ele.name;
    }

    /**
     * Set the name
     * @param val
     */
    set name(val) {

        if(this._wrapper?.valueBox) {
            this._wrapper.valueBox.name = val;
        } else {
            this.ele.name = val;
        }


    }

    /**
     * Get required
     * @return {*}
     */
    get required() {
        return this._wrapper.valueBox.required;
    }

    /**
     * Set required
     * @param val
     */
    set required(val) {
        if (val) {
            this._wrapper.valueBox.setAttribute('required', true);
            //update now
        } else {
            this._wrapper.valueBox.removeAttribute('required');
        }
    }

    /**
     * return the size/height of the dropdown
     * @return {*}
     */
    get size() {
        return this.ele.size;
    }

    /**
     * Change the height of the element
     * @param val
     */
    set size(val) {
        this.ele.size = val;
        this._makeUiAsList(val > 1, val);
    }


    /**
     * Get selected option
     * @return {null}
     */
    get selectedOptions() {
        let selectedOptions = null;
        if(this.selectedIndex >=0 ) {
            selectedOptions = this.ele.options[this.selectedIndex];
            if(this.multiple) {
                selectedOptions = [];
                let options = this.options;
                let total = options.length;
                for (let i=0; i<total; i++) {
                    if(options[i].selected) {
                        selectedOptions.push(options[i])
                    }
                }
                selectedOptions = selectedOptions.length === 1 ? selectedOptions[0] : selectedOptions;
            }
        }
        return selectedOptions;
    }

    /**
     * Get element children
     * @return {*}
     */
    get children() {
        return this.ele.children;
    }

    /**
     * Get selected ui data
     * @return {{data: *, ui: *, index: *, option: *}}
     */
    get uiData() {
        return this._getDataAndUI();
    }

    /**
     * Get version
     * @return {string}
     */
    get version() {
        return "4.0.3";
    }

}


;// CONCATENATED MODULE: ./src/js/lib/dd.js
/**
 * MSDropdown - dd.js
 * @author: Marghoob Suleman
 * @website: https://www.marghoobsuleman.com/
 * @version: 4.0.3
 * @revision: 6
 * @date: 5th Sep 2021
 * msDropdown is free web component: you can redistribute it and/or modify
 * it under the terms of the either the MIT License or the Gnu General Public License (GPL) Version 2
 */



class MsDropdown {

    constructor(ele, settings) {
        if(typeof ele === "string") {
            document.querySelectorAll(ele).forEach((current)=> {
                new MsDropdown(current,settings);
            });
        } else {
            ele.msDropdown = this;
            this._ddMaker = new ddMaker(ele, settings);
        }
    }
    /*****************  Public methods and props ***********/

    /**
     * Set setting attributes
     * @param key
     * @param value
     * @param shouldRefresh
     */
    setSettingAttribute(key, value, shouldRefresh=false) {
        this._ddMaker.setSettingAttribute(key, value);
        if(shouldRefresh) {
            this._ddMaker.refresh();
        }
    }
     /**
     * Add an item to select
     * Object can be pass as below
     * new Option("Label", "value") or
     * {text:"Label", value:"value"}
     * or Label as string
     * or full object ie {text:"", value:"", description:'', image:'', className:'' title:'', imageCss:''}
     * @param obj {option | object}
     * @param index {int}
     */
    add(obj, index) {
        this._ddMaker.add(obj, index);
    }

    /**
     * Remove an item from select
     * @param index {int}
     */
    remove(index) {
        return this._ddMaker.remove(index);
    }

    /**
     * Move to next index
     */
    next() {
        this._ddMaker.next();
    }


    /**
     * Move to previous index
     */
    previous() {
        this._ddMaker.previous();
    }

    /**
     * Open this dropdown
     */
    open() {
        this._ddMaker.open(null, false);
    }

    /**
     * Close this dropdown
     */
    close() {
        this._ddMaker.close(null);
    }

    /**
     * Return named item element with data
     * @param name {string}
     * @param withData
     */
    namedItem(name, withData=false) {
        return this._ddMaker.namedItem(name, withData);
    }

    /**
     * Get data by index
     * @param index {int}
     * @param withData
     */
    item(index, withData=false) {
        return this._ddMaker.item(index, withData);
    }

    /**
     * Show hide or get status of visibility
     * @param isShow
     * @return {boolean}
     */
    visible(isShow=null) {
        return this._ddMaker.visible(isShow);
    }

    /**
     * Calculate item height and set child height
     * @param numberOfRows {int}
     */
    showRows(numberOfRows) {
        this._ddMaker.showRows(numberOfRows);
    }

    /**
     * Alias of showRows
     * @param numberOfRows {int}
     */
    visibleRows(numberOfRows) {
        this._ddMaker.showRows(numberOfRows);
    }

    /**
     * Add event listener
     * @param type {string}
     * @param fn {function}
     */
    on(type, fn) {
        this._ddMaker.on(type, fn);
    }

    /**
     * Remove event listener
     * @param type {string}
     * @param fn {function}
     */
    off(type, fn) {
        this._ddMaker.off(type, fn);
    };

    /**
     * update ui and value
     */
    updateUiAndValue() {
        this._ddMaker.updateUiAndValue();
    }

    /**
     * Remake msDropdown
     */
    refresh() {
        this._ddMaker.refresh();
    }
    /**
     * Remove msDropdown
     */
    destroy() {
        this._ddMaker.destroy();
    }

    /*** Props ***/
    /**
     * Get selected index
     * @return {int}
     */
    get selectedIndex() {
        return this._ddMaker.selectedIndex;
    }

    /**
     * Set Index
     * @param index {int}
     */
    set selectedIndex(index) {
        this._ddMaker.selectedIndex = index;
    }

    /**
     * Get options
     * @return {HTMLOptionElement}
     */
    get options() {
        return this._ddMaker.options;
    }

    /**
     * Set options length
     * @param option {int | HTMLOptionElement}
     */
    set options(option) {
        this._ddMaker.options = option;
    }

    /**
     * get options UI
     * @return {NodeList}
     */
    get optionsUI() {
        return this._ddMaker.optionsUI;
    }

    /**
     * Get length
     * @return {int}
     */
    get length() {
        return this._ddMaker.length;
    }

    /**
     * Set length
     * @param size {int}
     */
    set length(size) {
        this._ddMaker.length = size;
    }


    /**
     * Get value
     * @return {string | any}
     */
    get value() {
        return this._ddMaker.value;
    }

    /**
     * Set value
     * @param val {string | any}
     */
    set value(val) {
        this._ddMaker.value = val;
    }

    /**
     * get selected text
     * @return {string}
     */
    get selectedText() {
        return this._ddMaker.selectedText;
    }

    /**
     * Check if this is disabled
     * @return {boolean}
     */
    get disabled() {
        return this._ddMaker.disabled;
    }

    /**
     * Set disabled
     * @param val {boolean}
     */
    set disabled(val) {
        this._ddMaker.disabled = val;
    }

    /**
     * Get form name if this is inside a form
     * @return {string}
     */
    get form() {
        return this._ddMaker.form;
    }


    /**
     * Get multiple
     * @return {boolean}
     */
    get multiple() {
        return this._ddMaker.multiple;
    }

    /**
     * Set multiple
     * @param val {boolean}
     */
    set multiple(val) {
        this._ddMaker.multiple = val;
    }

    /**
     * Get the name
     * @return {string}
     */
    get name() {
        return this._ddMaker.name;
    }

    /**
     * Set the name
     * @param val {string}
     */
    set name(val) {
        this._ddMaker.name = val;
    }

    /**
     * Get required
     * @return {boolean}
     */
    get required() {
        return this._ddMaker.required;
    }

    /**
     * Set required
     * @param val {boolean}
     */
    set required(val) {
        this._ddMaker.required = val;
    }

    /**
     * return the size/height of the dropdown
     * @return {int}
     */
    get size() {
        return this._ddMaker.size;
    }

    /**
     * Change the height of the element
     * @param val {int}
     */
    set size(val) {
        this._ddMaker.size = val;
    }


    /**
     * Get selected option
     * @return {HTMLOptionElement}
     */
    get selectedOptions() {
        return this._ddMaker.selectedOptions;
    }

    /**
     * Get element children
     * @return {HTMLCollection}
     */
    get children() {
        return this._ddMaker.children;
    }

    /**
     * Get selected ui data
     * @return {object | {data: *, ui: *, index: *, option: *}}
     */
    get uiData() {
        return this._ddMaker.uiData;
    }


    /**
     * Make dropdown
     * @param ele
     * @param settings
     */
    static make(ele, settings) {
        if(!ele.msDropdown) {
            try {
                let ddSelect = new MsDropdown(ele, settings);
                ele.addEventListener("change", ()=> {
                    if(!ele.multiple) {
                        ele.msDropdown.selectedIndex = current.selectedIndex;
                    } else {
                        ele.msDropdown.refresh();
                    }
                });
                return ddSelect;
            } catch (e) {
                console.log(e.message);
            }
        }
    }

    /**
     * Get version
     * @return {string}
     */
    static get version() {
        return "4.0.3";
    }

    /**
     * Get author
     * @return {string}
     */
    static get author() {
        return "Marghoob Suleman";
    }

}


;// CONCATENATED MODULE: ./src/js/lib/dd-webcomponent.js


class dd extends HTMLSelectElement {

    constructor(element, settings) {
        super();
    }


    connectedCallback() {
        setTimeout(()=> {
            if(!this.msDropdown) {
                this.msDropdown = new MsDropdown(this);
            }
            try {
                this.addEventListener("change", (evt)=> {if(!this.multiple) {
                    this.msDropdown.selectedIndex = this.selectedIndex;
                } else {
                    this.msDropdown.refresh();
                }
                });

            } catch (e) {
                console.log(e.message);
            }
        },1);
    }

    disconnectedCallback() {
       // console.log('disconnectedCallback');
    }

    adoptedCallback() {
        //console.log('adoptedCallback', this);
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if(this.msDropdown) {
            if(name.indexOf("data-") !== -1) {
                name = name.replace("data-", "");
                let nameStr = name.toLowerCase().split('-');
                for (let i = 1; i < nameStr.length; i++) {
                    nameStr[i] = nameStr[i].charAt(0).toUpperCase() + nameStr[i].substring(1);
                }
                this.msDropdown.setSettingAttribute(nameStr.join(""), newValue, true); //update settings and refresh
            } else {
                //this.msDropdown[name] = newValue;
            }

        }
        console.log('attributeChangedCallback');

    }

    static get observedAttributes() { return [
        'data-main-css',
        'data-show-icon',
        'data-event',
        'data-child-width',
        'data-child-height',
        'data-enable-checkbox',
        'data-checkbox-name-suffix',
        'data-enable-auto-filter',
        'data-visible-rows',
        'data-show-plus-item-counter',
        'data-error-message',
        'data-show-filter-always',
        'data-show-list-counter',
        'data-image-position'
    ];
    }

}

customElements.define('ms-dropdown', dd, {extends:'select'});
;// CONCATENATED MODULE: ./src/js/index.js


window.MsDropdown = MsDropdown;


(function () {
    let isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') == -1 && navigator.userAgent.indexOf('FxiOS') == -1;
    if(isSafari) {
        MsDropdown.make("select[is='ms-dropdown']");
        /**
         * Not a good idea to override this
         * but if you want to use document.createElement("select"); this can be enable for safari.
         * how to use:
         * var select = document.createElement("select", {is:'ms-dropdown'});
         * select.setAttribute("is", "ms-dropdown");
         * select.options[0] = new Option("Hashtag CMS", "https://www.hashtagcms.org"); // add an option
         * select.options[1] = new Option("My Website", "https://www.marghoobsuleman.com"); // add an option
         * document.body.appendChild(select);
         */

        /*
        window.addEventListener("load", ()=> {
            let OriginalAppendChild = Element.prototype.appendChild;
            Element.prototype.appendChild = function() {
                OriginalAppendChild.apply(this, arguments);
                let select = arguments[0];
                if(select.nodeName === "SELECT" && select.getAttribute("is") === "ms-dropdown") {
                    select.msDropdown = new MsDropdown(select);
                }
            };

        })
         */

    }
})();

/******/ })()
;