UNPKG

@zeix/ui-element

Version:

UIElement - a HTML-first library for reactive Web Components

4 lines (2 loc) 32.7 kB
var j,$=new Set,Cn=0,On=new Map,Hn,nb=()=>{Hn=void 0;let n=Array.from(On.values());On.clear();for(let b of n)b()};queueMicrotask(nb);var Rn=(n)=>{let b=new Set,a=n;return a.off=(m)=>{b.add(m)},a.cleanup=()=>{for(let m of b)m();b.clear()},a},K=(n)=>{if(j&&!n.has(j)){let b=j;n.add(b),j.off(()=>{n.delete(b)})}},h=(n)=>{for(let b of n)if(Cn)$.add(b);else b()},En=()=>{while($.size){let n=Array.from($);$.clear();for(let b of n)b()}},X=(n)=>{Cn++;try{n()}finally{En(),Cn--}},Un=(n,b)=>{let a=j;j=b;try{n()}finally{j=a}};var U=(n)=>typeof n==="function",wn=(n,b)=>Object.prototype.toString.call(n)===`[object ${b}]`,Dn=(n)=>n instanceof Error?n:Error(String(n));class Sn extends Error{constructor(n){super(`Circular dependency in ${n} detected`);this.name="CircularDependencyError"}}var Yn="State",y=(n)=>{let b=new Set,a=n,m={[Symbol.toStringTag]:Yn,get:()=>{return K(b),a},set:(o)=>{if(Object.is(a,o))return;if(a=o,h(b),E===a)b.clear()},update:(o)=>{m.set(o(a))}};return m},B=(n)=>wn(n,Yn),E=Symbol(),e=(n)=>B(n)||zn(n),Fn=(n)=>e(n)?n:bb(n)?x(n):y(n),H="Computed",x=(n)=>{let b=new Set,a=E,m,o,g=!0,p=!1,u=!1,D=(M)=>{if(!Object.is(M,a))a=M,p=!0;m=void 0,g=!1},C=()=>{p=E!==a,a=E,m=void 0},F=(M)=>{let S=Dn(M);p=!m||S.name!==m.name||S.message!==m.message,a=E,m=S},P=(M)=>(S)=>{if(u=!1,o=void 0,M(S),p)h(b)},N=Rn(()=>{if(g=!0,o?.abort("Aborted because source signal changed"),b.size)h(b);else N.cleanup()}),T=()=>Un(()=>{if(u)throw new Sn("computed");if(p=!1,U(n)&&n.constructor.name==="AsyncFunction"){if(o)return a;o=new AbortController,o.signal.addEventListener("abort",()=>{u=!1,o=void 0,T()},{once:!0})}let M;u=!0;try{M=o?n(o.signal):n()}catch(S){if(S instanceof DOMException&&S.name==="AbortError")C();else F(S);u=!1;return}if(M instanceof Promise)M.then(P(D),P(F));else if(M==null||E===M)C();else D(M);u=!1},N);return{[Symbol.toStringTag]:H,get:()=>{if(K(b),En(),g)T();if(m)throw m;return a}}},zn=(n)=>wn(n,H),bb=(n)=>U(n)&&n.length<2;function J(n){let{signals:b,ok:a,err:m=(u)=>{console.error(u)},nil:o=()=>{}}=U(n)?{signals:[],ok:n}:n,g=!1,p=Rn(()=>Un(()=>{if(g)throw new Sn("effect");g=!0;let u=[],D=!1,C=b.map((P)=>{try{let N=P.get();if(N===E)D=!0;return N}catch(N){return u.push(Dn(N)),E}}),F;try{F=D?o():u.length?m(...u):a(...C)}catch(P){F=m(Dn(P))}finally{if(U(F))p.off(F)}g=!1},p));return p(),()=>p.cleanup()}var q=!1,ab="debug";var rn="warn",s="error",mb=(n)=>n?`#${n}`:"",ob=(n)=>n?.length?`.${Array.from(n).join(".")}`:"",cn=(n)=>!!n&&typeof n==="object",L=(n)=>typeof n==="string",gb=(n,b)=>L(b)&&(b in n)&&U(n[b]),pb=(n)=>n.nodeType===Node.ELEMENT_NODE,Nn=(n)=>n.localName.includes("-"),_=(n)=>n?`<${n.localName}${mb(n.id)}${ob(n.classList)}>`:"<unknown>",t=(n)=>L(n)?`"${n}"`:cn(n)?JSON.stringify(n):String(n),un=(n)=>{if(n===null)return"null";if(typeof n!=="object")return typeof n;if(Array.isArray(n))return"Array";if(Symbol.toStringTag in Object(n))return n[Symbol.toStringTag];return n.constructor?.name||"Object"},w=(n,b,a=ab)=>{if(q||[s,rn].includes(a))console[a](b,n);return n};class qn extends Error{constructor(n,b){super(`Circular dependency detected in selection signal for component ${_(n)} with selector "${b}"`);this.name="CircularMutationError"}}class Vn extends Error{constructor(n){super(`Invalid component name "${n}". Custom element names must contain a hyphen, start with a lowercase letter, and contain only lowercase letters, numbers, and hyphens.`);this.name="InvalidComponentNameError"}}class Mn extends Error{constructor(n,b,a){super(`Invalid property name "${b}" for component <${n}>. ${a}`);this.name="InvalidPropertyNameError"}}class Qn extends Error{constructor(n,b){super(`Invalid effects in component ${_(n)}. Effects must be an array of effects, a single effect function, or a Promise that resolves to effects.`);if(this.name="InvalidEffectsError",b)this.cause=b}}class jn extends Error{constructor(n,b){super(`Expected signal as value for property "${String(b)}" in component ${_(n)}.`);this.name="InvalidSignalError"}}class Pn extends Error{constructor(n,b,a){super(`Missing required element <${b}> in component ${_(n)}. ${a}`);this.name="MissingElementError"}}class Gn extends Error{constructor(n,b){super(`Timeout waiting for: [${b.join(", ")}] in component ${_(n)}.`);this.name="DependencyTimeoutError"}}var v=Symbol("RESET"),l=(n,b,a=b)=>{try{if(n instanceof Promise)throw n;if(!Array.isArray(n))return n(b,a);let m=n.filter(U).map((o)=>o(b,a));return()=>{m.filter(U).forEach((o)=>o()),m.length=0}}catch(m){if(m instanceof Promise)m.then(()=>l(n,b,a));else throw new Qn(b,m instanceof Error?m:new Error(String(m)))}},kn=(n,b,a,m)=>{try{return L(n)?b.getSignal(n).get():e(n)?n.get():U(n)?n(a):v}catch(o){if(m)w(o,`Failed to resolve value of ${t(n)}${m?` for ${m}`:""} in ${_(a)}${b!==a?` in ${_(b)}`:""}`,s);return v}},ub=(n)=>{let b=new Set;if(n.includes("."))b.add("class");if(n.includes("#"))b.add("id");if(n.includes("[")){let a=n.split("[");for(let m=1;m<a.length;m++){let o=a[m];if(!o.includes("]"))continue;let g=o.split("=")[0].trim().replace(/[^a-zA-Z0-9_-]/g,"");if(g)b.add(g)}}return[...b]},Cb=(n,b)=>{if(n.length!==b.length)return!1;let a=new Set(n);for(let m of b)if(!a.has(m))return!1;return!0},dn=(n)=>U(n)&&n.length>=2,G=(n,b)=>U(b)?b(n):b,z=(n,b)=>(a)=>{let m=a.shadowRoot??a,o=(p,u)=>{let D=m.querySelector(p);if(!D)return;let C=u(D);if(C!=null)return C},g=void 0;for(let[p,u]of Object.entries(n))if(g=o(p,u),g!=null)break;return L(g)&&dn(b)?b(a,g):g??G(a,b)},Xn=(n,b,a)=>{let m=new MutationObserver(a),o={childList:!0,subtree:!0},g=ub(b);if(g.length)o.attributes=!0,o.attributeFilter=g;return m.observe(n,o),m},Db=(n)=>{let b=n.shadowRoot??n,a=new Set;function m(g,p){let u=b.querySelector(g);if(p!=null&&!u)throw new Pn(n,g,p);if(u&&Nn(u)&&u.matches(":not(:defined)"))a.add(u.localName);return u}function o(g,p){let u=b.querySelectorAll(g);if(p!=null&&!u.length)throw new Pn(n,g,p);if(u.length)u.forEach((D)=>{if(Nn(D)&&D.matches(":not(:defined)"))a.add(D.localName)});return Array.from(u)}return[{useElement:m,useElements:o,first:(g,p,u)=>{let D=u!=null?m(g,u):m(g);return()=>{if(D)return l(p,n,D)}},all:(g,p,u)=>{let D=u!=null?o(g,u):o(g);return()=>{let C=new Map,F=(M)=>{let S=l(p,n,M);if(S&&!C.has(M))C.set(M,S)},P=(M)=>{let S=C.get(M);if(S)S();C.delete(M)},N=(M)=>(S)=>{if(pb(S)){if(S.matches(g))M(S);S.querySelectorAll(g).forEach(M)}},T=Xn(b,g,(M)=>{for(let S of M)S.addedNodes.forEach(N(F)),S.removedNodes.forEach(N(P))});if(D.length)D.forEach(F);return()=>{T.disconnect(),C.forEach((M)=>M()),C.clear()}}}},()=>Array.from(a)]};function V(n){return(b)=>{let a=new Set,m=()=>Array.from((b.shadowRoot??b).querySelectorAll(n)),o=E,g,p=0,u=2,D=()=>{o=m(),g=Xn(b,n,()=>{if(!a.size){g?.disconnect(),g=void 0;return}if(p++,p>u)throw g?.disconnect(),g=void 0,p=0,new qn(b,n);try{let C=m();if(!Cb(o,C))o=C,h(a)}finally{p--}})};return{[Symbol.toStringTag]:H,get(){if(K(a),!a.size)o=m();else if(!g)D();return o}}}}var Fb=50,Nb=new Set(["constructor","prototype"]),Mb=new Set(["id","class","className","title","role","style","dataset","lang","dir","hidden","children","innerHTML","outerHTML","textContent","innerText"]),_n=(n)=>{if(Nb.has(n))return`Property name "${n}" is a reserved word`;if(Mb.has(n))return`Property name "${n}" conflicts with inherited HTMLElement property`;return null};function d(n,b={},a){if(!n.includes("-")||!n.match(/^[a-z][a-z0-9-]*$/))throw new Vn(n);for(let o of Object.keys(b)){let g=_n(o);if(g)throw new Mn(n,o,g)}class m extends HTMLElement{debug;#n={};#b;static observedAttributes=Object.entries(b)?.filter(([,o])=>dn(o)).map(([o])=>o)??[];connectedCallback(){if(q){if(this.debug=this.hasAttribute("debug"),this.debug)w(this,"Connected")}for(let[C,F]of Object.entries(b)){if(F==null||C in this)continue;let P=U(F)?F(this,null):F;if(P!=null)this.setSignal(C,Fn(P))}let[o,g]=Db(this),p=a(this,o),u=g(),D=()=>{let C=l(p,this);if(C)this.#b=C};if(u.length)Promise.race([Promise.all(u.map((C)=>customElements.whenDefined(C))),new Promise((C,F)=>{setTimeout(()=>{F(new Gn(this,u.filter((P)=>!customElements.get(P))))},Fb)})]).then(D).catch((C)=>{if(q)w(C,`Error during setup of <${n}>. Trying to run effects anyway.`,rn);D()});else D()}disconnectedCallback(){if(U(this.#b))this.#b();if(q&&this.debug)w(this,"Disconnected")}attributeChangedCallback(o,g,p){if(p===g||zn(this.#n[o]))return;let u=b[o];if(!dn(u))return;let D=u(this,p,g);if(q&&this.debug)w(p,`Attribute "${String(o)}" of ${_(this)} changed from ${t(g)} to ${t(p)}, parsed as <${un(D)}> ${t(D)}`);if(o in this)this[o]=D;else this.setSignal(o,Fn(D))}getSignal(o){let g=this.#n[o];if(q&&this.debug)w(g,`Get ${un(g)} "${String(o)}" in ${_(this)}`);return g}setSignal(o,g){let p=_n(String(o));if(p)throw new Mn(this.localName,o,p);if(!e(g))throw new jn(this,o);let u=this.#n[o],D=B(g);if(this.#n[o]=g,Object.defineProperty(this,o,{get:g.get,set:D?g.set:void 0,enumerable:!0,configurable:D}),u&&B(u))u.set(E);if(q&&this.debug)w(g,`Set ${un(g)} "${String(o)} in ${_(this)}`)}}customElements.define(n,m)}var yn="context-request";var xn=(n)=>(b)=>{let a=(m)=>{let{context:o,callback:g}=m;if(n.includes(o)&&U(g))m.stopImmediatePropagation(),g(b.getSignal(String(o)))};return b.addEventListener(yn,a),()=>b.removeEventListener(yn,a)};var r=(n,b,a)=>(m)=>{let o=new Set,g=G(m,a),p=new Map,u,D=()=>{for(let[C,F]of Object.entries(b)){let P=(N)=>{let T=N.target;if(!T)return;let M=T.closest(n);if(!M||!m.contains(M))return;N.stopPropagation();try{let S=F({event:N,host:m,target:M,value:g});if(S==null)return;if(!Object.is(S,g)){if(g=S,o.size>0)h(o);else if(u)u()}}catch(S){throw N.stopImmediatePropagation(),S}};p.set(C,P),m.addEventListener(C,P)}u=()=>{if(p.size){for(let[C,F]of p)m.removeEventListener(C,F);p.clear()}u=void 0}};return{[Symbol.toStringTag]:H,get(){if(K(o),o.size&&!p.size)D();return g}}},c=(n,b,a=!1)=>(m,o)=>{let g=(p)=>{let u=b({host:m,target:o,event:p});if(!cn(u))return;X(()=>{for(let[D,C]of Object.entries(u))try{m[D]=C}catch(F){w(F,`Reactive property "${D}" on ${_(m)} from event ${n} on ${_(o)} could not be set, because it is read-only.`,s)}})};return o.addEventListener(n,g,a),()=>o.removeEventListener(n,g)},In=(n,b)=>(a,m)=>J(()=>{let o=kn(b,a,m,`custom event "${n}" detail`);if(o===v||o===E)return;m.dispatchEvent(new CustomEvent(n,{detail:o,bubbles:!0}))}),Pb=(n,b="")=>{return{a:"attribute ",c:"class ",d:"dataset ",h:"inner HTML",m:"method call ",p:"property ",s:"style property ",t:"text content"}[n]+b},db=(n)=>{if(/^(mailto|tel):/i.test(n))return!0;if(n.includes("://"))try{let b=new URL(n,window.location.origin);return["http:","https:","ftp:"].includes(b.protocol)}catch{return!1}return!0},Tb=(n,b,a)=>{if(/^on/i.test(b))throw new Error(`Unsafe attribute: ${b}`);if(a=String(a).trim(),!db(a))throw new Error(`Unsafe URL for ${b}: ${a}`);n.setAttribute(b,a)},I=(n,b)=>(a,m)=>{let{op:o,name:g="",read:p,update:u}=b,D=p(m),C=Pb(o,g),F=(N)=>()=>{if(q&&a.debug)w(m,`${N} ${C} of ${_(m)} in ${_(a)}`);b.resolve?.(m)},P=(N)=>(T)=>{w(T,`Failed to ${N} ${C} of ${_(m)} in ${_(a)}`,s),b.reject?.(T)};return J(()=>{let N=kn(n,a,m,C),T=N===v?D:N===E?b.delete?null:D:N;if(b.delete&&T===null)try{b.delete(m),F("delete")()}catch(M){P("delete")(M)}else if(T!=null){let M=p(m);if(Object.is(T,M))return;try{u(m,T),F("update")()}catch(S){P("update")(S)}}})},Z=(n,b)=>(a,m)=>{let o=(p)=>()=>{if(q&&a.debug)w(m,`${p} element in ${_(m)} in ${_(a)}`);if(U(b?.resolve))b.resolve(m);else{let u=e(n)?n:L(n)?a.getSignal(n):void 0;if(B(u))u.set(0)}},g=(p)=>(u)=>{w(u,`Failed to ${p} element in ${_(m)} in ${_(a)}`,s),b?.reject?.(u)};return J(()=>{let p=kn(n,a,m,"insertion or deletion"),u=p===v?0:p;if(u>0){if(!b)throw new TypeError("No inserter provided");try{for(let D=0;D<u;D++){let C=b.create(m);if(!C)continue;m.insertAdjacentElement(b.position??"beforeend",C)}o("insert")()}catch(D){g("insert")(D)}}else if(u<0)try{if(b&&(b.position==="afterbegin"||b.position==="beforeend"))for(let D=0;D>u;D--)if(b.position==="afterbegin")m.firstElementChild?.remove();else m.lastElementChild?.remove();else m.remove();o("remove")()}catch(D){g("remove")(D)}})},k=(n)=>I(n,{op:"t",read:(b)=>b.textContent,update:(b,a)=>{Array.from(b.childNodes).filter((m)=>m.nodeType!==Node.COMMENT_NODE).forEach((m)=>m.remove()),b.append(document.createTextNode(a))}}),O=(n,b=n)=>I(b,{op:"p",name:n,read:(a)=>(n in a)?a[n]:E,update:(a,m)=>{a[n]=m}}),R=(n)=>I(n,{op:"p",name:"hidden",read:(b)=>!b.hidden,update:(b,a)=>{b.hidden=!a}}),Y=(n,b=n)=>I(b,{op:"a",name:n,read:(a)=>a.getAttribute(n),update:(a,m)=>{Tb(a,n,m)},delete:(a)=>{a.removeAttribute(n)}}),nn=(n,b=n)=>I(b,{op:"a",name:n,read:(a)=>a.hasAttribute(n),update:(a,m)=>{a.toggleAttribute(n,m)}}),bn=(n,b=n)=>I(b,{op:"c",name:n,read:(a)=>a.classList.contains(n),update:(a,m)=>{a.classList.toggle(n,m)}});var fn=(n,b={})=>I(n,{op:"h",read:(a)=>(a.shadowRoot||!b.shadowRootMode?a:null)?.innerHTML??"",update:(a,m)=>{let{shadowRootMode:o,allowScripts:g}=b;if(!m){if(a.shadowRoot)a.shadowRoot.innerHTML="<slot></slot>";return""}if(o&&!a.shadowRoot)a.attachShadow({mode:o});let p=a.shadowRoot||a;if(p.innerHTML=m,!g)return"";return p.querySelectorAll("script").forEach((u)=>{let D=document.createElement("script");D.appendChild(document.createTextNode(u.textContent??"")),p.appendChild(D),u.remove()})," with scripts"}}),Q=(n)=>(b,a)=>{if(!cn(n))throw new TypeError("Reactives must be an object of passed signals");if(!Nn(a))throw new TypeError(`Target ${_(a)} is not a custom element`);if(!gb(a,"setSignal"))throw new TypeError(`Target ${_(a)} is not a UIElement component`);for(let[m,o]of Object.entries(n))a.setSignal(m,L(o)?b.getSignal(o):Fn(o))},f=()=>(n)=>n.textContent?.trim();var an=(n)=>(b)=>b[n];var Sb=(n)=>(b)=>b.getAttribute(n);var mn=(n)=>z({".label":f(),[n]:Sb("aria-label")},"");var Tn=(n,b)=>{if(b==null)return;let a=n(b);return Number.isFinite(a)?a:void 0},W=()=>(n,b)=>b!=null&&b!=="false",i=(n=0)=>(b,a)=>{if(a==null)return G(b,n);let m=a.trim();if(m.toLowerCase().startsWith("0x"))return Tn((g)=>parseInt(g,16),m)??G(b,n);let o=Tn(parseFloat,a);return o!=null?Math.trunc(o):G(b,n)},An=(n=0)=>(b,a)=>Tn(parseFloat,a)??G(b,n),A=(n="")=>(b,a)=>a??G(b,n);var Ln="media-motion",Wn="media-theme",hn="media-viewport",vn="media-orientation",wb=d("context-media",{[Ln]:()=>{let n=matchMedia("(prefers-reduced-motion: reduce)"),b=y(n.matches);return n.addEventListener("change",(a)=>{b.set(a.matches)}),b},[Wn]:()=>{let n=matchMedia("(prefers-color-scheme: dark)"),b=y(n.matches?"dark":"light");return n.addEventListener("change",(a)=>{b.set(a.matches?"dark":"light")}),b},[hn]:(n)=>{let b=(D,C)=>{let P=n.getAttribute(D)?.trim();if(!P)return C;let N=P.match(/em$/)?"em":"px",T=parseFloat(P);return Number.isFinite(T)?T+N:C},a=matchMedia(`(min-width: ${b("sm","32em")})`),m=matchMedia(`(min-width: ${b("md","48em")})`),o=matchMedia(`(min-width: ${b("lg","72em")})`),g=matchMedia(`(min-width: ${b("xl","104em")})`),p=()=>{if(g.matches)return"xl";if(o.matches)return"lg";if(m.matches)return"md";if(a.matches)return"sm";return"xs"},u=y(p());return a.addEventListener("change",()=>{u.set(p())}),m.addEventListener("change",()=>{u.set(p())}),o.addEventListener("change",()=>{u.set(p())}),g.addEventListener("change",()=>{u.set(p())}),u},[vn]:()=>{let n=matchMedia("(orientation: landscape)"),b=y(n.matches?"landscape":"portrait");return n.addEventListener("change",(a)=>{b.set(a.matches?"landscape":"portrait")}),b}},()=>[xn([Ln,Wn,hn,vn])]);var rb=d("hello-world",{name:A((n)=>n.querySelector("span")?.textContent?.trim()??"")},(n,{first:b})=>{let a=n.name;return[b("input",c("input",({target:m})=>({name:m.value||a})),"Needed to input the name."),b("span",k("name"),"Needed to display the name.")]});var Qb=d("basic-button",{disabled:W(),label:A(mn("button")),badge:A(z({".badge":f()},""))},(n,{first:b})=>[b("button",O("disabled"),"Add native <button> as descendant."),b(".label",k("label")),b(".badge",k("badge"))]);var Xb=d("basic-counter",{count:r("button",{click:({value:n})=>++n},z({span:f()},i()))},(n,{first:b})=>[b("span",k("count"))]);var cb="en";function kb(n,b,a={onWarn:console.warn,onError:console.error}){let m=()=>new Intl.NumberFormat(n);if(!b)return m();let{onWarn:o,onError:g}=a,p={};try{p=JSON.parse(b)}catch(M){return g?.(`Invalid JSON: ${M}`),m()}let u=p.style??"decimal",D=[];if(u==="currency"){if(!p.currency||typeof p.currency!=="string"||p.currency.length!==3)return g?.('style="currency" requires a 3-letter ISO currency (e.g. "CHF").'),m()}else D.push("currency","currencyDisplay","currencySign");if(u==="unit"){if(!p.unit||typeof p.unit!=="string")return g?.('style="unit" requires a "unit" (e.g. "liter", "kilometer-per-hour").'),m()}else D.push("unit","unitDisplay");if(p.notation&&p.notation!=="compact")D.push("compactDisplay");let C={};for(let[M,S]of Object.entries(p))if(!D.includes(M))C[M]=S;else o?.(`Option "${M}" is ignored for style="${u}".`);let{minimumFractionDigits:F,maximumFractionDigits:P}=C;if(F!=null&&P!=null&&F>P)o?.(`minimumFractionDigits (${F}) > maximumFractionDigits (${P}); swapping.`),C.minimumFractionDigits=P,C.maximumFractionDigits=F;let{minimumSignificantDigits:N,maximumSignificantDigits:T}=C;if(N!=null&&T!=null&&N>T)o?.(`minimumSignificantDigits (${N}) > maximumSignificantDigits (${T}); swapping.`),C.minimumSignificantDigits=T,C.maximumSignificantDigits=N;try{let M=new Intl.NumberFormat(n,C);if(M.resolvedOptions().locale!==n)o(`Fall back to locale ${M.resolvedOptions().locale} instead of ${n}`);return M}catch(M){return g?.(`Options rejected by Intl.NumberFormat: ${M instanceof Error?M.message:String(M)}`),m()}}var fb=d("basic-number",{value:An()},(n)=>{let b=kb(n.closest("[lang]")?.getAttribute("lang")||cb,n.getAttribute("options"));return[k(()=>b.format(n.value))]});var Ob="en",Wb=d("basic-pluralize",{count:i()},(n,{first:b})=>{let a=new Intl.PluralRules(n.closest("[lang]")?.getAttribute("lang")||Ob,n.hasAttribute("ordinal")?{type:"ordinal"}:void 0),m=a.resolvedOptions().pluralCategories,o=[b(".count",[k(()=>String(n.count))]),b(".none",[R(()=>n.count===0)]),b(".some",[R(()=>n.count>0)])];for(let g of m)o.push(b(`.${g}`,[R(()=>a.select(n.count)===g)]));return o});var Jb=d("form-checkbox",{checked:r("input",{change:({target:n})=>n.checked},z({input:an("checked")},W())),label:A(mn("input"))},(n,{first:b,useElement:a})=>{return a('input[type="checkbox"]',"Native checkbox needed."),[nn("checked"),b(".label",k("label"))]});var _b=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"],Jn=(n,b)=>{let a=y(b(n));return[c("change",()=>{a.set(b(n))}),c("keydown",({event:m})=>{let{key:o}=m;if(_b.includes(o)){if(m.preventDefault(),m.stopPropagation(),o==="Home")a.set(0);else if(o==="End")a.set(n.length-1);else a.update((g)=>Math.min(Math.max(g+(o==="ArrowRight"||o==="ArrowDown"?1:-1),0),n.length-1));if(n[a.get()])n[a.get()].focus()}})]};var lb=d("form-radiogroup",{value:r("input",{change:({target:n})=>n.value,keyup:({event:n,target:b})=>{if(n.key==="Enter")b.click()}},z({"input:checked":an("value")},""))},(n,{all:b,useElements:a})=>{let m=a("input");return[Y("value"),b("input",[O("tabIndex",(o)=>o.value===n.value?0:-1),...Jn(m,(o)=>o.findIndex((g)=>g.checked))]),b("label",[bn("selected",(o)=>n.value===o.querySelector("input")?.value)])]});var on=(n="input")=>(b)=>{b.clear=()=>{b.value="",b.length=0;let a=b.querySelector(n);if(a)a.value="",a.setCustomValidity(""),a.checkValidity(),a.dispatchEvent(new Event("input",{bubbles:!0})),a.dispatchEvent(new Event("change",{bubbles:!0})),a.focus()}},gn=(n)=>[R(()=>!!n.length),c("click",()=>{n.clear()})];var aa=d("form-textbox",{value:"",length:0,error:"",description:"",clear:on("input, textarea")},(n,{first:b,useElement:a})=>{let m=a("input, textarea","Native input or textarea element needed."),o=n.querySelector(".description");if(o?.dataset.remaining&&m.maxLength)n.setSignal("description",x(()=>o.dataset.remaining.replace("${n}",String(m.maxLength-n.length))));else if(o?.textContent)n.description=o.textContent.trim();let g=n.querySelector(".error")?.id,p=o?.id;return[Y("value"),b("input, textarea",[O("ariaInvalid",()=>String(!!n.error)),Y("aria-errormessage",()=>n.error&&g?g:null),Y("aria-describedby",()=>n.description&&p?p:null),c("change",()=>{m.checkValidity(),X(()=>{n.value=m.value,n.error=m.validationMessage??""})}),c("input",()=>{n.length=m.value.length})]),b(".clear",gn(n)),b(".error",k("error")),b(".description",k("description"))]});var pa=d("form-combobox",{value:"",length:0,error:"",description:"",clear:on()},(n,{first:b,all:a,useElement:m})=>{let o=m("input","Native input element needed."),g=y("idle"),p=y(-1),u=y(""),D=y(!1),C=V('[role="option"]:not([hidden])')(n),F=()=>g.get()==="editing"&&D.get(),P=(N)=>{o.value=N,o.setCustomValidity(""),o.checkValidity(),X(()=>{g.set("selected"),n.value=N,n.length=N.length,n.error=o.validationMessage??"",u.set(N.toLowerCase()),p.set(-1),D.set(o.required&&!o.value||!1)})};return[Y("value"),()=>J(()=>{let N=g.get(),T=p.get();if(N==="idle")return;else if(N==="editing"&&T>=0)C.get().at(T)?.focus();else o.focus()}),c("keydown",({event:N})=>{let{key:T,altKey:M}=N;if(["ArrowDown","ArrowUp"].includes(T))if(N.preventDefault(),N.stopPropagation(),g.set("editing"),M)D.set(T==="ArrowDown");else p.update((S)=>T==="ArrowDown"?Math.min(S+1,C.get().length-1):Math.max(S-1,-1))}),c("keyup",({event:N})=>{let{key:T}=N;if(T==="Delete")N.preventDefault(),N.stopPropagation(),P("")}),c("focusout",()=>{requestAnimationFrame(()=>{if(!n.contains(document.activeElement))g.set("idle")})}),b(".error",k("error")),b(".description",k("description")),b("input",[O("ariaInvalid",()=>String(!!n.error)),Y("aria-errormessage",()=>n.error&&n.querySelector(".error")?.id?n.querySelector(".error")?.id:null),Y("aria-describedby",()=>n.description&&n.querySelector(".description")?.id?n.querySelector(".description")?.id:null),O("ariaExpanded",()=>String(F())),c("change",()=>{o.checkValidity(),X(()=>{n.value=o.value,n.error=o.validationMessage??""})}),c("input",()=>{X(()=>{g.set("editing"),D.set(!0),u.set(o.value.trim().toLowerCase()),n.length=o.value.length})})]),b(".clear",gn(n)),b('[role="listbox"]',[R(F),c("keyup",({event:N})=>{let{key:T}=N;if(T==="Enter")P(C.get().at(p.get())?.textContent?.trim()||"");else if(T==="Escape")P(n.value);else{let M=T.toLowerCase(),S=C.get().findIndex((en)=>(en.textContent?.trim().toLowerCase()||"").startsWith(M));if(S!==-1)p.set(S)}})]),a('[role="option"]',[O("ariaSelected",(N)=>String(N.textContent?.trim().toLowerCase()===n.value.toLowerCase())),R((N)=>N.textContent?.trim().toLowerCase().includes(u.get())),c("click",({target:N})=>{P(N.textContent?.trim()||"")})])]});var Da=d("form-spinbutton",{value:r("button",{click:({target:n,value:b})=>b+(n.classList.contains("decrement")?-1:1),keydown:({event:n,value:b})=>{let{key:a}=n;if(["ArrowUp","ArrowDown","-","+"].includes(a))return n.stopPropagation(),n.preventDefault(),b+(a==="ArrowDown"||a==="-"?-1:1)}},z({".value":f()},i()))},(n,{first:b})=>{let a=n.getAttribute("zero-label")||"Add to Cart",m=n.getAttribute("increment-label")||"Increment",o=i(9)(n,n.getAttribute("max")),g=()=>n.value!==0;return[b(".value",[k("value"),R(g)]),b(".decrement",R(g)),b("button.increment",[k(()=>g()?"+":a),O("ariaLabel",()=>g()?m:a),O("disabled",()=>n.value>=o)])]});var sn=(n,b)=>(n+b)%b,Ma=d("module-carousel",{slides:V('[role="tabpanel"]'),index:i((n)=>Math.max(n.slides.findIndex((b)=>b.ariaCurrent==="true"),0))},(n,{all:b})=>{let a=(o)=>o.dataset.index===String(n.index),m=()=>{n.slides[n.index].scrollIntoView({behavior:"smooth",block:"nearest"})};return[()=>{let o=new IntersectionObserver((g)=>{for(let p of g)if(p.isIntersecting){n.index=n.slides.findIndex((u)=>u===p.target);break}},{root:n.querySelector(".slides"),rootMargin:"0px",threshold:0.99});return n.slides.forEach((g)=>{o.observe(g)}),()=>{o.disconnect()}},b("nav button",[c("click",({host:o,target:g})=>{let p=o.slides.length,u=g.classList.contains("prev")?n.index-1:g.classList.contains("next")?n.index+1:parseInt(g.dataset.index||"0");n.index=Number.isInteger(u)?sn(u,p):0,m()}),c("keyup",({event:o,host:g})=>{let p=o.key;if(["ArrowLeft","ArrowRight","Home","End"].includes(p)){o.preventDefault(),o.stopPropagation();let u=g.slides.length,D=p==="Home"?0:p==="End"?u-1:sn(n.index+(p==="ArrowLeft"?-1:1),u);g.slides[D].focus(),n.index=D,m()}})]),b('[role="tab"]',[O("ariaSelected",(o)=>String(a(o))),O("tabIndex",(o)=>a(o)?0:-1)]),b('[role="tabpanel"]',[O("ariaCurrent",(o)=>String(o.id===n.slides[n.index].id))])]});var Ta=d("module-catalog",{},(n,{first:b,useElements:a})=>{let m=x(()=>a("form-spinbutton").reduce((o,g)=>o+g.value,0));return[b("basic-button",[Q({disabled:()=>!m.get(),badge:()=>m.get()>0?String(m.get()):""})])]});var Zn="success",yb="error",$n=(n,b)=>(a,m)=>c("click",()=>{let o=m.label,g=Zn;(async()=>{try{await navigator.clipboard.writeText(n.textContent?.trim()??"")}catch(p){console.error("Error while trying to use navigator.clipboard.writeText()",p),g=yb}m.disabled=!0,m.label=b[g]??o,setTimeout(()=>{m.disabled=!1,m.label=o},g===Zn?1000:3000)})()})(a,m);var ya=d("module-codeblock",{collapsed:W()},(n,{first:b,useElement:a})=>{let m=a("code","Needed as source container to copy from.");return[nn("collapsed"),b(".overlay",[c("click",()=>{n.collapsed=!1})]),b(".copy",[$n(m,{success:n.getAttribute("copy-success")||"Copied!",error:n.getAttribute("copy-success")||"Error trying to copy to clipboard!"})])]});var pn=(n)=>n.getAttribute("aria-controls")??"",tn=(n,b,a=0)=>pn(n[Math.min(Math.max(n.findIndex(b)+a,0),n.length-1)]),Ua=d("module-tabgroup",{tabs:V('button[role="tab"]'),selected:r('button[role="tab"]',{click:({target:n})=>pn(n),keyup:({event:n,host:b,target:a})=>{let m=n.key;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(m)){n.preventDefault(),n.stopPropagation();let o=tn(b.tabs,(g)=>g===a,m==="Home"?-b.tabs.length:m==="End"?b.tabs.length:m==="ArrowLeft"||m==="ArrowUp"?-1:1);return b.tabs.filter((g)=>pn(g)===o)[0].focus(),o}}},(n)=>tn(n.tabs,(b)=>b.ariaSelected==="true"))},(n,{all:b})=>{let a=(m)=>n.selected===pn(m);return[b('button[role="tab"]',[O("ariaSelected",(m)=>String(a(m))),O("tabIndex",(m)=>a(m)?0:-1)],'At least 2 tabs as children of a <[role="tablist"]> element are needed. Each tab must reference a unique id of a <[role="tabpanel"]> element.'),b('[role="tabpanel"]',R((m)=>n.selected===m.id),"At least 2 tabpanels are needed. Each tabpanel must have a unique id.")]});var Bn=(n,b)=>{let a="",m="";if(!b)m="No URL provided";else if((n.parentElement||n.getRootNode().host)?.closest(`${n.localName}[src="${b}"]`))m="Recursive loading detected";else try{let o=new URL(b,location.href);if(o.origin===location.origin)a=String(o);else m="Invalid URL origin"}catch(o){m=String(o)}return{value:a,error:m}};var ln=new Map,Rb=(n)=>{let b=n.toLowerCase().split(",").map((m)=>m.trim()),a={noCache:!1,noStore:!1,maxAge:void 0};for(let m of b)if(m==="no-cache")a.noCache=!0;else if(m==="no-store")a.noStore=!0;else if(m.startsWith("max-age=")){let o=parseInt(m.substring(8),10);if(!isNaN(o))a.maxAge=o}return a},Eb=(n)=>{if(n.maxAge!==void 0)return(Date.now()-n.timestamp)/1000<n.maxAge;return!0},Kn=async(n,b)=>{let a=ln.get(n),m={};if(a?.etag)m["If-None-Match"]=a.etag;if(a?.lastModified)m["If-Modified-Since"]=a.lastModified;let o=await fetch(n,{signal:b,headers:m});if(o.status===304&&a)return{content:a.content,fromCache:!0};if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);let g=await o.text(),p=o.headers.get("cache-control"),u=o.headers.get("etag"),D=o.headers.get("last-modified"),C=p?Rb(p):{noCache:!1,noStore:!1};if(!C.noStore){let F={content:g,timestamp:Date.now(),etag:u||void 0,lastModified:D||void 0,maxAge:C.maxAge};if(!C.noCache||Eb(F))ln.set(n,F)}return{content:g,fromCache:!1}};var Va=d("module-lazy",{src:Bn},(n,{first:b})=>{let a=y(""),m=x(async(o)=>{let g=n.src.value;if(n.src.error||!g)return a.set(n.src.error??"No URL provided"),"";try{a.set(""),n.querySelector(".loading")?.remove();let{content:p}=await Kn(g,o);return p}catch(p){return a.set(p instanceof Error?p.message:String(p)),""}});return[fn(m),b("card-callout",[R(()=>!!a.get()||m.get()===E),bn("danger",()=>!a.get())],"Needed to display loading state and error messages."),b(".error",k(a),"Needed to display error messages.")]});var Xa=d("module-todo",{active:V("form-checkbox:not([checked])"),completed:V("form-checkbox[checked]")},(n,{first:b,useElement:a})=>{let m=a("form-textbox","Needed to enter a new todo item."),o=a("template","Needed to define the list item template."),g=a("ol","Needed to display the list of todos."),p=a("form-radiogroup");return[b("basic-button.submit",[Q({disabled:()=>!m.length})]),b("form",[c("submit",({event:u})=>{u.preventDefault();let D=m.value.trim();if(!D)return;let C=document.importNode(o.content,!0).firstElementChild;if(!(C instanceof HTMLLIElement))throw new Error("Invalid template for list item; expected <li>");C.querySelector("slot")?.replaceWith(D),g.append(C),m.clear()})]),b("ol",[Y("filter",()=>p?.value||"all"),c("click",({event:u})=>{let D=u.target;if(D.closest("button"))D.closest("li").remove()})]),b("basic-pluralize",[Q({count:()=>n.active.length})]),b("basic-button.clear-completed",[Q({disabled:()=>!n.completed.length,badge:()=>n.completed.length>0?String(n.completed.length):""}),c("click",()=>{let u=Array.from(n.querySelectorAll("ol li"));for(let D=u.length-1;D>=0;D--)if(u[D].querySelector("form-checkbox")?.checked)u[D].remove()})])]});var fa=d("rating-stars",{value:i()},(n,{all:b})=>{let a=(m)=>parseInt(m.dataset.key||"0");return[In("change-rating","value"),b("input",[O("checked",(m)=>n.value===a(m)),c("change",({event:m,target:o})=>{m.stopPropagation();let g=parseInt(o.value);n.value=g+1})]),b(".label",[k((m)=>a(m)<=n.value?"\u2605":"\u2606")])]});var Wa=d("rating-feedback",{},(n,{all:b,first:a,useElement:m})=>{let o=y(0),g=y(!0),p=y(!1),u=m(".feedback");return m("rating-stars","Needed for stars rating."),[c("change-rating",({event:D})=>{o.set(D.detail)}),c("submit",({event:D})=>{D.preventDefault(),p.set(!0),console.log("Feedback submitted")}),a(".hide",[c("click",()=>{if(u)u.hidden=!0})]),a("textarea",[c("input",({target:D})=>{g.set(D.value.trim()==="")})]),a(".feedback",[R(()=>!p.get()&&!!o.get())]),b(".feedback p",[R((D)=>o.get()===parseInt(D.dataset.key||"0"))]),a("basic-button",[Q({disabled:g})])]});var Ja=d("calc-table",{columns:i(),rows:i()},(n,{all:b,first:a})=>{let o=n.querySelector(".calc-table-row"),g=n.querySelector(".calc-table-colhead"),p=n.querySelector(".calc-table-cell");if(!o||!g||!p)throw new Error("Missing template elements");let u=new Map;for(let C=0;C<n.columns;C++)u.set("ABCDEFGHIJKLMNOPQRSTUVWXYZ"[C],y(0));let D=(C)=>{return Array.from(n.querySelectorAll(`tbody input[data-key="${C}"]`)).map((F)=>Number.isFinite(F.valueAsNumber)?F.valueAsNumber:0).reduce((F,P)=>F+P,0)};return[O("rows",()=>n.querySelector(".rows form-spinbutton")?.value),O("columns",()=>n.querySelector(".columns form-spinbutton")?.value),a("tbody",Z((C)=>n.rows-C.querySelectorAll("tr").length,{position:"beforeend",create:(C)=>{let F=document.importNode(o.content,!0).firstElementChild;if(!(F instanceof HTMLTableRowElement))throw new Error(`Expected <tr> as root in table row template, got ${F}`);let P=String(C.querySelectorAll("tr").length+1);return F.dataset.key=P,F.querySelector("slot")?.replaceWith(document.createTextNode(P)),F},resolve:()=>{for(let[C,F]of u)F.set(D(C))}})),a("thead tr",Z((C)=>n.columns-(C.querySelectorAll("th").length-1),{position:"beforeend",create:(C)=>{let F=document.importNode(g.content,!0).firstElementChild;if(!(F instanceof HTMLTableCellElement))throw new Error(`Expected <th> as root in column header template, got ${F}`);let P="ABCDEFGHIJKLMNOPQRSTUVWXYZ"[C.querySelectorAll("th").length-1];return u.set(P,y(0)),F.querySelector("slot")?.replaceWith(document.createTextNode(P)),F}})),b("tbody tr",Z((C)=>n.columns-C.querySelectorAll("td").length,{position:"beforeend",create:(C)=>{let F=document.importNode(p.content,!0).firstElementChild;if(!(F instanceof HTMLTableCellElement))throw new Error(`Expected <td> as root in cell template, got ${F}`);let P=C.dataset.key,N="ABCDEFGHIJKLMNOPQRSTUVWXYZ"[C.querySelectorAll("td").length],T=F.querySelector("input");if(!T)throw new Error("No input found in cell template");return T.dataset.key=N,F.querySelector("slot")?.replaceWith(document.createTextNode(`${N}${P}`)),F}})),a("tfoot tr",Z((C)=>n.columns-C.querySelectorAll("td").length,{position:"beforeend",create:(C)=>{let F=document.createElement("td"),P="ABCDEFGHIJKLMNOPQRSTUVWXYZ"[C.querySelectorAll("td").length];return F.dataset.key=P,F}})),b("tbody input",c("change",(C)=>{let F=C.target?.dataset.key;u.get(F)?.set(D(F))})),b("tfoot td",k((C)=>String(u.get(C.dataset.key).get())))]}); //# debugId=54CA885CFDBAAA3564756E2164756E21