webcimes-select - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

demo/script_esm.js

@@ -17,9 +17,14 @@ // Import webcimes-select
             style: null, // add extra css style to select, default null
-            placeholderText: null, // set placeholder text, default null
             allowClear: true, // allow clear selected options, default true
             allowSearch: true, // allow search options, default true 
             searchAutoFocus: true, // autofocus on search field when open select, default true
+            keepOpenDropdown: false, // keep dropdown open after selecting an option, default false
+            language: "en", // set default language for texts, default "en"
+            placeholderText: null, // set placeholder text, default null
+            removeOptionText: "Remove option", // set remove text for title and aria-label for remove option button, default "Remove option"
+            removeAllOptionsText: "Remove all options", // set remove text for title and aria-label for remove all options button, default "Remove all options"
             searchPlaceholderText: "Search", // set placeholder text on search field, default "Search"
             searchNoResultsText: "No results found", // set text for no results found on search, default "No results found"
-            keepOpenDropdown: false, // keep dropdown open after selecting an option, default false
+            optionIconSelectedText: "Selected", // set icon selected text into option dropdown, default "Selected"
+            ariaLabel: null, // set aria-label for select, default null
             onInit(){console.log("onInit");}, // callback on init select
@@ -26,0 +31,0 @@ onDestroy(){console.log("onDestroy");}, // callback on destroy select

demo/script_udm.js

@@ -15,9 +15,14 @@
             style: null, // add extra css style to select, default null
-            placeholderText: null, // set placeholder text, default null
             allowClear: true, // allow clear selected options, default true
             allowSearch: true, // allow search options, default true 
             searchAutoFocus: true, // autofocus on search field when open select, default true
+            keepOpenDropdown: false, // keep dropdown open after selecting an option, default false
+            language: "en", // set default language for texts, default "en"
+            placeholderText: null, // set placeholder text, default null
+            removeOptionText: "Remove option", // set remove text for title and aria-label for remove option button, default "Remove option"
+            removeAllOptionsText: "Remove all options", // set remove text for title and aria-label for remove all options button, default "Remove all options"
             searchPlaceholderText: "Search", // set placeholder text on search field, default "Search"
             searchNoResultsText: "No results found", // set text for no results found on search, default "No results found"
-            keepOpenDropdown: false, // keep dropdown open after selecting an option, default false
+            optionIconSelectedText: "Selected", // set icon selected text into option dropdown, default "Selected"
+            ariaLabel: null, // set aria-label for select, default null
             onInit(){console.log("onInit");}, // callback on init select
@@ -24,0 +29,0 @@ onDestroy(){console.log("onDestroy");}, // callback on destroy select

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

@@ -40,4 +40,2 @@ /**
     style: string | null;
-    /** set placeholder text, default null */
-    placeholderText: string | null;
     /** allow clear selected options, default true */
@@ -49,2 +47,12 @@ allowClear: boolean;
     searchAutoFocus: boolean;
+    /** keep dropdown open after selecting an option, default false */
+    keepOpenDropdown: boolean;
+    /** set default language for texts, default "en" */
+    language: string;
+    /** set placeholder text, default null */
+    placeholderText: string | null;
+    /** set remove text for title and aria-label for remove option button, default "Remove option" */
+    removeOptionText: string;
+    /** set remove text for title and aria-label for remove all options button, default "Remove all options" */
+    removeAllOptionsText: string;
     /** set placeholder text on search field, default "Search" */
@@ -54,4 +62,6 @@ searchPlaceholderText: string | null;
     searchNoResultsText: string | null;
-    /** keep dropdown open after selecting an option, default false */
-    keepOpenDropdown: boolean;
+    /** set icon selected text into option dropdown, default "Selected" */
+    optionIconSelectedText: string | null;
+    /** set aria-label for select, default null */
+    ariaLabel: string | null;
     /** callback on init select */
@@ -86,2 +96,6 @@ onInit(): void;
     private options;
