webcimes-select - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

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

@@ -144,2 +144,6 @@ /**
     /**
+     * Event init dropdown on click on native select
+     */
+    private onNativeSelectClick;
+    /**
      * Event clear selected option on select
@@ -146,0 +150,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;idDropdownOptions;texts={en:{removeOptionText:"Remove option",removeAllOptionsText:"Remove all options",searchPlaceholderText:"Search",searchNoResultsText:"No results found",optionIconSelectedText:"Selected"},fr:{removeOptionText:"Supprimer l'option",removeAllOptionsText:"Supprimer toutes les options",searchPlaceholderText:"Rechercher",searchNoResultsText:"Aucun résultat trouvé",optionIconSelectedText:"Sélectionné"},es:{removeOptionText:"Eliminar opción",removeAllOptionsText:"Eliminar todas las opciones",searchPlaceholderText:"Buscar",searchNoResultsText:"No se encontraron resultados",optionIconSelectedText:"Seleccionado"},de:{removeOptionText:"Option entfernen",removeAllOptionsText:"Alle Optionen entfernen",searchPlaceholderText:"Suche",searchNoResultsText:"Keine Ergebnisse gefunden",optionIconSelectedText:"Ausgewählt"},it:{removeOptionText:"Rimuovi opzione",removeAllOptionsText:"Rimuovi tutte le opzioni",searchPlaceholderText:"Cerca",searchNoResultsText:"Nessun risultato trovato",optionIconSelectedText:"Selezionato"},pt:{removeOptionText:"Remover opção",removeAllOptionsText:"Remover todas as opções",searchPlaceholderText:"Pesquisar",searchNoResultsText:"Nenhum resultado encontrado",optionIconSelectedText:"Selecionado"},nl:{removeOptionText:"Optie verwijderen",removeAllOptionsText:"Alle opties verwijderen",searchPlaceholderText:"Zoeken",searchNoResultsText:"Geen resultaten gevonden",optionIconSelectedText:"Geselecteerd"},ru:{removeOptionText:"Удалить опцию",removeAllOptionsText:"Удалить все опции",searchPlaceholderText:"Поиск",searchNoResultsText:"Результаты не найдены",optionIconSelectedText:"Выбрано"}};constructor(e){const t={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,keepOpenDropdown:!1,language:"en",placeholderText:null,removeOptionText:this.texts.en.removeOptionText,removeAllOptionsText:this.texts.en.removeAllOptionsText,searchPlaceholderText:this.texts.en.searchPlaceholderText,searchNoResultsText:this.texts.en.searchNoResultsText,optionIconSelectedText:this.texts.en.optionIconSelectedText,ariaLabel:null,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{}};e.language&&this.texts[e.language]&&(t.removeOptionText=this.texts[e.language].removeOptionText,t.removeAllOptionsText=this.texts[e.language].removeAllOptionsText,t.searchPlaceholderText=this.texts[e.language].searchPlaceholderText,t.searchNoResultsText=this.texts[e.language].searchNoResultsText,t.optionIconSelectedText=this.texts[e.language].optionIconSelectedText),this.options={...t,...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}getUniqueID(e,t=null){t=t??document;do{e+=Math.floor(1e4*Math.random())}while(t.querySelector(`#${e}`));return e}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",this.options.ariaLabel||this.nativeSelect.getAttribute("aria-label")&&(this.options.ariaLabel=this.nativeSelect.getAttribute("aria-label")),this.idDropdownOptions=this.getUniqueID("webcimes-dropdown-options-"),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"':""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="false" aria-haspopup="listbox" ${this.options.ariaLabel?`aria-label="${this.options.ariaLabel}"`:""} 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" title="${this.options.removeAllOptionsText}" aria-label="${this.options.removeAllOptionsText}"><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.nativeSelect.addEventListener("click",(()=>{this.initDropdown()})),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}" aria-label="${e.innerHTML}">${e.innerHTML}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?`<button type="button" class="webcimes-select__clear" title="${this.options.removeOptionText} ${e.innerHTML}" aria-label="${this.options.removeOptionText} ${e.innerHTML}"><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}" aria-label="${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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","true"),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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","false"),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"),e.setAttribute("aria-selected","false")})),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"),this.select.setAttribute("aria-expanded","true"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""}>\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}" aria-label="${this.options.searchPlaceholderText}"`:""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="true" aria-haspopup="listbox" aria-autocomplete="list">`:""}\n\t\t\t\t\t<div class="webcimes-dropdown__options" id="${this.idDropdownOptions}" style="max-height:${this.options.maxHeightOptions};" role="listbox" ${this.nativeSelect?.multiple?'aria-multiselectable="true"':""} 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.setDropdownHighlightOption(0,!0),this.select.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch),e.addEventListener("keydown",this.onDropdownKeyDown)}this.select.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.select.setAttribute("aria-expanded","false"),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("input",this.onDropdownSearch),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("keydown",this.onDropdownKeyDown),this.select.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=document.createElement("template");e.forEach(((e,o)=>{let i=document.createElement("template");if(i.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" id="${this.getUniqueID("webcimes-dropdown__option__",t.content)}" data-value="${e.value}" title="${e.innerHTML}" role="option" aria-label="${e.innerHTML}" aria-selected="${e.selected?"true":"false"}">\n\t\t\t\t${e.innerHTML}\n\t\t\t\t<svg class="webcimes-dropdown__icon-selected" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="iconSelectedTitle"><title id="iconSelectedTitle">${this.options.optionIconSelectedText}</title><path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 16.292969 8.2929688 L 10 14.585938 L 7.7070312 12.292969 L 6.2929688 13.707031 L 10 17.414062 L 17.707031 9.7070312 L 16.292969 8.2929688 z"/></svg>\n\t\t\t</div>\n`,e.closest("optgroup")){let o=e.closest("optgroup").label;if(!t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${o}" title="${o}" role="group" aria-label="${o}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label" role="presentation">${o}</div>\n\t\t\t\t\t</div>\n`,t.content.appendChild(e.content)}t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)?.appendChild(i.content)}else t.content.appendChild(i.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(t.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"),i[e]&&(o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),this.select.setAttribute("aria-activedescendant",o.id),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.setAttribute("aria-activedescendant",o.id),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.setDropdownHighlightOption(0,!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){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=e.target.closest(".webcimes-dropdown__option");if(t){let e=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(e).indexOf(t),!1)}}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){let t=e.target.closest(".webcimes-dropdown__option");t&&(t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}onDropdownDestroy(e){e.target.closest("select")!=this.nativeSelect&&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;idDropdownOptions;texts={en:{removeOptionText:"Remove option",removeAllOptionsText:"Remove all options",searchPlaceholderText:"Search",searchNoResultsText:"No results found",optionIconSelectedText:"Selected"},fr:{removeOptionText:"Supprimer l'option",removeAllOptionsText:"Supprimer toutes les options",searchPlaceholderText:"Rechercher",searchNoResultsText:"Aucun résultat trouvé",optionIconSelectedText:"Sélectionné"},es:{removeOptionText:"Eliminar opción",removeAllOptionsText:"Eliminar todas las opciones",searchPlaceholderText:"Buscar",searchNoResultsText:"No se encontraron resultados",optionIconSelectedText:"Seleccionado"},de:{removeOptionText:"Option entfernen",removeAllOptionsText:"Alle Optionen entfernen",searchPlaceholderText:"Suche",searchNoResultsText:"Keine Ergebnisse gefunden",optionIconSelectedText:"Ausgewählt"},it:{removeOptionText:"Rimuovi opzione",removeAllOptionsText:"Rimuovi tutte le opzioni",searchPlaceholderText:"Cerca",searchNoResultsText:"Nessun risultato trovato",optionIconSelectedText:"Selezionato"},pt:{removeOptionText:"Remover opção",removeAllOptionsText:"Remover todas as opções",searchPlaceholderText:"Pesquisar",searchNoResultsText:"Nenhum resultado encontrado",optionIconSelectedText:"Selecionado"},nl:{removeOptionText:"Optie verwijderen",removeAllOptionsText:"Alle opties verwijderen",searchPlaceholderText:"Zoeken",searchNoResultsText:"Geen resultaten gevonden",optionIconSelectedText:"Geselecteerd"},ru:{removeOptionText:"Удалить опцию",removeAllOptionsText:"Удалить все опции",searchPlaceholderText:"Поиск",searchNoResultsText:"Результаты не найдены",optionIconSelectedText:"Выбрано"}};constructor(e){const t={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,keepOpenDropdown:!1,language:"en",placeholderText:null,removeOptionText:this.texts.en.removeOptionText,removeAllOptionsText:this.texts.en.removeAllOptionsText,searchPlaceholderText:this.texts.en.searchPlaceholderText,searchNoResultsText:this.texts.en.searchNoResultsText,optionIconSelectedText:this.texts.en.optionIconSelectedText,ariaLabel:null,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{}};e.language&&this.texts[e.language]&&(t.removeOptionText=this.texts[e.language].removeOptionText,t.removeAllOptionsText=this.texts[e.language].removeAllOptionsText,t.searchPlaceholderText=this.texts[e.language].searchPlaceholderText,t.searchNoResultsText=this.texts[e.language].searchNoResultsText,t.optionIconSelectedText=this.texts[e.language].optionIconSelectedText),this.options={...t,...e},this.onNativeSelectClick=this.onNativeSelectClick.bind(this),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}getUniqueID(e,t=null){t=t??document;do{e+=Math.floor(1e4*Math.random())}while(t.querySelector(`#${e}`));return e}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",!this.options.ariaLabel)if(this.nativeSelect.getAttribute("aria-label"))this.options.ariaLabel=this.nativeSelect.getAttribute("aria-label");else{let e=this.nativeSelect.closest("label")||document.querySelector(`label[for="${this.nativeSelect.id}"]`);e&&(this.options.ariaLabel=e.innerText.trim())}if(this.idDropdownOptions=this.getUniqueID("webcimes-dropdown-options-"),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"':""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="false" aria-haspopup="listbox" ${this.options.ariaLabel?`aria-label="${this.options.ariaLabel}"`:""} 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" title="${this.options.removeAllOptionsText}" aria-label="${this.options.removeAllOptionsText}"><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='']").textContent),"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.nativeSelect.addEventListener("click",this.onNativeSelectClick),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.nativeSelect.removeEventListener("click",this.onNativeSelectClick),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.textContent}" aria-label="${e.textContent}">${e.textContent}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?`<button type="button" class="webcimes-select__clear" title="${this.options.removeOptionText} ${e.textContent}" aria-label="${this.options.removeOptionText} ${e.textContent}"><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}" aria-label="${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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","true"),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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","false"),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"),e.setAttribute("aria-selected","false")})),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions")),"function"==typeof this.options.onRemoveAllOptions&&this.options.onRemoveAllOptions())}onNativeSelectClick(e){this.dropdown||this.initDropdown()}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"),this.select.setAttribute("aria-expanded","true"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""}>\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}" aria-label="${this.options.searchPlaceholderText}"`:""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="true" aria-haspopup="listbox" aria-autocomplete="list">`:""}\n\t\t\t\t\t<div class="webcimes-dropdown__options" id="${this.idDropdownOptions}" style="max-height:${this.options.maxHeightOptions};" role="listbox" ${this.nativeSelect?.multiple?'aria-multiselectable="true"':""} 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.setDropdownHighlightOption(0,!0),this.select.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch),e.addEventListener("keydown",this.onDropdownKeyDown)}this.select.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.select.setAttribute("aria-expanded","false"),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("input",this.onDropdownSearch),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("keydown",this.onDropdownKeyDown),this.select.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=document.createElement("template");e.forEach(((e,o)=>{let i=document.createElement("template");if(i.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" id="${this.getUniqueID("webcimes-dropdown__option__",t.content)}" data-value="${e.value}" title="${e.textContent}" role="option" aria-label="${e.textContent}" aria-selected="${e.selected?"true":"false"}">\n\t\t\t\t${e.textContent}\n\t\t\t\t<svg class="webcimes-dropdown__icon-selected" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="iconSelectedTitle"><title id="iconSelectedTitle">${this.options.optionIconSelectedText}</title><path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 16.292969 8.2929688 L 10 14.585938 L 7.7070312 12.292969 L 6.2929688 13.707031 L 10 17.414062 L 17.707031 9.7070312 L 16.292969 8.2929688 z"/></svg>\n\t\t\t</div>\n`,e.closest("optgroup")){let o=e.closest("optgroup").label;if(!t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${o}" title="${o}" role="group" aria-label="${o}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label" role="presentation">${o}</div>\n\t\t\t\t\t</div>\n`,t.content.appendChild(e.content)}t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)?.appendChild(i.content)}else t.content.appendChild(i.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(t.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"),i[e]&&(o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),this.select.setAttribute("aria-activedescendant",o.id),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.setAttribute("aria-activedescendant",o.id),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&&(e.textContent&&t.test(e.textContent)||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.textContent=this.options.searchNoResultsText,o.push(e)}this.setDropdownOptions(o),this.setDropdownPosition(!0),this.setDropdownHighlightOption(0,!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){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=e.target.closest(".webcimes-dropdown__option");if(t){let e=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(e).indexOf(t),!1)}}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){let t=e.target.closest(".webcimes-dropdown__option");t&&(t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}onDropdownDestroy(e){e.target.closest("select")!=this.nativeSelect&&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

@@ -144,2 +144,6 @@ /**
     /**
+     * Event init dropdown on click on native select
+     */
+    private onNativeSelectClick;
+    /**
      * Event clear selected option on select
@@ -146,0 +150,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;idDropdownOptions;texts={en:{removeOptionText:"Remove option",removeAllOptionsText:"Remove all options",searchPlaceholderText:"Search",searchNoResultsText:"No results found",optionIconSelectedText:"Selected"},fr:{removeOptionText:"Supprimer l'option",removeAllOptionsText:"Supprimer toutes les options",searchPlaceholderText:"Rechercher",searchNoResultsText:"Aucun résultat trouvé",optionIconSelectedText:"Sélectionné"},es:{removeOptionText:"Eliminar opción",removeAllOptionsText:"Eliminar todas las opciones",searchPlaceholderText:"Buscar",searchNoResultsText:"No se encontraron resultados",optionIconSelectedText:"Seleccionado"},de:{removeOptionText:"Option entfernen",removeAllOptionsText:"Alle Optionen entfernen",searchPlaceholderText:"Suche",searchNoResultsText:"Keine Ergebnisse gefunden",optionIconSelectedText:"Ausgewählt"},it:{removeOptionText:"Rimuovi opzione",removeAllOptionsText:"Rimuovi tutte le opzioni",searchPlaceholderText:"Cerca",searchNoResultsText:"Nessun risultato trovato",optionIconSelectedText:"Selezionato"},pt:{removeOptionText:"Remover opção",removeAllOptionsText:"Remover todas as opções",searchPlaceholderText:"Pesquisar",searchNoResultsText:"Nenhum resultado encontrado",optionIconSelectedText:"Selecionado"},nl:{removeOptionText:"Optie verwijderen",removeAllOptionsText:"Alle opties verwijderen",searchPlaceholderText:"Zoeken",searchNoResultsText:"Geen resultaten gevonden",optionIconSelectedText:"Geselecteerd"},ru:{removeOptionText:"Удалить опцию",removeAllOptionsText:"Удалить все опции",searchPlaceholderText:"Поиск",searchNoResultsText:"Результаты не найдены",optionIconSelectedText:"Выбрано"}};constructor(e){const t={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,keepOpenDropdown:!1,language:"en",placeholderText:null,removeOptionText:this.texts.en.removeOptionText,removeAllOptionsText:this.texts.en.removeAllOptionsText,searchPlaceholderText:this.texts.en.searchPlaceholderText,searchNoResultsText:this.texts.en.searchNoResultsText,optionIconSelectedText:this.texts.en.optionIconSelectedText,ariaLabel:null,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{}};e.language&&this.texts[e.language]&&(t.removeOptionText=this.texts[e.language].removeOptionText,t.removeAllOptionsText=this.texts[e.language].removeAllOptionsText,t.searchPlaceholderText=this.texts[e.language].searchPlaceholderText,t.searchNoResultsText=this.texts[e.language].searchNoResultsText,t.optionIconSelectedText=this.texts[e.language].optionIconSelectedText),this.options={...t,...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}getUniqueID(e,t=null){t=t??document;do{e+=Math.floor(1e4*Math.random())}while(t.querySelector(`#${e}`));return e}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",this.options.ariaLabel||this.nativeSelect.getAttribute("aria-label")&&(this.options.ariaLabel=this.nativeSelect.getAttribute("aria-label")),this.idDropdownOptions=this.getUniqueID("webcimes-dropdown-options-"),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"':""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="false" aria-haspopup="listbox" ${this.options.ariaLabel?`aria-label="${this.options.ariaLabel}"`:""} 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" title="${this.options.removeAllOptionsText}" aria-label="${this.options.removeAllOptionsText}"><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.nativeSelect.addEventListener("click",(()=>{this.initDropdown()})),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}" aria-label="${e.innerHTML}">${e.innerHTML}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?`<button type="button" class="webcimes-select__clear" title="${this.options.removeOptionText} ${e.innerHTML}" aria-label="${this.options.removeOptionText} ${e.innerHTML}"><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}" aria-label="${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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","true"),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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","false"),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"),e.setAttribute("aria-selected","false")})),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"),this.select.setAttribute("aria-expanded","true"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""}>\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}" aria-label="${this.options.searchPlaceholderText}"`:""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="true" aria-haspopup="listbox" aria-autocomplete="list">`:""}\n\t\t\t\t\t<div class="webcimes-dropdown__options" id="${this.idDropdownOptions}" style="max-height:${this.options.maxHeightOptions};" role="listbox" ${this.nativeSelect?.multiple?'aria-multiselectable="true"':""} 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.setDropdownHighlightOption(0,!0),this.select.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch),e.addEventListener("keydown",this.onDropdownKeyDown)}this.select.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.select.setAttribute("aria-expanded","false"),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("input",this.onDropdownSearch),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("keydown",this.onDropdownKeyDown),this.select.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=document.createElement("template");e.forEach(((e,o)=>{let i=document.createElement("template");if(i.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" id="${this.getUniqueID("webcimes-dropdown__option__",t.content)}" data-value="${e.value}" title="${e.innerHTML}" role="option" aria-label="${e.innerHTML}" aria-selected="${e.selected?"true":"false"}">\n\t\t\t\t${e.innerHTML}\n\t\t\t\t<svg class="webcimes-dropdown__icon-selected" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="iconSelectedTitle"><title id="iconSelectedTitle">${this.options.optionIconSelectedText}</title><path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 16.292969 8.2929688 L 10 14.585938 L 7.7070312 12.292969 L 6.2929688 13.707031 L 10 17.414062 L 17.707031 9.7070312 L 16.292969 8.2929688 z"/></svg>\n\t\t\t</div>\n`,e.closest("optgroup")){let o=e.closest("optgroup").label;if(!t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${o}" title="${o}" role="group" aria-label="${o}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label" role="presentation">${o}</div>\n\t\t\t\t\t</div>\n`,t.content.appendChild(e.content)}t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)?.appendChild(i.content)}else t.content.appendChild(i.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(t.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"),i[e]&&(o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),this.select.setAttribute("aria-activedescendant",o.id),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.setAttribute("aria-activedescendant",o.id),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.setDropdownHighlightOption(0,!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){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=e.target.closest(".webcimes-dropdown__option");if(t){let e=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(e).indexOf(t),!1)}}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){let t=e.target.closest(".webcimes-dropdown__option");t&&(t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}onDropdownDestroy(e){e.target.closest("select")!=this.nativeSelect&&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;idDropdownOptions;texts={en:{removeOptionText:"Remove option",removeAllOptionsText:"Remove all options",searchPlaceholderText:"Search",searchNoResultsText:"No results found",optionIconSelectedText:"Selected"},fr:{removeOptionText:"Supprimer l'option",removeAllOptionsText:"Supprimer toutes les options",searchPlaceholderText:"Rechercher",searchNoResultsText:"Aucun résultat trouvé",optionIconSelectedText:"Sélectionné"},es:{removeOptionText:"Eliminar opción",removeAllOptionsText:"Eliminar todas las opciones",searchPlaceholderText:"Buscar",searchNoResultsText:"No se encontraron resultados",optionIconSelectedText:"Seleccionado"},de:{removeOptionText:"Option entfernen",removeAllOptionsText:"Alle Optionen entfernen",searchPlaceholderText:"Suche",searchNoResultsText:"Keine Ergebnisse gefunden",optionIconSelectedText:"Ausgewählt"},it:{removeOptionText:"Rimuovi opzione",removeAllOptionsText:"Rimuovi tutte le opzioni",searchPlaceholderText:"Cerca",searchNoResultsText:"Nessun risultato trovato",optionIconSelectedText:"Selezionato"},pt:{removeOptionText:"Remover opção",removeAllOptionsText:"Remover todas as opções",searchPlaceholderText:"Pesquisar",searchNoResultsText:"Nenhum resultado encontrado",optionIconSelectedText:"Selecionado"},nl:{removeOptionText:"Optie verwijderen",removeAllOptionsText:"Alle opties verwijderen",searchPlaceholderText:"Zoeken",searchNoResultsText:"Geen resultaten gevonden",optionIconSelectedText:"Geselecteerd"},ru:{removeOptionText:"Удалить опцию",removeAllOptionsText:"Удалить все опции",searchPlaceholderText:"Поиск",searchNoResultsText:"Результаты не найдены",optionIconSelectedText:"Выбрано"}};constructor(e){const t={element:null,setId:null,setClass:null,width:"auto",height:"auto",maxHeightOptions:"200px",style:null,allowClear:!0,allowSearch:!0,searchAutoFocus:!0,keepOpenDropdown:!1,language:"en",placeholderText:null,removeOptionText:this.texts.en.removeOptionText,removeAllOptionsText:this.texts.en.removeAllOptionsText,searchPlaceholderText:this.texts.en.searchPlaceholderText,searchNoResultsText:this.texts.en.searchNoResultsText,optionIconSelectedText:this.texts.en.optionIconSelectedText,ariaLabel:null,onInit:()=>{},onDestroy:()=>{},onInitDropdown:()=>{},onDestroyDropdown:()=>{},onSearchDropdown:()=>{},onAddOption:()=>{},onRemoveOption:()=>{},onRemoveAllOptions:()=>{}};e.language&&this.texts[e.language]&&(t.removeOptionText=this.texts[e.language].removeOptionText,t.removeAllOptionsText=this.texts[e.language].removeAllOptionsText,t.searchPlaceholderText=this.texts[e.language].searchPlaceholderText,t.searchNoResultsText=this.texts[e.language].searchNoResultsText,t.optionIconSelectedText=this.texts[e.language].optionIconSelectedText),this.options={...t,...e},this.onNativeSelectClick=this.onNativeSelectClick.bind(this),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}getUniqueID(e,t=null){t=t??document;do{e+=Math.floor(1e4*Math.random())}while(t.querySelector(`#${e}`));return e}init(){if(this.nativeSelect=this.getHtmlElement(this.options.element),this.nativeSelect){if(this.nativeSelect.style.display="none",!this.options.ariaLabel)if(this.nativeSelect.getAttribute("aria-label"))this.options.ariaLabel=this.nativeSelect.getAttribute("aria-label");else{let e=this.nativeSelect.closest("label")||document.querySelector(`label[for="${this.nativeSelect.id}"]`);e&&(this.options.ariaLabel=e.innerText.trim())}if(this.idDropdownOptions=this.getUniqueID("webcimes-dropdown-options-"),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"':""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="false" aria-haspopup="listbox" ${this.options.ariaLabel?`aria-label="${this.options.ariaLabel}"`:""} 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" title="${this.options.removeAllOptionsText}" aria-label="${this.options.removeAllOptionsText}"><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='']").textContent),"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.nativeSelect.addEventListener("click",this.onNativeSelectClick),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.nativeSelect.removeEventListener("click",this.onNativeSelectClick),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.textContent}" aria-label="${e.textContent}">${e.textContent}</div>\n\t\t\t\t\t\t${this.nativeSelect.multiple&&!e.disabled?`<button type="button" class="webcimes-select__clear" title="${this.options.removeOptionText} ${e.textContent}" aria-label="${this.options.removeOptionText} ${e.textContent}"><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}" aria-label="${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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","true"),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.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${e}"]`)?.setAttribute("aria-selected","false"),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"),e.setAttribute("aria-selected","false")})),this.setDropdownPosition(!0)):this.destroyDropdown(),this.select.dispatchEvent(new CustomEvent("onRemoveAllOptions")),"function"==typeof this.options.onRemoveAllOptions&&this.options.onRemoveAllOptions())}onNativeSelectClick(e){this.dropdown||this.initDropdown()}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"),this.select.setAttribute("aria-expanded","true"),document.body.insertAdjacentHTML("beforeend",`<div class="webcimes-dropdown" ${"rtl"==this.nativeSelect.getAttribute("dir")?'dir="rtl"':""}>\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}" aria-label="${this.options.searchPlaceholderText}"`:""} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="true" aria-haspopup="listbox" aria-autocomplete="list">`:""}\n\t\t\t\t\t<div class="webcimes-dropdown__options" id="${this.idDropdownOptions}" style="max-height:${this.options.maxHeightOptions};" role="listbox" ${this.nativeSelect?.multiple?'aria-multiselectable="true"':""} 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.setDropdownHighlightOption(0,!0),this.select.focus(),this.options.allowSearch){let e=this.dropdown.querySelector(".webcimes-dropdown__search-input");this.options.searchAutoFocus&&e.focus(),e.addEventListener("input",this.onDropdownSearch),e.addEventListener("keydown",this.onDropdownKeyDown)}this.select.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.select.setAttribute("aria-expanded","false"),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("input",this.onDropdownSearch),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.removeEventListener("keydown",this.onDropdownKeyDown),this.select.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=document.createElement("template");e.forEach(((e,o)=>{let i=document.createElement("template");if(i.innerHTML=`<div class="webcimes-dropdown__option ${e.selected?"webcimes-dropdown__option--selected":""} ${e.disabled?"webcimes-dropdown__option--disabled":""} ${e.classList.toString()}" id="${this.getUniqueID("webcimes-dropdown__option__",t.content)}" data-value="${e.value}" title="${e.textContent}" role="option" aria-label="${e.textContent}" aria-selected="${e.selected?"true":"false"}">\n\t\t\t\t${e.textContent}\n\t\t\t\t<svg class="webcimes-dropdown__icon-selected" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="iconSelectedTitle"><title id="iconSelectedTitle">${this.options.optionIconSelectedText}</title><path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 16.292969 8.2929688 L 10 14.585938 L 7.7070312 12.292969 L 6.2929688 13.707031 L 10 17.414062 L 17.707031 9.7070312 L 16.292969 8.2929688 z"/></svg>\n\t\t\t</div>\n`,e.closest("optgroup")){let o=e.closest("optgroup").label;if(!t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)){let e=document.createElement("template");e.innerHTML=`<div class="webcimes-dropdown__opt-group" data-label="${o}" title="${o}" role="group" aria-label="${o}">\n\t\t\t\t\t\t<div class="webcimes-dropdown__opt-group-label" role="presentation">${o}</div>\n\t\t\t\t\t</div>\n`,t.content.appendChild(e.content)}t.content.querySelector(`.webcimes-dropdown__opt-group[data-label='${o}']`)?.appendChild(i.content)}else t.content.appendChild(i.content)})),this.dropdown.querySelector(".webcimes-dropdown__options").replaceChildren(t.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"),i[e]&&(o=i[e],o.classList.add("webcimes-dropdown__option--highlighted"),this.select.setAttribute("aria-activedescendant",o.id),this.dropdown.querySelector(".webcimes-dropdown__search-input")?.setAttribute("aria-activedescendant",o.id),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&&(e.textContent&&t.test(e.textContent)||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.textContent=this.options.searchNoResultsText,o.push(e)}this.setDropdownOptions(o),this.setDropdownPosition(!0),this.setDropdownHighlightOption(0,!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){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=e.target.closest(".webcimes-dropdown__option");if(t){let e=this.dropdown.querySelectorAll(".webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)");this.setDropdownHighlightOption(Array.from(e).indexOf(t),!1)}}onDropdownResize(e){this.setDropdownPosition()}onDropdownClickOption(e){let t=e.target.closest(".webcimes-dropdown__option");t&&(t.classList.contains("webcimes-dropdown__option--selected")?this.removeOption(t.getAttribute("data-value")):this.addOption(t.getAttribute("data-value")))}onDropdownDestroy(e){e.target.closest("select")!=this.nativeSelect&&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.1.1",
+  "version": "1.1.2",
   "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, accessibility, 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

@@ -188,3 +188,3 @@ # webcimes-select
 ### Placeholder:
-By default, the placeholder will be set based on the text defined inside the option having the `value=""` attribute (this is a method to set a placeholder on a natural select). We also recommend adding the `disabled` and `selected` attributes like this:
+By default, the placeholder will be set based on the text defined inside the option having the `value=""` attribute (this is a method to set a placeholder on a native select). We also recommend adding the `disabled` and `selected` attributes like this:
 
@@ -200,5 +200,25 @@ ```html
 ### Aria label:
-By default, the aria-label will be set based on the attribute of the natural select, like this:
 
+1. By default, the label will be set based on the label tag relative to the native select, for example:
+
 ```html
+<label>
+	My label
+	<select name="mySelect">
+		...
+	</select>
+</label>
+```
+or
+```html
+<label for="mySelect">My label</label>
+<select id="mySelect">
+	...
+</select>
+```
+In the following case, `aria-label` will automatically be set to `"My label"`
+
+2. Another way will be to define an `aria-label` attribute on the native select, like this:
+
+```html
 <select name="mySelect" title="My title" aria-label="My label">
@@ -208,5 +228,15 @@ ...
 ```
+Just note that it will replace the `aria-label` text in case you have use the `label` tag with the previous method (1.).
 
-But if you prefer, you can also set the aria-label with the `ariaLabel` option. Just note that it will replace the aria-label text in case you also set the aria-label with the previous method.
+3. But if you prefer, you can also set the aria-label with the `ariaLabel` option on `WebCimesSelect`, like this:
 
+```javascript
+const mySelect = new WebcimesSelect({
+	element: el, // Element (selector string or HTMLElement)
+	ariaLabel: "My label", // set aria-label for select, default null
+});
+```
+
+Just note that it will replace the `aria-label` text in case you have use one of the two previous method (1. & 2.).
+
 ### Customize text:
@@ -213,0 +243,0 @@ You can customize the default text by setting these options:

src/ts/webcimes-select.d.ts

@@ -144,2 +144,6 @@ /**
     /**
+     * Event init dropdown on click on native select
+     */
+    private onNativeSelectClick;
+    /**
      * Event clear selected option on select
@@ -146,0 +150,0 @@ */

