@coderundebug/ui-web
Version:
A collection of UI web components that can be used in any web project.
2 lines • 39.2 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._uiSelectSearchFound)return t;t=t.nextElementSibling}}static o(i){let t=i.previousElementSibling;for(;;){if(!t)return null;if(!0===t._uiSelectSearchFound)return t;t=t.previousElementSibling}}static l(i){let t=i.firstElementChild;const s=i.firstElementChild.offsetTop,e=i.scrollTop+s;for(;;){if(!t)return null;if(!0===t._uiSelectSearchFound&&t.offsetTop>=e)return t;t=t.nextElementSibling}}static u(i){let t=i.firstElementChild;const s=i.firstElementChild.offsetTop,e=i.scrollTop+s+i.clientHeight;let h=null;for(;;){if(!0===t._uiSelectSearchFound&&(h=t),!t.nextElementSibling)return h;if(t.nextElementSibling&&!0===t.nextElementSibling._uiSelectSearchFound&&t.nextElementSibling.offsetTop+t.nextElementSibling.clientHeight>=e)return t;t=t.nextElementSibling}}static p(i,s,e){let h=Math.floor(i.clientHeight/s.clientHeight),o=s;if(-1===e)for(;o&&!(!0===o._uiSelectSearchFound&&(h--,h<=0));)o=o.previousElementSibling;if(1===e)for(;o&&!(!0===o._uiSelectSearchFound&&(h--,h<=0));)o=o.nextElementSibling;return o||(-1===e?t.t(i.firstElementChild):1===e?t.o(i.lastElementChild):o)}static v(i){let t=0;return i.forEach((i=>{!1!==i._uiSelectSearchFound&&t++})),t}static m(i){const t=new Event("input",{bubbles:!0,composed:!0});i.dispatchEvent(t)}}class s{constructor(i){this.k=i,this._=!1,this.S=!1,this.P=this.P.bind(this),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=!1,this.I=!0,this.F=null,this.R=[],this.V=new Map,this.N=0,this.H=!1,this.q=!1}G(){!1===this.k.hasAttribute("default-select")&&!1===this.k.hasAttribute("checkbox")&&(this._=!0),!1!==this._&&(!0===this.k.hasAttribute("search")&&(this.S=!0),this.J=this.k.shadowRoot.getElementById("base"),this.K=this.k.shadowRoot.getElementById("dialog"),this.W=this.k.shadowRoot.getElementById("result"),this.J.addEventListener("click",this.P),this.k.addEventListener("keydown",this.C),!0===this.S&&(this.X||(this.X=document.createElement("input"),this.X.setAttribute("id","search-input"),this.X.setAttribute("type","text"),this.X.setAttribute("autocapitalize","off"),this.X.setAttribute("autocomplete","off"),this.X.setAttribute("autocorrect","off"),this.X.setAttribute("autocorrect","off"),this.X.setAttribute("spellcheck","false"),this.X.setAttribute("enterkeyhint","search"),this.W.appendChild(this.X),this.J.setAttribute("tabindex","-1"),this.X.setAttribute("tabindex","0")),!0===this.k.hasAttribute("placeholder")?this.X.setAttribute("placeholder",this.k.getAttribute("placeholder")):this.X.removeAttribute("placeholder"),this.X.addEventListener("click",this.A),this.X.addEventListener("input",this.D)),this.Y(),this.Z(this.k.$),!0===this.k.hasAttribute("loading")&&this.ii(!1,!0))}ti(){!1!==this._&&(this.J.removeEventListener("click",this.P),this.k.removeEventListener("keydown",this.C),this.si(),!0===this.S&&(this.X.removeEventListener("click",this.A),this.X.removeEventListener("input",this.D)))}ei(i,t){!1!==this._&&(this.Y(),0!==this.R.length&&this.hi(this.R[0]),!0===this.k.hasAttribute("loading")&&this.ii(!1,!0),this.oi())}ni(i){if(!1===this._)return;this.Z(i);let t=!1;i&&(t=!0),!i&&!0===this.S&&this.X.value&&(t=!0),this.k.ri(t)}li(i){!1!==this._&&!0===this.S&&(this.X.disabled=i)}ai(i){!1!==this._&&(this.ii(!1,i),this.oi())}di(i){!1!==this._&&!1!==this.S&&(this.X.value=i,this.D())}ci(){if(!1!==this._&&!1!==this.S)return this.X.value}ui(){!1!==this._&&(!0===this.S&&(this.R.forEach((i=>{i._uiSelectSearchFound=!0,i.classList.remove("search-not-found")})),this.ii(!1,!1)),this.F&&this.F.removeAttribute("highlighted"),this.F=null,this.Z(""),!0===this.S&&(this.X.value="",this.X.focus(),t.m(this.k)))}gi(){!1!==this._&&!0!==this.B&&(this.I=!0,this.pi())}fi(){!1!==this._&&!1!==this.B&&this.bi()}P(i){!1!==this._&&(!0!==this.B?!0!==this.k.J.hasAttribute("disabled")&&(this.I=!0,this.pi(),!0===this.mi&&(this.X.focus(),this.mi=!1)):this.bi())}C(i){if("Space"===i.code||"Enter"===i.key){if(!1===this.B)return this.pi(),i.preventDefault(),void i.stopPropagation();!0===this.B&&(this.F&&!1===this.H&&(this.k.wi(this.F._uiSelectValue),this.k.ri(!0),this.Z(this.F._uiSelectValue)),this.bi(),!0===this.S?this.X.focus():this.J.focus(),i.preventDefault(),i.stopPropagation())}if("Escape"===i.key){if(!1===this.B)return;this.bi(),!0===this.S?this.X.focus():this.J.focus(),i.preventDefault(),i.stopPropagation()}if(!0===this.H)return;if(!1===this.B)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.F||(!0===s&&(h=t.i(this.K)),!0===e&&(h=t.h(this.K))),this.F&&(!0===e&&(h=t.o(this.F)),!0===s&&(h=t.t(this.F))),h&&this.hi(h),h||"Tab"===i.key&&this.bi()}if("PageUp"===i.key||"PageDown"===i.key){i.preventDefault(),i.stopPropagation();let s=null;if(this.F||("PageDown"===i.key&&(s=t.u(this.K)),"PageUp"===i.key&&(s=t.l(this.K))),this.F){if("PageDown"===i.key){s=t.u(this.K)===this.F?t.p(this.K,this.F,1):t.u(this.K)}if("PageUp"===i.key){s=t.l(this.K)===this.F?t.p(this.K,this.F,-1):t.l(this.K)}}s&&this.hi(s)}}U(i){const t=i.target;if(0!==t.assignedElements().length)return;const s=t.parentElement,e=this.R.indexOf(s);this.R.splice(e,1),this.K.removeChild(s),t.removeEventListener("slotchange",this.U)}A(i){!0!==this.k.J.hasAttribute("disabled")&&(this.mi=!0)}D(){if(!0===this.q)return;if(!1===this.B&&(this.pi(),this.X.focus()),!this.X.value)return this.R.forEach((i=>{i._uiSelectSearchFound=!0,i.classList.remove("search-not-found")})),this.ii(!1,!1),void this.k.ri(!1);this.k.ri(!0);const i=this.X.value.toLowerCase();if(this.R.forEach((t=>{-1!==t._uiSelectTextLowerCase.indexOf(i)?(t._uiSelectSearchFound=!0,t.classList.remove("search-not-found")):(t._uiSelectSearchFound=!1,t.classList.add("search-not-found"))})),this.N=t.v(this.R),0===this.N)return this.ii(!0,!1),void(this.F&&(this.F.removeAttribute("highlighted"),this.F=null));if(this.ii(!1,!1),this.F){if(!1===this.F._uiSelectSearchFound){let i=t.t(this.F);i||(i=t.o(this.F)),i||(this.F.removeAttribute("highlighted"),this.F=null),i&&this.hi(i)}1===this.N&&this.X.focus()}}L(i){const t=i.currentTarget;null!==t&&(this.k.wi(t._uiSelectValue),this.k.ri(!0),this.Z(t._uiSelectValue),this.bi(),i.stopPropagation())}T(i){const t=i.currentTarget;null!==t&&this.hi(t)}M(i){if(!1===this.B)return;const t=i.currentTarget;null!==t&&this.hi(t)}hi(i){if(i===this.F)return;const t=this.K.querySelector("[highlighted]");t&&t.removeAttribute("highlighted"),i.setAttribute("highlighted",""),this.F=i,i.focus(),!0===this.S&&this.X.focus()}O(i){i.stopPropagation()}j(){!0!==this.I?this.bi():this.I=!1}pi(){this.k.setAttribute("open",""),this.oi(),this.K.show();let i=!1;!0===this.S&&this.X.value&&(i=!0);const t=this.V.get(this.k.$);t&&this.hi(t),this.K.addEventListener("click",this.O),document.addEventListener("click",this.j),this.B=!0}bi(){this.K.removeEventListener("click",this.O),document.removeEventListener("click",this.j),this.k.removeAttribute("open"),this.K.close(),this.B=!1}si(){this.R.forEach((i=>{i.firstElementChild.removeEventListener("slotchange",this.U),i.removeEventListener("click",this.L),i.removeEventListener("focus",this.T),i.removeEventListener("pointermove",this.M)})),this.R=[]}oi(){0===this.N?!1===this.q&&this.ii(!0,!1):!1===this.q&&this.ii(!1,!1)}ii(i,t){this.q=t,this.xi||(this.xi=document.createElement("div"),this.xi.classList.add("message"),this.ki=this.k.getAttribute("missing-message"),this.ki||(this.ki="nothing found"),this._i=this.k.getAttribute("loading-message"),this._i||(this._i="loading")),!1===i&&!1===t&&(!0===this.H&&(this.K.removeChild(this.xi),this.H=!1),this.K.classList.remove("showing-message")),!0!==i&&!0!==t||(!1===this.H&&(this.K.appendChild(this.xi),this.H=!0),!0===i&&(this.xi.textContent=this.ki),!0===t&&(this.xi.textContent=this._i),this.K.classList.add("showing-message"))}Y(){this.si(),this.V.clear(),this.K.innerHTML="",this.H=!1;for(const i of this.k.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._uiSelectValue=t,s._uiSelectText=i.textContent,s._uiSelectTextLowerCase=s._uiSelectText.toLowerCase(),s._uiSelectSearchFound=!0,this.V.set(t,s),s.setAttribute("tabindex","0");const e=document.createElement("slot");s.appendChild(e),this.K.appendChild(s),e.assign(i),e.addEventListener("slotchange",this.U),s.addEventListener("click",this.L),s.addEventListener("focus",this.T),s.addEventListener("pointermove",this.M),this.R.push(s)}this.N=this.R.length}Z(i){const t=this.K.querySelector("[selected]");if(t&&(t.removeAttribute("selected"),t.setAttribute("aria-selected","false")),!i){if(!0===this.S)return;return void(!0===this.k.hasAttribute("placeholder")?(this.W.textContent=this.k.getAttribute("placeholder"),this.W.classList.add("placeholder")):this.W.innerHTML=" ")}this.W.classList.remove("placeholder");const s=this.V.get(i);if(s||!0===this.S||(this.W.innerHTML=" "),s){const i=s._uiSelectText;i||(this.W.innerHTML=" "),i&&(!0===this.S?this.X.value=i:this.W.textContent=i),s.setAttribute("selected",""),s.setAttribute("aria-selected","true")}}}class e{constructor(i){this.k=i,this._=!1,this.yi=null,this.Ei=this.Ei.bind(this)}G(){if(!0===this.k.hasAttribute("default-select")&&!1===this.k.hasAttribute("checkbox")&&(this._=!0),!1!==this._){if(this.J=this.k.shadowRoot.getElementById("base"),!this.yi){this.yi=document.createElement("select"),this.yi.setAttribute("id","default-select");const i=this.k.shadowRoot.querySelector("#result");this.J.insertBefore(this.yi,i),this.zi()}this.yi.addEventListener("change",this.Ei),this.J.setAttribute("tabindex","-1"),this.yi.setAttribute("tabindex","0"),!0===this.k.hasAttribute("disabled")&&this.yi.setAttribute("disabled",""),this.yi.value&&"uiSelectPlaceholder"!==this.yi.value&&this.k.ri(!0)}}ti(){!1!==this._&&this.yi.removeEventListener("change",this.Ei)}ei(i,t){!1!==this._&&this.zi()}ni(i){if(!1!==this._&&(i?this.k.ri(!0):this.k.ri(!1),this.yi)){if(!i&&!0===this.k.hasAttribute("placeholder"))return void(this.yi.value="uiSelectPlaceholder");this.yi.value=i}}li(i){!1!==this._&&this.yi&&(!0===i?this.yi.setAttribute("disabled",""):this.yi.removeAttribute("disabled"))}ai(i){}di(i){}ci(){}ui(){!1!==this._&&(!0!==this.k.hasAttribute("placeholder")?this.yi.value="":this.yi.value="uiSelectPlaceholder")}gi(){!1!==this._&&this.yi&&"function"==typeof this.yi&&this.yi.showPicker()}fi(){if(!1!==this._&&this.yi){const i=this.k.shadowRoot.querySelector('slot[name="end"]');return this.J.removeChild(this.yi),void this.J.insertBefore(this.yi,i)}}Ei(){this.k.wi(this.yi.value),this.yi.value&&this.k.ri(!0)}zi(){if(this.yi.innerHTML="",!0===this.k.hasAttribute("placeholder")){const i=this.k.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.yi.appendChild(t)}}for(const i of this.k.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.yi.appendChild(s)}}}class h{static get Si(){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.k=i,this._=!1,this.S=!1,this.P=this.P.bind(this),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.Pi=this.Pi.bind(this),this.O=this.O.bind(this),this.j=this.j.bind(this),this.B=!1,this.I=!0,this.F=null,this.R=[],this.V=new Map,this.N=0,this.Ci=[],this.H=!1,this.q=!1}G(){!0===this.k.hasAttribute("checkbox")&&!1===this.k.hasAttribute("default-select")&&(this._=!0),!1!==this._&&(!0===this.k.hasAttribute("search")&&(this.S=!0),this.J=this.k.shadowRoot.getElementById("base"),this.K=this.k.shadowRoot.getElementById("dialog"),this.W=this.k.shadowRoot.getElementById("result"),this.J.addEventListener("click",this.P),this.k.addEventListener("keydown",this.C),!0===this.S&&(this.X||(this.X=document.createElement("input"),this.X.setAttribute("id","search-input"),this.X.setAttribute("type","text"),this.X.setAttribute("autocapitalize","off"),this.X.setAttribute("autocomplete","off"),this.X.setAttribute("autocorrect","off"),this.X.setAttribute("autocorrect","off"),this.X.setAttribute("spellcheck","false"),this.X.setAttribute("enterkeyhint","search"),this.W.insertBefore(this.X,null),this.J.setAttribute("tabindex","-1"),this.X.setAttribute("tabindex","0")),!0===this.k.hasAttribute("placeholder")?this.X.setAttribute("placeholder",this.k.getAttribute("placeholder")):this.X.removeAttribute("placeholder"),this.X.addEventListener("click",this.A),this.X.addEventListener("input",this.D)),this.Y(),this.ni(this.k.$),!0===this.k.hasAttribute("loading")&&this.ii(!1,!0))}ti(){if(!1===this._)return;this.J.removeEventListener("click",this.P),this.k.removeEventListener("keydown",this.C),this.si(),this.R.forEach((i=>{i.firstElementChild.removeEventListener("slotchange",this.U),i.removeEventListener("click",this.L),i.removeEventListener("focus",this.T),i.removeEventListener("pointermove",this.M)}));let i=this.W.firstElementChild;for(;i;){if("INPUT"!==i.tagName){i.lastElementChild.removeEventListener("click",this.Pi)}i=i.nextElementSibling}}ei(i,t){!1!==this._&&(this.Y(),0!==this.R.length&&this.hi(this.R[0]),!0===this.k.hasAttribute("loading")&&this.ii(!1,!0),this.oi(),this.Z(),!0===this.S&&(this.D(),this.X.focus()))}ni(i){if(!1===this._)return;this.Ci=[],i&&(this.Ci=i.split(",")),this.V.forEach((i=>{-1!==this.Ci.indexOf(i._uiSelectValue)?(i.firstElementChild.checked=!0,i.setAttribute("aria-selected","true")):(i.firstElementChild.checked=!1,i.setAttribute("aria-selected","false"))})),this.Z();let t=!1;i&&(t=!0),!i&&!0===this.S&&this.X.value&&(t=!0),this.k.ri(t)}li(i){!1!==this._&&!0===this.S&&(this.X.disabled=i)}ai(i){!1!==this._&&(this.ii(!1,i),this.oi())}di(i){!1!==this._&&!1!==this.S&&(this.X.value=i,this.D())}ci(){if(!1!==this._&&!1!==this.S)return this.X.value}ui(){!1!==this._&&(!0===this.S&&(this.R.forEach((i=>{i._uiSelectSearchFound=!0,i.classList.remove("search-not-found")})),this.ii(!1,!1)),this.F&&this.F.removeAttribute("highlighted"),this.F=null,!0===this.S&&(this.X.value="",this.X.focus(),t.m(this.k)),this.ni(""))}gi(){!1!==this._&&!0!==this.B&&(this.I=!0,this.pi())}fi(){!1!==this._&&!1!==this.B&&this.bi()}P(i){!1!==this._&&(!0!==this.B?!0!==this.k.J.hasAttribute("disabled")&&(this.I=!0,this.pi(),!0===this.mi&&(this.X.focus(),this.mi=!1)):this.bi())}C(i){if("Space"===i.code||"Enter"===i.key){if(!1===this.B)return this.pi(),i.preventDefault(),void i.stopPropagation();!0===this.B&&(this.F&&!1===this.H&&this.Ai(this.F),!0===this.S?(0===this.N&&this.bi(),this.X.focus()):this.J.focus(),i.preventDefault(),i.stopPropagation())}if("Escape"===i.key){if(!1===this.B)return;this.bi(),!0===this.S?this.X.focus():this.J.focus(),i.preventDefault(),i.stopPropagation()}if(!0===this.H&&"Tab"===i.key)return void this.bi();if(!0===this.H)return;if(!1===this.B)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.F||(!0===s&&(h=t.i(this.K)),!0===e&&(h=t.h(this.K))),this.F&&(!0===e&&(h=t.o(this.F)),!0===s&&(h=t.t(this.F))),h&&this.hi(h),h||"Tab"===i.key&&this.bi()}if("PageUp"===i.key||"PageDown"===i.key){i.preventDefault(),i.stopPropagation();let s=null;if(this.F||("PageDown"===i.key&&(s=t.u(this.K)),"PageUp"===i.key&&(s=t.l(this.K))),this.F){if("PageDown"===i.key){s=t.u(this.K)===this.F?t.p(this.K,this.F,1):t.u(this.K)}if("PageUp"===i.key){s=t.l(this.K)===this.F?t.p(this.K,this.F,-1):t.l(this.K)}}s&&this.hi(s)}}U(i){const t=i.target;if(0!==t.assignedElements().length)return;const s=t.parentElement,e=this.R.indexOf(s);this.R.splice(e,1),this.K.removeChild(s),t.removeEventListener("slotchange",this.U)}A(i){!0!==this.k.J.hasAttribute("disabled")&&(this.mi=!0)}D(){if(!0===this.q)return;if(!1===this.B&&(this.pi(),this.X.focus()),!this.X.value)return this.R.forEach((i=>{i._uiSelectSearchFound=!0,i.classList.remove("search-not-found")})),this.N=this.R.length,this.ii(!1,!1),this.k.ri(!1),this.oi(),0!==this.R.length&&this.hi(this.R[0]),void this.X.focus();this.k.ri(!0);const i=this.X.value.toLowerCase();if(this.R.forEach((t=>{-1!==t._uiSelectTextLowerCase.indexOf(i)?(t._uiSelectSearchFound=!0,t.classList.remove("search-not-found")):(t._uiSelectSearchFound=!1,t.classList.add("search-not-found"))})),this.N=t.v(this.R),0===this.N)return this.ii(!0,!1),void(this.F&&(this.F.removeAttribute("highlighted"),this.F=null));if(this.ii(!1,!1),this.F&&!1===this.F._uiSelectSearchFound){let i=t.t(this.F);i||(i=t.o(this.F)),i||(this.F.removeAttribute("highlighted"),this.F=null),i&&this.hi(i)}this.X.focus()}L(i){const t=i.currentTarget;null!==t&&(this.Ai(t),this.k.ri(!0),i.stopPropagation())}T(i){const t=i.currentTarget;null!==t&&this.hi(t)}M(i){if(!1===this.B)return;const t=i.currentTarget;null!==t&&this.hi(t)}hi(i){if(i===this.F)return;const t=this.K.querySelector("[highlighted]");t&&t.removeAttribute("highlighted"),i.setAttribute("highlighted",""),this.F=i,i.focus()}Pi(i){const t=i.currentTarget._uiSelectValue,s=this.V.get(t);s&&(s.firstElementChild.checked=!1,s.setAttribute("aria-selected","false"));const e=this.Ci.indexOf(t);-1!==e&&this.Ci.splice(e,1);const h=this.Ci.join(",");this.k.wi(h),this.Z(),this.S&&this.X.focus(),i.stopPropagation()}O(i){i.stopPropagation()}j(){!0!==this.I?this.bi():this.I=!1}pi(){this.k.setAttribute("open",""),this.oi(),this.K.show();const i=this.V.get(this.k.$);i&&this.hi(i),this.K.addEventListener("click",this.O),document.addEventListener("click",this.j),this.B=!0}bi(){this.K.removeEventListener("click",this.O),document.removeEventListener("click",this.j),this.k.removeAttribute("open"),this.K.close(),this.B=!1}si(){this.R.forEach((i=>{i.lastElementChild.removeEventListener("slotchange",this.U),i.removeEventListener("click",this.L),i.removeEventListener("focus",this.T),i.removeEventListener("pointermove",this.M)})),this.R=[]}oi(){0===this.N?!1===this.q&&this.ii(!0,!1):!1===this.q&&this.ii(!1,!1)}ii(i,t){this.q=t,this.xi||(this.xi=document.createElement("div"),this.xi.classList.add("message"),this.ki=this.k.getAttribute("missing-message"),this.ki||(this.ki="nothing found"),this._i=this.k.getAttribute("loading-message"),this._i||(this._i="loading")),!1===i&&!1===t&&(!0===this.H&&(this.K.removeChild(this.xi),this.H=!1),this.K.classList.remove("showing-message")),!0!==i&&!0!==t||(!1===this.H&&(this.K.appendChild(this.xi),this.H=!0),!0===i&&(this.xi.textContent=this.ki),!0===t&&(this.xi.textContent=this._i),this.K.classList.add("showing-message"))}Y(){this.si(),this.V.clear(),this.K.innerHTML="",this.H=!1,this.Ci=[];const i=this.k.$.split(",");for(const t of this.k.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._uiSelectValue=s,e._uiSelectText=t.textContent,e._uiSelectTextLowerCase=e._uiSelectText.toLowerCase(),e._uiSelectSearchFound=!0,this.V.set(s,e),-1!==i.indexOf(s)&&this.Ci.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.K.appendChild(e),o.assign(t),o.addEventListener("slotchange",this.U),e.addEventListener("click",this.L),e.addEventListener("focus",this.T),e.addEventListener("pointermove",this.M),this.R.push(e)}this.N=this.R.length}Ai(i){const t=this.Ci.indexOf(i._uiSelectValue);-1===t&&(i.firstElementChild.checked=!0,this.Ci.push(i._uiSelectValue),i.setAttribute("aria-selected","true")),-1!==t&&(i.firstElementChild.checked=!1,this.Ci.splice(t,1),i.setAttribute("aria-selected","false"));const s=this.Ci.join(",");this.k.wi(s),this.Z()}Z(){let i=this.W.firstElementChild;for(;i;){if("INPUT"!==i.tagName){i.lastElementChild.removeEventListener("click",this.Pi)}i=i.nextElementSibling}if(this.W.innerHTML="",this.Ci.forEach((i=>{const t=this.V.get(i);if(!t)return;const s=document.createElement("div"),e=document.createElement("div");e.textContent=t._uiSelectText;const o=document.createElement("div");o.innerHTML=h.Si,o._uiSelectValue=i,o.addEventListener("click",this.Pi),s.appendChild(e),s.appendChild(o),s.classList.add("result-option"),e.classList.add("ro-text"),o.classList.add("ro-close"),this.W.appendChild(s)})),!0===this.S&&this.W.insertBefore(this.X,null),this.W.classList.remove("placeholder"),0===this.Ci.length){if(!0===this.S)return;!0===this.k.hasAttribute("placeholder")?(this.W.textContent=this.k.getAttribute("placeholder"),this.W.classList.add("placeholder")):this.W.innerHTML=" "}}}export class UiSelect extends HTMLElement{static get formAssociated(){return!0}static get Di(){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 Ui(){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.Li=new s(this),this.Ti=new e(this),this.Mi=new h(this),this.attachShadow({mode:"open",delegatesFocus:!0,slotAssignment:"manual"}),this.shadowRoot.innerHTML=UiSelect.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiSelect.uiCssStyleSheet],this.Oi=this.attachInternals(),this.J=this.shadowRoot.getElementById("base"),this.ei=this.ei.bind(this),this.$="",this.ji=!1,this.Bi=this.Bi.bind(this)}get value(){return this.$}set value(i){null==i&&(i=""),this.$=i,this.Li.ni(i),this.Ti.ni(i),this.Mi.ni(i)}get search(){let i=this.Li.ci();return i||(i=this.Mi.ci(),i||"")}set search(i){null==i&&(i=""),this.Li.di(i),this.Ti.di(i),this.Mi.di(i)}showPicker(){!0!==this.hasAttribute("disabled")&&(this.Li.gi(),this.Ti.gi(),this.Mi.gi())}hidePicker(){this.Li.fi(),this.Ti.fi(),this.Mi.fi()}connectedCallback(){this.Ii=new MutationObserver(this.ei),this.Ii.observe(this,{childList:!0}),!0===this.hasAttribute("clear")&&(this.ji=!0),!0===this.ji&&(this.Fi||(this.Fi=this.shadowRoot.getElementById("clear"),this.Fi.innerHTML=UiSelect.Di),this.Fi.addEventListener("click",this.Bi)),this.Li.G(),this.Ti.G(),this.Mi.G(),this.Ri(),!0===this.hasAttribute("value")&&(this.$=this.getAttribute("value"),this.Li.ni(this.$),this.Ti.ni(this.$),this.Mi.ni(this.$))}disconnectedCallback(){this.Ii.disconnect(),this.Ii=void 0,this.Li.ti(),this.Ti.ti(),this.Mi.ti(),!0===this.ji&&this.Fi.removeEventListener("click",this.Bi)}attributeChangedCallback(i,t,s){"value"===i&&(this.wi(s),this.Li.ni(s),this.Ti.ni(s),this.Mi.ni(s)),"loading"===i&&(null!==s&&(this.Vi||(this.Vi=this.shadowRoot.getElementById("loading"),this.Vi.innerHTML=UiSelect.Ui),this.Li.ai(!0),this.Ti.ai(!0),this.Mi.ai(!0)),null===s&&(this.Li.ai(!1),this.Ti.ai(!1),this.Mi.ai(!1)))}static get observedAttributes(){return["value","loading"]}ei(i,t){this.Li.ei(),this.Ti.ei(),this.Mi.ei()}Bi(i){this.wi(""),this.Fi.removeAttribute("show"),this.Li.ui(),this.Ti.ui(),this.Mi.ui(),i.stopPropagation()}ri(i){!1!==this.ji&&(!0===i?this.Fi.setAttribute("show",""):this.Fi.removeAttribute("show"))}wi(i){if(this.$===i)return;this.$=i,this.Oi.setFormValue(i);const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}Ri(){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.J.tabIndex=!0===i?-1:0,!0===i?this.J.setAttribute("disabled",""):this.J.removeAttribute("disabled"),this.Li.li(i),this.Ti.li(i),this.Mi.li(i)}formStateRestoreCallback(i){this.Oi.setFormValue(i),this.$=i,this.Li.ni(i),this.Ti.ni(i),this.Mi.ni(i)}formResetCallback(){this.$="",this.Oi.setFormValue(void 0),this.Li.ni(""),this.Ti.ni(""),this.Mi.ni("")}}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);