slim-select 2.0.0 → 2.0.2

package/dist/slimselect.umd.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).SlimSelect=t()}(this,(function(){"use strict";function e(){return Math.random().toString(36).substring(2,10)}function t(e,t=50,s=!1){let i;return function(...n){const a=self,l=s&&!i;clearTimeout(i),i=setTimeout((()=>{i=null,s||e.apply(a,n)}),t),l&&e.apply(a,n)}}class s{constructor(t){if(this.id=t.id&&""!==t.id?t.id:e(),this.label=t.label||"",this.options=[],t.options)for(const e of t.options)this.options.push(new i(e))}}class i{constructor(t){this.id=t.id&&""!==t.id?t.id:e(),this.value=void 0===t.value?t.text:t.value,this.text=t.text||"",this.html=t.html||"",this.selected=void 0!==t.selected&&t.selected,this.display=void 0===t.display||t.display,this.disabled=void 0!==t.disabled&&t.disabled,this.mandatory=void 0!==t.mandatory&&t.mandatory,this.placeholder=void 0!==t.placeholder&&t.placeholder,this.class=t.class||"",this.style=t.style||"",this.data=t.data||{}}}class n{constructor(e,t){this.selectType="single",this.data=[],this.selectType=e,this.setData(t)}validateDataArray(e){if(!Array.isArray(e))return new Error("Data must be an array");for(let t of e){if(!(t instanceof s||"label"in t))return t instanceof i||"text"in t?this.validateOption(t):new Error("Data object must be a valid optgroup or option");if(!("label"in t))return new Error("Optgroup must have a label");if("options"in t&&t.options)for(let e of t.options)return this.validateOption(e)}return null}validateOption(e){return"text"in e?null:new Error("Option must have a text")}partialToFullData(e){let t=[];return e.forEach((e=>{if(e instanceof s||"label"in e){let n=[];"options"in e&&e.options&&e.options.forEach((e=>{n.push(new i(e))})),n.length>0&&t.push(new s(e))}(e instanceof i||"text"in e)&&t.push(new i(e))})),t}setData(e){this.data=this.partialToFullData(e),"single"===this.selectType&&this.setSelectedBy("value",this.getSelected())}getData(){return this.filter(null,!0)}getDataOptions(){return this.filter(null,!1)}addOption(e){this.setData(this.getData().concat(new i(e)))}setSelectedBy(e,t){let n=null,a=!1;for(let l of this.data){if(l instanceof s)for(let s of l.options)n||(n=s),s.selected=!a&&t.includes(s[e]),s.selected&&"single"===this.selectType&&(a=!0);l instanceof i&&(n||(n=l),l.selected=!a&&t.includes(l[e]),l.selected&&"single"===this.selectType&&(a=!0))}"single"===this.selectType&&n&&!a&&(n.selected=!0)}getSelected(){let e=this.getSelectedOptions(),t=[];return e.forEach((e=>{t.push(e.value)})),t}getSelectedOptions(){return this.filter((e=>e.selected),!1)}getSelectedIDs(){let e=this.getSelectedOptions(),t=[];return e.forEach((e=>{t.push(e.id)})),t}getOptionByID(e){let t=this.filter((t=>t.id===e),!1);return t.length?t[0]:null}search(e,t){return""===(e=e.trim())?this.getData():this.filter((s=>t(s,e)),!0)}filter(e,t){const n=[];return this.data.forEach((a=>{if(a instanceof s)if(t){let t=[];a.options.forEach((s=>{e&&!e(s)||t.push(new i(s))})),t.length>0&&n.push(new s({id:a.id,label:a.label,options:t}))}else a.options.forEach((t=>{e&&e(t)&&n.push(t)}));a instanceof i&&(e&&!e(a)||n.push(new i(a)))})),n}}class a{constructor(e,t,s){this.classes={main:"ss-main",placeholder:"ss-placeholder",values:"ss-values",single:"ss-single",value:"ss-value",valueText:"ss-value-text",valueDelete:"ss-value-delete",valueOut:"ss-value-out",deselect:"ss-deselect",deselectPath:"M10,10 L90,90 M10,90 L90,10",arrow:"ss-arrow",arrowClose:"M10,30 L50,70 L90,30",arrowOpen:"M10,70 L50,30 L90,70",content:"ss-content",openAbove:"ss-open-above",openBelow:"ss-open-below",search:"ss-search",searchHighlighter:"ss-search-highlight",searching:"ss-searching",addable:"ss-addable",addablePath:"M50,10 L50,90 M10,50 L90,50",list:"ss-list",optgroup:"ss-optgroup",optgroupLabel:"ss-optgroup-label",optgroupSelectable:"ss-optgroup-selectable",option:"ss-option",optionSelected:"ss-option-selected",optionDelete:"M10,10 L90,90 M10,90 L90,10",highlighted:"ss-highlighted",error:"ss-error",disabled:"ss-disabled",hide:"ss-hide"},this.store=t,this.settings=e,this.callbacks=s,this.main=this.mainDiv(),this.content=this.contentDiv(),this.renderValues(),this.renderOptions(this.store.getData()),this.settings.contentLocation.appendChild(this.content.main)}enable(){this.main.main.classList.remove(this.classes.disabled),this.content.search.input.disabled=!1}disable(){this.main.main.classList.add(this.classes.disabled),this.content.search.input.disabled=!0}open(){this.main.arrow.path.setAttribute("d",this.classes.arrowOpen),this.main.main.classList.add("up"===this.settings.openPosition?this.classes.openAbove:this.classes.openBelow),this.moveContent(),this.renderOptions(this.store.getData()),"relative"===this.settings.contentPosition?this.moveContentBelow():"up"===this.settings.openPosition.toLowerCase()?this.moveContentAbove():"down"===this.settings.openPosition.toLowerCase()?this.moveContentBelow():"up"===this.putContent(this.content.main,this.settings.isOpen)?this.moveContentAbove():this.moveContentBelow();const e=this.store.getSelectedOptions();if(e.length){const t=e[e.length-1].id,s=this.content.list.querySelector('[data-id="'+t+'"]');s&&this.ensureElementInView(this.content.list,s)}}close(){this.main.main.classList.remove(this.classes.openAbove),this.main.main.classList.remove(this.classes.openBelow),this.content.main.classList.remove(this.classes.openAbove),this.content.main.classList.remove(this.classes.openBelow),this.main.arrow.path.setAttribute("d",this.classes.arrowClose)}mainDiv(){const e=document.createElement("div");if(e.tabIndex=0,e.style.cssText=""!==this.settings.style?this.settings.style:"",e.className="",e.classList.add(this.settings.id),e.classList.add(this.classes.main),this.settings.class)for(const t of this.settings.class)""!==t.trim()&&e.classList.add(t.trim());e.onfocus=()=>{this.settings.triggerFocus&&this.callbacks.open()},e.onkeydown=e=>{switch(e.key){case"ArrowUp":case"ArrowDown":return this.callbacks.open(),"ArrowDown"===e.key?this.highlight("down"):this.highlight("up"),!1;case"Tab":return this.callbacks.close(),!0;case"Enter":const t=this.content.list.querySelector("."+this.classes.highlighted);return t&&t.click(),!1;case"Escape":return this.callbacks.close(),!1}},e.onclick=e=>{this.settings.isEnabled&&(this.settings.isOpen?this.callbacks.close():this.callbacks.open())};const t=document.createElement("div");t.classList.add(this.classes.values),e.appendChild(t);const s=document.createElement("div");s.classList.add(this.classes.deselect),this.settings.allowDeselect&&!this.settings.isMultiple||s.classList.add(this.classes.hide),s.onclick=e=>{e.stopPropagation(),this.settings.isEnabled&&this.callbacks.setSelected([""])};const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 100 100");const n=document.createElementNS("http://www.w3.org/2000/svg","path");n.setAttribute("d",this.classes.deselectPath),i.appendChild(n),s.appendChild(i),e.appendChild(s);const a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.classList.add(this.classes.arrow),a.setAttribute("viewBox","0 0 100 100");const l=document.createElementNS("http://www.w3.org/2000/svg","path");return l.setAttribute("d",this.classes.arrowClose),this.settings.alwaysOpen&&a.classList.add(this.classes.hide),a.appendChild(l),e.appendChild(a),{main:e,values:t,deselect:{main:s,svg:i,path:n},arrow:{main:a,path:l}}}mainFocus(e){e||(this.settings.triggerFocus=!1),this.main.main.focus({preventScroll:!0}),this.settings.triggerFocus=!0}placeholder(){const e=this.store.filter((e=>e.placeholder),!1);let t=this.settings.placeholderText;e.length&&(""!==e[0].html?t=e[0].html:""!==e[0].text&&(t=e[0].text));const s=document.createElement("div");return s.classList.add(this.classes.placeholder),s.innerHTML=t,s}renderValues(){this.settings.isMultiple?this.renderMultipleValues():this.renderSingleValue()}renderSingleValue(){const e=this.store.filter((e=>e.selected&&!e.placeholder),!1),t=e.length>0?e[0]:null;if(t){const e=document.createElement("div");e.classList.add(this.classes.single),e.innerHTML=t.html?t.html:t.text,this.main.values.innerHTML=e.outerHTML}else this.main.values.innerHTML=this.placeholder().outerHTML;this.settings.allowDeselect&&e.length?this.main.deselect.main.classList.remove(this.classes.hide):this.main.deselect.main.classList.add(this.classes.hide)}renderMultipleValues(){let e=this.main.values.childNodes,t=this.store.filter((e=>e.selected&&e.display),!1);if(0===t.length)return void(this.main.values.innerHTML=this.placeholder().outerHTML);{const e=this.main.values.querySelector("."+this.classes.placeholder);e&&e.remove()}let s=[];for(let i=0;i<e.length;i++){const n=e[i],a=n.getAttribute("data-id");if(a){t.filter((e=>e.id===a),!1).length||s.push(n)}}for(const e of s)e.classList.add(this.classes.valueOut),setTimeout((()=>{this.main.values.removeChild(e)}),100);e=this.main.values.childNodes;for(let s=0;s<t.length;s++){let i=!0;for(let n=0;n<e.length;n++)t[s].id===String(e[n].dataset.id)&&(i=!1);i&&(0===e.length?this.main.values.appendChild(this.multipleValue(t[s])):0===s?this.main.values.insertBefore(this.multipleValue(t[s]),e[s]):e[s-1].insertAdjacentElement("afterend",this.multipleValue(t[s])))}}multipleValue(e){const t=document.createElement("div");t.classList.add(this.classes.value),t.dataset.id=e.id;const n=document.createElement("div");if(n.classList.add(this.classes.valueText),n.innerHTML=e.text,t.appendChild(n),!e.mandatory){const n=document.createElement("div");n.classList.add(this.classes.valueDelete),n.onclick=t=>{t.preventDefault(),t.stopPropagation();let n=!0;const a=this.store.getSelectedOptions(),l=a.filter((t=>t.selected&&t.id!==e.id),!0);if(!(this.settings.minSelected&&l.length<this.settings.minSelected)&&(this.callbacks.beforeChange&&(n=!0===this.callbacks.beforeChange(l,a)),n)){let e=[];for(const t of l){if(t instanceof s)for(const s of t.options)e.push(s.value);t instanceof i&&e.push(t.value)}this.callbacks.setSelected(e),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(l)}};const a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("viewBox","0 0 100 100");const l=document.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("d",this.classes.optionDelete),a.appendChild(l),n.appendChild(a),t.appendChild(n)}return t}contentDiv(){const e=document.createElement("div");if(e.classList.add(this.classes.content),e.dataset.id=this.settings.id,""!==this.settings.style&&(e.style.cssText=this.settings.style),"relative"===this.settings.contentPosition&&e.classList.add("ss-"+this.settings.contentPosition),this.settings.class.length)for(const t of this.settings.class)""!==t.trim()&&e.classList.add(t.trim());const t=this.searchDiv();e.appendChild(t.main);const s=this.listDiv();return e.appendChild(s),{main:e,search:t,list:s}}moveContent(){if("relative"===this.settings.contentPosition)return;const e=this.main.main.getBoundingClientRect();this.content.main.style.top=e.top+e.height+window.scrollY+"px",this.content.main.style.left=e.left+window.scrollX+"px",this.content.main.style.width=e.width+"px"}searchDiv(){const e=document.createElement("div"),s=document.createElement("input"),n=document.createElement("div");e.classList.add(this.classes.search);const a={main:e,input:s};if(this.settings.showSearch||(e.classList.add(this.classes.hide),s.readOnly=!0),s.type="search",s.placeholder=this.settings.searchPlaceholder,s.tabIndex=-1,s.setAttribute("aria-label",this.settings.searchPlaceholder),s.setAttribute("autocapitalize","off"),s.setAttribute("autocomplete","off"),s.setAttribute("autocorrect","off"),s.oninput=t((e=>{this.callbacks.search(e.target.value)}),100),s.onkeydown=e=>{switch(e.key){case"ArrowUp":case"ArrowDown":return this.callbacks.open(),"ArrowDown"===e.key?this.highlight("down"):this.highlight("up"),!1;case"Tab":return this.callbacks.close(),!0;case"Escape":return this.callbacks.close(),!1;case"Enter":if(this.callbacks.addable&&e.ctrlKey)n.click();else{const e=this.content.list.querySelector("."+this.classes.highlighted);e&&e.click()}return!1}},s.onfocus=()=>{this.settings.isOpen||this.callbacks.open()},e.appendChild(s),this.callbacks.addable){n.classList.add(this.classes.addable);const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("viewBox","0 0 100 100");const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",this.classes.addablePath),t.appendChild(s),n.appendChild(t),n.onclick=e=>{if(e.preventDefault(),e.stopPropagation(),!this.callbacks.addable)return;const t=this.content.search.input.value.trim();if(""===t)return void this.content.search.input.focus();const s=this.callbacks.addable(t);"string"==typeof s?this.callbacks.addOption(new i({text:s,value:s})):this.callbacks.addOption(new i(s)),this.callbacks.setSelected([t]),this.callbacks.search(""),this.settings.closeOnSelect&&setTimeout((()=>{this.callbacks.close()}),100)},e.appendChild(n),a.addable={main:n,svg:t,path:s}}return a}searchFocus(e){e||(this.settings.triggerFocus=!1),this.content.search.input.focus(),this.settings.triggerFocus=!0}getOptions(e=!1,t=!1,s=!1){let i="."+this.classes.option;return e&&(i+=":not(."+this.classes.placeholder+")"),t&&(i+=":not(."+this.classes.disabled+")"),s&&(i+=":not(."+this.classes.hide+")"),Array.from(this.content.list.querySelectorAll(i))}highlight(e){const t=this.getOptions(!0,!0,!0);if(0!==t.length)if(1!==t.length||t[0].classList.contains(this.classes.highlighted)){for(let s=0;s<t.length;s++)if(t[s].classList.contains(this.classes.highlighted))return t[s].classList.remove(this.classes.highlighted),void("down"===e?s+1<t.length?(t[s+1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[s+1])):(t[0].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[0])):s-1>=0?(t[s-1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[s-1])):(t[t.length-1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[t.length-1])));t["down"===e?0:t.length-1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t["down"===e?0:t.length-1])}else t[0].classList.add(this.classes.highlighted)}listDiv(){const e=document.createElement("div");return e.classList.add(this.classes.list),e.setAttribute("role","listbox"),e}renderError(e){this.content.list.innerHTML="";const t=document.createElement("div");t.classList.add(this.classes.error),t.textContent=e,this.content.list.appendChild(t)}renderSearching(){this.content.list.innerHTML="";const e=document.createElement("div");e.classList.add(this.classes.searching),e.textContent=this.settings.searchingText,this.content.list.appendChild(e)}renderOptions(e){if(this.content.list.innerHTML="",0===e.length){const e=document.createElement("div");return e.classList.add(this.classes.option),e.classList.add(this.classes.disabled),e.innerHTML=this.settings.searchText,void this.content.list.appendChild(e)}for(const t of e){if(t instanceof s){const e=document.createElement("div");e.classList.add(this.classes.optgroup);const s=document.createElement("div");s.classList.add(this.classes.optgroupLabel),s.innerHTML=t.label,this.settings.selectByGroup&&this.settings.isMultiple&&(s.classList.add(this.classes.optgroupSelectable),s.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation();for(const t of e.children)-1!==t.className.indexOf(this.classes.option)&&t.click()}))),e.appendChild(s);for(const s of t.options)e.appendChild(this.option(s));this.content.list.appendChild(e)}t instanceof i&&this.content.list.appendChild(this.option(t))}}option(e){if(e.placeholder){const e=document.createElement("div");return e.classList.add(this.classes.option),e.classList.add(this.classes.hide),e}const t=document.createElement("div");if(t.dataset.id=e.id,t.classList.add(this.classes.option),t.setAttribute("role","option"),e.class&&e.class.split(" ").forEach((e=>{t.classList.add(e)})),e.style&&(t.style.cssText=e.style),this.settings.searchHighlight&&""!==this.content.search.input.value.trim()){const s=""!==e.html?e.html:e.text;t.innerHTML=this.highlightText(s,this.content.search.input.value,this.classes.searchHighlighter)}else""!==e.html?t.innerHTML=e.html:t.textContent=e.text;return this.settings.showOptionTooltips&&t.textContent&&t.setAttribute("title",t.textContent),(e.selected&&!this.settings.allowDeselect||e.disabled&&!this.settings.allowDeselect)&&t.classList.add(this.classes.disabled),e.selected&&this.settings.hideSelected&&t.classList.add(this.classes.hide),e.selected?t.classList.add(this.classes.optionSelected):t.classList.remove(this.classes.optionSelected),t.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation();const s=this.store.getSelected(),i=t.currentTarget,n=String(i.dataset.id);if(e.disabled||e.selected&&!this.settings.allowDeselect)return;if(this.settings.isMultiple&&Array.isArray(s)&&this.settings.maxSelected<=s.length)return;let a=!1;const l=this.store.getSelectedOptions();let o=[];this.settings.isMultiple&&(o=e.selected?l.filter((e=>e.id!==n)):l.concat(e)),this.settings.isMultiple||(o=e.selected?[]:[e]),this.callbacks.beforeChange||(a=!0),this.callbacks.beforeChange&&(a=!1!==this.callbacks.beforeChange(o,l)),a&&(this.store.getOptionByID(n)||this.callbacks.addOption(e),this.callbacks.setSelected(o.map((e=>e.value))),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(o))})),t}destroy(){this.main.main.remove(),this.content.main.remove()}highlightText(e,t,s){let i=e;const n=new RegExp("("+t.trim()+")(?![^<]*>[^<>]*</)","i");if(!e.match(n))return e;const a=e.match(n).index,l=a+e.match(n)[0].toString().length,o=e.substring(a,l);return i=i.replace(n,`<mark class="${s}">${o}</mark>`),i}moveContentAbove(){const e=this.main.main.offsetHeight+this.content.main.offsetHeight-1;this.content.main.style.margin="-"+e+"px 0px 0px 0px",this.content.main.style.transformOrigin="center bottom",this.main.main.classList.remove(this.classes.openBelow),this.main.main.classList.add(this.classes.openAbove),this.content.main.classList.remove(this.classes.openBelow),this.content.main.classList.add(this.classes.openAbove)}moveContentBelow(){this.content.main.style.margin="-1px 0px 0px 0px",this.content.main.style.transformOrigin="center top",this.main.main.classList.remove(this.classes.openAbove),this.main.main.classList.add(this.classes.openBelow),this.content.main.classList.remove(this.classes.openAbove),this.content.main.classList.add(this.classes.openBelow)}ensureElementInView(e,t){const s=e.scrollTop+e.offsetTop,i=s+e.clientHeight,n=t.offsetTop,a=n+t.clientHeight;n<s?e.scrollTop-=s-n:a>i&&(e.scrollTop+=a-i)}putContent(e,t){const s=e.offsetHeight,i=e.getBoundingClientRect(),n=t?i.top:i.top-s,a=t?i.bottom:i.bottom+s;return n<=0?"down":a>=window.innerHeight?"up":"down"}}class l{constructor(e){this.listen=!1,this.observer=null,this.select=e}enable(){this.disconnectObserver(),this.select.disabled=!1,this.connectObserver()}disable(){this.disconnectObserver(),this.select.disabled=!0,this.connectObserver()}hideUI(){this.select.tabIndex=-1,this.select.style.display="none",this.select.setAttribute("aria-hidden","true")}showUI(){this.select.removeAttribute("tabindex"),this.select.style.display="",this.select.removeAttribute("aria-hidden")}changeListen(e){this.listen=e,this.listen?this.connectObserver():this.disconnectObserver()}addSelectChangeListener(e){this.onSelectChange=e,this.addObserver(),this.connectObserver(),this.changeListen(!0)}removeSelectChangeListener(){this.changeListen(!1),this.onSelectChange=void 0}addValueChangeListener(e){this.onValueChange=e,this.select.addEventListener("change",this.valueChange.bind(this))}removeValueChangeListener(){this.onValueChange=void 0,this.select.removeEventListener("change",this.valueChange.bind(this))}valueChange(e){this.onValueChange&&this.onValueChange(this.getSelectedValues())}observeWrapper(e){this.onSelectChange&&this.onSelectChange(this.getData())}addObserver(){this.observer&&(this.disconnectObserver(),this.observer=null),this.observer=new MutationObserver(this.observeWrapper)}connectObserver(){this.observer&&this.observer.observe(this.select,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}disconnectObserver(){this.observer&&this.observer.disconnect()}getData(){let e=[];const t=this.select.childNodes;for(const s of t)"OPTGROUP"===s.nodeName&&e.push(this.getDataFromOptgroup(s)),"OPTION"===s.nodeName&&e.push(this.getDataFromOption(s));return e}getDataFromOptgroup(e){let t={id:"",label:e.label,options:[]};const s=e.childNodes;for(const e of s)"OPTION"===e.nodeName&&t.options.push(this.getDataFromOption(e));return t}getSelectedValues(){let e=[];const t=this.select.childNodes;for(const s of t){if("OPTGROUP"===s.nodeName){const t=s.childNodes;for(const s of t)if("OPTION"===s.nodeName){const t=s;t.selected&&e.push(t.value)}}if("OPTION"===s.nodeName){const t=s;t.selected&&e.push(t.value)}}return e}getDataFromOption(t){return{id:!!t.dataset&&t.dataset.id||e(),value:t.value,text:t.text,html:t.innerHTML,selected:t.selected,display:"none"!==t.style.display,disabled:t.disabled,mandatory:!!t.dataset&&"true"===t.dataset.mandatory,placeholder:"true"===t.dataset.placeholder,class:t.className,style:t.style.cssText,data:t.dataset}}setSelected(e){const t=this.select.childNodes;for(const s of t){if("OPTGROUP"===s.nodeName){const t=s.childNodes;for(const s of t)if("OPTION"===s.nodeName){const t=s;t.selected=e.includes(t.value)}}if("OPTION"===s.nodeName){const t=s;t.selected=e.includes(t.value)}}}updateSelect(e,t,s){this.changeListen(!1),e&&(this.select.id=e),t&&(this.select.style.cssText=t),s&&(this.select.className="",s.forEach((e=>{""!==e.trim()&&this.select.classList.add(e.trim())}))),this.changeListen(!0)}updateOptions(e){this.changeListen(!1),this.select.innerHTML="";for(const t of e)t instanceof s&&this.select.appendChild(this.createOptgroup(t)),t instanceof i&&this.select.appendChild(this.createOption(t));this.changeListen(!0)}createOptgroup(e){const t=document.createElement("optgroup");if(t.id=e.id,t.label=e.label,e.options)for(const s of e.options)t.appendChild(this.createOption(s));return t}createOption(e){const t=document.createElement("option");return t.value=""!==e.value?e.value:e.text,t.innerHTML=e.html||e.text,e.selected&&(t.selected=e.selected),e.disabled&&(t.disabled=!0),!1===e.display&&(t.style.display="none"),e.placeholder&&t.setAttribute("data-placeholder","true"),e.mandatory&&t.setAttribute("data-mandatory","true"),e.class&&e.class.split(" ").forEach((e=>{t.classList.add(e)})),e.data&&"object"==typeof e.data&&Object.keys(e.data).forEach((s=>{t.setAttribute("data-"+function(e){const t=e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase()));return e[0]===e[0].toUpperCase()?t.substring(1):t}(s),e.data[s])})),t}destroy(){this.changeListen(!1),this.disconnectObserver(),this.removeSelectChangeListener(),this.removeValueChangeListener(),this.showUI()}}class o{constructor(t){this.id="",this.style="",this.class=[],this.isMultiple=!1,this.isOpen=!1,this.triggerFocus=!0,this.intervalMove=null,this.mainHeight=30,this.contentHeight=0,t||(t={}),this.id="ss-"+e(),this.style=t.style||"",this.class=t.class||[],this.isEnabled=void 0===t.isEnabled||t.isEnabled,this.alwaysOpen=void 0!==t.alwaysOpen&&t.alwaysOpen,this.showSearch=void 0===t.showSearch||t.showSearch,this.searchPlaceholder=t.searchPlaceholder||"Search",this.searchText=t.searchText||"No Results",this.searchingText=t.searchingText||"Searching...",this.searchHighlight=void 0!==t.searchHighlight&&t.searchHighlight,this.closeOnSelect=void 0===t.closeOnSelect||t.closeOnSelect,this.contentLocation=t.contentLocation||document.body,this.contentPosition=t.contentPosition||"absolute",this.openPosition=t.openPosition||"auto",this.placeholderText=t.placeholderText||"Select Value",this.allowDeselect=void 0!==t.allowDeselect&&t.allowDeselect,this.hideSelected=void 0!==t.hideSelected&&t.hideSelected,this.showOptionTooltips=void 0!==t.showOptionTooltips&&t.showOptionTooltips,this.selectByGroup=void 0!==t.selectByGroup&&t.selectByGroup,this.minSelected=t.minSelected||0,this.maxSelected=t.maxSelected||1e3,this.timeoutDelay=t.timeoutDelay||200}}return class{constructor(e){if(this.events={search:void 0,searchFilter:(e,t)=>-1!==e.text.toLowerCase().indexOf(t.toLowerCase()),addable:void 0,beforeChange:void 0,afterChange:void 0,beforeOpen:void 0,afterOpen:void 0,beforeClose:void 0,afterClose:void 0},this.windowResize=t((()=>{this.settings.isOpen&&this.render.moveContent()})),this.windowScroll=t((()=>{this.settings.isOpen&&("down"!==this.settings.openPosition?"up"!==this.settings.openPosition?"relative"===this.settings.contentPosition?this.render.moveContentBelow():"up"===this.render.putContent(this.render.content.main,this.settings.isOpen)?this.render.moveContentAbove():this.render.moveContentBelow():this.render.moveContentAbove():this.render.moveContentBelow())})),this.documentClick=e=>{this.settings.isOpen&&e.target&&!function(e,t){function s(e,s){return s&&e&&e.classList&&e.classList.contains(s)||s&&e&&e.dataset&&e.dataset.id&&e.dataset.id===t?e:null}return s(e,t)||function e(t,i){return t&&t!==document?s(t,i)?t:e(t.parentNode,i):null}(e,t)}(e.target,this.settings.id)&&this.close()},this.selectEl="string"==typeof e.select?document.querySelector(e.select):e.select,!this.selectEl)return void(e.events&&e.events.error&&e.events.error(new Error("Could not find select element")));if("SELECT"!==this.selectEl.tagName)return void(e.events&&e.events.error&&e.events.error(new Error("Element isnt of type select")));this.selectEl.dataset.ssid&&this.destroy(),this.settings=new o(e.settings);for(const t in e.events)e.events.hasOwnProperty(t)&&(this.events[t]=e.events[t]);this.settings.isMultiple=this.selectEl.multiple,this.settings.style=this.selectEl.style.cssText,this.settings.class=this.selectEl.className.split(" "),this.select=new l(this.selectEl),this.select.updateSelect(this.settings.id,this.settings.style,this.settings.class),this.select.hideUI(),this.select.addSelectChangeListener((e=>{this.setData(e)})),this.select.addValueChangeListener((e=>{this.setSelected(e)})),this.store=new n(this.settings.isMultiple?"multiple":"single",e.data?e.data:this.select.getData()),e.data&&this.select.updateOptions(this.store.getData());const s={open:this.open.bind(this),close:this.close.bind(this),addable:this.events.addable?this.events.addable:void 0,setSelected:this.setSelected.bind(this),addOption:this.addOption.bind(this),search:this.search.bind(this),beforeChange:this.events.beforeChange,afterChange:this.events.afterChange};this.render=new a(this.settings,this.store,s),this.selectEl.parentNode&&this.selectEl.parentNode.insertBefore(this.render.main.main,this.selectEl.nextSibling),document.addEventListener("click",this.documentClick),window.addEventListener("resize",this.windowResize,!1),"auto"===this.settings.openPosition&&window.addEventListener("scroll",this.windowScroll,!1),this.settings.isEnabled||this.disable(),this.settings.alwaysOpen&&this.open(),this.selectEl.slim=this}enable(){this.settings.isEnabled=!0,this.select.enable(),this.render.enable()}disable(){this.settings.isEnabled=!1,this.select.disable(),this.render.disable()}getData(){return this.store.getData()}setData(e){const t=this.store.validateDataArray(e);if(t)return void(this.events.error&&this.events.error(t));this.store.setData(e);const s=this.store.getData();this.select.updateOptions(s),this.render.renderValues(),this.render.renderOptions(s)}getSelected(){return this.store.getSelected()}setSelected(e){this.store.setSelectedBy("value",Array.isArray(e)?e:[e]);const t=this.store.getData();this.select.updateOptions(t),this.render.renderValues(),this.render.renderOptions(t)}addOption(e){this.store.addOption(e);const t=this.store.getData();this.select.updateOptions(t),this.render.renderValues(),this.render.renderOptions(t)}open(){this.settings.isEnabled&&!this.settings.isOpen&&(this.events.beforeOpen&&this.events.beforeOpen(),this.render.open(),this.settings.showSearch&&this.render.searchFocus(!1),setTimeout((()=>{this.events.afterOpen&&this.events.afterOpen(),this.settings.isOpen=!0}),this.settings.timeoutDelay),this.settings.intervalMove&&clearInterval(this.settings.intervalMove),this.settings.intervalMove=setInterval(this.render.moveContent.bind(this.render),500))}close(){this.settings.isOpen&&!this.settings.alwaysOpen&&(this.events.beforeClose&&this.events.beforeClose(),this.render.close(),this.search(""),this.render.mainFocus(!1),setTimeout((()=>{this.events.afterClose&&this.events.afterClose(),this.settings.isOpen=!1}),this.settings.timeoutDelay),this.settings.intervalMove&&clearInterval(this.settings.intervalMove))}search(e){if(this.render.content.search.input.value!==e&&(this.render.content.search.input.value=e),!this.events.search)return void this.render.renderOptions(""===e?this.store.getData():this.store.search(e,this.events.searchFilter));this.render.renderSearching();const t=this.events.search(e,this.store.getSelectedOptions());t instanceof Promise?t.then((e=>{this.render.renderOptions(this.store.partialToFullData(e))})).catch((e=>{this.render.renderError("string"==typeof e?e:e.message)})):Array.isArray(t)?this.render.renderOptions(this.store.partialToFullData(t)):this.render.renderError("Search event must return a promise or an array of data")}destroy(){document.removeEventListener("click",this.documentClick),window.removeEventListener("resize",this.windowResize,!1),"auto"===this.settings.openPosition&&window.removeEventListener("scroll",this.windowScroll,!1),this.store.setData([]),this.render.destroy(),this.select.destroy()}}}));

package/docs/404.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>Single Page Apps for GitHub Pages</title>
+    <meta charset="utf-8" />
+    <title>Slim Select</title>
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // https://github.com/rafrex/spa-github-pages
@@ -20,17 +20,23 @@
       // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
       // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
       // Otherwise, leave pathPrefix as false.
-      var pathPrefix = false;
-      var l = window.location;
+      var pathPrefix = false
+      var l = window.location
       l.replace(
-        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
-        l.pathname.split('/').slice(0, 2 * pathPrefix).join('/') + '/?p=/' +
-        l.pathname.slice(1).split('/').slice(pathPrefix).join('/').replace(/&/g, '~and~') +
-        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-        l.hash
-      );
+        l.protocol +
+          '//' +
+          l.hostname +
+          (l.port ? ':' + l.port : '') +
+          l.pathname
+            .split('/')
+            .slice(0, 2 * pathPrefix)
+            .join('/') +
+          '/?p=/' +
+          l.pathname.slice(1).split('/').slice(pathPrefix).join('/').replace(/&/g, '~and~') +
+          (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+          l.hash,
+      )
     </script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>

package/docs/assets/home.js

@@ -1 +1 @@
-import{d as o,S as l,_ as c,o as n,c as a,a as s,b as r}from"./index.js";const d=o({name:"Home",mounted(){const t=new l({select:this.$refs.slimSingle}),i=new l({select:this.$refs.slimMulti});setTimeout(()=>{t.open(),setTimeout(()=>{t.setSelected("best")},500),setTimeout(()=>{t.setSelected("select")},1e3),setTimeout(()=>{t.setSelected("ever")},1500),setTimeout(()=>{t.close()},2e3),i.open(),setTimeout(()=>{i.setSelected(["best"])},500),setTimeout(()=>{i.setSelected(["best","select"])},1e3),setTimeout(()=>{i.setSelected(["best","select","ever"])},1500),setTimeout(()=>{i.close()},2e3)},500)}}),e="/assets/check-mark.svg";const _={id:"home",class:"content"},m={class:"samples row"},u={class:"single"},h=s("h2",null,"Single Select",-1),p={ref:"slimSingle"},g=s("option",{"data-placeholder":"true"},null,-1),v=s("option",{value:"best"},"Best",-1),S=s("option",{value:"select"},"Select",-1),b=s("option",{value:"ever"},"Ever",-1),f=[g,v,S,b],T={class:"multi"},k=s("h2",null,"Multi Select",-1),$={ref:"slimMulti",multiple:""},B=s("option",{value:"best"},"Best",-1),C=s("option",{value:"select"},"Select",-1),w=s("option",{value:"ever"},"Ever",-1),x=[B,C,w],y=r('<div class="callouts"><div class="features"><div class="header"><h2>Features</h2></div><div class="row"><ul class="list"><li><img src="'+e+'"> No Dependencies</li><li><img src="'+e+'"> ~30kb - ~5kb gzip</li><li><img src="'+e+'"> Single Select</li><li><img src="'+e+'"> Multiple Select</li><li><img src="'+e+'"> Addable Options</li><li><img src="'+e+'"> Html Options</li><li><img src="'+e+'"> Settable Data</li><li><img src="'+e+'"> Callback Events</li><li><img src="'+e+'"> Placeholders</li></ul><ul class="list"><li><img src="'+e+'"> Advanced Search</li><li><img src="'+e+'"> Tabbable</li><li><img src="'+e+'"> Disable Options</li><li><img src="'+e+'"> Light Css</li><li><img src="'+e+'"> Light Color Scheme</li><li><img src="'+e+'"> Style Inheritance</li><li><img src="'+e+'"> Clean Animations</li><li><img src="'+e+'"> Performant</li><li><img src="'+e+'"> Typescript</li></ul></div></div></div>',1);function E(t,i,M,A,D,N){return n(),a("div",_,[s("div",m,[s("div",u,[h,s("select",p,f,512)]),s("div",T,[k,s("select",$,x,512)])]),y])}const H=c(d,[["render",E]]);export{H as default};
+import{d as t,S as s,_ as l,o,c,a as i,b as n}from"./index.js";const m=t({name:"Home",data(){return{single:null,multiple:null}},mounted(){this.single=new s({select:this.$refs.slimSingle}),this.multiple=new s({select:this.$refs.slimMulti}),setTimeout(()=>{this.single&&this.single.open(),setTimeout(()=>{this.single&&this.single.setSelected("best")},500),setTimeout(()=>{this.single&&this.single.setSelected("select")},1e3),setTimeout(()=>{this.single&&this.single.setSelected("ever")},1500),setTimeout(()=>{this.single&&this.single.close()},2e3),this.multiple&&this.multiple.open(),setTimeout(()=>{this.multiple&&this.multiple.setSelected(["best"])},500),setTimeout(()=>{this.multiple&&this.multiple.setSelected(["best","select"])},1e3),setTimeout(()=>{this.multiple&&this.multiple.setSelected(["best","select","ever"])},1500),setTimeout(()=>{this.multiple&&this.multiple.close()},2e3)},500)},unmounted(){this.single&&this.single.destroy(),this.multiple&&this.multiple.destroy()}}),e="/assets/check-mark.svg";const a={id:"home",class:"content"},h={class:"samples row"},r={class:"single"},d=i("h2",null,"Single Select",-1),u={ref:"slimSingle"},_=i("option",{"data-placeholder":"true"},null,-1),p=i("option",{value:"best"},"Best",-1),g=i("option",{value:"select"},"Select",-1),v=i("option",{value:"ever"},"Ever",-1),f=[_,p,g,v],S={class:"multi"},b=i("h2",null,"Multi Select",-1),T={ref:"slimMulti",multiple:""},k=i("option",{value:"best"},"Best",-1),y=i("option",{value:"select"},"Select",-1),$=i("option",{value:"ever"},"Ever",-1),B=[k,y,$],C=n('<div class="callouts"><div class="features"><div class="header"><h2>Features</h2></div><div class="row"><ul class="list"><li><img src="'+e+'"> No Dependencies</li><li><img src="'+e+'"> ~30kb - ~5kb gzip</li><li><img src="'+e+'"> Single Select</li><li><img src="'+e+'"> Multiple Select</li><li><img src="'+e+'"> Addable Options</li><li><img src="'+e+'"> Html Options</li><li><img src="'+e+'"> Settable Data</li><li><img src="'+e+'"> Callback Events</li><li><img src="'+e+'"> Placeholders</li></ul><ul class="list"><li><img src="'+e+'"> Advanced Search</li><li><img src="'+e+'"> Tabbable</li><li><img src="'+e+'"> Disable Options</li><li><img src="'+e+'"> Light Css</li><li><img src="'+e+'"> Light Color Scheme</li><li><img src="'+e+'"> Style Inheritance</li><li><img src="'+e+'"> Clean Animations</li><li><img src="'+e+'"> Performant</li><li><img src="'+e+'"> Typescript</li></ul></div></div></div>',1);function w(x,E,M,A,D,N){return o(),c("div",a,[i("div",h,[i("div",r,[d,i("select",u,f,512)]),i("div",S,[b,i("select",T,B,512)])]),C])}const H=l(m,[["render",w]]);export{H as default};

package/docs/assets/index.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css?family=Montserrat:300,400,700";code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:700}.token.entity{cursor:help}:root{--color-primary: #5897fb;--color-secondary: #666666;--color-header-bg: #ffffff;--color-border: #dcdee2;--color-font: #66666;--color-white: #ffffff;--color-alert-info: #cfe2ff;--color-alert-info-border: #b6d4fe;--width-max: 1200px;--height-header: 90px;--width-nav: 200px;--height-nav: 30px;--border-radius: 4px;--font-size: 14px;--spacing: 16px;--spacing-half: 8px;--spacing-quarter: 4px}html{height:100%;padding:0;margin:0;background-color:var(--color-primary)}body{font-family:Montserrat,sans-serif,Helvetica;font-size:var(--font-size);color:var(--color-font);width:100%;padding:0;margin:0}body #app{display:grid;grid-template-columns:var(--width-nav) 1fr;grid-template-rows:calc(var(--height-header) + var(--spacing-half)) 1fr;grid-template-areas:"header header" "nav    main";width:100%;max-width:var(--width-max);height:100%;padding:0;margin:0 auto;overflow-x:hidden;box-sizing:border-box}@media (max-width: 700px){body #app{grid-template-columns:1fr;grid-template-rows:calc(var(--height-header) - var(--height-nav) + var(--spacing-half)) var(--height-nav) 1fr;grid-template-areas:"header" "nav" "main"}}body #app>*{box-sizing:border-box}body #app header{position:fixed;top:0;grid-area:header;display:flex;flex-direction:column;justify-content:flex-end;color:var(--color-white);height:var(--height-header);width:100%;max-width:var(--width-max);margin:0;padding:var(--spacing-half) 0 0 0;z-index:100000;background-color:var(--color-primary)}@media (max-width: 700px){body #app header{height:calc(var(--height-header) - var(--height-nav))}}body #app header .top{display:flex;flex-direction:row;justify-content:space-between;padding:0 0 var(--spacing-half) 0}body #app header .top .text{flex:1 1 auto;color:var(--color-font)}body #app header .top .text .logo{line-height:1;font-size:40px;font-weight:300;padding:0;margin:0}body #app header .top .socials{flex:0 1 auto;display:flex;justify-content:flex-end;gap:var(--spacing-half);color:var(--color-font);margin:0 auto;padding:var(--spacing-half) 0 0 0}body #app header .top .socials a,body #app header .top .socials img{height:30px}body #app header .bar{display:flex;flex-direction:row;justify-content:space-between;height:var(--height-nav);border:solid 1.5px var(--color-white)}@media (max-width: 700px){body #app header .bar{display:none}}body #app header .bar .tagline{flex:1 1 auto;display:inline-flex;justify-content:flex-start;align-items:center;line-height:1;font-size:16px;padding:var(--spacing-quarter) var(--spacing-quarter) var(--spacing-quarter) var(--spacing-half);margin:0 auto}body #app header .bar .drop{display:flex;flex:0 1 auto;border-left:solid 1.5px var(--color-white);margin:auto var(--spacing-quarter) auto var(--spacing-quarter);padding:0 var(--spacing-quarter) 0 var(--spacing-half)}body #app header .bar .drop svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;height:12px;width:12px;margin:0 auto}body #app header .bar .drop svg path{fill:none;stroke:var(--color-white);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}body #app nav{position:fixed;grid-area:nav;display:flex;flex-direction:column;top:calc(var(--height-header) + var(--spacing-half));width:var(--width-nav);max-width:var(--width-max);height:calc(100vh - var(--height-header) - var(--spacing));overflow:hidden;z-index:100000}@media (max-width: 700px){body #app nav{top:calc(var(--height-header) - var(--height-nav));height:auto;width:100%}}body #app nav .ss-main{flex:0 1 auto;height:var(--height-nav);font-weight:700}body #app nav .nav-content{flex:1 1 auto;overflow:hidden}@media (max-width: 700px){body #app nav .nav-content{display:none}}body #app nav .nav-content .ss-content{max-height:calc(100vh - var(--height-header) - var(--height-nav) - var(--spacing))}body #app nav .nav-content .ss-content .label{font-weight:700}body #app main{grid-area:main;display:flex;flex-direction:column;gap:var(--spacing-half);padding:0 0 0 var(--spacing);overflow:auto}@media (max-width: 700px){body #app main{padding:0}}body #app main .contents{display:flex;flex-direction:column;gap:var(--spacing)}body #app main .content{flex:1 1 auto;padding:var(--spacing);background-color:var(--color-white);border-radius:var(--border-radius)}@media screen and (max-width: 700px){body #app main .content{box-shadow:none}}body #app main .content .row{display:flex;flex-direction:row;gap:var(--spacing-half)}body #app main .content .row>*{flex:1 1 auto}body #app main .content .row .btn{flex:0 1 auto}body #app main footer{grid-area:footer;color:var(--color-white);padding:var(--spacing-quarter) 0 var(--spacing-quarter) 0;line-height:1.2;font-size:calc(var(--font-size) - 2px);text-align:center}body #app main footer a{color:var(--color-font)}code[class*=language-],pre[class*=language-]{color:#a9b7c6;font-family:Consolas,Monaco,Andale Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;border-radius:4px;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{color:inherit;background:rgba(33,66,131,.85)}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{color:inherit;background:rgba(33,66,131,.85)}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2b2b2b}:not(pre)>code[class*=language-]{padding:.1em;border-radius:2px}.token.comment,.token.prolog,.token.cdata{color:gray}.token.delimiter,.token.boolean,.token.keyword,.token.selector,.token.important,.token.atrule{color:#cc7832}.token.operator,.token.punctuation,.token.attr-name{color:#a9b7c6}.token.tag,.token.tag .punctuation,.token.doctype,.token.builtin{color:#e8bf6a}.token.entity,.token.number,.token.symbol{color:#6897bb}.token.property,.token.constant,.token.variable{color:#9876aa}.token.string,.token.char{color:#6a8759}.token.attr-value,.token.attr-value .punctuation{color:#a5c261}.token.attr-value .punctuation:first-child{color:#a9b7c6}.token.url{color:#287bde;text-decoration:underline}.token.function{color:#ffc66d}.token.regex{background:#364135}.token.bold{font-weight:700}.token.italic{font-style:italic}.token.inserted{background:#294436}.token.deleted{background:#484a4a}code.language-css .token.property,code.language-css .token.property+.token.punctuation{color:#a9b7c6}code.language-css .token.id{color:#ffc66d}code.language-css .token.selector>.token.class,code.language-css .token.selector>.token.attribute,code.language-css .token.selector>.token.pseudo-class,code.language-css .token.selector>.token.pseudo-element{color:#ffc66d}h1{font-size:40px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h2{font-size:32px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h2 .header{border-bottom:solid 1px var(--color-border)}h3{font-size:24px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h4{font-size:20px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h5{font-size:16px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}a{color:var(--primary-color)}a:hover{color:var(--color-secondary)}p{margin:0 0 var(--spacing-half) 0}.bold{font-weight:700}.pad-s{padding:var(--spacing-quarter)}.pad-t-s{padding-top:var(--spacing-quarter)}.pad-r-s{padding-right:var(--spacing-quarter)}.pad-b-s{padding-bottom:var(--spacing-quarter)}.pad-l-s{padding-left:var(--spacing-quarter)}.pad-m{padding:var(--spacing-half)}.pad-t-m{padding-top:var(--spacing-half)}.pad-r-m{padding-right:var(--spacing-half)}.pad-b-m{padding-bottom:var(--spacing-half)}.pad-l-m{padding-left:var(--spacing-half)}.pad-l{padding:var(--spacing)}.pad-t-l{padding-top:var(--spacing)}.pad-r-l{padding-right:var(--spacing)}.pad-b-l{padding-bottom:var(--spacing)}.pad-l-l{padding-left:var(--spacing)}.mar-s{margin:var(--spacing-quarter)}.mar-t-s{margin-top:var(--spacing-quarter)}.mar-r-s{margin-right:var(--spacing-quarter)}.mar-b-s{margin-bottom:var(--spacing-quarter)}.mar-l-s{margin-left:var(--spacing-quarter)}.mar-m{margin:var(--spacing-half)}.mar-t-m{margin-top:var(--spacing-half)}.mar-r-m{margin-right:var(--spacing-half)}.mar-b-m{margin-bottom:var(--spacing-half)}.mar-l-m{margin-left:var(--spacing-half)}.mar-l{margin:var(--spacing)}.mar-t-l{margin-top:var(--spacing)}.mar-r-l{margin-right:var(--spacing)}.mar-b-l{margin-bottom:var(--spacing)}.mar-l-l{margin-left:var(--spacing)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in-out}.fade-enter,.fade-leave-to{opacity:0}button,.btn{display:inline-flex;align-items:center;color:var(--color-white);height:30px;width:auto;max-width:100%;min-width:auto;padding:0 var(--spacing-half) 0 var(--spacing-half);cursor:pointer;background-color:var(--color-primary);text-align:center;line-height:18px;user-select:none;white-space:nowrap;border-radius:var(--border-radius);vertical-align:middle;box-shadow:0 0 0 1px transparent inset,0 0 #22242626 inset;box-sizing:content-box}input{color:var(--color-font)}.alert{position:relative;color:var(--color-font);padding:var(--spacing-half) var(--spacing);margin:0 0 var(--spacing-half) 0;border-radius:var(--border-radius)}.alert.info{background-color:var(--color-alert-info);border-color:var(--color-alert-info-border)}:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #8a8a8a;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: .2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.ss-hide{display:none!important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing)}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-main.ss-disabled{background-color:var(--ss-border-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0;border-top-right-radius:0}.ss-main.ss-open-below{border-bottom-left-radius:0;border-bottom-right-radius:0}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);font-weight:700}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l) * 3)}.ss-content .ss-list .ss-optgroup-selectable{cursor:pointer}.ss-content .ss-list .ss-optgroup-selectable:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option{padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:var(--ss-disabled-color);background-color:var(--ss-bg-color)}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:var(--ss-font-color);background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}
+@import"https://fonts.googleapis.com/css?family=Montserrat:300,400,700";code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:700}.token.entity{cursor:help}:root{--color-primary: #5897fb;--color-secondary: #666666;--color-header-bg: #ffffff;--color-border: #dcdee2;--color-font: #66666;--color-white: #ffffff;--color-alert-info: #cfe2ff;--color-alert-info-border: #b6d4fe;--width-max: 1000px;--height-header: 90px;--width-nav: 200px;--height-nav: 30px;--border-radius: 4px;--font-size: 14px;--spacing: 16px;--spacing-half: 8px;--spacing-quarter: 4px}html{height:100%;padding:0;margin:0;background-color:var(--color-primary)}body{font-family:Montserrat,sans-serif,Helvetica;font-size:var(--font-size);color:var(--color-font);width:100%;padding:0;margin:0}body #app{display:grid;grid-template-columns:var(--width-nav) 1fr;grid-template-rows:calc(var(--height-header) + var(--spacing-half)) 1fr;grid-template-areas:"header header" "nav    main";width:100%;max-width:var(--width-max);height:100%;padding:0;margin:0 auto;overflow-x:hidden;box-sizing:border-box}@media (max-width: 700px){body #app{grid-template-columns:1fr;grid-template-rows:calc(var(--height-header) - var(--height-nav) + var(--spacing-half)) var(--height-nav) 1fr;grid-template-areas:"header" "nav" "main"}}body #app>*{box-sizing:border-box}body #app header{position:fixed;top:0;grid-area:header;display:flex;flex-direction:column;justify-content:flex-end;color:var(--color-white);height:var(--height-header);width:100%;max-width:var(--width-max);margin:0;padding:var(--spacing-half) 0 0 0;z-index:100000;background-color:var(--color-primary)}@media (max-width: 700px){body #app header{height:calc(var(--height-header) - var(--height-nav))}}body #app header .top{display:flex;flex-direction:row;justify-content:space-between;padding:0 0 var(--spacing-half) 0}body #app header .top .text{flex:1 1 auto;color:var(--color-font)}body #app header .top .text .logo{line-height:1;font-size:40px;font-weight:300;padding:0;margin:0}body #app header .top .socials{flex:0 1 auto;display:flex;justify-content:flex-end;gap:var(--spacing-half);color:var(--color-font);margin:0 auto;padding:var(--spacing-half) 0 0 0}body #app header .top .socials a,body #app header .top .socials img{height:30px}body #app header .bar{display:flex;flex-direction:row;justify-content:space-between;height:var(--height-nav);border:solid 1.5px var(--color-white)}@media (max-width: 700px){body #app header .bar{display:none}}body #app header .bar .tagline{flex:1 1 auto;display:inline-flex;justify-content:flex-start;align-items:center;line-height:1;font-size:16px;padding:var(--spacing-quarter) var(--spacing-quarter) var(--spacing-quarter) var(--spacing-half);margin:0 auto}body #app header .bar .drop{display:flex;flex:0 1 auto;border-left:solid 1.5px var(--color-white);margin:auto var(--spacing-quarter) auto var(--spacing-quarter);padding:0 var(--spacing-quarter) 0 var(--spacing-half)}body #app header .bar .drop svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;height:12px;width:12px;margin:0 auto}body #app header .bar .drop svg path{fill:none;stroke:var(--color-white);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}body #app nav{position:fixed;grid-area:nav;display:flex;flex-direction:column;top:calc(var(--height-header) + var(--spacing-half));width:var(--width-nav);max-width:var(--width-max);height:calc(100vh - var(--height-header) - var(--spacing));overflow:hidden;z-index:100000}@media (max-width: 700px){body #app nav{top:calc(var(--height-header) - var(--height-nav));height:auto;width:100%}}body #app nav .ss-main{flex:0 1 auto;height:var(--height-nav);font-weight:700}body #app nav .nav-content{flex:1 1 auto;overflow:hidden}@media (max-width: 700px){body #app nav .nav-content{display:none}}body #app nav .nav-content .ss-content{max-height:calc(100vh - var(--height-header) - var(--height-nav) - var(--spacing))}body #app nav .nav-content .ss-content .label{font-weight:700}body #app main{grid-area:main;display:flex;flex-direction:column;gap:var(--spacing-half);padding:0 0 0 var(--spacing);overflow:auto}@media (max-width: 700px){body #app main{padding:0}}body #app main .contents{display:flex;flex-direction:column;gap:var(--spacing)}body #app main .content{flex:1 1 auto;padding:var(--spacing);background-color:var(--color-white);border-radius:var(--border-radius)}@media screen and (max-width: 700px){body #app main .content{box-shadow:none}}body #app main .content .row{display:flex;flex-direction:row;gap:var(--spacing-half)}body #app main .content .row>*{flex:1 1 auto}body #app main .content .row .btn{flex:0 1 auto}body #app main footer{grid-area:footer;color:var(--color-white);padding:var(--spacing-quarter) 0 var(--spacing-quarter) 0;line-height:1.2;font-size:calc(var(--font-size) - 2px);text-align:center}body #app main footer a{color:var(--color-font)}code[class*=language-],pre[class*=language-]{color:#a9b7c6;font-family:Consolas,Monaco,Andale Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;border-radius:4px;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{color:inherit;background:rgba(33,66,131,.85)}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{color:inherit;background:rgba(33,66,131,.85)}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2b2b2b}:not(pre)>code[class*=language-]{padding:.1em;border-radius:2px}.token.comment,.token.prolog,.token.cdata{color:gray}.token.delimiter,.token.boolean,.token.keyword,.token.selector,.token.important,.token.atrule{color:#cc7832}.token.operator,.token.punctuation,.token.attr-name{color:#a9b7c6}.token.tag,.token.tag .punctuation,.token.doctype,.token.builtin{color:#e8bf6a}.token.entity,.token.number,.token.symbol{color:#6897bb}.token.property,.token.constant,.token.variable{color:#9876aa}.token.string,.token.char{color:#6a8759}.token.attr-value,.token.attr-value .punctuation{color:#a5c261}.token.attr-value .punctuation:first-child{color:#a9b7c6}.token.url{color:#287bde;text-decoration:underline}.token.function{color:#ffc66d}.token.regex{background:#364135}.token.bold{font-weight:700}.token.italic{font-style:italic}.token.inserted{background:#294436}.token.deleted{background:#484a4a}code.language-css .token.property,code.language-css .token.property+.token.punctuation{color:#a9b7c6}code.language-css .token.id{color:#ffc66d}code.language-css .token.selector>.token.class,code.language-css .token.selector>.token.attribute,code.language-css .token.selector>.token.pseudo-class,code.language-css .token.selector>.token.pseudo-element{color:#ffc66d}h1{font-size:40px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h2{font-size:32px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h2 .header{border-bottom:solid 1px var(--color-border)}h3{font-size:24px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h4{font-size:20px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h5{font-size:16px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}a{color:var(--primary-color)}a:hover{color:var(--color-secondary)}p{margin:0 0 var(--spacing-half) 0}.bold{font-weight:700}.pad-s{padding:var(--spacing-quarter)}.pad-t-s{padding-top:var(--spacing-quarter)}.pad-r-s{padding-right:var(--spacing-quarter)}.pad-b-s{padding-bottom:var(--spacing-quarter)}.pad-l-s{padding-left:var(--spacing-quarter)}.pad-m{padding:var(--spacing-half)}.pad-t-m{padding-top:var(--spacing-half)}.pad-r-m{padding-right:var(--spacing-half)}.pad-b-m{padding-bottom:var(--spacing-half)}.pad-l-m{padding-left:var(--spacing-half)}.pad-l{padding:var(--spacing)}.pad-t-l{padding-top:var(--spacing)}.pad-r-l{padding-right:var(--spacing)}.pad-b-l{padding-bottom:var(--spacing)}.pad-l-l{padding-left:var(--spacing)}.mar-s{margin:var(--spacing-quarter)}.mar-t-s{margin-top:var(--spacing-quarter)}.mar-r-s{margin-right:var(--spacing-quarter)}.mar-b-s{margin-bottom:var(--spacing-quarter)}.mar-l-s{margin-left:var(--spacing-quarter)}.mar-m{margin:var(--spacing-half)}.mar-t-m{margin-top:var(--spacing-half)}.mar-r-m{margin-right:var(--spacing-half)}.mar-b-m{margin-bottom:var(--spacing-half)}.mar-l-m{margin-left:var(--spacing-half)}.mar-l{margin:var(--spacing)}.mar-t-l{margin-top:var(--spacing)}.mar-r-l{margin-right:var(--spacing)}.mar-b-l{margin-bottom:var(--spacing)}.mar-l-l{margin-left:var(--spacing)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in-out}.fade-enter,.fade-leave-to{opacity:0}button,.btn{display:inline-flex;align-items:center;color:var(--color-white);height:30px;width:auto;max-width:100%;min-width:auto;padding:0 var(--spacing-half) 0 var(--spacing-half);cursor:pointer;background-color:var(--color-primary);text-align:center;line-height:18px;user-select:none;white-space:nowrap;border-radius:var(--border-radius);vertical-align:middle;box-shadow:0 0 0 1px transparent inset,0 0 #22242626 inset;box-sizing:content-box}input{color:var(--color-font)}.alert{position:relative;color:var(--color-font);padding:var(--spacing-half) var(--spacing);margin:0 0 var(--spacing-half) 0;border-radius:var(--border-radius)}.alert.info{background-color:var(--color-alert-info);border-color:var(--color-alert-info-border)}:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #8a8a8a;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: .2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.ss-hide{display:none!important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing)}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-main.ss-disabled{background-color:var(--ss-border-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0;border-top-right-radius:0}.ss-main.ss-open-below{border-bottom-left-radius:0;border-bottom-right-radius:0}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color)}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);font-weight:700}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l) * 3)}.ss-content .ss-list .ss-optgroup-selectable{cursor:pointer}.ss-content .ss-list .ss-optgroup-selectable:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option{padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:var(--ss-disabled-color);background-color:var(--ss-bg-color)}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:var(--ss-font-color);background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}