https://adelsvereniging.nl/apps/framework/build/web-component/g2ui-input-select-DowVdKrD.js

1import{p as O}from"../base-Ci7vLHE_.js";import{p as _}from"../internals--3vI9LC5.js";import"../preload-helper-BVLnHgTN.js";function z(o,t,e){let s;return function(){let i=this,c=arguments,h=function(){s=null,o.apply(i,c)};clearTimeout(s),s=setTimeout(h,t)}}var G=Object.defineProperty,V=o=>{throw TypeError(o)},Q=(o,t,e)=>t in o?G(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,T=(o,t,e)=>Q(o,typeof t!="symbol"?t+"":t,e),j=(o,t,e)=>t.has(o)||V("Cannot "+e),n=(o,t,e)=>(j(o,t,"read from private field"),e?e.call(o):t.get(o)),w=(o,t,e)=>t.has(o)?V("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(o):t.set(o,e),m=(o,t,e,s)=>(j(o,t,"write to private field"),t.set(o,e),e),l=(o,t,e)=>(j(o,t,"access private method"),e);let u=Object.hasOwn(HTMLElement.prototype,"popover");var g,f,R,M;class Z{constructor(t,e){w(this,R),w(this,g),w(this,f),m(this,g,t),m(this,f,new Set([...e]))}get length(){return n(this,f).size}get selectedIndex(){const t=[...n(this,f).values()];for(const e in t)if(t[e].checked)return parseInt(e);return-1}set selectedIndex(t){if(t<0){n(this,g).value=null;return}const e=[...n(this,f).values()];for(const s in e)if(parseInt(s)===t){n(this,g).value=e[s].value;return}n(this,g).value=null}add(t,e=null){n(this,f).add(t),l(this,R,M).call(this).insertBefore(t,e)}remove(t){n(this,f).delete(t),l(this,R,M).call(this).removeChild(t)}[Symbol.iterator](){return n(this,f).values()}}g=new WeakMap,f=new WeakMap,R=new WeakSet,M=function(){return n(this,g).shadowRoot.querySelector(".values")};var E,S,b,q,I,$,A,v,r,D,C,B,k,F,N,H,Y,P;const W=class X extends O{constructor(){super(),w(this,r),w(this,E),w(this,S),w(this,b),w(this,q,!0),w(this,I,!1),w(this,$,"value"),w(this,A,"q"),w(this,v,!1),m(this,E,HTMLElement.prototype.attachInternals?this.attachInternals():new _(this));const t=this.ownerDocument.createElement("div");t.classList.add("wrapper"),t.classList.toggle("popover",u),t.classList.toggle("no-popover",!u),this.addEventListener("click",p=>{if(p.stopImmediatePropagation(),u)n(this,v)||this.togglePicker();else{if(n(this,v)){m(this,v,!1);return}this.togglePicker(),m(this,v,p.composedPath().filter(x=>x.tagName==="LABEL").length>0)}}),this.shadowRoot.appendChild(t);let e=t;const s=this.ownerDocument.createElement("div");s.classList.add("non-popover-wrapper"),u||(t.appendChild(s),e=s);const i=this.ownerDocument.createElement("div");i.classList.add("select"),e.appendChild(i);const c=this.ownerDocument.createElement("div"),h=this.ownerDocument.createElement("span");h.classList.add("selected-option"),h.textContent=this.getAttribute("placeholder")||"",c.classList.add("open"),c.appendChild(h),i.appendChild(c);const a=this.ownerDocument.createElement("div");a.classList.add("picker"),u?(a.popover="auto",a.addEventListener("beforetoggle",p=>{l(this,r,C).call(this,p.newState),m(this,v,!0),l(this,r,B).call(this)}),a.addEventListener("toggle",p=>{m(this,v,!1),this.shadowRoot.querySelector('input[type="search"]').focus()})):a.hidden=!0,a.addEventListener("click",p=>p.stopPropagation()),e.appendChild(a);const d=this.ownerDocument.createElement("input");d.type="search",d.addEventListener("input",z(async()=>{t.classList.add("is-loading");try{await l(this,r,F).call(this,d.value)}finally{t.classList.remove("is-loading")}},200)),a.appendChild(d);const U=this.ownerDocument.createElement("div");U.classList.add("values"),a.appendChild(U);const y=this.ownerDocument.createElement("button");y.textContent="▼",y.type="button",y.classList.add("open"),u?(y.popoverTargetElement=a,y.popoverTargetAction="toggle",y.addEventListener("click",p=>{p.stopPropagation()})):y.addEventListener("click",p=>{p.stopPropagation(),this.togglePicker()}),c.appendChild(y);const L=this.ownerDocument.createElement("button");L.textContent="X",L.type="button",L.hidden=!0,L.classList.add("cancel"),L.addEventListener("click",p=>{p.stopPropagation(),this.shadowRoot.querySelectorAll(".values input").forEach(x=>x.checked=!1),l(this,r,k).call(this)}),c.appendChild(L)}connectedCallback(){m(this,q,this.getAttribute("autocomplete")!=="off"),m(this,I,this.getAttribute("autopopulate")==="on");const t=this.shadowRoot.querySelector(".values");for(const c of this.querySelectorAll("template"))t.appendChild(c.content.cloneNode(!0));l(this,r,D).call(this,{initial:!0}),this.hasAttribute("value")&&(n(this,E).setFormValue(this.getAttribute("value")),l(this,r,Y).call(this,this.getAttribute("value")));const e=this.shadowRoot.querySelector(".wrapper"),s=window.getComputedStyle(this).accentColor;s!=="auto"&&s!==""&&(e.style.setProperty("--_accent-color",s),e.classList.add("computed-accent"));const i=window.getComputedStyle(this).paddingLeft;parseFloat(i)!==0&&e.style.setProperty("--_input-padding-left",i),e.style.setProperty("--_input-border-radius",window.getComputedStyle(this).borderRadius),n(this,q)||e.classList.add("no-autocomplete")}disconnectedCallback(){m(this,S,null)}get form(){return n(this,S)}set value(t){for(const e of n(this,b))e.checked=e.value===(t==null?void 0:t.toString());l(this,r,k).call(this)}get value(){for(const t of n(this,b))if(t.checked)return t.value;return null}get options(){return n(this,b)}get open(){return u?this.shadowRoot.querySelector(".picker").matches(":popover-open"):this.shadowRoot.querySelector(".wrapper").classList.contains("is-active")}showPicker(){if(this.open)return;const t=this.shadowRoot.querySelector(".picker");u?t.showPopover():l(this,r,C).call(this,"open"),this.shadowRoot.querySelector(".picker input[type=search]").focus()}hidePicker(){if(!this.open)return;u?this.shadowRoot.querySelector(".picker").hidePopover():l(this,r,C).call(this,"closed");const t=this.shadowRoot.querySelector(".picker input[type=search]");t.value="",l(this,r,F).call(this)}togglePicker(t=null){(t===null?!this.open:t)?this.showPicker():this.hidePicker()}

1async handleEvent(t){if(t.type==="keydown"){if(t.key==="ArrowDown"||t.key==="ArrowUp")t.preventDefault();else if(t.key==="Enter"){const i=this.shadowRoot.querySelector("*:focus");i.type==="radio"&&(i.checked=!0,l(this,r,k).call(this),this.blur(),this.hidePicker());return}else return;let e;const s=this.shadowRoot.querySelector(".values label:not([hidden]):focus-within");t.key==="ArrowDown"?e=(s==null?void 0:s.nextElementSibling)||this.shadowRoot.querySelector(".values label:not([hidden])"):e=(s==null?void 0:s.previousElementSibling)||this.shadowRoot.querySelector(".values label:last-child"),e.querySelector("input").focus()}t.type==="focusout"&&l(this,r,C).call(this,"closed")}static register(){customElements.get("g2ui-input-select")||customElements.define("g2ui-input-select",X)}};E=new WeakMap,S=new WeakMap,b=new WeakMap,q=new WeakMap,I=new WeakMap,$=new WeakMap,A=new WeakMap,v=new WeakMap,r=new WeakSet,D=function({initial:o=!1}={}){var t;const e=this.shadowRoot.querySelectorAll(".values input");for(const i of e)i.name="option",i.addEventListener("change",()=>l(this,r,k).call(this));const s=this.shadowRoot.querySelectorAll(".values label");for(const i of s)i.addEventListener("click",()=>this.hidePicker());m(this,b,new Z(this,e)),l(this,r,k).call(this,{initial:o}),m(this,S,this.closest("form")),(t=n(this,S))==null||t.addEventListener("submit",()=>this.hidePicker()),m(this,v,!1)},C=function(o){if(o==="open"){const t=this.shadowRoot.querySelector(".wrapper");t.classList.remove("above"),u||(l(this,r,B).call(this),t.classList.add("is-active"),this.addEventListener("focusout",this)),this.addEventListener("keydown",this)}else{const t=this.shadowRoot.querySelector(".wrapper");u||t.classList.remove("is-active"),this.removeEventListener("keydown",this),u||this.removeEventListener("focusout",this)}},B=function(){const o=this.shadowRoot.querySelector(".wrapper");o.classList.remove("above"),o.classList.remove("below");const t=window.getComputedStyle(this),e=this.getBoundingClientRect(),s=e.top+window.scrollY,i=document.documentElement.scrollHeight-e.bottom-window.scrollY,c=document.documentElement.scrollHeight*.5;s>c&&s>i?(o.classList.add("above"),u?o.style.setProperty("--picker-inset-correction-top",`calc(${t.paddingTop})`):o.style.setProperty("--picker-inset-correction-top",`calc(${e.height}px - ${t.paddingTop} - ${t.borderTopWidth} - ${t.borderBottomWidth})`)):(o.classList.add("below"),u?o.style.setProperty("--picker-inset-correction-top",`calc(${t.borderTopWidth} + ${t.paddingTop} - ${t.borderBottomWidth})`):o.style.setProperty("--picker-inset-correction-top",`calc(${e.height}px - ${t.borderBottomWidth} - ${t.borderTopWidth} - ${t.paddingBottom})`));const h=window.innerWidth-this.offsetParent.getBoundingClientRect().right;o.style.setProperty("--picker-inset-correction-start",`calc((${t.borderLeftWidth} + ${t.paddingLeft}) * -1)`),o.style.setProperty("--picker-min-width",`calc(${this.clientWidth}px + ${t.borderLeftWidth} + ${t.borderRightWidth}`),o.style.setProperty("--picker-max-width",`calc(${this.offsetParent.clientWidth}px - ${this.offsetLeft}px + ${h}px - 1em)`),o.style.setProperty("--inherited-border-block",`${t.borderBlock}`),o.style.setProperty("--inherited-border-inline",`${t.borderInline}`)},k=function({initial:o=!1}={}){const t=this.shadowRoot.querySelector(".selected-option"),e=[...n(this,b)].filter(s=>s.checked);if(e.length===0)t.textContent=this.getAttribute("placeholder")||"",n(this,E).setFormValue(null);else{t.textContent=e.map(s=>{var i;return(((i=s.closest("label"))==null?void 0:i.textContent)||s.value).trim()}).join(", ");for(const s of e)n(this,E).setFormValue(s.value)}this.shadowRoot.querySelector("button.cancel").hidden=e.length===0,o||this.dispatchEvent(new Event("change"))},F=async function(o=null){l(this,r,P).call(this,"autopopulate")?await l(this,r,H).call(this,o):await l(this,r,N).call(this,o)},N=async function(o=null){o?this.shadowRoot.querySelectorAll(".values label").forEach(t=>t.hidden=!t.textContent.toLowerCase().includes(o)):this.shadowRoot.querySelectorAll(".values label").forEach(t=>t.hidden=!1)}

1,H=async function(o){if(o===null)return;const t=this.shadowRoot.querySelector(".values");if(o===""){t.querySelectorAll("label").forEach(h=>h.remove());return}const e=l(this,r,P).call(this,"autocomplete");let s,i=new URL(e.getAttribute("action"),this.ownerDocument.baseURI);if(e.method.toLowerCase()==="get"){for(const[h,a]of new FormData(e))i.searchParams.append(h,a);i.searchParams.set(n(this,A),o),s=null}else s=new FormData(e),s.set(n(this,A),o);const c=await(await fetch(i,{method:e.method,body:s})).json();t.querySelectorAll("label").forEach(h=>h.remove());for(const h of c){const a=this.ownerDocument.createElement("label"),d=this.ownerDocument.createElement("input");d.type="radio",h.value&&(d.value=h.value),a.appendChild(d),h.label&&a.appendChild(this.ownerDocument.createTextNode(h.label)),t.appendChild(a)}l(this,r,D).call(this)},Y=async function(o){if(!o)return;const t=l(this,r,P).call(this,"fetch-value");let e,s=new URL(t.getAttribute("action"),this.ownerDocument.baseURI);if(t.method.toLowerCase()==="get"){for(const[a,d]of new FormData(t))s.searchParams.append(a,d);s.searchParams.set(n(this,$),o),e=null}else e=new FormData(t),e.set(n(this,$),o);const i=await fetch(s,{method:t.method,body:e});if(i.status===404){console.warn(`Cannot populate field with initial value, remote source ${s} says value is not found`);return}if(!i.ok){console.warn(`Cannot populate field with initial value, remote source ${s} returns status code ${i.status}`);return}let c=await i.json();if(Array.isArray(c)){if(c.length>1){console.warn(`Cannot populate field with initial value, remote source ${s} returns array with more than one value`);return}c=c[0]}const h=this.shadowRoot.querySelector(".values");if(h.querySelectorAll("label").forEach(a=>a.remove()),c.label){const a=this.ownerDocument.createElement("label"),d=this.ownerDocument.createElement("input");d.type="radio",c.value&&(d.value=c.value),d.checked=!0,a.hidden=!0,a.appendChild(d),c.label&&a.appendChild(this.ownerDocument.createTextNode(c.label)),h.appendChild(a),l(this,r,D).call(this),l(this,r,k).call(this,{initial:!0})}else console.warn(`Cannot populate field with initial value, remote source ${s} returns json that does not contain a label key`)},P=function(o){const t=this.querySelector("template");if(!t)return null;for(const e of[`form[name="${o}"]`,"form:not([name])"]){const s=t.content.querySelector(e);if(s)return s}return null},T(W,"formAssociated",!0),T(W,"shadowRootOptions",{...O.shadowRootOptions,delegatesFocus:!0}),T(W,"adopt",[new URL("/apps/framework/build/css/g2ui-input-select-D799LN2q.css",import.meta.url)]);let et=W;export{et as default};