+    /** Get the unique id of dropdown options */
+    private idDropdownOptions;
+    /** Set the default texts for each language */
+    private texts;
     /**
@@ -100,2 +114,8 @@ * Create select
     /**
+     * Get a unique ID, related to the prefix
+     * @param prefix
+     * @param element Find if the ID already exist in provided dom element
+     */
+    private getUniqueID;
+    /**
      * Initialization of select
@@ -102,0 +122,0 @@ */

dist/js/webcimes-select.esm.js

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

@@ -40,4 +40,2 @@ /**
     style: string | null;
-    /** set placeholder text, default null */
-    placeholderText: string | null;
     /** allow clear selected options, default true */
@@ -49,2 +47,12 @@ allowClear: boolean;
     searchAutoFocus: boolean;
+    /** keep dropdown open after selecting an option, default false */
+    keepOpenDropdown: boolean;
+    /** set default language for texts, default "en" */
+    language: string;
+    /** set placeholder text, default null */
+    placeholderText: string | null;
+    /** set remove text for title and aria-label for remove option button, default "Remove option" */
+    removeOptionText: string;
+    /** set remove text for title and aria-label for remove all options button, default "Remove all options" */
+    removeAllOptionsText: string;
     /** set placeholder text on search field, default "Search" */
@@ -54,4 +62,6 @@ searchPlaceholderText: string | null;
     searchNoResultsText: string | null;
-    /** keep dropdown open after selecting an option, default false */
-    keepOpenDropdown: boolean;
+    /** set icon selected text into option dropdown, default "Selected" */
+    optionIconSelectedText: string | null;
+    /** set aria-label for select, default null */
+    ariaLabel: string | null;
     /** callback on init select */
@@ -86,2 +96,6 @@ onInit(): void;
     private options;
+    /** Get the unique id of dropdown options */
+    private idDropdownOptions;
+    /** Set the default texts for each language */
+    private texts;
     /**
@@ -100,2 +114,8 @@ * Create select
     /**
+     * Get a unique ID, related to the prefix
+     * @param prefix
+     * @param element Find if the ID already exist in provided dom element
+     */
+    private getUniqueID;
+    /**
      * Initialization of select
@@ -102,0 +122,0 @@ */

dist/js/webcimes-select.udm.js

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

package.json

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

README.md

 # webcimes-select
 
-Just create beautiful select boxes, it supports search, single select, multiple select, keyboard control, clear options, dropdown can also be opened over an overflow parent, optgroup support, rtl support, and many other options.
+Just create beautiful select boxes, it supports single select and multiple select.
 
+Many features exist, like search, multilingual, keyboard control, delete options, dropdown can also be opened on overflow parent, optgroup support, rtl support and many other options.
+
+`webcimes-select` also comes with full support for web accessibility and screen readers.
+
 All options selected by Webcimes-Select are directly applied to the form's native select, to support sending native form.
@@ -20,3 +24,3 @@
 ### ESM
-Compared to JS bundlers (like Webpack), using ESM in the browser requires you to use the full path and filename instead of the module name.
+Compared to JS bundlers (like Webpack or Vite), using ESM in the browser requires you to use the full path and filename instead of the module name.
 You can use an importmap to resolve the arbitrary module names to complete paths (not needed if you use JS bundlers):
@@ -57,3 +61,3 @@ ```html
 
-Or with JS bundlers (like Webpack) you can call directly the module :
+Or with JS bundlers (like Webpack or Vite) you can call directly the module :
 ```javascript
@@ -100,5 +104,8 @@ import { WebcimesSelect } from "webcimes-select";
             searchAutoFocus: true, // autofocus on search field when open select, default true
+            keepOpenDropdown: false, // keep dropdown open after selecting an option, default false
+            removeOptionText: "Remove option", // set remove text for title and aria-label for remove option button, default "Remove option"
+            removeAllOptionsText: "Remove all options", // set remove text for title and aria-label for remove all options button, default "Remove all options"
             searchPlaceholderText: "Search", // set placeholder text on search field, default "Search"
             searchNoResultsText: "No results found", // set text for no results found on search, default "No results found"