src/ts/webcimes-select.ts

@@ -216,2 +216,3 @@ /**
 		// Bind "this" to all events
+		this.onNativeSelectClick = this.onNativeSelectClick.bind(this);
 		this.onClearOption = this.onClearOption.bind(this);
@@ -311,2 +312,11 @@ this.onClearAllOptions = this.onClearAllOptions.bind(this);
 				}
+				else
+				{
+					// Get label element relative to native select
+					let label = (this.nativeSelect.closest("label") || document.querySelector(`label[for="${this.nativeSelect.id}"]`)) as HTMLElement | null;
+					if(label)
+					{
+						this.options.ariaLabel = label.innerText.trim();
+					}
+				}
 			}
@@ -334,3 +344,3 @@
 				{
-					this.options.placeholderText = this.nativeSelect.querySelector("option[value='']")!.innerHTML;
+					this.options.placeholderText = this.nativeSelect.querySelector("option[value='']")!.textContent;
 				}
@@ -361,6 +371,4 @@ }
 
-			// Event open dropdown after click on label (who is relative to native select)
-			this.nativeSelect.addEventListener("click", () => {
-				this.initDropdown();
-			});
+			// Event init dropdown after click on label (who is relative to native select)
+			this.nativeSelect.addEventListener("click", this.onNativeSelectClick);
 
@@ -396,2 +404,3 @@ // Event clear all selected options on select
 		// Remove events
+		this.nativeSelect!.removeEventListener("click", this.onNativeSelectClick);
 		this.select.querySelectorAll(".webcimes-select__option .webcimes-select__clear").forEach((el) => {
@@ -471,4 +480,4 @@ el.removeEventListener("click", this.onClearOption);
 					`<div class="webcimes-select__option" data-value="${el.value}">
-						<div class="webcimes-select__option-label" title="${el.innerHTML}" aria-label="${el.innerHTML}">${el.innerHTML}</div>
-						${this.nativeSelect!.multiple && !el.disabled?`<button type="button" class="webcimes-select__clear" title="${this.options.removeOptionText} ${el.innerHTML}" aria-label="${this.options.removeOptionText} ${el.innerHTML}"><div class="webcimes-select__cross"></div></button>`:``}
+						<div class="webcimes-select__option-label" title="${el.textContent}" aria-label="${el.textContent}">${el.textContent}</div>
+						${this.nativeSelect!.multiple && !el.disabled?`<button type="button" class="webcimes-select__clear" title="${this.options.removeOptionText} ${el.textContent}" aria-label="${this.options.removeOptionText} ${el.textContent}"><div class="webcimes-select__cross"></div></button>`:``}
 					</div>\n`;
@@ -664,2 +673,14 @@ this.select.querySelector(".webcimes-select__options")!.appendChild(option.content);
 	/**
+	 * Event init dropdown on click on native select
+	 */
+	private onNativeSelectClick(e: Event)
+	{
+		// If dropdown is null, create dropdown
+		if(!this.dropdown)
+		{
+			this.initDropdown();
+		}
+	}
+	
+	/**
 	 * Event clear selected option on select
@@ -867,4 +888,4 @@ */
 			let optionEl = document.createElement("template");
