@coderundebug/ui-web
Version:
A collection of UI web components that can be used in any web project.
2 lines • 38.4 kB
JavaScript
/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as i}from"./ui-tools.js";class t{static i(i){return t.t(i.firstElementChild)}static h(i){return t.o(i.lastElementChild)}static t(i){let t=i.nextElementSibling;for(;;){if(!t)return null;if(!0===t.l)return t;t=t.nextElementSibling}}static o(i){let t=i.previousElementSibling;for(;;){if(!t)return null;if(!0===t.l)return t;t=t.previousElementSibling}}static u(i){let t=i.firstElementChild;const s=i.firstElementChild.offsetTop,e=i.scrollTop+s;for(;;){if(!t)return null;if(!0===t.l&&t.offsetTop>=e)return t;t=t.nextElementSibling}}static p(i){let t=i.firstElementChild;const s=i.firstElementChild.offsetTop,e=i.scrollTop+s+i.clientHeight;let h=null;for(;;){if(!0===t.l&&(h=t),!t.nextElementSibling)return h;if(t.nextElementSibling&&!0===t.nextElementSibling.l&&t.nextElementSibling.offsetTop+t.nextElementSibling.clientHeight>=e)return t;t=t.nextElementSibling}}static v(i,s,e){let h=Math.floor(i.clientHeight/s.clientHeight),o=s;if(-1===e)for(;o&&!(!0===o.l&&(h--,h<=0));)o=o.previousElementSibling;if(1===e)for(;o&&!(!0===o.l&&(h--,h<=0));)o=o.nextElementSibling;return o||(-1===e?t.t(i.firstElementChild):1===e?t.o(i.lastElementChild):o)}static m(i){let t=0;return i.forEach((i=>{!1!==i.l&&t++})),t}static k(i){const t=new CustomEvent("input");i.dispatchEvent(t)}}class s{constructor(i){this._=i,this.S=!1,this.P=!1,this.C=this.C.bind(this),this.A=this.A.bind(this),this.D=this.D.bind(this),this.U=this.U.bind(this),this.L=this.L.bind(this),this.T=this.T.bind(this),this.M=this.M.bind(this),this.O=this.O.bind(this),this.j=this.j.bind(this),this.B=this.B.bind(this),this.I=!1,this.F=!0,this.R=null,this.V=[],this.N=new Map,this.H=0,this.q=!1,this.G=!1}J(){!1===this._.hasAttribute("default-select")&&!1===this._.hasAttribute("checkbox")&&(this.S=!0),!1!==this.S&&(!0===this._.hasAttribute("search")&&(this.P=!0),this.K=this._.shadowRoot.getElementById("base"),this.W=this._.shadowRoot.getElementById("dialog"),this.X=this._.shadowRoot.getElementById("result"),this.K.addEventListener("click",this.C),this._.addEventListener("keydown",this.A),!0===this.P&&(this.Y||(this.Y=document.createElement("input"),this.Y.setAttribute("type","text"),this.Y.setAttribute("autocapitalize","off"),this.Y.setAttribute("autocomplete","off"),this.Y.setAttribute("autocorrect","off"),this.Y.setAttribute("autocorrect","off"),this.Y.setAttribute("spellcheck","false"),this.Y.setAttribute("enterkeyhint","search"),this.X.appendChild(this.Y),this.K.setAttribute("tabindex","-1"),this.Y.setAttribute("tabindex","0")),!0===this._.hasAttribute("placeholder")?this.Y.setAttribute("placeholder",this._.getAttribute("placeholder")):this.Y.removeAttribute("placeholder"),this.Y.addEventListener("click",this.D),this.Y.addEventListener("input",this.U)),this.Z(),this.$(this._.ii),!0===this._.hasAttribute("loading")&&this.ti(!1,!0))}si(){!1!==this.S&&(this.K.removeEventListener("click",this.C),this._.removeEventListener("keydown",this.A),this.ei(),!0===this.P&&(this.Y.removeEventListener("click",this.D),this.Y.removeEventListener("input",this.U)))}hi(i,t){!1!==this.S&&(this.Z(),0!==this.V.length&&this.oi(this.V[0]),!0===this._.hasAttribute("loading")&&this.ti(!1,!0),this.ni())}ri(i){if(!1===this.S)return;this.$(i);let t=!1;i&&(t=!0),!i&&!0===this.P&&this.Y.value&&(t=!0),this._.li(t)}ai(i){!1!==this.S&&!0===this.P&&(this.Y.disabled=i)}di(i){!1!==this.S&&(this.ti(!1,i),this.ni())}ci(i){!1!==this.S&&!1!==this.P&&(this.Y.value=i,this.U())}ui(){if(!1!==this.S&&!1!==this.P)return this.Y.value}gi(){!1!==this.S&&(!0===this.P&&(this.V.forEach((i=>{i.l=!0,i.classList.remove("search-not-found")})),this.ti(!1,!1)),this.R&&this.R.removeAttribute("highlighted"),this.R=null,this.$(""),!0===this.P&&(this.Y.value="",this.Y.focus(),t.k(this._)))}pi(){!1!==this.S&&!0!==this.I&&(this.F=!0,this.fi())}bi(){!1!==this.S&&!1!==this.I&&this.mi()}C(i){!1!==this.S&&(!0!==this.I?!0!==this._.K.hasAttribute("disabled")&&(this.F=!0,this.fi(),!0===this.wi&&(this.Y.focus(),this.wi=!1)):this.mi())}A(i){if("Space"===i.code||"Enter"===i.key){if(!1===this.I)return this.fi(),i.preventDefault(),void i.stopPropagation();!0===this.I&&(this.R&&!1===this.q&&(this._.xi(this.R.ki),this._.li(!0),this.$(this.R.ki)),this.mi(),!0===this.P?this.Y.focus():this.K.focus(),i.preventDefault(),i.stopPropagation())}if("Escape"===i.key){if(!1===this.I)return;this.mi(),!0===this.P?this.Y.focus():this.K.focus(),i.preventDefault(),i.stopPropagation()}if(!0===this.q)return;if(!1===this.I)return;let s=!1,e=!1;if(("Tab"===i.key&&!i.shiftKey||"ArrowDown"===i.key)&&(s=!0),("Tab"===i.key&&i.shiftKey||"ArrowUp"===i.key)&&(e=!0),!0===e||!0===s){i.preventDefault(),i.stopPropagation();let h=null;this.R||(!0===s&&(h=t.i(this.W)),!0===e&&(h=t.h(this.W))),this.R&&(!0===e&&(h=t.o(this.R)),!0===s&&(h=t.t(this.R))),h&&this.oi(h),h||"Tab"===i.key&&this.mi()}if("PageUp"===i.key||"PageDown"===i.key){i.preventDefault(),i.stopPropagation();let s=null;if(this.R||("PageDown"===i.key&&(s=t.p(this.W)),"PageUp"===i.key&&(s=t.u(this.W))),this.R){if("PageDown"===i.key){s=t.p(this.W)===this.R?t.v(this.W,this.R,1):t.p(this.W)}if("PageUp"===i.key){s=t.u(this.W)===this.R?t.v(this.W,this.R,-1):t.u(this.W)}}s&&this.oi(s)}}L(i){const t=i.target;if(0!==t.assignedElements().length)return;const s=t.parentElement,e=this.V.indexOf(s);this.V.splice(e,1),this.W.removeChild(s),t.removeEventListener("slotchange",this.L)}D(i){!0!==this._.K.hasAttribute("disabled")&&(this.wi=!0)}U(){if(!0===this.G)return;if(!1===this.I&&(this.fi(),this.Y.focus()),!this.Y.value)return this.V.forEach((i=>{i.l=!0,i.classList.remove("search-not-found")})),this.ti(!1,!1),void this._.li(!1);this._.li(!0);const i=this.Y.value.toLowerCase();if(this.V.forEach((t=>{-1!==t._i.indexOf(i)?(t.l=!0,t.classList.remove("search-not-found")):(t.l=!1,t.classList.add("search-not-found"))})),this.H=t.m(this.V),0===this.H)return this.ti(!0,!1),void(this.R&&(this.R.removeAttribute("highlighted"),this.R=null));if(this.ti(!1,!1),this.R){if(!1===this.R.l){let i=t.t(this.R);i||(i=t.o(this.R)),i||(this.R.removeAttribute("highlighted"),this.R=null),i&&this.oi(i)}1===this.H&&this.Y.focus()}}T(i){const t=i.currentTarget;null!==t&&(this._.xi(t.ki),this._.li(!0),this.$(t.ki),this.mi(),i.stopPropagation())}M(i){const t=i.currentTarget;null!==t&&this.oi(t)}O(i){if(!1===this.I)return;const t=i.currentTarget;null!==t&&this.oi(t)}oi(i){if(i===this.R)return;const t=this.W.querySelector("[highlighted]");t&&t.removeAttribute("highlighted"),i.setAttribute("highlighted",""),this.R=i,i.focus(),!0===this.P&&this.Y.focus()}j(i){i.stopPropagation()}B(){!0!==this.F?this.mi():this.F=!1}fi(){this._.setAttribute("open",""),this.ni(),this.W.show();let i=!1;!0===this.P&&this.Y.value&&(i=!0);const t=this.N.get(this._.ii);t&&this.oi(t),this.W.addEventListener("click",this.j),document.addEventListener("click",this.B),this.I=!0}mi(){this.W.removeEventListener("click",this.j),document.removeEventListener("click",this.B),this._.removeAttribute("open"),this.W.close(),this.I=!1}ei(){this.V.forEach((i=>{i.firstElementChild.removeEventListener("slotchange",this.L),i.removeEventListener("click",this.T),i.removeEventListener("focus",this.M),i.removeEventListener("pointermove",this.O)})),this.V=[]}ni(){0===this.H?!1===this.G&&this.ti(!0,!1):!1===this.G&&this.ti(!1,!1)}ti(i,t){this.G=t,this.yi||(this.yi=document.createElement("div"),this.yi.classList.add("message"),this.Ei=this._.getAttribute("missing-message"),this.Ei||(this.Ei="nothing found"),this.zi=this._.getAttribute("loading-message"),this.zi||(this.zi="loading")),!1===i&&!1===t&&(!0===this.q&&(this.W.removeChild(this.yi),this.q=!1),this.W.classList.remove("showing-message")),!0!==i&&!0!==t||(!1===this.q&&(this.W.appendChild(this.yi),this.q=!0),!0===i&&(this.yi.textContent=this.Ei),!0===t&&(this.yi.textContent=this.zi),this.W.classList.add("showing-message"))}Z(){this.ei(),this.N.clear(),this.W.innerHTML="",this.q=!1;for(const i of this._.children){if("start"===i.slot)continue;if("end"===i.slot)continue;const t=i.getAttribute("value");if(!t)continue;const s=document.createElement("div");s.ki=t,s.Si=i.textContent,s._i=s.Si.toLowerCase(),s.l=!0,this.N.set(t,s),s.setAttribute("tabindex","0");const e=document.createElement("slot");s.appendChild(e),this.W.appendChild(s),e.assign(i),e.addEventListener("slotchange",this.L),s.addEventListener("click",this.T),s.addEventListener("focus",this.M),s.addEventListener("pointermove",this.O),this.V.push(s)}this.H=this.V.length}$(i){const t=this.W.querySelector("[selected]");if(t&&(t.removeAttribute("selected"),t.setAttribute("aria-selected","false")),!i){if(!0===this.P)return;return void(!0===this._.hasAttribute("placeholder")?(this.X.textContent=this._.getAttribute("placeholder"),this.X.classList.add("placeholder")):this.X.innerHTML=" ")}this.X.classList.remove("placeholder");const s=this.N.get(i);if(s||!0===this.P||(this.X.innerHTML=" "),s){const i=s.Si;i||(this.X.innerHTML=" "),i&&(!0===this.P?this.Y.value=i:this.X.textContent=i),s.setAttribute("selected",""),s.setAttribute("aria-selected","true")}}}class e{constructor(i){this._=i,this.S=!1,this.Pi=null,this.Ci=this.Ci.bind(this)}J(){if(!0===this._.hasAttribute("default-select")&&!1===this._.hasAttribute("checkbox")&&(this.S=!0),!1!==this.S){if(this.K=this._.shadowRoot.getElementById("base"),!this.Pi){this.Pi=document.createElement("select");const i=this._.shadowRoot.querySelector("#result");this.K.insertBefore(this.Pi,i),this.Ai()}this.Pi.addEventListener("change",this.Ci),this.K.setAttribute("tabindex","-1"),this.Pi.setAttribute("tabindex","0"),!0===this._.hasAttribute("disabled")&&this.Pi.setAttribute("disabled",""),this.Pi.value&&"uiSelectPlaceholder"!==this.Pi.value&&this._.li(!0)}}si(){!1!==this.S&&this.Pi.removeEventListener("change",this.Ci)}hi(i,t){!1!==this.S&&this.Ai()}ri(i){if(!1!==this.S&&(i?this._.li(!0):this._.li(!1),this.Pi)){if(!i&&!0===this._.hasAttribute("placeholder"))return void(this.Pi.value="uiSelectPlaceholder");this.Pi.value=i}}ai(i){!1!==this.S&&this.Pi&&(!0===i?this.Pi.setAttribute("disabled",""):this.Pi.removeAttribute("disabled"))}di(i){}ci(i){}ui(){}gi(){!1!==this.S&&(!0!==this._.hasAttribute("placeholder")?this.Pi.value="":this.Pi.value="uiSelectPlaceholder")}pi(){!1!==this.S&&this.Pi&&"function"==typeof this.Pi&&this.Pi.showPicker()}bi(){if(!1!==this.S&&this.Pi){const i=this._.shadowRoot.querySelector('slot[name="end"]');return this.K.removeChild(this.Pi),void this.K.insertBefore(this.Pi,i)}}Ci(){this._.xi(this.Pi.value),this.Pi.value&&this._.li(!0)}Ai(){if(this.Pi.innerHTML="",!0===this._.hasAttribute("placeholder")){const i=this._.getAttribute("placeholder");if(i){const t=document.createElement("option");t.setAttribute("disabled",""),t.setAttribute("selected",""),t.setAttribute("hidden",""),t.setAttribute("value","uiSelectPlaceholder"),t.textContent=i,this.Pi.appendChild(t)}}for(const i of this._.children){if("start"===i.slot)continue;if("end"===i.slot)continue;const t=i.textContent.trim();if(!t)return;const s=document.createElement("option");if(s.textContent=t,!0===i.hasAttribute("value")){const t=i.getAttribute("value");t&&s.setAttribute("value",t)}this.Pi.appendChild(s)}}}class h{static get Di(){return'\n <div>\n <svg\n viewBox="0 0 16 16"\n style="\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke: var(--ui-sic);">\n <path d="M 2,2 14,14"></path>\n <path d="M 2,14 14,2"></path>\n </svg>\n </div>\n '}constructor(i){this._=i,this.S=!1,this.P=!1,this.C=this.C.bind(this),this.A=this.A.bind(this),this.D=this.D.bind(this),this.U=this.U.bind(this),this.L=this.L.bind(this),this.T=this.T.bind(this),this.M=this.M.bind(this),this.O=this.O.bind(this),this.Ui=this.Ui.bind(this),this.j=this.j.bind(this),this.B=this.B.bind(this),this.I=!1,this.F=!0,this.R=null,this.V=[],this.N=new Map,this.H=0,this.Li=[],this.q=!1,this.G=!1}J(){!0===this._.hasAttribute("checkbox")&&!1===this._.hasAttribute("default-select")&&(this.S=!0),!1!==this.S&&(!0===this._.hasAttribute("search")&&(this.P=!0),this.K=this._.shadowRoot.getElementById("base"),this.W=this._.shadowRoot.getElementById("dialog"),this.X=this._.shadowRoot.getElementById("result"),this.K.addEventListener("click",this.C),this._.addEventListener("keydown",this.A),!0===this.P&&(this.Y||(this.Y=document.createElement("input"),this.Y.setAttribute("type","text"),this.Y.setAttribute("autocapitalize","off"),this.Y.setAttribute("autocomplete","off"),this.Y.setAttribute("autocorrect","off"),this.Y.setAttribute("autocorrect","off"),this.Y.setAttribute("spellcheck","false"),this.Y.setAttribute("enterkeyhint","search"),this.X.insertBefore(this.Y,null),this.K.setAttribute("tabindex","-1"),this.Y.setAttribute("tabindex","0")),!0===this._.hasAttribute("placeholder")?this.Y.setAttribute("placeholder",this._.getAttribute("placeholder")):this.Y.removeAttribute("placeholder"),this.Y.addEventListener("click",this.D),this.Y.addEventListener("input",this.U)),this.Z(),this.ri(this._.ii),!0===this._.hasAttribute("loading")&&this.ti(!1,!0))}si(){if(!1===this.S)return;this.K.removeEventListener("click",this.C),this._.removeEventListener("keydown",this.A),this.ei(),this.V.forEach((i=>{i.firstElementChild.removeEventListener("slotchange",this.L),i.removeEventListener("click",this.T),i.removeEventListener("focus",this.M),i.removeEventListener("pointermove",this.O)}));let i=this.X.firstElementChild;for(;i;){if("INPUT"!==i.tagName){i.lastElementChild.removeEventListener("click",this.Ui)}i=i.nextElementSibling}}hi(i,t){!1!==this.S&&(this.Z(),0!==this.V.length&&this.oi(this.V[0]),!0===this._.hasAttribute("loading")&&this.ti(!1,!0),this.ni(),this.$(),!0===this.P&&(this.U(),this.Y.focus()))}ri(i){if(!1===this.S)return;this.Li=[],i&&(this.Li=i.split(",")),this.N.forEach((i=>{-1!==this.Li.indexOf(i.ki)?(i.firstElementChild.checked=!0,i.setAttribute("aria-selected","true")):(i.firstElementChild.checked=!1,i.setAttribute("aria-selected","false"))})),this.$();let t=!1;i&&(t=!0),!i&&!0===this.P&&this.Y.value&&(t=!0),this._.li(t)}ai(i){!1!==this.S&&!0===this.P&&(this.Y.disabled=i)}di(i){!1!==this.S&&(this.ti(!1,i),this.ni())}ci(i){!1!==this.S&&!1!==this.P&&(this.Y.value=i,this.U())}ui(){if(!1!==this.S&&!1!==this.P)return this.Y.value}gi(){!1!==this.S&&(!0===this.P&&(this.V.forEach((i=>{i.l=!0,i.classList.remove("search-not-found")})),this.ti(!1,!1)),this.R&&this.R.removeAttribute("highlighted"),this.R=null,!0===this.P&&(this.Y.value="",this.Y.focus(),t.k(this._)),this.ri(""))}pi(){!1!==this.S&&!0!==this.I&&(this.F=!0,this.fi())}bi(){!1!==this.S&&!1!==this.I&&this.mi()}C(i){!1!==this.S&&(!0!==this.I?!0!==this._.K.hasAttribute("disabled")&&(this.F=!0,this.fi(),!0===this.wi&&(this.Y.focus(),this.wi=!1)):this.mi())}A(i){if("Space"===i.code||"Enter"===i.key){if(!1===this.I)return this.fi(),i.preventDefault(),void i.stopPropagation();!0===this.I&&(this.R&&!1===this.q&&this.Ti(this.R),!0===this.P?(0===this.H&&this.mi(),this.Y.focus()):this.K.focus(),i.preventDefault(),i.stopPropagation())}if("Escape"===i.key){if(!1===this.I)return;this.mi(),!0===this.P?this.Y.focus():this.K.focus(),i.preventDefault(),i.stopPropagation()}if(!0===this.q&&"Tab"===i.key)return void this.mi();if(!0===this.q)return;if(!1===this.I)return;let s=!1,e=!1;if(("Tab"===i.key&&!i.shiftKey||"ArrowDown"===i.key)&&(s=!0),("Tab"===i.key&&i.shiftKey||"ArrowUp"===i.key)&&(e=!0),!0===e||!0===s){i.preventDefault(),i.stopPropagation();let h=null;this.R||(!0===s&&(h=t.i(this.W)),!0===e&&(h=t.h(this.W))),this.R&&(!0===e&&(h=t.o(this.R)),!0===s&&(h=t.t(this.R))),h&&this.oi(h),h||"Tab"===i.key&&this.mi()}if("PageUp"===i.key||"PageDown"===i.key){i.preventDefault(),i.stopPropagation();let s=null;if(this.R||("PageDown"===i.key&&(s=t.p(this.W)),"PageUp"===i.key&&(s=t.u(this.W))),this.R){if("PageDown"===i.key){s=t.p(this.W)===this.R?t.v(this.W,this.R,1):t.p(this.W)}if("PageUp"===i.key){s=t.u(this.W)===this.R?t.v(this.W,this.R,-1):t.u(this.W)}}s&&this.oi(s)}}L(i){const t=i.target;if(0!==t.assignedElements().length)return;const s=t.parentElement,e=this.V.indexOf(s);this.V.splice(e,1),this.W.removeChild(s),t.removeEventListener("slotchange",this.L)}D(i){!0!==this._.K.hasAttribute("disabled")&&(this.wi=!0)}U(){if(!0===this.G)return;if(!1===this.I&&(this.fi(),this.Y.focus()),!this.Y.value)return this.V.forEach((i=>{i.l=!0,i.classList.remove("search-not-found")})),this.H=this.V.length,this.ti(!1,!1),this._.li(!1),this.ni(),0!==this.V.length&&this.oi(this.V[0]),void this.Y.focus();this._.li(!0);const i=this.Y.value.toLowerCase();if(this.V.forEach((t=>{-1!==t._i.indexOf(i)?(t.l=!0,t.classList.remove("search-not-found")):(t.l=!1,t.classList.add("search-not-found"))})),this.H=t.m(this.V),0===this.H)return this.ti(!0,!1),void(this.R&&(this.R.removeAttribute("highlighted"),this.R=null));if(this.ti(!1,!1),this.R&&!1===this.R.l){let i=t.t(this.R);i||(i=t.o(this.R)),i||(this.R.removeAttribute("highlighted"),this.R=null),i&&this.oi(i)}this.Y.focus()}T(i){const t=i.currentTarget;null!==t&&(this.Ti(t),this._.li(!0),i.stopPropagation())}M(i){const t=i.currentTarget;null!==t&&this.oi(t)}O(i){if(!1===this.I)return;const t=i.currentTarget;null!==t&&this.oi(t)}oi(i){if(i===this.R)return;const t=this.W.querySelector("[highlighted]");t&&t.removeAttribute("highlighted"),i.setAttribute("highlighted",""),this.R=i,i.focus()}Ui(i){const t=i.currentTarget.ki,s=this.N.get(t);s&&(s.firstElementChild.checked=!1,s.setAttribute("aria-selected","false"));const e=this.Li.indexOf(t);-1!==e&&this.Li.splice(e,1);const h=this.Li.join(",");this._.xi(h),this.$(),this.P&&this.Y.focus(),i.stopPropagation()}j(i){i.stopPropagation()}B(){!0!==this.F?this.mi():this.F=!1}fi(){this._.setAttribute("open",""),this.ni(),this.W.show();const i=this.N.get(this._.ii);i&&this.oi(i),this.W.addEventListener("click",this.j),document.addEventListener("click",this.B),this.I=!0}mi(){this.W.removeEventListener("click",this.j),document.removeEventListener("click",this.B),this._.removeAttribute("open"),this.W.close(),this.I=!1}ei(){this.V.forEach((i=>{i.lastElementChild.removeEventListener("slotchange",this.L),i.removeEventListener("click",this.T),i.removeEventListener("focus",this.M),i.removeEventListener("pointermove",this.O)})),this.V=[]}ni(){0===this.H?!1===this.G&&this.ti(!0,!1):!1===this.G&&this.ti(!1,!1)}ti(i,t){this.G=t,this.yi||(this.yi=document.createElement("div"),this.yi.classList.add("message"),this.Ei=this._.getAttribute("missing-message"),this.Ei||(this.Ei="nothing found"),this.zi=this._.getAttribute("loading-message"),this.zi||(this.zi="loading")),!1===i&&!1===t&&(!0===this.q&&(this.W.removeChild(this.yi),this.q=!1),this.W.classList.remove("showing-message")),!0!==i&&!0!==t||(!1===this.q&&(this.W.appendChild(this.yi),this.q=!0),!0===i&&(this.yi.textContent=this.Ei),!0===t&&(this.yi.textContent=this.zi),this.W.classList.add("showing-message"))}Z(){this.ei(),this.N.clear(),this.W.innerHTML="",this.q=!1,this.Li=[];const i=this._.ii.split(",");for(const t of this._.children){if("start"===t.slot)continue;if("end"===t.slot)continue;const s=t.getAttribute("value");if(!s)continue;const e=document.createElement("div");e.ki=s,e.Si=t.textContent,e._i=e.Si.toLowerCase(),e.l=!0,this.N.set(s,e),-1!==i.indexOf(s)&&this.Li.push(s),e.setAttribute("tabindex","0");const h=document.createElement("input");h.setAttribute("type","checkbox"),h.setAttribute("tabindex","-1");const o=document.createElement("slot");e.appendChild(h),e.appendChild(o),this.W.appendChild(e),o.assign(t),o.addEventListener("slotchange",this.L),e.addEventListener("click",this.T),e.addEventListener("focus",this.M),e.addEventListener("pointermove",this.O),this.V.push(e)}this.H=this.V.length}Ti(i){const t=this.Li.indexOf(i.ki);-1===t&&(i.firstElementChild.checked=!0,this.Li.push(i.ki),i.setAttribute("aria-selected","true")),-1!==t&&(i.firstElementChild.checked=!1,this.Li.splice(t,1),i.setAttribute("aria-selected","false"));const s=this.Li.join(",");this._.xi(s),this.$()}$(){let i=this.X.firstElementChild;for(;i;){if("INPUT"!==i.tagName){i.lastElementChild.removeEventListener("click",this.Ui)}i=i.nextElementSibling}if(this.X.innerHTML="",this.Li.forEach((i=>{const t=this.N.get(i);if(!t)return;const s=document.createElement("div"),e=document.createElement("div");e.textContent=t.Si;const o=document.createElement("div");o.innerHTML=h.Di,o.ki=i,o.addEventListener("click",this.Ui),s.appendChild(e),s.appendChild(o),s.classList.add("result-option"),e.classList.add("ro-text"),o.classList.add("ro-close"),this.X.appendChild(s)})),!0===this.P&&this.X.insertBefore(this.Y,null),this.X.classList.remove("placeholder"),0===this.Li.length){if(!0===this.P)return;!0===this._.hasAttribute("placeholder")?(this.X.textContent=this._.getAttribute("placeholder"),this.X.classList.add("placeholder")):this.X.innerHTML=" "}}}export class UiSelect extends HTMLElement{static get formAssociated(){return!0}static get Mi(){return'\n <svg viewBox="0 0 16 16"> \n <path\n style="fill: var(--ui-scib); stroke: none;" \n d="M 8 0 A 8 8 0 0 0 0 8 A 8 8 0 0 0 8 16 A 8 8 0 0 0 16 8 A 8 8 0 0 0 8 0 z M 5 4 A 1 1 0 0 1 5.7070312 4.2929688 L 8 6.5859375 L 10.292969 4.2929688 A 1 1 0 0 1 11 4 A 1 1 0 0 1 11.707031 4.2929688 A 1 1 0 0 1 11.707031 5.7070312 L 9.4140625 8 L 11.707031 10.292969 A 1 1 0 0 1 11.707031 11.707031 A 1 1 0 0 1 10.292969 11.707031 L 8 9.4140625 L 5.7070312 11.707031 A 1 1 0 0 1 4.2929688 11.707031 A 1 1 0 0 1 4.2929688 10.292969 L 6.5859375 8 L 4.2929688 5.7070312 A 1 1 0 0 1 4.2929688 4.2929688 A 1 1 0 0 1 5 4 z">\n </path>\n </svg>\n '}static get Oi(){return'\n <div class="ring1">\n <svg viewBox="0 0 16 16">\n <circle cx="8" cy="8" r="6" />\n </svg> \n </div>\n <div class="ring2">\n <svg viewBox="0 0 16 16">\n <path d="m 3.7573592,3.7573594 a 6,6 0 0 1 8.4852818,0"></path>\n </svg> \n </div>\n '}constructor(){super(),this.ji=new s(this),this.Bi=new e(this),this.Ii=new h(this),this.attachShadow({mode:"open",delegatesFocus:!0,slotAssignment:"manual"}),this.shadowRoot.innerHTML=UiSelect.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiSelect.uiCssStyleSheet],this.Fi=this.attachInternals(),this.K=this.shadowRoot.getElementById("base"),this.hi=this.hi.bind(this),this.ii="",this.Ri=!1,this.Vi=this.Vi.bind(this)}get value(){return this.ii}set value(i){null==i&&(i=""),this.ii=i,this.ji.ri(i),this.Bi.ri(i),this.Ii.ri(i)}get search(){let i=this.ji.ui();return i||(i=this.Ii.ui(),i||"")}set search(i){null==i&&(i=""),this.ji.ci(i),this.Bi.ci(i),this.Ii.ci(i)}showPicker(){!0!==this.hasAttribute("disabled")&&(this.ji.pi(),this.Bi.pi(),this.Ii.pi())}hidePicker(){this.ji.bi(),this.Bi.bi(),this.Ii.bi()}connectedCallback(){this.Ni=new MutationObserver(this.hi),this.Ni.observe(this,{childList:!0}),!0===this.hasAttribute("clear")&&(this.Ri=!0),!0===this.Ri&&(this.Hi||(this.Hi=this.shadowRoot.getElementById("clear"),this.Hi.innerHTML=UiSelect.Mi),this.Hi.addEventListener("click",this.Vi)),this.ji.J(),this.Bi.J(),this.Ii.J(),this.qi(),!0===this.hasAttribute("value")&&(this.ii=this.getAttribute("value"),this.ji.ri(this.ii),this.Bi.ri(this.ii),this.Ii.ri(this.ii))}disconnectedCallback(){this.Ni.disconnect(),this.Ni=void 0,this.ji.si(),this.Bi.si(),this.Ii.si(),!0===this.Ri&&this.Hi.removeEventListener("click",this.Vi)}attributeChangedCallback(i,t,s){"value"===i&&(this.xi(s),this.ji.ri(s),this.Bi.ri(s),this.Ii.ri(s)),"loading"===i&&(null!==s&&(this.Gi||(this.Gi=this.shadowRoot.getElementById("loading"),this.Gi.innerHTML=UiSelect.Oi),this.ji.di(!0),this.Bi.di(!0),this.Ii.di(!0)),null===s&&(this.ji.di(!1),this.Bi.di(!1),this.Ii.di(!1)))}static get observedAttributes(){return["value","loading"]}hi(i,t){this.ji.hi(),this.Bi.hi(),this.Ii.hi()}Vi(i){this.xi(""),this.Hi.removeAttribute("show"),this.ji.gi(),this.Bi.gi(),this.Ii.gi(),i.stopPropagation()}li(i){!1!==this.Ri&&(!0===i?this.Hi.setAttribute("show",""):this.Hi.removeAttribute("show"))}xi(i){if(this.ii===i)return;this.ii=i,this.Fi.setFormValue(i);const t=new CustomEvent("change");this.dispatchEvent(t)}qi(){const i=this.shadowRoot.querySelector('slot[name="start"]'),t=this.shadowRoot.querySelector('slot[name="end"]'),s=this.querySelector('[slot="start"]'),e=this.querySelector('[slot="end"]');s&&i.assign(s),e&&t.assign(e)}formDisabledCallback(i){this.K.tabIndex=!0===i?-1:0,!0===i?this.K.setAttribute("disabled",""):this.K.removeAttribute("disabled"),this.ji.ai(i),this.Bi.ai(i),this.Ii.ai(i)}formStateRestoreCallback(i){this.Fi.setFormValue(i),this.ii=i,this.ji.ri(i),this.Bi.ri(i),this.Ii.ri(i)}formResetCallback(){this.ii="",this.Fi.setFormValue(void 0),this.ji.ri(""),this.Bi.ri(""),this.Ii.ri("")}}UiSelect.uiCss=' :host{display:grid;position:relative;box-shadow:var(--ui-input-box-shadow, var(--ui-border-box-shadow, none));}.base{display:flex;align-items:center;gap:var(--ui-input-gap, 8px);width:100%;overflow:hidden;border-radius:var(--ui-input-border-radius, var(--ui-border-radius-normal, 4px));border-style:var(--ui-input-border-style, var(--ui-border-style, solid));border-width:var(--ui-input-border-width, 2px);border-color:var(--ui-input-border-color, var(--ui-midground, hsl(0 0% 90% / 1)));box-shadow:none;--ui-icon-primary-color:var(--ui-input-foreground, fieldText);background-color:var(--ui-input-background, field);color:var(--ui-input-foreground, fieldText);padding:var(--ui-input-padding, 8px 8px);box-sizing:border-box;transition:border-color var(--ui-animation-duration-default, 200ms) ease-in-out, box-shadow var(--ui-animation-duration-default, 200ms) ease-in-out;}#result{flex-grow:1;max-width:100%;font-family:inherit;font-size:var(--ui-input-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-input-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;}#chevron{flex-grow:0;padding:var(--ui-input-icon-padding, 0);height:var(--ui-input-icon-size, 16px);width:var(--ui-input-icon-size, 16px);min-height:var(--ui-input-icon-size, 16px);min-width:var(--ui-input-icon-size, 16px);}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*){flex-grow:0;}:host([default-select]) #chevron, :host([default-select]) #result{display:none;}#loading{display:none;}:host([loading]) #loading{flex-grow:0;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;padding:var(--ui-input-icon-padding, 0);min-height:var(--ui-input-icon-size, 16px);min-width:var(--ui-input-icon-size, 16px);}#clear{display:none;}:host([clear]) #clear[show]{flex-grow:0;display:flex;padding:var(--ui-input-icon-padding, 0);height:var(--ui-input-icon-size, 16px);width:var(--ui-input-icon-size, 16px);min-height:var(--ui-input-icon-size, 16px);min-width:var(--ui-input-icon-size, 16px);--ui-scib:var(--ui-input-foreground, fieldtext);--ui-scif:var(--ui-input-background, field);}:host([valid]) .base:not([disabled]){border-color:var(--ui-input-border-valid-color, hsl(120 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-valid-color, hsl(120 80% 50% / 1));}:host([invalid]) .base:not([disabled]){border-color:var(--ui-input-border-invalid-color, hsl(0 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-invalid-color, hsl(0 80% 50% / 1));}.base:not([disabled]):focus, .base:not([disabled]):focus-visible, .base:not([disabled]):focus-within, :host([open]) .base:not([disabled]){outline-style:var(--ui-input-outline-style, none);outline-width:var(--ui-input-outline-width, 0);outline-offset:var(--ui-input-outline-offset, 0);outline-color:var(--ui-input-outline-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-shadow-color, var(--ui-selected-background, hsl(215 50% 90% / 1)));}:host([valid]) .base:not([disabled]):focus, :host([valid]) .base:not([disabled]):focus-visible, :host([valid]) .base:not([disabled]):focus-within, :host([valid][open]) .base{outline-color:var(--ui-input-outline-valid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-valid-color, hsl(120 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-valid-shadow-color, hsl(120 50% 80% / 1));}:host([invalid]) .base:not([disabled]):focus, :host([invalid]) .base:not([disabled]):focus-visible, :host([invalid]) .base:not([disabled]):focus-within, :host([invalid][open]) .base{outline-color:var(--ui-input-outline-invalid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-invalid-color, hsl(0 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-invalid-shadow-color, hsl(0 50% 80% / 1));}#result.placeholder, input[type="text"]::placeholder, select:has(option[hidden]:checked){color:var( --ui-input-placeholder, color-mix( in hsl, var(--ui-input-background, field) 70%, var(--ui-input-foreground, fieldText) 30% ) );}select{display:block;width:100%;min-height:16px;height:100%;padding:0;font-family:inherit;font-size:var(--ui-input-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-input-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;background-color:transparent;color:inherit;border:none;outline:none;appearance:none;cursor:pointer;}select:focus > option{background-color:var(--ui-module-background, hsl(0 0% 97% / 1));color:var(--ui-module-foreground, hsl(0 0% 18% / 1));}select:focus > option:hover{background-color:var( --ui-select-highlight-background, color-mix( in hsl, var(--ui-foreground, hsl(0 0% 18% / 1)) 20%, var(--ui-background, hsl(0 0% 97% / 1)) 80% ) );color:var(--ui-select-highlight-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));}select:focus > option:checked{background-color:var(--ui-select-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));color:var(--ui-select-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}#dialog{position:absolute;inset-block-start:calc(100% + var(--ui-select-gap, 8px));inset-inline-start:var(--ui-select-shift, 2px);inset-inline-end:var(--ui-select-shift, 2px);justify-self:stretch;align-self:start;background-color:var(--ui-module-background, hsl(0 0% 97% / 1));color:var(--ui-module-foreground, hsl(0 0% 18% / 1));border-radius:var(--ui-border-radius-normal, 4px);border-style:var(--ui-module-border-style, none);border-width:var(--ui-module-border-width, 0);border-color:var(--ui-module-border-color, transparent);box-shadow:var(--ui-module-shadow, 0 1px 4px 0 rgb(from var(--ui-module-foreground, hsl(0 0% 18% / 1)) r g b / 50%));padding-top:var(--ui-border-radius-normal, 4px);padding-bottom:var(--ui-border-radius-normal, 4px);padding-inline:0;margin:0;outline:none;z-index:1;height:auto;width:auto;max-height:50vh;display:none;justify-items:stretch;box-sizing:border-box;user-select:none;-webkit-user-select:none;overflow-y:auto;}#dialog[open]{display:grid;}.base[disabled], select:disabled{background-color:var( --ui-input-disabled-background, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 75%, var(--ui-background, hsl(0 0% 97% / 1)) 25% ) );color:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );--ui-icon-primary-color:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );}.base[disabled] .ro-close{pointer-events:none;}.base[disabled] #clear[show]{pointer-events:none;--ui-scif:var( --ui-input-disabled-background, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 75%, var(--ui-background, hsl(0 0% 97% / 1)) 25% ) );--ui-scib:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );}slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){padding:var(--ui-input-icon-padding, 0);min-height:var(--ui-input-icon-size, 16px);min-width:var(--ui-input-icon-size, 16px);}#dialog > div{padding:var(--ui-select-padding, 4px 8px);font-size:var(--ui-select-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-select-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-inline-start-style:solid;border-inline-start-width:var(--ui-select-bar-width, 4px);border-inline-start-color:var(--ui-select-bar-color, transparent);}:host([checkbox]){& #dialog[open]{display:grid;}& #dialog{grid-template-columns:auto 1fr;column-gap:var(--ui-select-checkbox-gap, 8px);}& #dialog > div{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;}& #dialog > div > *{grid-row:1;grid-column:2;}& #dialog > div > input{pointer-events:none;grid-column:1;}& #result{display:flex;flex:1 1 0%;flex-wrap:wrap;overflow:hidden;gap:var(--ui-select-tag-gap, 4px);}& #result > .result-option{display:flex;min-width:0;border-radius:4px;background-color:var(--ui-select-tag-background, var(--ui-default-background, hsl(0 0% 90% / 1)));color:var(--ui-select-tag-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-sic:var(--ui-select-tag-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));overflow:hidden;user-select:none;-webkit-user-select:none;}& #result > .result-option .ro-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--ui-select-tag-font-size, var(--ui-font-size-small, 12px));padding:var(--ui-select-tag-padding, 2px 4px);line-height:150%;}& #result > .result-option .ro-close{align-self:stretch;display:grid;align-items:center;justify-items:center;}& #result > .result-option .ro-close div{height:var(--ui-select-tag-delete-size, 16px);width:var(--ui-select-tag-delete-size, 16px);display:grid;align-items:center;justify-items:center;}& #result > .result-option .ro-close div > svg{height:50%;}& #result > .result-option .ro-close:hover{background-color:var(--ui-select-tag-delete-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-sic:var(--ui-select-tag-delete-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}& slot:not([start]):not([end])::slotted(*){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}& input[type="checkbox"]{grid-column:1;margin:0;padding:0;min-height:var(--ui-select-checkbox-size, 16px);min-width:var(--ui-select-checkbox-size, 16px);accent-color:var(--ui-select-checkbox-accent-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}} :host([search]){& #dialog .search-not-found{display:none;}& input[type="text"]{width:100%;border:none;font-family:inherit;font-size:var(--ui-input-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-input-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;background-color:inherit;color:inherit;outline-style:none;}} #dialog > div.message, :host([checkbox]) #dialog > div.message{grid-column:1 / -1;grid-template-columns:1fr;text-align:center;line-height:400%;border:none;}#dialog.showing-message > div:not(.message){display:none;}#dialog > div[highlighted]{background-color:var( --ui-select-highlight-background, color-mix( in hsl, var(--ui-foreground, hsl(0 0% 18% / 1)) 20%, var(--ui-background, hsl(0 0% 97% / 1)) 80% ) );color:var(--ui-select-highlight-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));border-inline-start-color:var(--ui-select-selected-bar-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));outline:none;}#dialog > div[selected]{background-color:var(--ui-select-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));color:var(--ui-select-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));border-inline-start-color:var(--ui-select-selected-bar-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));outline:none;}.ring1, .ring2{grid-column:1;grid-row:1;height:var(--ui-input-icon-size, 16px);align-self:center;justify-self:center;}.ring1 > svg, .ring2 > svg{display:block;height:100%;min-width:8px;min-height:8px;stroke-width:2;stroke:var(--ui-input-foreground, fieldtext);stroke-linecap:round;fill:none;}.ring1 > svg{opacity:0.5;}:host([loading]) .ring2{animation-name:spin;animation-duration:750ms;animation-iteration-count:infinite;animation-timing-function:linear;}@keyframes spin{0%{transform:rotate(0deg);}50%{transform:rotate(270deg);}100%{transform:rotate(360deg);}} @media (hover:hover){.base{cursor:pointer;}.base[disabled], .base[disabled] input[type="text"], select:disabled{cursor:not-allowed;}:host([clear]) #clear:hover{cursor:pointer;filter:brightness(85%);}} :host([clear]) #clear:active{filter:brightness(65%);}@media (forced-colors:active) or (prefers-contrast:more){.base{border-style:solid;border-color:fieldtext;box-shadow:none;transition:none;}:host(:not([disabled])) .base:focus, :host(:not([disabled])) .base:focus-visible, :host(:not([disabled])) .base:focus-within, :host([open]) .base{box-shadow:none;outline:3px solid fieldtext;outline-offset:2px;}#dialog{border-style:var(--ui-module-border-style, solid);border-width:var(--ui-module-border-width, 3px);border-color:var(--ui-module-border-color, var(--ui-foreground, fieldtext));box-shadow:var(--ui-module-shadow, none);}#dialog > div{border:none;}#result > .result-option{border:1px solid fieldtext;}} @media (prefers-reduced-motion){.base{transition:none;}} ',UiSelect.uiHtml='<div id="base" class="base" tabindex="0"><slot name="start"></slot><div id="result"></div><div id="loading"></div><div id="clear"></div><div id="chevron"><svg viewBox="0 0 16 16" style=" display: block; height: inherit; min-width: 8px; min-height: 8px; fill: none; stroke: var(--ui-icon-primary-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;"><path d="m 4,6 4,4 4,-4"></path></svg></div><slot name="end"></slot></div><dialog id="dialog"></dialog>',i.createUi(UiSelect,"ui-select",import.meta.url);