-            keepOpenDropdown: false, // keep dropdown open after selecting an option, default false
+            optionIconSelectedText: "Selected", // set icon selected text into option dropdown, default "Selected"
             onInit(){console.log("onInit");}, // callback on init select
@@ -194,7 +201,22 @@ onDestroy(){console.log("onDestroy");}, // callback on destroy select
 
+### Aria label:
+By default, the aria-label will be set based on the attribute of the natural select, like this:
+
+```html
+<select name="mySelect" title="My title" aria-label="My label">
+	...
+</select>
+```
+
+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.
+
 ### Customize text:
 You can customize the default text by setting these options:
 - `placeholderText` is used to set/replace basic placeholder text.
+- `removeOptionText` is the title and aria-label text that appears on remove option button.
+- `removeAllOptionsText` is the title and aria-label text that appears on remove all options button.
 - `searchPlaceholderText` matches the placeholder text inside the search field in the dropdown container.
 - `searchNoResultsText` is the text that appears if no results are found from the search field.
+- `optionIconSelectedText` is the the title and aria-label text that appears on icon option dropdown if option is selected.
+- `ariaLabel` is the accessibility text that appears on the select.
 
@@ -205,7 +227,26 @@ ```javascript
 	placeholderText: null, // set placeholder text, default null
+	removeOptionText: "Remove option", // set remove text for title and aria-label for remove option button, default "Remove option"
+	removeAllOptionsText: "Remove all options", // set remove text for title and aria-label for remove all options button, default "Remove all options"
 	searchPlaceholderText: "Search", // set placeholder text on search field, default "Search"
 	searchNoResultsText: "No results found", // set text for no results found on search, default "No results found"
+	optionIconSelectedText: "Selected", // set icon selected text into option dropdown, default "Selected"
+	ariaLabel: null, // set aria-label for select, default null
 });
 ```
 
+### Customize default language for texts:
+
+You can choose a default language for all texts, actually `"en" / "fr" / "es" / "de" / "it" / "pt" / "nl" / "ru" ` is supported.
+
+All default texts will be translated into the defined language.
+
+```javascript
+const mySelect = new WebcimesSelect({
+	element: el, // Element (selector string or HTMLElement)
+	language: "en", // set default language for texts, default "en"
+});
+```
+
+Just note that if you customize the default text for any of these attributes "`removeOptionText, removeAllOptionsText, searchPlaceholderText, searchNoResultsText, optionIconSelectedText`", it will override the default text, even if you set the `language` attribute to a language other than the default `"en"` language.
+
 ### Add extra style to the select:
@@ -383,23 +424,24 @@ You can define the style of the select with `css`, but you can also use the `style` property which allows to directly add an additional style to the select.
 	--select-padding: 2.5px 5px;
-	--select-border: 1px solid #ddd;
+	--select-border: 1px solid #cbd5e1;
 	--select-border-radius: 4px;
-	--select-focus-border-color: #aaa;
+	--select-focus-border-color: #94a3b8;
+	--select-disabled-opacity: 0.5;
 	--select-option-margin: 2.5px 5px 2.5px 0;
-	--select-option-padding: 5px;
-	--select-option-multiple-color: inherit;
-	--select-option-multiple-background: #ddd;
-	--select-option-multiple-border: 1px solid #bbb;
+	--select-option-padding: 5px 10px;
+	--select-option-multiple-color: #334155;
+	--select-option-multiple-background: #e2e8f0;
+	--select-option-multiple-border: 1px solid #cbd5e1;
 	--select-option-multiple-border-radius: 4px;
-	--select-option-multiple-clear-background: #ddd;
-	--select-option-multiple-clear-background-hover: #eee;
+	--select-option-multiple-clear-background: #e2e8f0;
+	--select-option-multiple-clear-background-hover: #f1f5f9;
 	--select-placeholder-opacity: 0.7;
