|
|
@@ -0,0 +1,64 @@
|
|
|
+/* @honatas/multi-select-webcomponent 1.2.0 edited */
|
|
|
+
|
|
|
+function htmlEntities(str) {
|
|
|
+ return String(str)
|
|
|
+ .replace(/&/g, '&')
|
|
|
+ .replace(/"/g, '"')
|
|
|
+ .replace(/'/g, ''')
|
|
|
+ .replace(/`/g, '`')
|
|
|
+ .replace(/</g, '<')
|
|
|
+ .replace(/>/g, '>')
|
|
|
+ .replace(/\|/g, '|');
|
|
|
+}
|
|
|
+
|
|
|
+function is_mobile(){if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){return true}else{return false}}
|
|
|
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).MultiselectWebcomponent=e()}(this,(function(){"use strict";class t extends HTMLElement{constructor(){var t,e;super(),this.options=[],this.is_modile=is_mobile(),this.optgroup=this.getAttribute("optgroup")||false, /* multi-select parameter 'optgroup="true"' for use disabled as optgroup '<option value="" disabled>Локації ---</option>' */
|
|
|
+this.searchbox=document.createElement("input"),this.dropdown=document.createElement("div"),this.selected=document.createElement("div"),
|
|
|
+this.querySelectorAll("option").forEach((t=>this.options.push(t.cloneNode(!0)))),this.setValuesOnConstructor( htmlEntities( this.getAttribute("value") ) ),this.searchbox.type="text",
|
|
|
+this.searchbox.className=`msw-searchbox ${this.getAttribute("searchbox")||""}`,this.searchbox.addEventListener("keyup",(t=>this.onSearchboxKeyup(t))),
|
|
|
+this.selected.className=`msw-selected ${this.getAttribute("selected")||""}`,
|
|
|
+this.dropdown.className=`msw-dropdown ${this.getAttribute("dropdown")||""}`,this.dropdown.addEventListener("click",(()=>this.onDropdownClick())),this.innerHTML="",
|
|
|
+this.appendChild(this.selected),null===(t=this.parentNode)||void 0===t||t.insertBefore(this.dropdown,this.nextSibling),
|
|
|
+this.addEventListener("click",(()=>this.onMultiselectClick())),
|
|
|
+null===(e=this.parentElement)||void 0===e||e.addEventListener("mouseleave",(()=>this.dropdown.style.display="none")),
|
|
|
+this.searchbox.placeholder=this.getAttribute("placeholder")||"";
|
|
|
+const s=this.getAttribute("disabled");s&&"false"!==s&&(this.searchbox.disabled=!0),this.build()}
|
|
|
+set value(t){for(const t of this.options)t.selected=!1;if(t&&0!=t.length){for(const e of this.options)t.includes(e.value)&&(e.selected=!0);this.build()}}
|
|
|
+setValuesOnConstructor(t){if(!t)return;const e=t.split(",");for(const t of this.options)e.includes(t.value)&&(t.selected=!0)}
|
|
|
+get value(){const t=[];for(const e of this.options)e.selected&&t.push( htmlEntities(e.value) );return t}
|
|
|
+set disabled(t){this.setAttribute("disabled",t?"true":"false"),this.searchbox.disabled=t,this.build()}
|
|
|
+get disabled(){const t=this.getAttribute("disabled");return!(!t||"false"===t)}
|
|
|
+set placeholder(t){this.setAttribute("placeholder",t),this.searchbox.placeholder=t}
|
|
|
+get placeholder(){return this.getAttribute("placeholder")}
|
|
|
+clear(){this.options=[],this.build()}
|
|
|
+build(){
|
|
|
+this.selected.innerHTML="",this.dropdown.innerHTML="";
|
|
|
+if(!this.optgroup){/* without optgroups */ for(const t of this.options)t.selected?this.selected.appendChild(this.buildSelectedItem(t)):this.dropdown.appendChild(this.buildDropdownItem(t));
|
|
|
+}else{ /* with optgroups */
|
|
|
+for(let j=0;j<this.options.length;j++){let t = this.options[j];if(t.selected){this.selected.appendChild(this.buildSelectedItem(t))}else{
|
|
|
+let is_next=!!this.options[j+1],skip=true;
|
|
|
+if(t.disabled){if(is_next){
|
|
|
+ for(let k=j+1;k<this.options.length;k++){if(this.options[k].selected)continue;if(!this.options[k].disabled){skip=false;break}break} /* break when disabled/not selected and not disabled */
|
|
|
+ }else{/* disabled and no next */}}else skip=false;
|
|
|
+ if(!skip)/* not disabled or not skip */ this.dropdown.appendChild(this.buildDropdownItem(t));
|
|
|
+}}}
|
|
|
+this.selected.appendChild(this.searchbox),this.dispatchEvent(new Event("change"));
|
|
|
+if(!this.dropdown.childElementCount){this.searchbox.style.display="none"}else{this.searchbox.style.display="block"}}
|
|
|
+buildSelectedItem(t){const e=document.createElement("div");return e.className=`msw-selecteditem ${this.getAttribute("selecteditem")||""}`,e.title="видалити",e.innerText=t.textContent,e.dataset.value=htmlEntities(t.value),this.disabled||e.addEventListener("click",(t=>this.onSelectedClick(t))),e}
|
|
|
+buildDropdownItem(t){var classd;classd=(t.disabled?" msw-disabled":"");const e=document.createElement("div");return e.className=`msw-dropdownitem${classd} ${this.getAttribute("dropdownitem")||this.getAttribute("item")||""}`,e.innerText=t.textContent,e.dataset.value=htmlEntities(t.value),t.disabled||e.addEventListener("click",(t=>this.onItemClick(t))),e}
|
|
|
+findOptionByValue(t){for(const e of this.options)if(t===e.value)return e}
|
|
|
+chooseOption(t){t&&(t.selected=!0),this.searchbox.value="",this.build()}
|
|
|
+onItemClick(t){this.chooseOption(this.findOptionByValue(t.currentTarget.dataset.value));if(this.is_modile)this.dropdown.style.display="none"}
|
|
|
+onSelectedClick(t){const e=this.findOptionByValue(t.currentTarget.dataset.value);e&&(e.selected=!1),this.build()}
|
|
|
+onClearClick(t){this.options.forEach((t=>t.selected=!1)),this.build(),this.searchbox.value="",this.searchbox.focus(),t.stopPropagation()}
|
|
|
+onSelectAllClick(t){this.options.forEach((t=>t.selected=!0)),this.build(),this.dropdown.style.display="none",this.searchbox.value="",this.searchbox.focus(),t.stopPropagation()}
|
|
|
+onMultiselectClick(){!0!==this.disabled&&(this.dropdown.style.display="block",this.searchbox.focus())}
|
|
|
+onDropdownClick(){this.searchbox.focus()}
|
|
|
+onSearchboxKeyup(t){if(("Enter"===t.key||"NumpadEnter"===t.key)&&""!==this.searchbox.value&&(this.dropdown.firstChild)){
|
|
|
+return this.chooseOption(this.findOptionByValue(this.dropdown.firstChild.dataset.value)),void this.searchbox.focus();}
|
|
|
+if(this.dropdown.innerHTML="",""===this.searchbox.value)
|
|
|
+for(const t of this.options)t.selected||this.dropdown.appendChild(this.buildDropdownItem(t));
|
|
|
+else{ for(const t of this.options){
|
|
|
+!t.selected&&!t.disabled&&t.textContent&&t.textContent.toLocaleUpperCase().indexOf(this.searchbox.value.toLocaleUpperCase())>=0&&this.dropdown.appendChild(this.buildDropdownItem(t));}}
|
|
|
+this.dropdown.style.display="block"}}return t}));
|
|
|
+
|
221V