webcimes-select - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/js/webcimes-select.esm.d.ts

@@ -104,2 +104,6 @@ /**
     /**
+     * Set select disabled or not
+     */
+    disable(disable?: boolean): void;
+    /**
      * Init options or placeholder on select, according selected option on native select field
@@ -106,0 +110,0 @@ */

dist/js/webcimes-select.esm.js

@@ -1,2 +0,2 @@
-var e={d:(t,o)=>{for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{D:()=>o});class o{nativeSelect;select;dropdown=null;options;constructor(e){this.options={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,placeholderText:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,searchPlaceholderText:"Search",searchNoResultsText:"No results found",keepOpenDropdown:!1,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{},...e},this.onClearOption=this.onClearOption.bind(this),this.onClearAllOptions=this.onClearAllOptions.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onClickInitDropdown=this.onClickInitDropdown.bind(this),this.onDropdownSearch=this.onDropdownSearch.bind(this),this.onDropdownKeyDown=this.onDropdownKeyDown.bind(this),this.onDropdownMouseOverOption=this.onDropdownMouseOverOption.bind(this),this.onDropdownResize=this.onDropdownResize.bind(this),this.onDropdownClickOption=this.onDropdownClickOption.bind(this),this.onDropdownDestroy=this.onDropdownDestroy.bind(this),this.init()}getHtmlElements(e){let t=[];return e instanceof NodeList&&(t=[...Array.from(e)]),e instanceof HTMLElement&&(t=[e]),"string"==typeof e&&(t=[...Array.from(document.querySelectorAll(e))]),t}getHtmlElement(e){let t=null;return e instanceof HTMLElement&&(t=e),"string"==typeof e&&(t=document.querySelector(e)),t}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",this.nativeSelect.insertAdjacentHTML("afterend",`<div class="webcimes-select ${this.nativeSelect.multiple?"webcimes-select--multiple":""} ${this.options.setClass?this.options.setClass:""}" ${this.options.setId?`id="${this.options.setId}"`:""} ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="0">\n\t\t\t\t\t<div class="webcimes-select__options"></div>\n\t\t\t\t\t${this.options.allowClear?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t<div class="webcimes-select__arrow"></div>\n\t\t\t\t</div>`),this.select=this.nativeSelect.nextElementSibling,this.options.placeholderText||this.nativeSelect.querySelector("option[value='']")&&(this.options.placeholderText=this.nativeSelect.querySelector("option[value='']").innerHTML),"auto"!=this.options.width&&this.options.width&&this.select.style.setProperty("width",this.options.width),"auto"!=this.options.height&&this.options.height&&this.select.style.setProperty("height",this.options.height),this.options.style){let e=this.select.getAttribute("style")??"";this.select.setAttribute("style",e+this.options.style)}this.initOptions(),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.addEventListener("click",this.onClearAllOptions),this.select.addEventListener("keydown",this.onKeyDown),this.select.addEventListener("click",this.onClickInitDropdown),setTimeout((()=>{this.select.dispatchEvent(new CustomEvent("onInit")),"function"==typeof this.options.onInit&&this.options.onInit()}),0)}}destroy(){this.destroyDropdown(),this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.removeEventListener("click",this.onClearAllOptions),this.select.removeEventListener("keydown",this.onKeyDown),this.select.removeEventListener("click",this.onClickInitDropdown),this.nativeSelect.style.removeProperty("display"),this.select.remove(),this.select.dispatchEvent(new CustomEvent("onDestroy")),"function"==typeof this.options.onDestroy&&this.options.onDestroy()}initOptions(){if(this.nativeSelect){let e=Array.from(this.nativeSelect.selectedOptions).filter((e=>{if(""!==e.value)return!0}));if(this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select__options").innerHTML="",e.length)this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.add("webcimes-select__clear--active"),e.forEach((e=>{let t=document.createElement("template");t.innerHTML=`<div class="webcimes-select__option" data-value="${e.value}">\n\t\t\t\t\t\t<div class="webcimes-select__option-label" title="${e.innerHTML}">${e.innerHTML}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(t.content)}));else if(this.options.placeholderText){this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");let e=document.createElement("template");e.innerHTML=`<div class="webcimes-select__option webcimes-select__option--placeholder" data-value="">\n\t\t\t\t\t<div class="webcimes-select__option-label" title="${this.options.placeholderText}">${this.options.placeholderText}</div>\n\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(e.content)}else this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.addEventListener("click",this.onClearOption)}))}}addOption(e){if(e){this.nativeSelect.multiple||this.removeAllOptions();let t=this.nativeSelect.querySelector(`option[value="${e}"]`);t&&(t.setAttribute("selected",""),t.selected=!0),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.add("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onAddOption",{detail:{value:e}})),"function"==typeof this.options.onAddOption&&this.options.onAddOption(e)}}removeOption(e){if(e){let t=this.nativeSelect.querySelector(`option[value="${e}"]:not([disabled])`);t&&(t.removeAttribute("selected"),t.selected=!1),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.remove("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveOption",{detail:{value:e}})),"function"==typeof this.options.onRemoveOption&&this.options.onRemoveOption(e)}}removeAllOptions(){this.nativeSelect.querySelectorAll("option:not([disabled])").forEach((e=>{e.removeAttribute("selected"),e.selected=!1})),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelectorAll(".webcimes-dropdown__option").forEach((e=>{e.classList.remove("webcimes-dropdown__option--selected")})),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions")),"function"==typeof this.options.onRemoveAllOptions&&this.options.onRemoveAllOptions()}onClearOption(e){this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))}onClearAllOptions(e){this.removeAllOptions()}onKeyDown(e){e.target.closest(".webcimes-select > .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeAllOptions()):e.target.closest(".webcimes-select__option .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))):this.dropdown||" "!=e.key&&"Enter"!=e.key&&"ArrowUp"!=e.key&&"ArrowDown"!=e.key||(e.preventDefault(),this.initDropdown())}onClickInitDropdown(e){this.dropdown||e.target.closest(".webcimes-select__clear")?this.destroyDropdown():this.initDropdown()}initDropdown(){this.select.classList.add("webcimes-select--open"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="-1">\n\t\t\t\t${this.options.allowSearch?`<input class="webcimes-dropdown__search-input" type="text" name="search" autocomplete="off" ${this.options.searchPlaceholderText?`placeholder="${this.options.searchPlaceholderText}" title="${this.options.searchPlaceholderText}"`:""}>`:""}\n\t\t\t\t<div class="webcimes-dropdown__options" style="max-height:${this.options.maxHeightOptions};" tabindex="-1"></div>\n\t\t\t</div>`),this.dropdown=document.body.lastElementChild;let e=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value)return e}));if(this.setDropdownOptions(Array.from(e)),this.setDropdownPosition(),this.dropdown.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch)}this.dropdown.addEventListener("keydown",this.onDropdownKeyDown),window.addEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.addEventListener(e,this.onDropdownDestroy)})),this.select.dispatchEvent(new CustomEvent("onInitDropdown")),"function"==typeof this.options.onInitDropdown&&this.options.onInitDropdown()}destroyDropdown(){this.dropdown&&(this.select.classList.remove("webcimes-select--open"),this.dropdown.querySelector(".webcimes-dropdown__search-input").removeEventListener("input",this.onDropdownSearch),this.dropdown.removeEventListener("keydown",this.onDropdownKeyDown),window.removeEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.removeEventListener(e,this.onDropdownDestroy)})),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)})),this.dropdown.remove(),this.dropdown=null,document.querySelector(".webcimes-dropdown")||this.select.focus(),this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.remove("webcimes-select--direction-top"),this.select.dispatchEvent(new CustomEvent("onDestroyDropdown")),"function"==typeof this.options.onDestroyDropdown&&this.options.onDestroyDropdown())}setDropdownOptions(e){this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)}));let t=e.findIndex((e=>!e.disabled)),o=document.createElement("template");e.forEach(((e,i)=>{let s=document.createElement("template");if(s.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${t==i?"webcimes-dropdown__option--highlighted":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" data-value="${e.value}" title="${e.innerHTML}">${e.innerHTML}</div>\n`,e.closest("optgroup")){let t=e.closest("optgroup").label;if(!o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${t}" title="${t}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label">${t}</div>\n\t\t\t\t\t</div>\n`,o.content.appendChild(e.content)}o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)?.appendChild(s.content)}else o.content.appendChild(s.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(o.content),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.addEventListener("click",this.onDropdownClickOption),e.addEventListener("mouseover",this.onDropdownMouseOverOption)}))}setDropdownPosition(e=!1){if(this.dropdown){let t=this.select.getBoundingClientRect();e&&this.select.classList.contains("webcimes-select--direction-top")||!e&&t.bottom+this.dropdown.getBoundingClientRect().height>window.innerHeight?(this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.add("webcimes-select--direction-top"),this.dropdown.classList.remove("webcimes-dropdown--direction-bottom"),this.dropdown.classList.add("webcimes-dropdown--direction-top"),this.dropdown.style.top=t.top-this.dropdown.getBoundingClientRect().height+window.scrollY+"px"):(this.select.classList.remove("webcimes-select--direction-top"),this.select.classList.add("webcimes-select--direction-bottom"),this.dropdown.classList.remove("webcimes-dropdown--direction-top"),this.dropdown.classList.add("webcimes-dropdown--direction-bottom"),this.dropdown.style.top=t.bottom+window.scrollY+"px"),this.dropdown.style.left=t.left+window.scrollX+"px",this.dropdown.style.width=t.width+"px"}}setDropdownHighlightOption(e,t){let o=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted"),i=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");o?.classList.remove("webcimes-dropdown__option--highlighted"),o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),t&&o.scrollIntoView({behavior:"smooth",block:"nearest"})}onDropdownSearch(e){let t=new RegExp(e.target.value,"i"),o=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value&&(t.test(e.innerHTML)||t.test(e.value)))return!0}));if(0==o.length&&this.options.searchNoResultsText){let e=document.createElement("option");e.classList.add("webcimes-dropdown__option--no-results"),e.innerHTML=this.options.searchNoResultsText,o.push(e)}this.setDropdownOptions(o),this.setDropdownPosition(!0),this.select.dispatchEvent(new CustomEvent("onSearchDropdown",{detail:{value:e.target.value,options:o}})),"function"==typeof this.options.onSearchDropdown&&this.options.onSearchDropdown(e.target.value,o)}onDropdownKeyDown(e){if(e.target!=this.select){let t=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted");if(t){if("ArrowUp"==e.key||"ArrowDown"==e.key){e.preventDefault();let o=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)"),i=Array.from(o).indexOf(t);this.setDropdownHighlightOption("ArrowUp"==e.key?i-1>=0?i-1:0:i+1<=o.length-1?i+1:o.length-1,!0)}"Enter"==e.key&&(e.preventDefault(),t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}"Escape"==e.key&&(e.preventDefault(),this.destroyDropdown()),"Tab"==e.key&&(e.preventDefault(),this.destroyDropdown())}}onDropdownMouseOverOption(e){let t=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(t).indexOf(e.target),!1)}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){e.target.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(e.target.getAttribute("data-value")):this.addOption(e.target.getAttribute("data-value"))}onDropdownDestroy(e){e.target.closest(".webcimes-select")!=this.select&&e.target.closest(".webcimes-dropdown")!=this.dropdown&&this.destroyDropdown()}}var i=t.D;export{i as WebcimesSelect};
+var e={d:(t,o)=>{for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{D:()=>o});class o{nativeSelect;select;dropdown=null;options;constructor(e){this.options={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,placeholderText:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,searchPlaceholderText:"Search",searchNoResultsText:"No results found",keepOpenDropdown:!1,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{},...e},this.onClearOption=this.onClearOption.bind(this),this.onClearAllOptions=this.onClearAllOptions.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onClickInitDropdown=this.onClickInitDropdown.bind(this),this.onDropdownSearch=this.onDropdownSearch.bind(this),this.onDropdownKeyDown=this.onDropdownKeyDown.bind(this),this.onDropdownMouseOverOption=this.onDropdownMouseOverOption.bind(this),this.onDropdownResize=this.onDropdownResize.bind(this),this.onDropdownClickOption=this.onDropdownClickOption.bind(this),this.onDropdownDestroy=this.onDropdownDestroy.bind(this),this.init()}getHtmlElements(e){let t=[];return e instanceof NodeList&&(t=[...Array.from(e)]),e instanceof HTMLElement&&(t=[e]),"string"==typeof e&&(t=[...Array.from(document.querySelectorAll(e))]),t}getHtmlElement(e){let t=null;return e instanceof HTMLElement&&(t=e),"string"==typeof e&&(t=document.querySelector(e)),t}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",this.nativeSelect.insertAdjacentHTML("afterend",`<div class="webcimes-select ${this.nativeSelect.multiple?"webcimes-select--multiple":""} ${this.nativeSelect.disabled?"webcimes-select--disabled":""} ${this.options.setClass?this.options.setClass:""}" ${this.options.setId?`id="${this.options.setId}"`:""} ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="0">\n\t\t\t\t\t<div class="webcimes-select__options"></div>\n\t\t\t\t\t${this.options.allowClear?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t<div class="webcimes-select__arrow"></div>\n\t\t\t\t</div>`),this.select=this.nativeSelect.nextElementSibling,this.options.placeholderText||this.nativeSelect.querySelector("option[value='']")&&(this.options.placeholderText=this.nativeSelect.querySelector("option[value='']").innerHTML),"auto"!=this.options.width&&this.options.width&&this.select.style.setProperty("width",this.options.width),"auto"!=this.options.height&&this.options.height&&this.select.style.setProperty("height",this.options.height),this.options.style){let e=this.select.getAttribute("style")??"";this.select.setAttribute("style",e+this.options.style)}this.initOptions(),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.addEventListener("click",this.onClearAllOptions),this.select.addEventListener("keydown",this.onKeyDown),this.select.addEventListener("click",this.onClickInitDropdown),setTimeout((()=>{this.select.dispatchEvent(new CustomEvent("onInit")),"function"==typeof this.options.onInit&&this.options.onInit()}),0)}}destroy(){this.destroyDropdown(),this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.removeEventListener("click",this.onClearAllOptions),this.select.removeEventListener("keydown",this.onKeyDown),this.select.removeEventListener("click",this.onClickInitDropdown),this.nativeSelect.style.removeProperty("display"),this.select.remove(),this.select.dispatchEvent(new CustomEvent("onDestroy")),"function"==typeof this.options.onDestroy&&this.options.onDestroy()}disable(e=!0){this.nativeSelect&&(e?(this.nativeSelect.setAttribute("disabled",""),this.nativeSelect.disabled=!0,this.select.classList.add("webcimes-select--disabled")):(this.nativeSelect.removeAttribute("disabled"),this.nativeSelect.disabled=!1,this.select.classList.remove("webcimes-select--disabled")))}initOptions(){if(this.nativeSelect){let e=Array.from(this.nativeSelect.selectedOptions).filter((e=>{if(""!==e.value)return!0}));if(this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select__options").innerHTML="",e.length)this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.add("webcimes-select__clear--active"),e.forEach((e=>{let t=document.createElement("template");t.innerHTML=`<div class="webcimes-select__option" data-value="${e.value}">\n\t\t\t\t\t\t<div class="webcimes-select__option-label" title="${e.innerHTML}">${e.innerHTML}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(t.content)}));else if(this.options.placeholderText){this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");let e=document.createElement("template");e.innerHTML=`<div class="webcimes-select__option webcimes-select__option--placeholder" data-value="">\n\t\t\t\t\t<div class="webcimes-select__option-label" title="${this.options.placeholderText}">${this.options.placeholderText}</div>\n\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(e.content)}else this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.addEventListener("click",this.onClearOption)}))}}addOption(e){if(e){this.nativeSelect.multiple||this.removeAllOptions();let t=this.nativeSelect.querySelector(`option[value="${e}"]`);t&&(t.setAttribute("selected",""),t.selected=!0),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.add("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onAddOption",{detail:{value:e}})),"function"==typeof this.options.onAddOption&&this.options.onAddOption(e)}}removeOption(e){if(e&&!this.nativeSelect?.disabled){let t=this.nativeSelect.querySelector(`option[value="${e}"]:not([disabled])`);t&&(t.removeAttribute("selected"),t.selected=!1),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.remove("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveOption",{detail:{value:e}})),"function"==typeof this.options.onRemoveOption&&this.options.onRemoveOption(e)}}removeAllOptions(){this.nativeSelect?.disabled||(this.nativeSelect.querySelectorAll("option:not([disabled])").forEach((e=>{e.removeAttribute("selected"),e.selected=!1})),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelectorAll(".webcimes-dropdown__option").forEach((e=>{e.classList.remove("webcimes-dropdown__option--selected")})),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions")),"function"==typeof this.options.onRemoveAllOptions&&this.options.onRemoveAllOptions())}onClearOption(e){this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))}onClearAllOptions(e){this.removeAllOptions()}onKeyDown(e){e.target.closest(".webcimes-select > .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeAllOptions()):e.target.closest(".webcimes-select__option .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))):this.dropdown||" "!=e.key&&"Enter"!=e.key&&"ArrowUp"!=e.key&&"ArrowDown"!=e.key||(e.preventDefault(),this.initDropdown())}onClickInitDropdown(e){this.dropdown||e.target.closest(".webcimes-select__clear")?this.destroyDropdown():this.initDropdown()}initDropdown(){if(!this.nativeSelect?.disabled){this.select.classList.add("webcimes-select--open"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="-1">\n\t\t\t\t\t${this.options.allowSearch?`<input class="webcimes-dropdown__search-input" type="text" name="search" autocomplete="off" ${this.options.searchPlaceholderText?`placeholder="${this.options.searchPlaceholderText}" title="${this.options.searchPlaceholderText}"`:""}>`:""}\n\t\t\t\t\t<div class="webcimes-dropdown__options" style="max-height:${this.options.maxHeightOptions};" tabindex="-1"></div>\n\t\t\t\t</div>`),this.dropdown=document.body.lastElementChild;let e=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value)return e}));if(this.setDropdownOptions(Array.from(e)),this.setDropdownPosition(),this.dropdown.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch)}this.dropdown.addEventListener("keydown",this.onDropdownKeyDown),window.addEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.addEventListener(e,this.onDropdownDestroy)})),this.select.dispatchEvent(new CustomEvent("onInitDropdown")),"function"==typeof this.options.onInitDropdown&&this.options.onInitDropdown()}}destroyDropdown(){this.dropdown&&(this.select.classList.remove("webcimes-select--open"),this.dropdown.querySelector(".webcimes-dropdown__search-input").removeEventListener("input",this.onDropdownSearch),this.dropdown.removeEventListener("keydown",this.onDropdownKeyDown),window.removeEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.removeEventListener(e,this.onDropdownDestroy)})),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)})),this.dropdown.remove(),this.dropdown=null,document.querySelector(".webcimes-dropdown")||this.select.focus(),this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.remove("webcimes-select--direction-top"),this.select.dispatchEvent(new CustomEvent("onDestroyDropdown")),"function"==typeof this.options.onDestroyDropdown&&this.options.onDestroyDropdown())}setDropdownOptions(e){this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)}));let t=e.findIndex((e=>!e.disabled)),o=document.createElement("template");e.forEach(((e,i)=>{let s=document.createElement("template");if(s.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${t==i?"webcimes-dropdown__option--highlighted":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" data-value="${e.value}" title="${e.innerHTML}">${e.innerHTML}</div>\n`,e.closest("optgroup")){let t=e.closest("optgroup").label;if(!o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${t}" title="${t}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label">${t}</div>\n\t\t\t\t\t</div>\n`,o.content.appendChild(e.content)}o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)?.appendChild(s.content)}else o.content.appendChild(s.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(o.content),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.addEventListener("click",this.onDropdownClickOption),e.addEventListener("mouseover",this.onDropdownMouseOverOption)}))}setDropdownPosition(e=!1){if(this.dropdown){let t=this.select.getBoundingClientRect();e&&this.select.classList.contains("webcimes-select--direction-top")||!e&&t.bottom+this.dropdown.getBoundingClientRect().height>window.innerHeight?(this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.add("webcimes-select--direction-top"),this.dropdown.classList.remove("webcimes-dropdown--direction-bottom"),this.dropdown.classList.add("webcimes-dropdown--direction-top"),this.dropdown.style.top=t.top-this.dropdown.getBoundingClientRect().height+window.scrollY+"px"):(this.select.classList.remove("webcimes-select--direction-top"),this.select.classList.add("webcimes-select--direction-bottom"),this.dropdown.classList.remove("webcimes-dropdown--direction-top"),this.dropdown.classList.add("webcimes-dropdown--direction-bottom"),this.dropdown.style.top=t.bottom+window.scrollY+"px"),this.dropdown.style.left=t.left+window.scrollX+"px",this.dropdown.style.width=t.width+"px"}}setDropdownHighlightOption(e,t){let o=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted"),i=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");o?.classList.remove("webcimes-dropdown__option--highlighted"),o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),t&&o.scrollIntoView({behavior:"smooth",block:"nearest"})}onDropdownSearch(e){let t=new RegExp(e.target.value,"i"),o=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value&&(t.test(e.innerHTML)||t.test(e.value)))return!0}));if(0==o.length&&this.options.searchNoResultsText){let e=document.createElement("option");e.classList.add("webcimes-dropdown__option--no-results"),e.innerHTML=this.options.searchNoResultsText,o.push(e)}this.setDropdownOptions(o),this.setDropdownPosition(!0),this.select.dispatchEvent(new CustomEvent("onSearchDropdown",{detail:{value:e.target.value,options:o}})),"function"==typeof this.options.onSearchDropdown&&this.options.onSearchDropdown(e.target.value,o)}onDropdownKeyDown(e){if(e.target!=this.select){let t=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted");if(t){if("ArrowUp"==e.key||"ArrowDown"==e.key){e.preventDefault();let o=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)"),i=Array.from(o).indexOf(t);this.setDropdownHighlightOption("ArrowUp"==e.key?i-1>=0?i-1:0:i+1<=o.length-1?i+1:o.length-1,!0)}"Enter"==e.key&&(e.preventDefault(),t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}"Escape"==e.key&&(e.preventDefault(),this.destroyDropdown()),"Tab"==e.key&&(e.preventDefault(),this.destroyDropdown())}}onDropdownMouseOverOption(e){let t=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(t).indexOf(e.target),!1)}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){e.target.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(e.target.getAttribute("data-value")):this.addOption(e.target.getAttribute("data-value"))}onDropdownDestroy(e){e.target.closest(".webcimes-select")!=this.select&&e.target.closest(".webcimes-dropdown")!=this.dropdown&&this.destroyDropdown()}}var i=t.D;export{i as WebcimesSelect};
 //# sourceMappingURL=webcimes-select.esm.js.map