-	--select-cross-background: #666;
-	--select-cross-background-hover: #000;
-	--select-arrow-background: #666;
+	--select-cross-background: #64748b;
+	--select-cross-background-hover: #334155;
+	--select-arrow-background: #64748b;
 	--select-input-padding: 10px;
 	--select-dropdown-option-padding: 10px;
-	--select-dropdown-option-color-selected: inherit;
-	--select-dropdown-option-background-selected: #eee;
-	--select-dropdown-option-color-hightlight: inherit;
-	--select-dropdown-option-background-hightlight: #ccc;
+	--select-dropdown-option-color-selected: #334155;
+	--select-dropdown-option-background-selected: #e2e8f0;
+	--select-dropdown-option-color-hightlight: #fff;
+	--select-dropdown-option-background-hightlight: #64748b;
 	--select-dropdown-option-disabled-opacity: 0.5;
@@ -406,0 +448,0 @@ --select-dropdown-optgroup-option-padding: 10px 10px 10px 20px;

src/ts/webcimes-select.d.ts

@@ -40,4 +40,2 @@ /**
     style: string | null;
-    /** set placeholder text, default null */
-    placeholderText: string | null;
     /** allow clear selected options, default true */
@@ -49,2 +47,12 @@ allowClear: boolean;
     searchAutoFocus: boolean;
+    /** keep dropdown open after selecting an option, default false */
+    keepOpenDropdown: boolean;
+    /** set default language for texts, default "en" */
+    language: string;
+    /** set placeholder text, default null */
+    placeholderText: string | null;
+    /** set remove text for title and aria-label for remove option button, default "Remove option" */
+    removeOptionText: string;
+    /** set remove text for title and aria-label for remove all options button, default "Remove all options" */
+    removeAllOptionsText: string;
     /** set placeholder text on search field, default "Search" */
@@ -54,4 +62,6 @@ searchPlaceholderText: string | null;
     searchNoResultsText: string | null;
-    /** keep dropdown open after selecting an option, default false */
-    keepOpenDropdown: boolean;
+    /** set icon selected text into option dropdown, default "Selected" */
+    optionIconSelectedText: string | null;
+    /** set aria-label for select, default null */
+    ariaLabel: string | null;
     /** callback on init select */
@@ -86,2 +96,6 @@ onInit(): void;
     private options;
+    /** Get the unique id of dropdown options */
+    private idDropdownOptions;
+    /** Set the default texts for each language */
+    private texts;
     /**
@@ -100,2 +114,8 @@ * Create select
     /**
+     * Get a unique ID, related to the prefix
+     * @param prefix
+     * @param element Find if the ID already exist in provided dom element
+     */
+    private getUniqueID;
+    /**
      * Initialization of select
@@ -102,0 +122,0 @@ */

src/ts/webcimes-select.ts

@@ -44,4 +44,2 @@ /**
 	style: string | null;
-	/** set placeholder text, default null */
-	placeholderText: string | null;
 	/** allow clear selected options, default true */
@@ -53,2 +51,12 @@ allowClear: boolean;
 	searchAutoFocus: boolean;
+	/** keep dropdown open after selecting an option, default false */
+	keepOpenDropdown: boolean;
+	/** set default language for texts, default "en" */
+	language: string;
+	/** set placeholder text, default null */
+	placeholderText: string | null;
+    /** set remove text for title and aria-label for remove option button, default "Remove option" */
+    removeOptionText: string;
+    /** set remove text for title and aria-label for remove all options button, default "Remove all options" */
+    removeAllOptionsText: string;
 	/** set placeholder text on search field, default "Search" */
@@ -58,4 +66,6 @@ searchPlaceholderText: string | null;
 	searchNoResultsText: string | null;