-			optionEl.innerHTML = `<div class="webcimes-dropdown__option ${(el.selected?`webcimes-dropdown__option--selected`:``)} ${(el.disabled?`webcimes-dropdown__option--disabled`:``)} ${el.classList.toString()}" id="${this.getUniqueID("webcimes-dropdown__option__", optionsEl.content)}" data-value="${el.value}" title="${el.innerHTML}" role="option" aria-label="${el.innerHTML}" aria-selected="${(el.selected?`true`:`false`)}">
-				${el.innerHTML}
+			optionEl.innerHTML = `<div class="webcimes-dropdown__option ${(el.selected?`webcimes-dropdown__option--selected`:``)} ${(el.disabled?`webcimes-dropdown__option--disabled`:``)} ${el.classList.toString()}" id="${this.getUniqueID("webcimes-dropdown__option__", optionsEl.content)}" data-value="${el.value}" title="${el.textContent}" role="option" aria-label="${el.textContent}" aria-selected="${(el.selected?`true`:`false`)}">
+				${el.textContent}
 				<svg class="webcimes-dropdown__icon-selected" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="iconSelectedTitle"><title id="iconSelectedTitle">${this.options.optionIconSelectedText}</title><path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 16.292969 8.2929688 L 10 14.585938 L 7.7070312 12.292969 L 6.2929688 13.707031 L 10 17.414062 L 17.707031 9.7070312 L 16.292969 8.2929688 z"/></svg>