dist/js/webcimes-select.udm.d.ts

@@ -104,2 +104,6 @@ /**
     /**
+     * Set select disabled or not
+     */
+    disable(disable?: boolean): void;
+    /**
      * Init options or placeholder on select, according selected option on native select field
@@ -106,0 +110,0 @@ */

dist/js/webcimes-select.udm.js

@@ -1,2 +0,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(self,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{WebcimesSelect:()=>o});class o{nativeSelect;select;dropdown=null;options;constructor(e){this.options={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,placeholderText:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,searchPlaceholderText:"Search",searchNoResultsText:"No results found",keepOpenDropdown:!1,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{},...e},this.onClearOption=this.onClearOption.bind(this),this.onClearAllOptions=this.onClearAllOptions.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onClickInitDropdown=this.onClickInitDropdown.bind(this),this.onDropdownSearch=this.onDropdownSearch.bind(this),this.onDropdownKeyDown=this.onDropdownKeyDown.bind(this),this.onDropdownMouseOverOption=this.onDropdownMouseOverOption.bind(this),this.onDropdownResize=this.onDropdownResize.bind(this),this.onDropdownClickOption=this.onDropdownClickOption.bind(this),this.onDropdownDestroy=this.onDropdownDestroy.bind(this),this.init()}getHtmlElements(e){let t=[];return e instanceof NodeList&&(t=[...Array.from(e)]),e instanceof HTMLElement&&(t=[e]),"string"==typeof e&&(t=[...Array.from(document.querySelectorAll(e))]),t}getHtmlElement(e){let t=null;return e instanceof HTMLElement&&(t=e),"string"==typeof e&&(t=document.querySelector(e)),t}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",this.nativeSelect.insertAdjacentHTML("afterend",`<div class="webcimes-select ${this.nativeSelect.multiple?"webcimes-select--multiple":""} ${this.options.setClass?this.options.setClass:""}" ${this.options.setId?`id="${this.options.setId}"`:""} ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="0">\n\t\t\t\t\t<div class="webcimes-select__options"></div>\n\t\t\t\t\t${this.options.allowClear?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t<div class="webcimes-select__arrow"></div>\n\t\t\t\t</div>`),this.select=this.nativeSelect.nextElementSibling,this.options.placeholderText||this.nativeSelect.querySelector("option[value='']")&&(this.options.placeholderText=this.nativeSelect.querySelector("option[value='']").innerHTML),"auto"!=this.options.width&&this.options.width&&this.select.style.setProperty("width",this.options.width),"auto"!=this.options.height&&this.options.height&&this.select.style.setProperty("height",this.options.height),this.options.style){let e=this.select.getAttribute("style")??"";this.select.setAttribute("style",e+this.options.style)}this.initOptions(),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.addEventListener("click",this.onClearAllOptions),this.select.addEventListener("keydown",this.onKeyDown),this.select.addEventListener("click",this.onClickInitDropdown),setTimeout((()=>{this.select.dispatchEvent(new CustomEvent("onInit")),"function"==typeof this.options.onInit&&this.options.onInit()}),0)}}destroy(){this.destroyDropdown(),this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.removeEventListener("click",this.onClearAllOptions),this.select.removeEventListener("keydown",this.onKeyDown),this.select.removeEventListener("click",this.onClickInitDropdown),this.nativeSelect.style.removeProperty("display"),this.select.remove(),this.select.dispatchEvent(new CustomEvent("onDestroy")),"function"==typeof this.options.onDestroy&&this.options.onDestroy()}initOptions(){if(this.nativeSelect){let e=Array.from(this.nativeSelect.selectedOptions).filter((e=>{if(""!==e.value)return!0}));if(this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select__options").innerHTML="",e.length)this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.add("webcimes-select__clear--active"),e.forEach((e=>{let t=document.createElement("template");t.innerHTML=`<div class="webcimes-select__option" data-value="${e.value}">\n\t\t\t\t\t\t<div class="webcimes-select__option-label" title="${e.innerHTML}">${e.innerHTML}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(t.content)}));else if(this.options.placeholderText){this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");let e=document.createElement("template");e.innerHTML=`<div class="webcimes-select__option webcimes-select__option--placeholder" data-value="">\n\t\t\t\t\t<div class="webcimes-select__option-label" title="${this.options.placeholderText}">${this.options.placeholderText}</div>\n\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(e.content)}else this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.addEventListener("click",this.onClearOption)}))}}addOption(e){if(e){this.nativeSelect.multiple||this.removeAllOptions();let t=this.nativeSelect.querySelector(`option[value="${e}"]`);t&&(t.setAttribute("selected",""),t.selected=!0),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.add("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onAddOption",{detail:{value:e}})),"function"==typeof this.options.onAddOption&&this.options.onAddOption(e)}}removeOption(e){if(e){let t=this.nativeSelect.querySelector(`option[value="${e}"]:not([disabled])`);t&&(t.removeAttribute("selected"),t.selected=!1),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.remove("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveOption",{detail:{value:e}})),"function"==typeof this.options.onRemoveOption&&this.options.onRemoveOption(e)}}removeAllOptions(){this.nativeSelect.querySelectorAll("option:not([disabled])").forEach((e=>{e.removeAttribute("selected"),e.selected=!1})),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelectorAll(".webcimes-dropdown__option").forEach((e=>{e.classList.remove("webcimes-dropdown__option--selected")})),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions")),"function"==typeof this.options.onRemoveAllOptions&&this.options.onRemoveAllOptions()}onClearOption(e){this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))}onClearAllOptions(e){this.removeAllOptions()}onKeyDown(e){e.target.closest(".webcimes-select > .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeAllOptions()):e.target.closest(".webcimes-select__option .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))):this.dropdown||" "!=e.key&&"Enter"!=e.key&&"ArrowUp"!=e.key&&"ArrowDown"!=e.key||(e.preventDefault(),this.initDropdown())}onClickInitDropdown(e){this.dropdown||e.target.closest(".webcimes-select__clear")?this.destroyDropdown():this.initDropdown()}initDropdown(){this.select.classList.add("webcimes-select--open"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="-1">\n\t\t\t\t${this.options.allowSearch?`<input class="webcimes-dropdown__search-input" type="text" name="search" autocomplete="off" ${this.options.searchPlaceholderText?`placeholder="${this.options.searchPlaceholderText}" title="${this.options.searchPlaceholderText}"`:""}>`:""}\n\t\t\t\t<div class="webcimes-dropdown__options" style="max-height:${this.options.maxHeightOptions};" tabindex="-1"></div>\n\t\t\t</div>`),this.dropdown=document.body.lastElementChild;let e=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value)return e}));if(this.setDropdownOptions(Array.from(e)),this.setDropdownPosition(),this.dropdown.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch)}this.dropdown.addEventListener("keydown",this.onDropdownKeyDown),window.addEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.addEventListener(e,this.onDropdownDestroy)})),this.select.dispatchEvent(new CustomEvent("onInitDropdown")),"function"==typeof this.options.onInitDropdown&&this.options.onInitDropdown()}destroyDropdown(){this.dropdown&&(this.select.classList.remove("webcimes-select--open"),this.dropdown.querySelector(".webcimes-dropdown__search-input").removeEventListener("input",this.onDropdownSearch),this.dropdown.removeEventListener("keydown",this.onDropdownKeyDown),window.removeEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.removeEventListener(e,this.onDropdownDestroy)})),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)})),this.dropdown.remove(),this.dropdown=null,document.querySelector(".webcimes-dropdown")||this.select.focus(),this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.remove("webcimes-select--direction-top"),this.select.dispatchEvent(new CustomEvent("onDestroyDropdown")),"function"==typeof this.options.onDestroyDropdown&&this.options.onDestroyDropdown())}setDropdownOptions(e){this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)}));let t=e.findIndex((e=>!e.disabled)),o=document.createElement("template");e.forEach(((e,i)=>{let s=document.createElement("template");if(s.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${t==i?"webcimes-dropdown__option--highlighted":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" data-value="${e.value}" title="${e.innerHTML}">${e.innerHTML}</div>\n`,e.closest("optgroup")){let t=e.closest("optgroup").label;if(!o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${t}" title="${t}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label">${t}</div>\n\t\t\t\t\t</div>\n`,o.content.appendChild(e.content)}o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)?.appendChild(s.content)}else o.content.appendChild(s.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(o.content),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.addEventListener("click",this.onDropdownClickOption),e.addEventListener("mouseover",this.onDropdownMouseOverOption)}))}setDropdownPosition(e=!1){if(this.dropdown){let t=this.select.getBoundingClientRect();e&&this.select.classList.contains("webcimes-select--direction-top")||!e&&t.bottom+this.dropdown.getBoundingClientRect().height>window.innerHeight?(this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.add("webcimes-select--direction-top"),this.dropdown.classList.remove("webcimes-dropdown--direction-bottom"),this.dropdown.classList.add("webcimes-dropdown--direction-top"),this.dropdown.style.top=t.top-this.dropdown.getBoundingClientRect().height+window.scrollY+"px"):(this.select.classList.remove("webcimes-select--direction-top"),this.select.classList.add("webcimes-select--direction-bottom"),this.dropdown.classList.remove("webcimes-dropdown--direction-top"),this.dropdown.classList.add("webcimes-dropdown--direction-bottom"),this.dropdown.style.top=t.bottom+window.scrollY+"px"),this.dropdown.style.left=t.left+window.scrollX+"px",this.dropdown.style.width=t.width+"px"}}setDropdownHighlightOption(e,t){let o=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted"),i=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");o?.classList.remove("webcimes-dropdown__option--highlighted"),o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),t&&o.scrollIntoView({behavior:"smooth",block:"nearest"})}onDropdownSearch(e){let t=new RegExp(e.target.value,"i"),o=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value&&(t.test(e.innerHTML)||t.test(e.value)))return!0}));if(0==o.length&&this.options.searchNoResultsText){let e=document.createElement("option");e.classList.add("webcimes-dropdown__option--no-results"),e.innerHTML=this.options.searchNoResultsText,o.push(e)}this.setDropdownOptions(o),this.setDropdownPosition(!0),this.select.dispatchEvent(new CustomEvent("onSearchDropdown",{detail:{value:e.target.value,options:o}})),"function"==typeof this.options.onSearchDropdown&&this.options.onSearchDropdown(e.target.value,o)}onDropdownKeyDown(e){if(e.target!=this.select){let t=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted");if(t){if("ArrowUp"==e.key||"ArrowDown"==e.key){e.preventDefault();let o=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)"),i=Array.from(o).indexOf(t);this.setDropdownHighlightOption("ArrowUp"==e.key?i-1>=0?i-1:0:i+1<=o.length-1?i+1:o.length-1,!0)}"Enter"==e.key&&(e.preventDefault(),t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}"Escape"==e.key&&(e.preventDefault(),this.destroyDropdown()),"Tab"==e.key&&(e.preventDefault(),this.destroyDropdown())}}onDropdownMouseOverOption(e){let t=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(t).indexOf(e.target),!1)}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){e.target.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(e.target.getAttribute("data-value")):this.addOption(e.target.getAttribute("data-value"))}onDropdownDestroy(e){e.target.closest(".webcimes-select")!=this.select&&e.target.closest(".webcimes-dropdown")!=this.dropdown&&this.destroyDropdown()}}return t})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(self,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{WebcimesSelect:()=>o});class o{nativeSelect;select;dropdown=null;options;constructor(e){this.options={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,placeholderText:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,searchPlaceholderText:"Search",searchNoResultsText:"No results found",keepOpenDropdown:!1,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{},...e},this.onClearOption=this.onClearOption.bind(this),this.onClearAllOptions=this.onClearAllOptions.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onClickInitDropdown=this.onClickInitDropdown.bind(this),this.onDropdownSearch=this.onDropdownSearch.bind(this),this.onDropdownKeyDown=this.onDropdownKeyDown.bind(this),this.onDropdownMouseOverOption=this.onDropdownMouseOverOption.bind(this),this.onDropdownResize=this.onDropdownResize.bind(this),this.onDropdownClickOption=this.onDropdownClickOption.bind(this),this.onDropdownDestroy=this.onDropdownDestroy.bind(this),this.init()}getHtmlElements(e){let t=[];return e instanceof NodeList&&(t=[...Array.from(e)]),e instanceof HTMLElement&&(t=[e]),"string"==typeof e&&(t=[...Array.from(document.querySelectorAll(e))]),t}getHtmlElement(e){let t=null;return e instanceof HTMLElement&&(t=e),"string"==typeof e&&(t=document.querySelector(e)),t}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",this.nativeSelect.insertAdjacentHTML("afterend",`<div class="webcimes-select ${this.nativeSelect.multiple?"webcimes-select--multiple":""} ${this.nativeSelect.disabled?"webcimes-select--disabled":""} ${this.options.setClass?this.options.setClass:""}" ${this.options.setId?`id="${this.options.setId}"`:""} ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="0">\n\t\t\t\t\t<div class="webcimes-select__options"></div>\n\t\t\t\t\t${this.options.allowClear?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t<div class="webcimes-select__arrow"></div>\n\t\t\t\t</div>`),this.select=this.nativeSelect.nextElementSibling,this.options.placeholderText||this.nativeSelect.querySelector("option[value='']")&&(this.options.placeholderText=this.nativeSelect.querySelector("option[value='']").innerHTML),"auto"!=this.options.width&&this.options.width&&this.select.style.setProperty("width",this.options.width),"auto"!=this.options.height&&this.options.height&&this.select.style.setProperty("height",this.options.height),this.options.style){let e=this.select.getAttribute("style")??"";this.select.setAttribute("style",e+this.options.style)}this.initOptions(),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.addEventListener("click",this.onClearAllOptions),this.select.addEventListener("keydown",this.onKeyDown),this.select.addEventListener("click",this.onClickInitDropdown),setTimeout((()=>{this.select.dispatchEvent(new CustomEvent("onInit")),"function"==typeof this.options.onInit&&this.options.onInit()}),0)}}destroy(){this.destroyDropdown(),this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.removeEventListener("click",this.onClearAllOptions),this.select.removeEventListener("keydown",this.onKeyDown),this.select.removeEventListener("click",this.onClickInitDropdown),this.nativeSelect.style.removeProperty("display"),this.select.remove(),this.select.dispatchEvent(new CustomEvent("onDestroy")),"function"==typeof this.options.onDestroy&&this.options.onDestroy()}disable(e=!0){this.nativeSelect&&(e?(this.nativeSelect.setAttribute("disabled",""),this.nativeSelect.disabled=!0,this.select.classList.add("webcimes-select--disabled")):(this.nativeSelect.removeAttribute("disabled"),this.nativeSelect.disabled=!1,this.select.classList.remove("webcimes-select--disabled")))}initOptions(){if(this.nativeSelect){let e=Array.from(this.nativeSelect.selectedOptions).filter((e=>{if(""!==e.value)return!0}));if(this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.removeEventListener("click",this.onClearOption)})),this.select.querySelector(".webcimes-select__options").innerHTML="",e.length)this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.add("webcimes-select__clear--active"),e.forEach((e=>{let t=document.createElement("template");t.innerHTML=`<div class="webcimes-select__option" data-value="${e.value}">\n\t\t\t\t\t\t<div class="webcimes-select__option-label" title="${e.innerHTML}">${e.innerHTML}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?'<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>':""}\n\t\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(t.content)}));else if(this.options.placeholderText){this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");let e=document.createElement("template");e.innerHTML=`<div class="webcimes-select__option webcimes-select__option--placeholder" data-value="">\n\t\t\t\t\t<div class="webcimes-select__option-label" title="${this.options.placeholderText}">${this.options.placeholderText}</div>\n\t\t\t\t</div>\n`,this.select.querySelector(".webcimes-select__options").appendChild(e.content)}else this.select.querySelector(".webcimes-select > .webcimes-select__clear")?.classList.remove("webcimes-select__clear--active");this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((e=>{e.addEventListener("click",this.onClearOption)}))}}addOption(e){if(e){this.nativeSelect.multiple||this.removeAllOptions();let t=this.nativeSelect.querySelector(`option[value="${e}"]`);t&&(t.setAttribute("selected",""),t.selected=!0),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.add("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onAddOption",{detail:{value:e}})),"function"==typeof this.options.onAddOption&&this.options.onAddOption(e)}}removeOption(e){if(e&&!this.nativeSelect?.disabled){let t=this.nativeSelect.querySelector(`option[value="${e}"]:not([disabled])`);t&&(t.removeAttribute("selected"),t.selected=!1),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.classList.remove("webcimes-dropdown__option--selected"),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveOption",{detail:{value:e}})),"function"==typeof this.options.onRemoveOption&&this.options.onRemoveOption(e)}}removeAllOptions(){this.nativeSelect?.disabled||(this.nativeSelect.querySelectorAll("option:not([disabled])").forEach((e=>{e.removeAttribute("selected"),e.selected=!1})),!this.nativeSelect.multiple&&this.options.allowClear&&(this.nativeSelect.value=""),this.initOptions(),this.options.keepOpenDropdown?(this.dropdown?.querySelectorAll(".webcimes-dropdown__option").forEach((e=>{e.classList.remove("webcimes-dropdown__option--selected")})),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions")),"function"==typeof this.options.onRemoveAllOptions&&this.options.onRemoveAllOptions())}onClearOption(e){this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))}onClearAllOptions(e){this.removeAllOptions()}onKeyDown(e){e.target.closest(".webcimes-select > .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeAllOptions()):e.target.closest(".webcimes-select__option .webcimes-select__clear")?"Enter"==e.key&&(e.preventDefault(),this.removeOption(e.target.closest(".webcimes-select__option").getAttribute("data-value"))):this.dropdown||" "!=e.key&&"Enter"!=e.key&&"ArrowUp"!=e.key&&"ArrowDown"!=e.key||(e.preventDefault(),this.initDropdown())}onClickInitDropdown(e){this.dropdown||e.target.closest(".webcimes-select__clear")?this.destroyDropdown():this.initDropdown()}initDropdown(){if(!this.nativeSelect?.disabled){this.select.classList.add("webcimes-select--open"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""} tabindex="-1">\n\t\t\t\t\t${this.options.allowSearch?`<input class="webcimes-dropdown__search-input" type="text" name="search" autocomplete="off" ${this.options.searchPlaceholderText?`placeholder="${this.options.searchPlaceholderText}" title="${this.options.searchPlaceholderText}"`:""}>`:""}\n\t\t\t\t\t<div class="webcimes-dropdown__options" style="max-height:${this.options.maxHeightOptions};" tabindex="-1"></div>\n\t\t\t\t</div>`),this.dropdown=document.body.lastElementChild;let e=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value)return e}));if(this.setDropdownOptions(Array.from(e)),this.setDropdownPosition(),this.dropdown.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch)}this.dropdown.addEventListener("keydown",this.onDropdownKeyDown),window.addEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.addEventListener(e,this.onDropdownDestroy)})),this.select.dispatchEvent(new CustomEvent("onInitDropdown")),"function"==typeof this.options.onInitDropdown&&this.options.onInitDropdown()}}destroyDropdown(){this.dropdown&&(this.select.classList.remove("webcimes-select--open"),this.dropdown.querySelector(".webcimes-dropdown__search-input").removeEventListener("input",this.onDropdownSearch),this.dropdown.removeEventListener("keydown",this.onDropdownKeyDown),window.removeEventListener("resize",this.onDropdownResize),["click","keydown"].forEach((e=>{document.removeEventListener(e,this.onDropdownDestroy)})),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)})),this.dropdown.remove(),this.dropdown=null,document.querySelector(".webcimes-dropdown")||this.select.focus(),this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.remove("webcimes-select--direction-top"),this.select.dispatchEvent(new CustomEvent("onDestroyDropdown")),"function"==typeof this.options.onDestroyDropdown&&this.options.onDestroyDropdown())}setDropdownOptions(e){this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.removeEventListener("click",this.onDropdownClickOption),e.removeEventListener("mouseover",this.onDropdownMouseOverOption)}));let t=e.findIndex((e=>!e.disabled)),o=document.createElement("template");e.forEach(((e,i)=>{let s=document.createElement("template");if(s.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${t==i?"webcimes-dropdown__option--highlighted":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" data-value="${e.value}" title="${e.innerHTML}">${e.innerHTML}</div>\n`,e.closest("optgroup")){let t=e.closest("optgroup").label;if(!o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${t}" title="${t}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label">${t}</div>\n\t\t\t\t\t</div>\n`,o.content.appendChild(e.content)}o.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${t}']`)?.appendChild(s.content)}else o.content.appendChild(s.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(o.content),this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)").forEach((e=>{e.addEventListener("click",this.onDropdownClickOption),e.addEventListener("mouseover",this.onDropdownMouseOverOption)}))}setDropdownPosition(e=!1){if(this.dropdown){let t=this.select.getBoundingClientRect();e&&this.select.classList.contains("webcimes-select--direction-top")||!e&&t.bottom+this.dropdown.getBoundingClientRect().height>window.innerHeight?(this.select.classList.remove("webcimes-select--direction-bottom"),this.select.classList.add("webcimes-select--direction-top"),this.dropdown.classList.remove("webcimes-dropdown--direction-bottom"),this.dropdown.classList.add("webcimes-dropdown--direction-top"),this.dropdown.style.top=t.top-this.dropdown.getBoundingClientRect().height+window.scrollY+"px"):(this.select.classList.remove("webcimes-select--direction-top"),this.select.classList.add("webcimes-select--direction-bottom"),this.dropdown.classList.remove("webcimes-dropdown--direction-top"),this.dropdown.classList.add("webcimes-dropdown--direction-bottom"),this.dropdown.style.top=t.bottom+window.scrollY+"px"),this.dropdown.style.left=t.left+window.scrollX+"px",this.dropdown.style.width=t.width+"px"}}setDropdownHighlightOption(e,t){let o=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted"),i=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");o?.classList.remove("webcimes-dropdown__option--highlighted"),o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),t&&o.scrollIntoView({behavior:"smooth",block:"nearest"})}onDropdownSearch(e){let t=new RegExp(e.target.value,"i"),o=Array.from(this.nativeSelect.options).filter((e=>{if(""!==e.value&&(t.test(e.innerHTML)||t.test(e.value)))return!0}));if(0==o.length&&this.options.searchNoResultsText){let e=document.createElement("option");e.classList.add("webcimes-dropdown__option--no-results"),e.innerHTML=this.options.searchNoResultsText,o.push(e)}this.setDropdownOptions(o),this.setDropdownPosition(!0),this.select.dispatchEvent(new CustomEvent("onSearchDropdown",{detail:{value:e.target.value,options:o}})),"function"==typeof this.options.onSearchDropdown&&this.options.onSearchDropdown(e.target.value,o)}onDropdownKeyDown(e){if(e.target!=this.select){let t=this.dropdown.querySelector(".webcimes-dropdown__option--highlighted");if(t){if("ArrowUp"==e.key||"ArrowDown"==e.key){e.preventDefault();let o=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)"),i=Array.from(o).indexOf(t);this.setDropdownHighlightOption("ArrowUp"==e.key?i-1>=0?i-1:0:i+1<=o.length-1?i+1:o.length-1,!0)}"Enter"==e.key&&(e.preventDefault(),t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}"Escape"==e.key&&(e.preventDefault(),this.destroyDropdown()),"Tab"==e.key&&(e.preventDefault(),this.destroyDropdown())}}onDropdownMouseOverOption(e){let t=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(t).indexOf(e.target),!1)}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){e.target.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(e.target.getAttribute("data-value")):this.addOption(e.target.getAttribute("data-value"))}onDropdownDestroy(e){e.target.closest(".webcimes-select")!=this.select&&e.target.closest(".webcimes-dropdown")!=this.dropdown&&this.destroyDropdown()}}return t})()));
 //# sourceMappingURL=webcimes-select.udm.js.map

package.json

 {
   "name": "webcimes-select",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Just create beautiful select boxes, it supports search, single select, multiple select, keyboard control, clear options, dropdown can also be opened over an overflow parent, optgroup support, rtl support, and many other options. It works with vanilla javascript + html + css, no dependencies are required",
@@ -5,0 +5,0 @@ "main": "./dist/js/webcimes-select.udm.js",

README.md

@@ -283,2 +283,20 @@ # webcimes-select
 
+### Disable select
+To disable the select, you can call the `disable` method, like this:
+
+```javascript
+// Get the instance
+const mySelect = new WebcimesSelect(...);
+
+// Things
+
+// Then call the disable method:
+mySelect.disable();
+```
+
+You can also remove the disabled attribute like this:
+```javascript
+mySelect.disable(false);
+```
+
 ### Refresh options
@@ -322,3 +340,3 @@ To update/refresh the select options (after changing the native select options for example), you can call the `initOptions` method, like this:
 ```
-Just note that if an option is disabled and selected by default, you cannot remove it.
+Just note that if the select or an option is disabled, you cannot remove it.
 
@@ -337,3 +355,3 @@ ### Remove all selected option
 ```
-Just note that if an option is disabled and selected by default, you cannot remove it.
+Just note that if the select or an option is disabled, you cannot remove them.
 
@@ -340,0 +358,0 @@ ### Destroy

src/ts/webcimes-select.d.ts

@@ -104,2 +104,6 @@ /**
     /**
+     * Set select disabled or not
+     */
+    disable(disable?: boolean): void;
+    /**
      * Init options or placeholder on select, according selected option on native select field
@@ -106,0 +110,0 @@ */

src/ts/webcimes-select.ts

@@ -195,3 +195,3 @@ /**
 			this.nativeSelect.insertAdjacentHTML("afterend", 
-				`<div class="webcimes-select ${(this.nativeSelect.multiple?`webcimes-select--multiple`:``)} ${(this.options.setClass?this.options.setClass:``)}" ${(this.options.setId?`id="${this.options.setId}"`:``)} ${(this.nativeSelect.getAttribute("dir")=="rtl"?`dir="rtl"`:``)} tabindex="0">
+				`<div class="webcimes-select ${(this.nativeSelect.multiple?`webcimes-select--multiple`:``)} ${this.nativeSelect.disabled?`webcimes-select--disabled`:``} ${(this.options.setClass?this.options.setClass:``)}" ${(this.options.setId?`id="${this.options.setId}"`:``)} ${(this.nativeSelect.getAttribute("dir")=="rtl"?`dir="rtl"`:``)} tabindex="0">
 					<div class="webcimes-select__options"></div>
@@ -288,2 +288,24 @@ ${(this.options.allowClear?`<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>`:'')}
 	/**
+	 * Set select disabled or not
+	 */
+	public disable(disable: boolean = true)
+	{
+		if(this.nativeSelect)
+		{
+			if(disable)
+			{
+				this.nativeSelect.setAttribute("disabled", "");
+				this.nativeSelect.disabled = true;
+				this.select.classList.add("webcimes-select--disabled");
+			}
+			else
+			{
+				this.nativeSelect.removeAttribute("disabled");
+				this.nativeSelect.disabled = false;
+				this.select.classList.remove("webcimes-select--disabled");
+			}
+		}
+	}
+
+	/**
 	 * Init options or placeholder on select, according selected option on native select field
@@ -406,3 +428,3 @@ */
 	{
-		if(value)
+		if(value && !this.nativeSelect?.disabled)
 		{
@@ -460,41 +482,44 @@ // Remove option selected on native select
 	{
-		// Remove option selected on native select
-		this.nativeSelect!.querySelectorAll(`option:not([disabled])`).forEach((el: HTMLOptionElement) => {
-			el.removeAttribute("selected");
-			el.selected = false;
-		});
-
-		// If native select single and allowClear option
-		if(!this.nativeSelect!.multiple && this.options.allowClear)
+		if(!this.nativeSelect?.disabled)
 		{
-			// Set and force native select value to empty string (or placeholder option if define)
-			this.nativeSelect!.value = "";
-		}
+			// Remove option selected on native select
+			this.nativeSelect!.querySelectorAll(`option:not([disabled])`).forEach((el: HTMLOptionElement) => {
+				el.removeAttribute("selected");
+				el.selected = false;
+			});
 
-		// Init option on select
-		this.initOptions();
+			// If native select single and allowClear option
+			if(!this.nativeSelect!.multiple && this.options.allowClear)
+			{
+				// Set and force native select value to empty string (or placeholder option if define)
+				this.nativeSelect!.value = "";
+			}
 
-		// If keepOpenDropdown option true
-		if(this.options.keepOpenDropdown)
-		{
-			// Remove selected class on dropdown option
-			this.dropdown?.querySelectorAll(`.webcimes-dropdown__option`).forEach((el) => {
-				el.classList.remove("webcimes-dropdown__option--selected");
-			});
-			
-			// Set position and width of dropdown
-			this.setDropdownPosition(true);
+			// Init option on select
+			this.initOptions();
+
+			// If keepOpenDropdown option true
+			if(this.options.keepOpenDropdown)
+			{
+				// Remove selected class on dropdown option
+				this.dropdown?.querySelectorAll(`.webcimes-dropdown__option`).forEach((el) => {
+					el.classList.remove("webcimes-dropdown__option--selected");
+				});
+				
+				// Set position and width of dropdown
+				this.setDropdownPosition(true);
+			}
+			else
+			{
+				// Destroy dropdown
+				this.destroyDropdown();
+			}
+		
+			// Callback on set option
+			this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions"));
+			if(typeof this.options.onRemoveAllOptions === 'function')
+			{
+				this.options.onRemoveAllOptions();
+			}
 		}
-		else
-		{
-			// Destroy dropdown
-			this.destroyDropdown();
-		}
-	
-		// Callback on set option
-		this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions"));
-		if(typeof this.options.onRemoveAllOptions === 'function')
-		{
-			this.options.onRemoveAllOptions();
-		}
 	}
@@ -575,62 +600,65 @@
 	{
-		this.select.classList.add("webcimes-select--open");
-					
-		// Append dropdown before the end of body
-		document.body.insertAdjacentHTML("beforeend", 
-			`<div class="webcimes-dropdown" ${(this.nativeSelect!.getAttribute("dir")=="rtl"?`dir="rtl"`:``)} tabindex="-1">
-				${(this.options.allowSearch?`<input class="webcimes-dropdown__search-input" type="text" name="search" autocomplete="off" ${(this.options.searchPlaceholderText?`placeholder="${this.options.searchPlaceholderText}" title="${this.options.searchPlaceholderText}"`:``)}>`:``)}
-				<div class="webcimes-dropdown__options" style="max-height:${this.options.maxHeightOptions};" tabindex="-1"></div>
-			</div>`
-		);
+		if(!this.nativeSelect?.disabled)
+		{
+			this.select.classList.add("webcimes-select--open");
+						
+			// Append dropdown before the end of body
+			document.body.insertAdjacentHTML("beforeend", 
+				`<div class="webcimes-dropdown" ${(this.nativeSelect!.getAttribute("dir")=="rtl"?`dir="rtl"`:``)} tabindex="-1">
+					${(this.options.allowSearch?`<input class="webcimes-dropdown__search-input" type="text" name="search" autocomplete="off" ${(this.options.searchPlaceholderText?`placeholder="${this.options.searchPlaceholderText}" title="${this.options.searchPlaceholderText}"`:``)}>`:``)}
+					<div class="webcimes-dropdown__options" style="max-height:${this.options.maxHeightOptions};" tabindex="-1"></div>
+				</div>`
+			);
 
-		// Define dropdown
-		this.dropdown = document.body.lastElementChild as HTMLElement;
+			// Define dropdown
+			this.dropdown = document.body.lastElementChild as HTMLElement;
 
-		// Set options on dropdown
-		let options = Array.from(this.nativeSelect!.options).filter((el) => {
-			if(el.value !== "")
+			// Set options on dropdown
+			let options = Array.from(this.nativeSelect!.options).filter((el) => {
+				if(el.value !== "")
+				{
+					return el;
+				}
+			});
+			this.setDropdownOptions(Array.from(options));
+			
+			// Set position and width of dropdown
+			this.setDropdownPosition();
+
+			// By default set focus on dropdown
+			this.dropdown.focus();
+
+			// If allowSearch active
+			if(this.options.allowSearch)
 			{
-				return el;
+				let searchEl = (this.dropdown.querySelector(".webcimes-dropdown__search-input") as HTMLInputElement);
+
+				// Set focus on search field
+				if(this.options.searchAutoFocus)
+				{
+					searchEl.focus();
+				}
+
+				// Event search options on dropdown
+				searchEl.addEventListener("input", this.onDropdownSearch);
 			}
-		});
-		this.setDropdownOptions(Array.from(options));
-		
-		// Set position and width of dropdown
-		this.setDropdownPosition();
 
-		// By default set focus on dropdown
-		this.dropdown.focus();
+			// Event on keydown on dropdown 
+			this.dropdown.addEventListener("keydown", this.onDropdownKeyDown);
 
-		// If allowSearch active
-		if(this.options.allowSearch)
-		{
-			let searchEl = (this.dropdown.querySelector(".webcimes-dropdown__search-input") as HTMLInputElement);
+			// Event on resize on Dropdown
+			window.addEventListener("resize", this.onDropdownResize);
 
-			// Set focus on search field
-			if(this.options.searchAutoFocus)
+			// Event destroy on click or keydown outside dropdown
+			['click', 'keydown'].forEach((typeEvent) => {
+				document.addEventListener(typeEvent, this.onDropdownDestroy);
+			});
+			
+			// Callback on init dropdown
+			this.select.dispatchEvent(new CustomEvent("onInitDropdown"));
+			if(typeof this.options.onInitDropdown === 'function')
 			{
-				searchEl.focus();
+				this.options.onInitDropdown();
 			}
-
-			// Event search options on dropdown
-			searchEl.addEventListener("input", this.onDropdownSearch);
 		}
-
-		// Event on keydown on dropdown 
-		this.dropdown.addEventListener("keydown", this.onDropdownKeyDown);
-
-		// Event on resize on Dropdown
-		window.addEventListener("resize", this.onDropdownResize);
-
-		// Event destroy on click or keydown outside dropdown
-		['click', 'keydown'].forEach((typeEvent) => {
-			document.addEventListener(typeEvent, this.onDropdownDestroy);
-		});
-		
-		// Callback on init dropdown
-		this.select.dispatchEvent(new CustomEvent("onInitDropdown"));
-		if(typeof this.options.onInitDropdown === 'function')
-		{
-			this.options.onInitDropdown();
-		}
 	}
@@ -637,0 +665,0 @@

test/script.js

@@ -12,2 +12,3 @@ // Import webcimes-select
             console.log("onInit");
+            selectCity.disable();
         },
@@ -14,0 +15,0 @@ onDestroy(){

No alert changes

Improved metrics

Total package byte prevSize

252261

increased by2.7%

Lines of code

2182

increased by2.78%

Number of lines in readme file

406

increased by4.64%

No dependency changes