-	/** keep dropdown open after selecting an option, default false */
-	keepOpenDropdown: boolean;
+	/** set icon selected text into option dropdown, default "Selected" */
+	optionIconSelectedText: string | null;
+	/** set aria-label for select, default null */
+	ariaLabel: string | null;
 	/** callback on init select */
@@ -95,3 +105,66 @@ onInit(): void;
 	private options: Options;
+	
+	/** Get the unique id of dropdown options */
+	private idDropdownOptions: string;
 
+	/** Set the default texts for each language */
+	private texts: { [key: string]: { [key: string]: string } } = {
+		"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": "Выбрано",
+		},
+	}
+
 	/**
@@ -111,9 +184,14 @@ * Create select
 			style: null,
-			placeholderText: null,
 			allowClear: true,
 			allowSearch: true,
 			searchAutoFocus: true,
-			searchPlaceholderText: "Search",
-			searchNoResultsText: "No results found",
 			keepOpenDropdown: false,
+			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: () => {},
@@ -128,2 +206,14 @@ onDestroy: () => {},
 		}
+
+		// If options language is set, set texts according to the language
+		if(options.language && this.texts[options.language])
+		{
+			defaults.removeOptionText = this.texts[options.language]["removeOptionText"];
+			defaults.removeAllOptionsText = this.texts[options.language]["removeAllOptionsText"];
+			defaults.searchPlaceholderText = this.texts[options.language]["searchPlaceholderText"];
+			defaults.searchNoResultsText = this.texts[options.language]["searchNoResultsText"];
+			defaults.optionIconSelectedText = this.texts[options.language]["optionIconSelectedText"];
+		}
+
+		// Merge defaults and options
 		this.options = {...defaults, ...options};
@@ -186,2 +276,22 @@
 	}
+	
+	/**
+	 * Get a unique ID, related to the prefix
+	 * @param prefix
+	 * @param element Find if the ID already exist in provided dom element
+	 */
+	
+	private getUniqueID(prefix: string, element: HTMLElement | Document | DocumentFragment | null = null)
+	{
+		// If element is null, set document
+		element = element ?? document;
+		
+		// Generate a unique ID
+		do
+		{
+			prefix += Math.floor(Math.random()*10000);
+		} while (element.querySelector(`#${prefix}`));
+		
+		return prefix;
+	}
 