@@ -981,3 +1002,3 @@ </div>\n`;
 			{
-				if(regexSearch.test(el.innerHTML) || regexSearch.test(el.value))
+				if((el.textContent && regexSearch.test(el.textContent)) || regexSearch.test(el.value))
 				{
@@ -994,3 +1015,3 @@ return true;
 			optionEl.classList.add("webcimes-dropdown__option--no-results");
-			optionEl.innerHTML = this.options.searchNoResultsText;
+			optionEl.textContent = this.options.searchNoResultsText;
 			options.push(optionEl);
@@ -1106,3 +1127,7 @@ }
 	{
-		if((e.target as HTMLElement).closest("select") != this.nativeSelect && (e.target as HTMLElement).closest(".webcimes-select") != this.select && (e.target as HTMLElement).closest(".webcimes-dropdown") != this.dropdown)
+		if(
+			(e.target as HTMLElement).closest("select") != this.nativeSelect &&
+			(e.target as HTMLElement).closest(".webcimes-select") != this.select &&
+			(e.target as HTMLElement).closest(".webcimes-dropdown") != this.dropdown
+		)
 		{
@@ -1109,0 +1134,0 @@ this.destroyDropdown();

No alert changes

Improved metrics

Total package byte prevSize

305967

increased by1.59%

Lines of code

2494

increased by1.59%

Number of lines in readme file

478

increased by6.7%

No dependency changes