n-select.min.js

!function(){const e=!!navigator.userAgent.match("Chrome");navigator.userAgent.match(/Safari/);let t=e=>{e.target.closest(".n-select__options > *")||e.target.closest(".n-select")||document.querySelectorAll(".n-select__options[aria-expanded]:not([data-n-select-animation])").forEach((e=>{l(e)}))},n=e=>{let t=document.querySelector(".n-select__options[aria-expanded]");("resize"===e.type||"scroll"===e.type&&e.target!==t)&&l(t)};const r=(e,t)=>{e.style.setProperty("--active-option-height",`${t.querySelector("[aria-selected]").getBoundingClientRect().height}px`)};let o=(e,t=!0)=>{if(!e||"BUTTON"!==e.tagName)return;let n=e.closest(".n-select__options");n.querySelectorAll("[aria-selected]").forEach((e=>e.removeAttribute("aria-selected"))),e.setAttribute("aria-selected",!0),n.nuiSelectWrapper.dataset.value=e.value,n.hasAttribute("aria-expanded")&&(e.focus(),t&&l(n));let o=n.children[0];r(n.nuiSelectWrapper,n),o.style.removeProperty("--top-offset"),o.style.removeProperty("--max-height");let i=n.nuiNativeInput;i.innerHTML=`<option value="${e.value}"></option>`;const a=new Event("change");i.dispatchEvent(a),n.nuiOnChange&&n.nuiOnChange(index,i.value)};const i=["font-family","font-size","font-style","font-weight","line-height","font-variant"];let l=e=>{if(!e)return;delete e.dataset.nSelectAnimation,e.removeAttribute("aria-expanded"),i.forEach((t=>{e.style[t]=""})),e.nuiSelectWrapper.prepend(e),window.removeEventListener("resize",n),window.removeEventListener("scroll",n),e.querySelector("[aria-selected]").tabIndex=-1,window.removeEventListener("pointerup",t),e.removeEventListener("pointerup",u);let r=e.parentNode;r.classList.remove("n-select--open"),r.style.removeProperty("--width"),e.style.removeProperty("--scroll-help-top"),e.classList.remove("n-select--scroll-help-top"),e.nuiSelectWrapper.focus(),e.classList.remove("n-scrollbar")},a=e=>{let o=document.body.querySelector(".n-select__options[aria-expanded]");o&&l(o);let a=e.parentNode;r(a,e),a.style.setProperty("--width",`${a.getBoundingClientRect().width}px`),a.classList.add("n-select--open"),e.style.removeProperty("--top-offset"),e.style.removeProperty("--max-height"),e.style.removeProperty("--select-scroll-height"),e.style.removeProperty("--active-option-offset"),e.classList.remove("n-select--crop-top");let s=e.getBoundingClientRect().height;e.style.setProperty("--max-width",`${e.parentNode.getBoundingClientRect().width}px`);let c=document.querySelector("html").getBoundingClientRect().x;e.style.setProperty("--body-offset-x",a.getBoundingClientRect().x-c-("relative"===document.body.style.position?parseFloat(getComputedStyle(document.body).borderInlineStartWidth)-c+document.body.getBoundingClientRect().x:0)),e.style.setProperty("--body-offset-y",-document.body.getBoundingClientRect().y+a.getBoundingClientRect().y-("relative"===document.body.style.position?parseFloat(getComputedStyle(document.body).borderBlockStartWidth):0)),e.querySelector("[aria-selected]").removeAttribute("tabindex"),e.setAttribute("aria-expanded",!0),i.forEach((t=>{e.style[t]=getComputedStyle(a)[t]})),document.body.appendChild(e),e.style.setProperty("--select-scroll-height",`${e.getBoundingClientRect().height}px`);let d=e.querySelector("[aria-selected]").getBoundingClientRect().y-e.getBoundingClientRect().y,u=0;if(e.style.setProperty("--active-option-offset",d),e.getBoundingClientRect().y<0){let t=e.getBoundingClientRect().height+e.getBoundingClientRect().y;e.style.setProperty("--max-height",`${t}px`),e.scrollTop=Math.abs(Math.round(e.getBoundingClientRect().y)),u=Math.abs(e.getBoundingClientRect().y),e.style.setProperty("--top-offset",u),e.classList.add("n-select--crop-top"),e.getBoundingClientRect().height>window.innerHeight&&e.style.setProperty("--max-height",t-Math.abs(window.innerHeight-e.getBoundingClientRect().height)+"px")}else{e.getBoundingClientRect().y+e.getBoundingClientRect().height>window.innerHeight&&e.style.setProperty("--max-height",`${Math.abs(window.innerHeight-e.getBoundingClientRect().y)}px`);let t=e.getBoundingClientRect().y;if(e.scrollHeight>e.getBoundingClientRect().height){let n=e.getBoundingClientRect().height-e.scrollHeight,r=Math.abs(Math.min(n,t))-2*parseInt(getComputedStyle(e).paddingInlineEnd);r>0&&(e.style.setProperty("--scroll-help-top",r),e.classList.add("n-select--scroll-help-top"))}}e.getBoundingClientRect().width>e.querySelector("button").getBoundingClientRect().width+2*parseInt(getComputedStyle(e).paddingInlineEnd)&&e.classList.add("n-scrollbar"),e.style.setProperty("--mask-position-y",""+(d-u)),e.style.setProperty("--mask-size-y",`${s}px`),window.requestAnimationFrame((t=>{setTimeout((()=>{e.dataset.nSelectAnimation=!0,e.querySelector("[aria-selected]").focus()}),1)})),window.addEventListener("resize",n),window.addEventListener("scroll",n,!0),window.addEventListener("pointerup",t)},s=(e,t)=>{let n=e.nextElementSibling;for(;n;){if(n.matches(t))return n;n=n.nextElementSibling}return!1},c=e=>{let t=e.target.closest(".n-select__options"),n=e.target;t.hasAttribute("aria-expanded")&&(n.href?l(t):o(n))},d=e=>{let t=e.target.closest(".n-select__options")||e.target.querySelector(".n-select__options");t&&!t.hasAttribute("aria-expanded")&&(a(t),t.removeEventListener("click",c),setTimeout((()=>{t.addEventListener("click",c)}),100))},u=e=>{let t=e.target.closest("button"),n=e.target.closest(".n-select__options");if(e.target.href)e.target.click();else{if(!t||!n.hasAttribute("aria-expanded")||t.hasAttribute("aria-selected"))return;o(t)}document.body.style.pointerEvents="none",setTimeout((()=>{document.body.style.pointerEvents=""}),100)},p=null,y=e=>{[32,35,36,37,38,39,40].includes(e.keyCode)&&(e.stopPropagation(),e.preventDefault())},g=e=>{if("SELECT"===e.target.tagName)return;y(e);let t=e.target.closest(".n-select__options");if(e.target.classList.contains("n-select")&&(t=e.target.querySelector(".n-select__options")),t){switch(e.key){case"Enter":e.target.classList.contains("n-select")&&a(t);break;case"Escape":l(t);break;case"ArrowDown":if(t.hasAttribute("aria-expanded")){let n=s(e.target,"button, a[href]");n?n.focus():t.querySelector("button").focus()}else a(t);break;case"ArrowUp":if(t.hasAttribute("aria-expanded")){let n=((e,t)=>{let n=e.previousElementSibling;for(;n;){if(n.matches(t))return n;n=n.previousElementSibling}return!1})(e.target,"button, a[href]");if(n)n.focus();else{let e=t.querySelectorAll("button");e[e.length-1].focus()}}else a(t);break;case"Home":t.querySelector("button").focus();break;case"End":t.querySelector("button:last-of-type").focus();break;default:t.nuiSearchTerm+=e.key.toLowerCase(),clearTimeout(p),p=setTimeout((()=>{for(let e of t.querySelectorAll("button"))e.textContent.trim().toLowerCase().startsWith(t.nuiSearchTerm)&&(t.getAttribute("aria-expanded")?e.focus():o(e,!1));t.nuiSearchTerm=""}),200)}return!1}},h=e=>{window.PointerEvent&&e.querySelectorAll(".n-select:not([data-ready])").forEach((e=>{let t=e;if("SELECT"===e.tagName)return;if(!(e=e.querySelector(".n-select__options"))){let n="";t.querySelectorAll("option").forEach((e=>{n+=`<button value="${e.value}">${e.textContent}</button>`})),(e=document.createElement("span")).insertAdjacentHTML("beforeend",n),t.prepend(e)}if(e.nuiSelectWrapper=t,e.classList.add("n-select__options"),e.nuiNativeInput=e.nuiSelectWrapper.querySelector("select, input")||s(e.nuiSelectWrapper,"select")||document.querySelector(`[data-n_select="${e.nuiSelectWrapper.dataset.n_select}"]`),!e.nuiNativeInput){let n=document.createElement("select");n.name=n.id=e.dataset.name,t.append(n),e.nuiNativeInput=n}let n=e.nuiNativeInput.value,i=e.querySelector(`button[value="${n}"`);e.nuiNativeInput.innerHTML="",t.addEventListener("pointerdown",d),e.addEventListener("click",c),e.addEventListener("focusout",(e=>{let t=e.target.closest(".n-select__options");t.hasAttribute("aria-expanded")&&e.relatedTarget&&e.relatedTarget.parentNode!==t&&(l(t),t.nuiSelectWrapper.focus())})),e.ontransitionend=e=>{let t=e.target;t.style.removeProperty("--mask-position-y"),t.style.removeProperty("--mask-size-y"),delete t.dataset.nSelectAnimation,t.addEventListener("pointerup",u)},e.addEventListener("keydown",g),t.addEventListener("keydown",g),e.addEventListener("keyup",y),t.addEventListener("keyup",y),e.lastElementChild.onkeydown=e=>{"Tab"===e.key&&!e.shiftKey&&e.target.parentNode.hasAttribute("aria-expanded")&&(l(e.target.parentNode),e.target.parentNode.nuiSelectWrapper.focus())},e.querySelectorAll("button").forEach((e=>{e.type="button",e.value=e.value||e.textContent.trim()})),t.setAttribute("tabindex",0),(e.querySelector("[aria-selected]")||e.firstElementChild).tabIndex=-1,t.style.setProperty("--inline-width",`${e.getBoundingClientRect().width}px`),o(e.querySelector("[aria-selected]")||i||e.querySelector("button")),e.nuiSearchTerm="",["n-select--rounded","n-select--shadow"].forEach((n=>{t.classList.contains(n)&&e.classList.add(n)}));let a=e.closest("label")||document.querySelector(`label[for="${e.nuiNativeInput.id}"]`);a&&(a.onclick=e=>{let t=e.target;if(!t.closest(".n-select")){e.preventDefault(),t=t.closest("label"),(t.querySelector(".n-select")||document.getElementById(t.getAttribute("for")).closest(".n-select")).focus()}}),t.dataset.ready=!0,window.requestAnimationFrame((()=>{r(t,e),["--nui-control-color","--nui-control-bg","--nui-control-active-color","--nui-control-active-bg","--nui-control-highlight"].forEach((n=>{e.style.setProperty(n,t.style.getPropertyValue(n))}))}))}))};"undefined"!=typeof nui&&"function"==typeof nui.registerComponent?nui.registerComponent("n-select",h):h(document.body)}();