@@ -200,7 +310,19 @@ /**
 
+			// Set aria label
+			if(!this.options.ariaLabel)
+			{
+				if(this.nativeSelect.getAttribute("aria-label"))
+				{
+					this.options.ariaLabel = this.nativeSelect.getAttribute("aria-label");
+				}
+			}
+
+			// Set id for dropdown options
+			this.idDropdownOptions = this.getUniqueID("webcimes-dropdown-options-");
+
 			// Append select after native select
 			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}"`:``)} ${(this.nativeSelect.getAttribute("dir")=="rtl"?`dir="rtl"`:``)} tabindex="0">
+				`<div class="webcimes-select ${(this.nativeSelect.multiple?`webcimes-select--multiple`:``)} ${this.nativeSelect.disabled?`webcimes-select--disabled`:``} ${(this.options.setClass?this.options.setClass:``)}" ${(this.options.setId?`id="${this.options.setId}"`:``)} ${(this.nativeSelect.getAttribute("dir")=="rtl"?`dir="rtl"`:``)} role="combobox" aria-controls="${this.idDropdownOptions}" aria-expanded="false" aria-haspopup="listbox" ${this.options.ariaLabel?`aria-label="${this.options.ariaLabel}"`:``} tabindex="0">
 					<div class="webcimes-select__options"></div>
-					${(this.options.allowClear?`<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>`:'')}
+					${(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>`:'')}
 					<div class="webcimes-select__arrow"></div>
@@ -347,4 +469,4 @@ </div>`
 					`<div class="webcimes-select__option" data-value="${el.value}">
-						<div class="webcimes-select__option-label" title="${el.innerHTML}">${el.innerHTML}</div>
-						${this.nativeSelect!.multiple && !el.disabled?`<button type="button" class="webcimes-select__clear"><div class="webcimes-select__cross"></div></button>`:``}
+						<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>\n`;
@@ -361,3 +483,3 @@ this.select.querySelector(".webcimes-select__options")!.appendChild(option.content);
 				`<div class="webcimes-select__option webcimes-select__option--placeholder" data-value="">
-					<div class="webcimes-select__option-label" title="${this.options.placeholderText}">${this.options.placeholderText}</div>
+					<div class="webcimes-select__option-label" title="${this.options.placeholderText}" aria-label="${this.options.placeholderText}">${this.options.placeholderText}</div>
 				</div>\n`;
@@ -409,2 +531,5 @@ this.select.querySelector(".webcimes-select__options")!.appendChild(option.content);
 
+				// Set aria-selected on dropdown option to true
+				this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${value}"]`)?.setAttribute("aria-selected", "true");
+
 				// Set position and width of dropdown
@@ -462,2 +587,5 @@ this.setDropdownPosition(true);
 				this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${value}"]`)?.classList.remove("webcimes-dropdown__option--selected");
+
+				// Set aria-selected on dropdown option to false
+				this.dropdown?.querySelector(`.webcimes-dropdown__option[data-value="${value}"]`)?.setAttribute("aria-selected", "false");
 				
@@ -512,5 +640,6 @@ // Set position and width of dropdown
 			{
-				// Remove selected class on dropdown option
+				// Remove selected class on dropdown option and set aria-selected to false
 				this.dropdown?.querySelectorAll(`.webcimes-dropdown__option`).forEach((el) => {
 					el.classList.remove("webcimes-dropdown__option--selected");
+					el.setAttribute("aria-selected", "false");
 				});
@@ -612,8 +741,9 @@
 			this.select.classList.add("webcimes-select--open");
+			this.select.setAttribute("aria-expanded", "true");
 						
 			// Append dropdown before the end of body
 			document.body.insertAdjacentHTML("beforeend", 
-				`<div class="webcimes-dropdown" ${(this.nativeSelect!.getAttribute("dir")=="rtl"?`dir="rtl"`:``)} tabindex="-1">
-					${(this.options.allowSearch?`<input class="webcimes-dropdown__search-input" type="text" name="search" autocomplete="off" ${(this.options.searchPlaceholderText?`placeholder="${this.options.searchPlaceholderText}" title="${this.options.searchPlaceholderText}"`:``)}>`:``)}
-					<div class="webcimes-dropdown__options" style="max-height:${this.options.maxHeightOptions};" tabindex="-1"></div>
+				`<div class="webcimes-dropdown" ${(this.nativeSelect!.getAttribute("dir")=="rtl"?`dir="rtl"`:``)}>
+					${(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">`:``)}
+					<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>
 				</div>`
@@ -637,4 +767,4 @@ );
 
-			// By default set focus on dropdown
-			this.dropdown.focus();
+			// Set highlight option on first option
+			this.setDropdownHighlightOption(0, true);
 
@@ -654,6 +784,9 @@ // If allowSearch active
 				searchEl.addEventListener("input", this.onDropdownSearch);
+				
+				// Event on dropdown keydown on search field
+				searchEl.addEventListener("keydown", this.onDropdownKeyDown);
 			}
 
-			// Event on keydown on dropdown 
-			this.dropdown.addEventListener("keydown", this.onDropdownKeyDown);
+			// Event on dropdown keydown on select
+			this.select.addEventListener("keydown", this.onDropdownKeyDown);
 
@@ -686,4 +819,6 @@ // Event on resize on Dropdown
 			this.select.classList.remove("webcimes-select--open");
-			(this.dropdown.querySelector(".webcimes-dropdown__search-input") as HTMLElement).removeEventListener("input", this.onDropdownSearch);
-			this.dropdown.removeEventListener("keydown", this.onDropdownKeyDown);
+			this.select.setAttribute("aria-expanded", "false");
+			(this.dropdown.querySelector(".webcimes-dropdown__search-input") as HTMLElement)?.removeEventListener("input", this.onDropdownSearch);
+			(this.dropdown.querySelector(".webcimes-dropdown__search-input") as HTMLElement)?.removeEventListener("keydown", this.onDropdownKeyDown);
+			this.select.removeEventListener("keydown", this.onDropdownKeyDown);
 			window.removeEventListener("resize", this.onDropdownResize);
@@ -730,5 +865,2 @@ ['click', 'keydown'].forEach((typeEvent) => {
 
-		// Get first highlighted option index, if option not disabled
-		let firstHighlightedOption = options.findIndex((el) => !el.disabled);
-
 		// Set options
@@ -738,3 +870,6 @@ let optionsEl = document.createElement("template");
 			let optionEl = document.createElement("template");
-			optionEl.innerHTML = `<div class="webcimes-dropdown__option ${(el.selected?`webcimes-dropdown__option--selected`:``)} ${firstHighlightedOption==index?"webcimes-dropdown__option--highlighted":""} ${(el.disabled?`webcimes-dropdown__option--disabled`:``)} ${el.classList.toString()}" data-value="${el.value}" title="${el.innerHTML}">${el.innerHTML}</div>\n`;
+			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}
+				<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>
+			</div>\n`;
 
@@ -751,4 +886,4 @@ // If option has optgroup parent
 					optGroupEl.innerHTML = 
-					`<div class="webcimes-dropdown__opt-group" data-label="${label}" title="${label}">
-						<div class="webcimes-dropdown__opt-group-label">${label}</div>
+					`<div class="webcimes-dropdown__opt-group" data-label="${label}" title="${label}" role="group" aria-label="${label}">
+						<div class="webcimes-dropdown__opt-group-label" role="presentation">${label}</div>
 					</div>\n`;
@@ -822,8 +957,17 @@ optionsEl.content.appendChild(optGroupEl.content);
 		let optionsEl = this.dropdown!.querySelectorAll(`.webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)`);
+
+		// Remove highlighted class on old option
 		highlightedOption?.classList.remove("webcimes-dropdown__option--highlighted");
-		highlightedOption = optionsEl[index];
-		highlightedOption.classList.add("webcimes-dropdown__option--highlighted");
-		if(autoScroll)
+
+		// Set highlighted class on new option
+		if(optionsEl[index])
 		{
-			highlightedOption.scrollIntoView({behavior: "smooth", block: "nearest"});
+			highlightedOption = optionsEl[index];
+			highlightedOption.classList.add("webcimes-dropdown__option--highlighted");
+			this.select!.setAttribute("aria-activedescendant", highlightedOption.id);
+			this.dropdown!.querySelector(".webcimes-dropdown__search-input")?.setAttribute("aria-activedescendant", highlightedOption.id);
+			if(autoScroll)
+			{
+				highlightedOption.scrollIntoView({behavior: "smooth", block: "nearest"});
+			}
 		}
@@ -863,2 +1007,5 @@ }
 		this.setDropdownPosition(true);
+		
+		// Set highlight option on first option
+		this.setDropdownHighlightOption(0, true);
 
@@ -883,39 +1030,35 @@ // Callback on search dropdown
 	{
-		// If KeyboardEvent not comming from select
-		if(e.target != this.select)
+		let highlightedOption = this.dropdown!.querySelector(".webcimes-dropdown__option--highlighted");
+		if(highlightedOption)
 		{
-			let highlightedOption = this.dropdown!.querySelector(".webcimes-dropdown__option--highlighted");
-			if(highlightedOption)
+			if(e.key == "ArrowUp" || e.key == "ArrowDown")
 			{
-				if(e.key == "ArrowUp" || e.key == "ArrowDown")
+				e.preventDefault();
+				let optionsEl = this.dropdown!.querySelectorAll(`.webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)`);
+				let highlightedIndex = Array.from(optionsEl).indexOf(highlightedOption);
+				this.setDropdownHighlightOption((e.key == "ArrowUp" ? (highlightedIndex-1 >= 0 ? highlightedIndex-1 : 0) : (highlightedIndex+1 <= optionsEl.length-1 ? highlightedIndex+1 : optionsEl.length-1)), true);
+			}
+			if(e.key == "Enter")
+			{
+				e.preventDefault();
+				if(highlightedOption.classList.contains("webcimes-dropdown__option--selected"))
 				{
-					e.preventDefault();
-					let optionsEl = this.dropdown!.querySelectorAll(`.webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)`);
-					let highlightedIndex = Array.from(optionsEl).indexOf(highlightedOption);
-					this.setDropdownHighlightOption((e.key == "ArrowUp" ? (highlightedIndex-1 >= 0 ? highlightedIndex-1 : 0) : (highlightedIndex+1 <= optionsEl.length-1 ? highlightedIndex+1 : optionsEl.length-1)), true);
+					this.removeOption(highlightedOption.getAttribute("data-value"));
 				}
-				if(e.key == "Enter")
+				else
 				{
-					e.preventDefault();
-					if(highlightedOption.classList.contains("webcimes-dropdown__option--selected"))
-					{
-						this.removeOption(highlightedOption.getAttribute("data-value"));
-					}
-					else
-					{
-						this.addOption(highlightedOption.getAttribute("data-value"));
-					}
+					this.addOption(highlightedOption.getAttribute("data-value"));
 				}
 			}
-			if(e.key == "Escape")
-			{
-				e.preventDefault();
-				this.destroyDropdown();
-			}
-			if(e.key == "Tab")
-			{
-				e.preventDefault();
-				this.destroyDropdown();
-			}
 		}
+		if(e.key == "Escape")
+		{
+			e.preventDefault();
+			this.destroyDropdown();
+		}
+		if(e.key == "Tab")
+		{
+			e.preventDefault();
+			this.destroyDropdown();
+		}
 	}
@@ -928,4 +1071,8 @@
 	{
-		let optionsEl = this.dropdown!.querySelectorAll(`.webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)`);
-		this.setDropdownHighlightOption(Array.from(optionsEl).indexOf(e.target as HTMLElement), false);
+		let optionEl = (e.target as HTMLElement).closest(".webcimes-dropdown__option");
+		if(optionEl)
+		{
+			let optionsEl = this.dropdown!.querySelectorAll(`.webcimes-dropdown__option:not(.webcimes-dropdown__option--disabled)`);
+			this.setDropdownHighlightOption(Array.from(optionsEl).indexOf(optionEl), false);
+		}
 	}
@@ -946,10 +1093,14 @@
 	{
-		if((e.target as HTMLElement).classList.contains("webcimes-dropdown__option--selected"))
+		let optionEl = (e.target as HTMLElement).closest(".webcimes-dropdown__option");
+		if(optionEl)
 		{
-			this.removeOption((e.target as HTMLElement).getAttribute("data-value"));
+			if(optionEl.classList.contains("webcimes-dropdown__option--selected"))
+			{
+				this.removeOption(optionEl.getAttribute("data-value"));
+			}
+			else
+			{
+				this.addOption(optionEl.getAttribute("data-value"));
+			}
 		}
-		else
-		{
-			this.addOption((e.target as HTMLElement).getAttribute("data-value"));
-		}
 	}
@@ -956,0 +1107,0 @@

test/script.js

@@ -10,5 +10,6 @@ // Import webcimes-select
         keepOpenDropdown: true,
+        allowSearch: false,
+        language: "fr",
         onInit(){
             console.log("onInit");
-            selectCity.disable();
         },
@@ -15,0 +16,0 @@ onDestroy(){

No alert changes

Improved metrics

Total package byte prevSize

299408

increased by18.69%

Number of package files

28

increased by3.7%

Lines of code

2448

increased by12.19%

Number of lines in readme file

448

increased by10.34%

No dependency changes