@pure-ds/storybook 0.7.58 → 0.7.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/pds-reference.json +4 -3
- package/package.json +2 -2
- package/public/assets/js/app.js +1 -1
- package/public/assets/js/pds-autocomplete.js +3 -3
- package/public/assets/pds/core/pds-autocomplete.js +3 -3
- package/src/js/pds-autocomplete.js +5 -5
- package/src/js/pds.d.ts +10 -0
- package/src/js/pds.js +2 -2
- package/stories/enhancements/Dropdowns.stories.js +645 -0
- package/stories/reference/pds-object-docs.js +20 -1
- package/stories/utils/PdsHtml.stories.js +7 -1
- package/stories/utils/State.stories.js +26 -1
package/dist/pds-reference.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-03-
|
|
2
|
+
"generatedAt": "2026-03-28T12:12:10.967Z",
|
|
3
3
|
"sources": {
|
|
4
4
|
"customElements": "custom-elements.json",
|
|
5
5
|
"ontology": "src\\js\\pds-core\\pds-ontology.js",
|
|
@@ -9153,7 +9153,7 @@
|
|
|
9153
9153
|
"storyTitle": "PDS/DOM Building",
|
|
9154
9154
|
"category": "PDS",
|
|
9155
9155
|
"name": "DOM Building",
|
|
9156
|
-
"description": "Build DOM with the html template marker using vanilla JavaScript, including Lit-style bindings without a Lit dependency.",
|
|
9156
|
+
"description": "Experimental API. Build DOM with the html template marker using vanilla JavaScript, including Lit-style bindings without a Lit dependency.",
|
|
9157
9157
|
"tags": [
|
|
9158
9158
|
"api",
|
|
9159
9159
|
"autodocs",
|
|
@@ -9280,8 +9280,9 @@
|
|
|
9280
9280
|
"storyTitle": "PDS/State Management",
|
|
9281
9281
|
"category": "PDS",
|
|
9282
9282
|
"name": "State Management",
|
|
9283
|
-
"description":
|
|
9283
|
+
"description": "Experimental API. Reactive state helpers for manual render loops, automatic re-rendering, partial binding updates, and state change events.",
|
|
9284
9284
|
"tags": [
|
|
9285
|
+
"experimental",
|
|
9285
9286
|
"reactive",
|
|
9286
9287
|
"state",
|
|
9287
9288
|
"utilities"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pure-ds/storybook",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.60",
|
|
4
4
|
"description": "Storybook showcase for Pure Design System with live configuration",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"pds:build-icons": "pds-build-icons"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"@pure-ds/core": "^0.7.
|
|
41
|
+
"@pure-ds/core": "^0.7.60"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|
package/public/assets/js/app.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var mt=Object.defineProperty;var ht=(e,t)=>()=>(e&&(t=e(e=0)),t);var De=(e,t)=>{for(var n in t)mt(e,n,{get:t[n],enumerable:!0})};var Ie={};De(Ie,{AutoDefiner:()=>he});async function Pt(...e){let t={};e.length&&typeof e[e.length-1]=="object"&&(t=e.pop()||{});let n=e,{baseURL:o,mapper:i=p=>`${p}.js`,onError:r=(p,c)=>console.error(`[defineWebComponents] ${p}:`,c)}=t,d=o?new URL(o,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),S=p=>p.toLowerCase().replace(/(^|-)([a-z])/g,(c,f,A)=>A.toUpperCase()),L=async p=>{try{if(customElements.get(p))return{tag:p,status:"already-defined"};let c=i(p),A=await import(c instanceof URL?c.href:new URL(c,d).href),m=A?.default??A?.[S(p)];if(!m){if(customElements.get(p))return{tag:p,status:"self-defined"};throw new Error(`No export found for ${p}. Expected default export or named export "${S(p)}".`)}return customElements.get(p)?{tag:p,status:"race-already-defined"}:(customElements.define(p,m),{tag:p,status:"defined"})}catch(c){throw r(p,c),c}};return Promise.all(n.map(L))}var he,Fe=ht(()=>{he=class{constructor(t={}){let{baseURL:n,mapper:o,onError:i,predicate:r=()=>!0,attributeModule:d="data-module",root:S=document,scanExisting:L=!0,debounceMs:p=16,observeShadows:c=!0,enhancers:f=[],patchAttachShadow:A=!0}=t,m=new Set,E=new Set,j=new Set,a=new Map,l=new WeakMap,h=new WeakMap,u=0,y=!1,_=null,R=g=>{if(!g||!f.length)return;let w=h.get(g);w||(w=new Set,h.set(g,w));for(let b of f)if(!(!b.selector||!b.run)&&!w.has(b.selector))try{g.matches&&g.matches(b.selector)&&(b.run(g),w.add(b.selector))}catch(k){console.warn(`[AutoDefiner] Error applying enhancer for selector "${b.selector}":`,k)}},x=(g,w)=>{if(!y&&!(!g||!g.includes("-"))&&!customElements.get(g)&&!E.has(g)&&!j.has(g)){if(w&&w.getAttribute){let b=w.getAttribute(d);b&&!a.has(g)&&a.set(g,b)}m.add(g),P()}},P=()=>{u||(u=setTimeout(Pe,p))},T=g=>{if(g){if(g.nodeType===1){let w=g,b=w.tagName?.toLowerCase();b&&b.includes("-")&&!customElements.get(b)&&r(b,w)&&x(b,w),R(w),c&&w.shadowRoot&&ae(w.shadowRoot)}g.querySelectorAll&&g.querySelectorAll("*").forEach(w=>{let b=w.tagName?.toLowerCase();b&&b.includes("-")&&!customElements.get(b)&&r(b,w)&&x(b,w),R(w),c&&w.shadowRoot&&ae(w.shadowRoot)})}},ae=g=>{if(!g||l.has(g))return;T(g);let w=new MutationObserver(b=>{for(let k of b)k.addedNodes?.forEach(z=>{T(z)}),k.type==="attributes"&&k.target&&T(k.target)});w.observe(g,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[d,...f.map(b=>b.selector).filter(b=>b.startsWith("data-"))]}),l.set(g,w)};async function Pe(){if(clearTimeout(u),u=0,!m.size)return;let g=Array.from(m);m.clear(),g.forEach(w=>E.add(w));try{let w=b=>a.get(b)??(o?o(b):`${b}.js`);await Pt(...g,{baseURL:n,mapper:w,onError:(b,k)=>{j.add(b),i?.(b,k)}})}catch{}finally{g.forEach(w=>E.delete(w))}}let ke=S===document?document.documentElement:S,Re=new MutationObserver(g=>{for(let w of g)w.addedNodes?.forEach(b=>{T(b)}),w.type==="attributes"&&w.target&&T(w.target)});if(Re.observe(ke,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[d,...f.map(g=>g.selector).filter(g=>g.startsWith("data-"))]}),c&&A&&Element.prototype.attachShadow){let g=Element.prototype.attachShadow;Element.prototype.attachShadow=function(b){let k=g.call(this,b);if(b&&b.mode==="open"){ae(k);let z=this.tagName?.toLowerCase();z&&z.includes("-")&&!customElements.get(z)&&x(z,this)}return k},_=()=>Element.prototype.attachShadow=g}return L&&T(ke),{stop(){y=!0,Re.disconnect(),_&&_(),u&&(clearTimeout(u),u=0),l.forEach(g=>g.disconnect())},flush:Pe}}static async define(...t){let n={};t.length&&typeof t[t.length-1]=="object"&&(n=t.pop()||{});let o=t,{baseURL:i,mapper:r=c=>`${c}.js`,onError:d=(c,f)=>console.error(`[defineWebComponents] ${c}:`,f)}=n,S=i?new URL(i,typeof location<"u"?location.href:import.meta.url):new URL("./",import.meta.url),L=c=>c.toLowerCase().replace(/(^|-)([a-z])/g,(f,A,m)=>m.toUpperCase()),p=async c=>{try{if(customElements.get(c))return{tag:c,status:"already-defined"};let f=r(c),m=await import(f instanceof URL?f.href:new URL(f,S).href),E=m?.default??m?.[L(c)];if(!E){if(customElements.get(c))return{tag:c,status:"self-defined"};throw new Error(`No export found for ${c}. Expected default export or named export "${L(c)}".`)}return customElements.get(c)?{tag:c,status:"race-already-defined"}:(customElements.define(c,E),{tag:c,status:"defined"})}catch(f){throw d(c,f),f}};return Promise.all(o.map(p))}}});var le=class extends EventTarget{constructor(){super(),this.mode=null,this.compiled=null,this.log=()=>{},this.logHandler=null}},Ce="__PURE_DS_PDS_SINGLETON__",de=typeof globalThis<"u"?globalThis:window,ce=de?.[Ce],s=ce&&typeof ce.addEventListener=="function"?ce:new le;de&&(de[Ce]=s);typeof s.log!="function"&&(s.log=(e="log",t,...n)=>{if(typeof console>"u")return;let o=typeof console[e]=="function"?console[e].bind(console):typeof console.log=="function"?console.log.bind(console):null;o&&(n.length>0?o(t,...n):o(t))});typeof s.logHandler!="function"&&(s.logHandler=null);var ue=class{constructor(){this._mode="static",this._staticPaths={tokens:"/assets/pds/styles/pds-tokens.css.js",primitives:"/assets/pds/styles/pds-primitives.css.js",components:"/assets/pds/styles/pds-components.css.js",utilities:"/assets/pds/styles/pds-utilities.css.js",styles:"/assets/pds/styles/pds-styles.css.js"}}setLiveMode(){this._mode="live"}setStaticMode(t={}){this._mode="static",this._staticPaths={...this._staticPaths,...t}}async getStylesheet(t){if(this._mode==="live")return null;try{return(await import(this._staticPaths[t]))[t]}catch(n){s.log("error",`Registry: failed to load static ${t}:`,n),s.log("error",`Registry: looking for ${this._staticPaths[t]}`),s.log("error","Registry: make sure you've run 'npm run pds:build' and configured PDS.start() with the correct static.root path");let o=new CSSStyleSheet;return o.replaceSync("/* Failed to load "+t+" */"),o}}get mode(){return this._mode}get isLive(){return this._mode==="live"}},$=new ue;async function Te(e,t=[],n=null){try{let o=n?.primitivesStylesheet?n.primitivesStylesheet:await $.getStylesheet("primitives");e.adoptedStyleSheets=[o,...t]}catch(o){let i=e.host?.tagName?.toLowerCase()||"unknown";s.log("error",`Adopter: <${i}> failed to adopt primitives:`,o),e.adoptedStyleSheets=t}}async function ze(e,t=["primitives"],n=[],o=null){let i=Array.isArray(n)?n.filter(Boolean):[];if(i.length){let d=(Array.isArray(e.adoptedStyleSheets)?e.adoptedStyleSheets:[]).filter(S=>!i.includes(S));e.adoptedStyleSheets=[...d,...i]}try{let d=(await Promise.all(t.map(async S=>{if(o)switch(S){case"tokens":return o.tokensStylesheet;case"primitives":return o.primitivesStylesheet;case"components":return o.componentsStylesheet;case"utilities":return o.utilitiesStylesheet;default:break}return $.getStylesheet(S)}))).filter(S=>S!==null);e.adoptedStyleSheets=[...d,...i]}catch(r){let d=e.host?.tagName?.toLowerCase()||"unknown";s.log("error",`Adopter: <${d}> failed to adopt layers:`,r),e.adoptedStyleSheets=i}}function $e(e){let t=new CSSStyleSheet;return t.replaceSync(e),t}var Ue={FontWeights:{light:300,normal:400,medium:500,semibold:600,bold:700},LineHeights:{tight:1.25,normal:1.5,relaxed:1.75},BorderWidths:{hairline:.5,thin:1,medium:2,thick:3},RadiusSizes:{none:0,small:4,medium:8,large:16,xlarge:24,xxlarge:32},ShadowDepths:{none:"none",light:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",medium:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",deep:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",extreme:"0 25px 50px -12px rgba(0, 0, 0, 0.25)"},TransitionSpeeds:{fast:150,normal:250,slow:350},AnimationEasings:{linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},TouchTargetSizes:{compact:36,standard:44,comfortable:48,spacious:56},LinkStyles:{inline:"inline",block:"block",button:"button"},FocusStyles:{ring:"ring",outline:"outline",border:"border",glow:"glow"},TabSizes:{compact:2,standard:4,wide:8},SelectIcons:{chevron:"chevron",arrow:"arrow",caret:"caret",none:"none"},IconSizes:{xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64,"3xl":96}};var me={};De(me,{deepMerge:()=>Me,enQueue:()=>gt,escapeForRegExp:()=>St,fragmentFromTemplateLike:()=>pe,humanizeIdentifier:()=>Et,isObject:()=>K,isUrl:()=>bt,openCenteredWindow:()=>Lt,parseFragment:()=>G,parseHTML:()=>fe,throttle:()=>yt,withTimeout:()=>wt});function K(e){return e&&typeof e=="object"&&!Array.isArray(e)}function Me(e,t){let n={...e};return K(e)&&K(t)&&Object.keys(t).forEach(o=>{K(t[o])?o in e?n[o]=Me(e[o],t[o]):Object.assign(n,{[o]:t[o]}):Object.assign(n,{[o]:t[o]})}),n}function pe(e){let t=Array.isArray(e?.strings)?e.strings:[],n=Array.isArray(e?.values)?e.values:[],o=new Set,i=[],r=/(\s)(\.[\w-]+)=["']?\s*$/,d=/(\s)(@[\w-]+)=["']?\s*$/,S=/(\s)(\?[\w-]+)=["']?\s*$/,L=/(\s)([\w:-]+)=["']?\s*$/,p=/=["']\s*$/,c=!1;for(let a=0;a<t.length;a+=1){let l=t[a]??"";if(c&&(l=l.replace(/^["']/,""),c=!1),a<n.length){let h=`pds-val-${a}`,u=l.match(r),y=l.match(d),_=l.match(S),R=l.match(L);if(u){let x=u[2].slice(1);c=p.test(t[a]??""),l=l.replace(r,`$1data-pds-bind-${a}="prop:${x}:${h}"`),o.add(a)}else if(y){let x=y[2].slice(1);c=p.test(t[a]??""),l=l.replace(d,`$1data-pds-bind-${a}="event:${x}:${h}"`),o.add(a)}else if(_){let x=_[2].slice(1);c=p.test(t[a]??""),l=l.replace(S,`$1data-pds-bind-${a}="boolean:${x}:${h}"`),o.add(a)}else if(R){let x=R[2];c=p.test(t[a]??""),l=l.replace(L,`$1data-pds-bind-${a}="attr:${x}:${h}"`),o.add(a)}}i.push(l),a<n.length&&!o.has(a)&&i.push(`<!--pds-val-${a}-->`)}let f=document.createElement("template");f.innerHTML=i.join("");let A=(a,l)=>{let h=a.parentNode;if(!h)return;if(l==null){h.removeChild(a);return}let u=y=>{if(y!=null){if(y instanceof Node){h.insertBefore(y,a);return}if(Array.isArray(y)){y.forEach(_=>u(_));return}h.insertBefore(document.createTextNode(String(y)),a)}};u(l),h.removeChild(a)},m=document.createTreeWalker(f.content,NodeFilter.SHOW_COMMENT),E=[];for(;m.nextNode();){let a=m.currentNode;a?.nodeValue?.startsWith("pds-val-")&&E.push(a)}return E.forEach(a=>{let l=Number(a.nodeValue.replace("pds-val-",""));A(a,n[l])}),f.content.querySelectorAll("*").forEach(a=>{[...a.attributes].forEach(l=>{if(!l.name.startsWith("data-pds-bind-"))return;let h=l.value.indexOf(":"),u=l.value.lastIndexOf(":");if(h<=0||u<=h){a.removeAttribute(l.name);return}let y=l.value.slice(0,h),_=l.value.slice(h+1,u),R=l.value.slice(u+1),x=Number(String(R).replace("pds-val-","")),P=n[x];if(!_||!Number.isInteger(x)){a.removeAttribute(l.name);return}y==="prop"?a[_]=P:y==="event"?(typeof P=="function"||P&&typeof P.handleEvent=="function")&&a.addEventListener(_,P):y==="boolean"?P?a.setAttribute(_,""):a.removeAttribute(_):y==="attr"&&(P==null||P===!1?a.removeAttribute(_):a.setAttribute(_,String(P))),a.removeAttribute(l.name)})}),f.content}function G(e,...t){if(Array.isArray(e)&&Object.prototype.hasOwnProperty.call(e,"raw"))return pe({strings:Array.from(e),values:t});if(Array.isArray(e?.strings)&&Array.isArray(e?.values))return pe({strings:e.strings,values:e.values});let o=document.createElement("template");return o.innerHTML=String(e??""),o.content}function fe(e,...t){return G(e,...t).childNodes}function yt(e,t=100){let n;return function(...i){let r=()=>{clearTimeout(n),e(...i)};clearTimeout(n),n=setTimeout(r,t)}}function gt(e){setTimeout(e,0)}function bt(e){try{if(typeof e!="string"||e.indexOf(`
|
|
2
2
|
`)!==-1||e.indexOf(" ")!==-1||e.startsWith("#/"))return!1;let t=new URL(e,window.location.origin);return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function wt(e,t,n="Operation"){return!t||t<=0?e:new Promise((o,i)=>{let r=setTimeout(()=>{i(new Error(`${n} timed out after ${t}ms`))},t);Promise.resolve(e).then(d=>{clearTimeout(r),o(d)}).catch(d=>{clearTimeout(r),i(d)})})}function St(e){return String(e).replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Lt(e,t,n){let o=window.screen.width/2-t/2,i=window.screen.height/2-n/2;return window.open(e,"",`toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=${t}, height=${n}, top=${i}, left=${o}`)}function Et(e){if(e==null)return"";let t=String(e).trim();return t?t.replace(/([a-z0-9])([A-Z])/g,"$1 $2").replace(/[_-]+/g," ").replace(/\s+/g," ").trim():""}var Ne="pds",_t=/^([a-z][a-z0-9+\-.]*:)?\/\//i,Oe=/^[a-z]:/i;function N(e=""){return e.endsWith("/")?e:`${e}/`}function vt(e="",t=Ne){let n=e.replace(/\/+$/,"");return new RegExp(`(?:^|/)${t}$`,"i").test(n)?n:`${n}/${t}`}function At(e){return e.replace(/^\.\/+/,"")}function xt(e){return Oe.test(e)?e.replace(Oe,"").replace(/^\/+/,""):e}function jt(e){return e.startsWith("public/")?e.substring(7):e}function q(e,t={}){let n=t.segment||Ne,o=t.defaultRoot||`/assets/${n}/`,i=e?.public&&e.public?.root||e?.static&&e.static?.root||null;if(!i||typeof i!="string")return N(o);let r=i.trim();return r?(r=r.replace(/\\/g,"/"),r=vt(r,n),r=N(r),_t.test(r)?r:(r=At(r),r=xt(r),r.startsWith("/")||(r=jt(r),r.startsWith("/")||(r=`/${r}`),r=r.replace(/\/+/g,(d,S)=>S===0?d:"/")),N(r))):N(o)}var ye=null;async function kt(){return ye||(ye=Promise.resolve().then(()=>(Fe(),Ie)).then(e=>e?.AutoDefiner||e?.default?.AutoDefiner||e?.default).then(e=>{if(typeof e!="function")throw new Error("AutoDefiner constructor not found in pure-web/auto-definer");return e})),ye}var Rt=/^[a-z][a-z0-9+\-.]*:\/\//i,I=(()=>{try{return import.meta.url}catch{return}})(),J=e=>typeof e=="string"&&e.length&&!e.endsWith("/")?`${e}/`:e;function V(e,t={}){if(!e||Rt.test(e))return e;let{preferModule:n=!0}=t,o=()=>{if(!I)return null;try{return new URL(e,I).href}catch{return null}},i=()=>{if(typeof window>"u"||!window.location?.origin)return null;try{return new URL(e,window.location.origin).href}catch{return null}};return(n?o()||i():i()||o())||e}var We=(()=>{if(I)try{let e=new URL(I);if(/\/public\/assets\/js\//.test(e.pathname))return new URL("../pds/",I).href}catch{return}})(),Be=!1;function He(e){Be||typeof document>"u"||(Be=!0,e.addEventListener("pds:ready",t=>{let n=t.detail?.mode;n&&document.documentElement.classList.add(`pds-${n}`,"pds-ready")}))}function Ke({manageTheme:e,themeStorageKey:t,applyResolvedTheme:n,setupSystemListenerIfNeeded:o}){let i="light",r=null;if(e&&typeof window<"u"){try{r=localStorage.getItem(t)||null}catch{r=null}try{n?.(r),o?.(r)}catch{}r?r==="system"?i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":i=r:i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return{resolvedTheme:i,storedTheme:r}}function Q(e,{resolvePublicAssetURL:t}){let n=!!(e?.public?.root||e?.static?.root),o=t(e);return!n&&We&&(o=We),J(V(o))}async function Ge(e,{baseEnhancers:t=[]}={}){let{autoDefineBaseURL:n="/auto-define/",autoDefinePreload:o=[],autoDefineMapper:i=null,enhancers:r=[],autoDefineOverrides:d=null,autoDefinePreferModule:S=!0}=e,L=(()=>{let c=new Map;return(t||[]).forEach(f=>c.set(f.selector,f)),(r||[]).forEach(f=>c.set(f.selector,f)),Array.from(c.values())})(),p=null;if(typeof window<"u"&&typeof document<"u"){let c=await kt(),f=u=>{switch(u){case"pds-tabpanel":return"pds-tabstrip.js";default:return`${u}.js`}},{mapper:A,enhancers:m,...E}=d&&typeof d=="object"?d:{},j=m?Array.isArray(m)?m:typeof m=="object"?Object.values(m):[]:[],a=(()=>{let u=new Map;return(L||[]).forEach(y=>{y?.selector&&u.set(y.selector,y)}),(j||[]).forEach(y=>{if(!y?.selector)return;let _=u.get(y.selector)||null;u.set(y.selector,{..._||{},...y,run:typeof y?.run=="function"?y.run:_?.run})}),Array.from(u.values())})(),h={baseURL:n&&J(V(n,{preferModule:S})),predefine:o,scanExisting:!0,observeShadows:!0,patchAttachShadow:!0,debounceMs:16,enhancers:a,onError:(u,y)=>{if(typeof u=="string"&&u.startsWith("pds-")){let R=["pds-form","pds-drawer"].includes(u),x=y?.message?.includes("#pds/lit")||y?.message?.includes("Failed to resolve module specifier");R&&x?s.log("error",`\u274C PDS component <${u}> requires Lit but #pds/lit is not in import map.
|
|
3
|
-
See: https://github.com/Pure-Web-Foundation/pure-ds/blob/main/readme.md#lit-components-not-working`):s.log("warn",`\u26A0\uFE0F PDS component <${u}> not found. Assets may not be installed.`)}else s.log("error",`\u274C Auto-define error for <${u}>:`,y)},...E,mapper:u=>{if(customElements.get(u))return null;if(typeof i=="function")try{let y=i(u);return y===void 0?f(u):y}catch(y){return s.log("warn","Custom autoDefine.mapper error; falling back to default:",y?.message||y),f(u)}return f(u)}};p=new c(h),o.length>0&&typeof c.define=="function"&&await c.define(...o,{baseURL:n,mapper:h.mapper,onError:h.onError})}return{autoDefiner:p,mergedEnhancers:L}}var ge=["light","dark"],be=new Set(ge);function Dt(e){let n=(Array.isArray(e?.themes)?e.themes.map(o=>String(o).toLowerCase()):ge).filter(o=>be.has(o));return n.length?n:ge}function we(e,{preferDocument:t=!0}={}){let n=String(e||"").toLowerCase();if(be.has(n))return n;if(t&&typeof document<"u"){let o=document.documentElement?.getAttribute("data-theme");if(be.has(o))return o}return typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function qe(e,t){let n=we(t);return Dt(e).includes(n)}var Ct=new Set(["log","warn","error","debug","info"]),Tt="__PURE_DS_PDS_SINGLETON__",Se=null,Le=null;function Ve(){try{let t=(typeof globalThis<"u"?globalThis:window)?.[Tt];if(t&&typeof t=="object")return t}catch{return null}return null}function zt(e){return!e||typeof e!="object"?null:{mode:e.mode==="live"||e.mode==="static"?e.mode:null,debug:e.debug===!0,thisArg:e.thisArg}}function $t(e){if(typeof e!="string")return"log";let t=e.toLowerCase();return Ct.has(t)?t:"log"}function Ut(){if(typeof Le=="function")try{let t=zt(Le());if(t)return t}catch{}let e=Ve();if(e){let t=e?.mode||e?.compiled?.mode||(e?.registry?.isLive?"live":"static"),n=(e?.debug||e?.currentConfig?.debug||e?.currentConfig?.design?.debug||e?.compiled?.debug||e?.compiled?.design?.debug||!1)===!0;return{mode:t,debug:n,thisArg:e}}return{mode:null,debug:!1}}function Mt(){if(typeof Se=="function")try{let t=Se();if(typeof t=="function")return t}catch{}let e=Ve();return typeof e?.logHandler=="function"?e.logHandler:null}function Je(e,t,...n){if(typeof console>"u")return;let o=typeof console[e]=="function"?console[e].bind(console):typeof console.log=="function"?console.log.bind(console):null;o&&(n.length>0?o(t,...n):o(t))}function Ot(e,t){let n=t?.debug===!0;return!(t?.mode==="static"&&!n||!n&&e!=="error"&&e!=="warn")}function Qe({getLogger:e,getContext:t}={}){Se=typeof e=="function"?e:null,Le=typeof t=="function"?t:null}function Ye(e="log",t,...n){let o=$t(e),i=Ut(),r=Mt();if(r)try{r.call(i?.thisArg,o,t,...n);return}catch(d){Je("error","Custom log handler failed:",d)}Ot(o,i)&&Je(o,t,...n)}var Y=class{constructor(t={},n=null){let o=t&&typeof t=="object"?t:{},i=n||(typeof document<"u"?document:new EventTarget),r=new WeakMap,d=m=>m.map(E=>String(E)).join("."),S,L=(m,E,j,a)=>{let l=d(m),h={property:E,path:l,value:j,oldValue:a};i.dispatchEvent(new CustomEvent(`change:${l}`,{detail:h,bubbles:!0,composed:!0})),i.dispatchEvent(new CustomEvent("change",{detail:{...h,state:S},bubbles:!0,composed:!0}))},p=(m,E)=>(typeof E=="function"&&i.addEventListener(m,E),S),c=(m,E)=>(typeof E=="function"&&i.removeEventListener(m,E),S),f=(m,E)=>{if(typeof E=="function"){let j=a=>{E(a),i.removeEventListener(m,j)};i.addEventListener(m,j)}return S},A=(m,E)=>{if(!m||typeof m!="object")return m;if(r.has(m))return r.get(m);let j=new Proxy(m,{get(a,l,h){if(l==="on")return p;if(l==="off")return c;if(l==="once")return f;let u=Reflect.get(a,l,h);return u&&typeof u=="object"?A(u,[...E,l]):u},set(a,l,h,u){let y=Reflect.get(a,l,u);return Object.is(y,h)?!0:Reflect.set(a,l,h,u)?(L([...E,l],l,h,y),!0):!1},deleteProperty(a,l){if(!Reflect.has(a,l))return!0;let h=a[l];return Reflect.deleteProperty(a,l)?(L([...E,l],l,void 0,h),!0):!1}});return r.set(m,j),j};return S=A(o,[]),S}};function Ze(e,t,n){if(!e||!t||typeof n!="object")return()=>{};let o={};return Object.entries(n).forEach(([i,r])=>{o[i]=d=>{typeof r=="function"&&r(e,d.detail.value,d.detail.oldValue)},t.on(`change:${i}`,o[i])}),()=>{Object.entries(o).forEach(([i,r])=>{t.off(`change:${i}`,r)})}}typeof s.initializing!="boolean"&&(s.initializing=!1);"currentPreset"in s||(s.currentPreset=null);typeof s.debug!="boolean"&&(s.debug=!1);"currentConfig"in s||(s.currentConfig=null);"compiled"in s||(s.compiled=null);typeof s.logHandler!="function"&&(s.logHandler=null);"mode"in s||(s.mode=null);var Z=null,X=null,ee=null,te=null,ne=null,oe=null,et="__pdsLocalizationRuntime";function U(){if(oe)return oe;let e=s?.[et];return e&&typeof e=="object"?(oe=e,e):null}function Nt(e){let t=e&&typeof e=="object"?e:null;oe=t,s[et]=t}Qe({getLogger:()=>typeof s.logHandler=="function"?s.logHandler:null,getContext:()=>{let e=s?.mode||s?.compiled?.mode||(s?.registry?.isLive?"live":"static"),t=(s?.debug||s?.currentConfig?.debug||s?.currentConfig?.design?.debug||s?.compiled?.debug||s?.compiled?.design?.debug||!1)===!0;return{mode:e,debug:t,thisArg:s}}});s.log=(e="log",t,...n)=>{Ye(e,t,...n)};var v={locale:"en",messages:{},hasProvider:!1},se=new Set;function tt(e){return!!e&&typeof e!="string"&&typeof e=="object"&&"strTag"in e}function nt(e=[]){let t="";for(let n=0;n<=e.length-1;n+=1)t+=e[n],n<e.length-1&&(t+=`{${n}}`);return t}function It(e,t){return String(e).replace(/\{(\d+)\}/g,(n,o)=>t(Number(o)))}function Ft(e){if(!e||typeof e!="object")return{};let t={};for(let[n,o]of Object.entries(e)){if(typeof o=="string"){t[n]=o;continue}o&&typeof o=="object"&&typeof o.content=="string"&&(t[n]=o.content)}return t}function Wt(e,...t){return{strTag:!0,strings:Array.from(e||[]),values:t,raw:Array.from(e?.raw||[])}}function Bt(e){if(!e)return"";if(tt(e)){let n=nt(e.strings||[]),o=v.messages[n]||n;return It(o,i=>e.values?.[i])}let t=String(e);return v.messages[t]||t}function Ht(e){if(!e)return;let t=tt(e)?nt(e.strings||[]):String(e);typeof t=="string"&&t.length>0&&se.add(t)}function ot(e){if(!e||typeof e.msg!="function"||se.size===0)return;let t=Array.from(se);se.clear();for(let n of t)try{e.msg(n)}catch{}}async function W(){let e=U();return e||(ne||(ne=import(B("pds-localization.js")).then(n=>{if(typeof n?.msg!="function"||typeof n?.str!="function"||typeof n?.configureLocalization!="function"||typeof n?.loadLocale!="function"||typeof n?.setLocale!="function"||typeof n?.getLocalizationState!="function")throw new Error("Failed to load localization runtime exports");return Nt(n),ot(n),n}).catch(n=>{throw ne=null,n})),ne)}var M=(e,t={})=>{let n=U();return typeof n?.msg=="function"?n.msg(e,t):(Ht(e),Bt(e,t))},ie=(e,...t)=>{let n=U();return typeof n?.str=="function"?n.str(e,...t):Wt(e,...t)},re=(e=null)=>{let t=U();if(typeof t?.configureLocalization=="function")return t.configureLocalization(e);if(!e||typeof e!="object")return v.locale="en",v.messages={},v.hasProvider=!1,{locale:v.locale,messages:{...v.messages},hasProvider:v.hasProvider};typeof e.locale=="string"&&e.locale.trim()&&(v.locale=e.locale.trim()),Object.prototype.hasOwnProperty.call(e,"messages")&&(v.messages=Ft(e.messages));let n=!!(e.provider||e.translate||e.loadLocale||e.setLocale);return v.hasProvider=n,n&&W().then(o=>{o.configureLocalization(e),ot(o)}).catch(()=>{}),{locale:v.locale,messages:{...v.messages},hasProvider:v.hasProvider}},st=async e=>(await W()).loadLocale(e),rt=async(e,t={})=>(await W()).setLocale(e,t),it=()=>{let e=U();return typeof e?.getLocalizationState=="function"?e.getLocalizationState():{locale:v.locale,messages:{...v.messages},hasProvider:v.hasProvider}},at=(e={})=>{let t=U();if(typeof t?.createJSONLocalization=="function")return t.createJSONLocalization(e);let n=typeof e?.locale=="string"&&e.locale.trim()?e.locale.trim().toLowerCase():"en",o=Array.isArray(e?.locales)?e.locales.map(L=>String(L||"").trim().toLowerCase()).filter(Boolean):[],i=Array.from(new Set([n,...o])),r=null,d=async()=>(r||(r=W().then(L=>typeof L?.createJSONLocalization=="function"?L.createJSONLocalization(e):null).catch(()=>null)),r),S=async(L="loadLocale")=>{let p=await d();if(!p||typeof p!="object")return null;let c=p.provider;if(!c||typeof c!="object")return null;let f=c[L];return typeof f=="function"?f:L==="setLocale"&&typeof c.loadLocale=="function"?c.loadLocale:null};return{locale:n,locales:[...i],provider:{locales:[...i],async loadLocale(L={}){let p=await S("loadLocale");return typeof p!="function"?{}:p(L)},async setLocale(L={}){let p=await S("setLocale");return typeof p!="function"?{}:p(L)}}}};function B(e,t){return t&&typeof t=="string"?t:`${Q(s.currentConfig||{},{resolvePublicAssetURL:q})}core/${e}`}async function Kt(){return Array.isArray(s.defaultEnhancers)&&s.defaultEnhancers.length>0?s.defaultEnhancers:(te||(te=import(B("pds-enhancers.js",s.currentConfig?.enhancersURL)).then(t=>{let n=Array.isArray(t?.defaultPDSEnhancers)?t.defaultPDSEnhancers:[];return s.defaultEnhancers=n,n}).catch(t=>{throw te=null,t})),te)}async function Gt(){return typeof s.ask=="function"&&s.ask!==ct?s.ask:(X||(X=import(B("pds-ask.js",s.currentConfig?.askURL)).then(t=>{let n=t?.ask;if(typeof n!="function")throw new Error("Failed to load ask helper");return s.ask=n,n}).catch(t=>{throw X=null,t})),X)}async function H(){return typeof s.toast=="function"&&s.toast!==O?s.toast:(ee||(ee=import(B("pds-toast.js",s.currentConfig?.toastURL)).then(t=>{let n=t?.toast;if(typeof n!="function")throw new Error("Failed to load toast helper");return s.toast=n,n}).catch(t=>{throw ee=null,t})),ee)}async function ct(...e){return(await Gt())(...e)}async function O(...e){return(await H())(...e)}O.success=async(...e)=>(await H()).success(...e);O.error=async(...e)=>(await H()).error(...e);O.warning=async(...e)=>(await H()).warning(...e);O.info=async(...e)=>(await H()).info(...e);var Xe=function(e="log",t,...n){s.log(e,t,...n)};function _e(e){if(e==null)return e;if(typeof e=="function")return;if(typeof e!="object")return e;if(Array.isArray(e))return e.map(n=>_e(n)).filter(n=>n!==void 0);let t={};for(let[n,o]of Object.entries(e)){let i=_e(o);i!==void 0&&(t[n]=i)}return t}function lt(e,t=new WeakSet){if(!e||typeof e!="object"||t.has(e))return e;t.add(e),Object.freeze(e);for(let n of Object.keys(e))lt(e[n],t);return e}function ve(e){return e==null||typeof e!="object"?e:lt(structuredClone(_e(e)))}async function qt(e,t={}){if(t?.runtimeConfig===!1||typeof fetch!="function")return null;let n=t?.runtimeConfigURL||`${e}pds-runtime-config.json`;try{let o=await fetch(n,{cache:"no-store"});return o.ok?await o.json():null}catch{return null}}s.registry=$;s.enums=Ue;s.adoptLayers=ze;s.adoptPrimitives=Te;var Jt=fe;s.parse=Jt;var Ae=G;s.html=Ae;s.State=Y;s.bindState=Ze;s.createStylesheet=$e;s.isLiveMode=()=>$.isLive;s.ask=ct;s.toast=O;s.common=me;s.msg=M;s.str=ie;s.configureLocalization=re;s.loadLocale=st;s.setLocale=rt;s.getLocalizationState=it;s.createJSONLocalization=at;s.i18n={msg:M,str:ie,configure:re,loadLocale:st,setLocale:rt,getState:it,createJSONLocalization:at};s.AutoComplete=null;s.loadAutoComplete=async()=>{if(s.AutoComplete&&typeof s.AutoComplete.connect=="function")return s.AutoComplete;let e=B("pds-autocomplete.js",s.currentConfig?.autoCompleteURL);return Z||(Z=import(e).then(t=>{let n=t?.AutoComplete||t?.default?.AutoComplete||t?.default||null;if(!n)throw new Error("AutoComplete export not found in module");return s.AutoComplete=n,n}).catch(t=>{throw Z=null,t})),Z};function dt(e){let t=typeof CustomEvent=="function";try{let n=t?new CustomEvent("pds:ready",{detail:e}):new Event("pds:ready");s.dispatchEvent(n)}catch{}if(typeof document<"u")if(t){let n={detail:e,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:ready",n))}catch{}try{document.dispatchEvent(new CustomEvent("pds-ready",n))}catch{}}else{try{document.dispatchEvent(new Event("pds:ready"))}catch{}try{document.dispatchEvent(new Event("pds-ready"))}catch{}}}function ut(e={}){let t=typeof CustomEvent=="function",n={at:Date.now(),...e};try{let o=t?new CustomEvent("pds:config-changed",{detail:n}):new Event("pds:config-changed");s.dispatchEvent(o)}catch{}if(typeof document<"u")if(t){let o={detail:n,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:config-changed",o))}catch{}}else try{document.dispatchEvent(new Event("pds:config-changed"))}catch{}}var Ee="pure-ds-theme",C=null,F=null;function xe(e){try{if(typeof document>"u")return;let t="light";e?e==="system"?t=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t=e:t=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",document.documentElement.setAttribute("data-theme",t)}catch{}}function je(e){try{if(C&&F){try{typeof C.removeEventListener=="function"?C.removeEventListener("change",F):typeof C.removeListener=="function"&&C.removeListener(F)}catch{}C=null,F=null}if(e==="system"&&typeof window<"u"&&window.matchMedia){let t=window.matchMedia("(prefers-color-scheme: dark)"),n=o=>{let i=o?.matches===void 0?t.matches:o.matches;try{let r=i?"dark":"light";document.documentElement.setAttribute("data-theme",r),s.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:r,source:"system"}}))}catch{}};C=t,F=n,typeof t.addEventListener=="function"?t.addEventListener("change",n):typeof t.addListener=="function"&&t.addListener(n)}}catch{}}var Vt=Object.getOwnPropertyDescriptor(s,"theme");Vt||Object.defineProperty(s,"theme",{get(){try{return typeof window>"u"?null:localStorage.getItem(Ee)||null}catch{return null}},set(e){try{if(typeof window>"u")return;let t=s.currentConfig?.design||null,n=we(e);if(t&&!qe(t,n)){let o=t?.name||s.currentPreset?.name||s.currentConfig?.preset||"current preset";s.log("warn",`PDS theme "${n}" not supported by preset "${o}".`),s.dispatchEvent(new CustomEvent("pds:theme:blocked",{detail:{theme:e,resolvedTheme:n,preset:o}}));return}e==null?localStorage.removeItem(Ee):localStorage.setItem(Ee,e),xe(e),je(e),s.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:e,source:"api"}}))}catch{}}});s.defaultEnhancers=[];async function Qt(e){s.initializing=!0;try{let t=e&&e.mode||"live",{mode:n,...o}=e||{};s.mode=t,s.logHandler=typeof o?.log=="function"?o.log:null,s.currentConfig=ve(o);let i=o&&typeof o.localization=="object"&&o.localization?o.localization:null;i?(await W(),re(i)):re(null);let r;if(t==="static")r=await Yt(o);else{let{localization:S,...L}=o||{},p=Q(L,{resolvePublicAssetURL:q}),c=L?.managerURL||L?.public?.managerURL||L?.manager?.url||new URL("core/pds-manager.js",p).href||new URL("./pds-manager.js",import.meta.url).href,{startLive:f}=await import(c);r=await f(s,L,{emitReady:dt,emitConfigChanged:ut,applyResolvedTheme:xe,setupSystemListenerIfNeeded:je})}s.compiled=ve(r?.config||null);let d=s?.compiled?.design?.icons?.externalPath||"/assets/img/icons/";return s.log("info",`startup ready; external icon path: ${d}`),r}finally{s.initializing=!1}}s.start=Qt;async function Yt(e){if(!e||typeof e!="object")throw new Error("PDS.start({ mode: 'static', ... }) requires a valid configuration object");let t=e.applyGlobalStyles??!0,n=e.manageTheme??!0,o=e.themeStorageKey??"pure-ds-theme",i=e.staticPaths??{},r=Q(e,{resolvePublicAssetURL:q}),d=e&&e.autoDefine||null,S;d&&d.baseURL?S=J(V(d.baseURL,{preferModule:!1})):S=`${r}components/`;let L=d&&Array.isArray(d.predefine)&&d.predefine||[],p=d&&typeof d.mapper=="function"&&d.mapper||null;try{He(s);let{resolvedTheme:c}=Ke({manageTheme:n,themeStorageKey:o,applyResolvedTheme:xe,setupSystemListenerIfNeeded:je}),f=await qt(r,e),A=Array.isArray(e?.enhancers)?e.enhancers:e?.enhancers&&typeof e.enhancers=="object"?Object.values(e.enhancers):[],m=f?.config?{...f.config,...e,design:e?.design||f.config.design,preset:e?.preset||f.config.preset}:{...e},E={tokens:`${r}styles/pds-tokens.css.js`,primitives:`${r}styles/pds-primitives.css.js`,components:`${r}styles/pds-components.css.js`,utilities:`${r}styles/pds-utilities.css.js`,styles:`${r}styles/pds-styles.css.js`},j=f?.paths||{};if(i={...E,...j,...i},s.registry.setStaticMode(i),t&&typeof document<"u")try{let h=await s.registry.getStylesheet("styles");if(h){h._pds=!0;let u=(document.adoptedStyleSheets||[]).filter(y=>y._pds!==!0);document.adoptedStyleSheets=[...u,h],ut({mode:"static",source:"static:styles-applied"})}}catch(h){Xe.call(s,"warn","Failed to apply static styles:",h)}let a=null,l=[];try{let h=await Kt(),u=await Ge({autoDefineBaseURL:S,autoDefinePreload:L,autoDefineMapper:p,enhancers:A,autoDefineOverrides:d||null,autoDefinePreferModule:!(d&&d.baseURL)},{baseEnhancers:h});a=u.autoDefiner,l=u.mergedEnhancers||[]}catch(h){Xe.call(s,"error","\u274C Failed to initialize AutoDefiner/Enhancers (static):",h)}return s.compiled=ve({mode:"static",...m,theme:c,enhancers:l}),dt({mode:"static",config:m,theme:c,autoDefiner:a}),{config:m,theme:c,autoDefiner:a}}catch(c){throw s.dispatchEvent(new CustomEvent("pds:error",{detail:{error:c}})),c}}var Zt=s.createJSONLocalization({locale:"en-US",locales:["en-US","nl-NL"],aliases:{en:["en-US"],nl:["nl-NL"]},basePath:"/assets/locales"}),pt={mode:"live",liveEdit:!0,preset:"default",localization:Zt,autoDefine:{predefine:["pds-icon","pds-drawer","pds-toaster"]},log(e,t,...n){(this?.mode||this?.compiled?.mode||"live")!=="static"&&(typeof console[e]=="function"?console[e]:console.log)(`[PDS] ${t}`,...n)}};var D={name:"@pure-ds/core",shortname:"pds",version:"0.7.58",description:"Why develop a Design System when you can generate one?",repository:{type:"git",url:"git+https://github.com/Pure-Web-Foundation/pure-ds.git"},bugs:{url:"https://github.com/Pure-Web-Foundation/pure-ds/issues"},homepage:"https://puredesignsystem.z6.web.core.windows.net/",keywords:["design-system","css","web-components","lit","constructable-stylesheets","tokens","utilities","a11y"],type:"module",main:"./public/assets/pds/core.js",module:"./public/assets/pds/core.js",types:"./dist/types/pds.d.ts",bin:{"pds-build":"packages/pds-cli/bin/pds-static.js","pds-sync-assets":"packages/pds-cli/bin/sync-assets.js","pds-build-icons":"packages/pds-cli/bin/pds-build-icons.js","pds-import":"packages/pds-cli/bin/pds-import.js","pds-setup-copilot":"packages/pds-cli/bin/pds-setup-copilot.js","pds-setup-mcp":"packages/pds-cli/bin/pds-setup-mcp.js","pds-init-config":"packages/pds-cli/bin/pds-init-config.js","pds-bootstrap":"packages/pds-cli/bin/pds-bootstrap.js","pds-mcp-server":"packages/pds-cli/bin/pds-mcp-server.js","pds-mcp-health":"packages/pds-cli/bin/pds-mcp-health.js","pds-mcp-eval":"packages/pds-cli/bin/pds-mcp-eval.js"},exports:{".":{types:"./src/js/pds.d.ts",import:"./public/assets/pds/core.js"},"./localization":{types:"./dist/types/src/js/pds-localization.d.ts",import:"./public/assets/pds/core/pds-localization.js"},"./lit":{types:"./dist/types/src/js/lit.d.ts",import:"./public/assets/pds/external/lit.js"},"./pds-core":"./src/js/pds.js","./auto-define/*":"./public/auto-define/*"},files:[".github/copilot-instructions.md",".cursorrules","dist/types/","public/assets/js/","public/assets/pds/components/","public/assets/pds/templates/","public/assets/pds/core.js","public/assets/pds/core/","public/assets/pds/external/","public/assets/pds/vscode-custom-data.json","public/assets/pds/pds.css-data.json","public/assets/pds/pds-css-complete.json","public/auto-define/","public/pds/components/","public/assets/pds/icons/pds-icons.svg","packages/pds-cli/bin/","packages/pds-cli/lib/","src/js/pds.d.ts","src/js/pds.js","src/js/pds-singleton.js","src/js/common/","src/js/pds-live-manager/","src/js/pds-core/","custom-elements.json","custom-elements-manifest.config.js","pds.html-data.json","pds.css-data.json","LOCALIZATION.md","readme.md","INTELLISENSE.md","CSS-INTELLISENSE-LIMITATION.md","CSS-INTELLISENSE-QUICK-REF.md"],scripts:{dev:"node esbuild-dev.js",prebuild:"npm run types",build:"node esbuild-build.js",types:"tsc -p tsconfig.json && node scripts/sync-types.mjs",postinstall:"node packages/pds-cli/bin/postinstall.mjs","prepds:build":"npm run types","pds:build":"node packages/pds-cli/bin/pds-static.js","pds:build-icons":"node packages/pds-cli/bin/pds-build-icons.js","pds:bootstrap":"node packages/pds-cli/bin/pds-bootstrap.js","pds:manifest":"node packages/pds-cli/bin/generate-manifest.js","pds:css-data":"node packages/pds-cli/bin/generate-css-data.js","pds:import":"node packages/pds-cli/bin/pds-import.js","pds:dx":"node packages/pds-cli/bin/pds-dx.js","pds:mcp:server":"node packages/pds-cli/bin/pds-mcp-server.js","pds:mcp:health":"node packages/pds-cli/bin/pds-mcp-health.js","pds:mcp:eval":"node packages/pds-cli/bin/pds-mcp-eval.js","storybook:generate":"cd packages/pds-storybook && npm run generate-stories","storybook:dev":"cd packages/pds-storybook && npm run storybook:dev","storybook:build":"cd packages/pds-storybook && npm run storybook:build"},author:"Marc van Neerven",license:"ISC",engines:{node:">=18"},publishConfig:{access:"public"},devDependencies:{"@custom-elements-manifest/analyzer":"^0.9.9","@types/node":"^22.10.2",esbuild:"^0.19.0","fs-extra":"^11.1.1",typescript:"^5.6.3"},dependencies:{lit:"^3.3.2","pure-web":"1.1.32"},customElements:"custom-elements.json"};await s.start(pt);document.documentElement.lang="en";var ft=typeof D.repository=="string"?D.repository:D.repository?.url,en=ft?ft.replace(/^git\+/,"").replace(/\.git$/,""):"",Tn=D.homepage||en,zn=D.bugs?.url||"";document.body.appendChild(Ae`
|
|
3
|
+
See: https://github.com/Pure-Web-Foundation/pure-ds/blob/main/readme.md#lit-components-not-working`):s.log("warn",`\u26A0\uFE0F PDS component <${u}> not found. Assets may not be installed.`)}else s.log("error",`\u274C Auto-define error for <${u}>:`,y)},...E,mapper:u=>{if(customElements.get(u))return null;if(typeof i=="function")try{let y=i(u);return y===void 0?f(u):y}catch(y){return s.log("warn","Custom autoDefine.mapper error; falling back to default:",y?.message||y),f(u)}return f(u)}};p=new c(h),o.length>0&&typeof c.define=="function"&&await c.define(...o,{baseURL:n,mapper:h.mapper,onError:h.onError})}return{autoDefiner:p,mergedEnhancers:L}}var ge=["light","dark"],be=new Set(ge);function Dt(e){let n=(Array.isArray(e?.themes)?e.themes.map(o=>String(o).toLowerCase()):ge).filter(o=>be.has(o));return n.length?n:ge}function we(e,{preferDocument:t=!0}={}){let n=String(e||"").toLowerCase();if(be.has(n))return n;if(t&&typeof document<"u"){let o=document.documentElement?.getAttribute("data-theme");if(be.has(o))return o}return typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function qe(e,t){let n=we(t);return Dt(e).includes(n)}var Ct=new Set(["log","warn","error","debug","info"]),Tt="__PURE_DS_PDS_SINGLETON__",Se=null,Le=null;function Ve(){try{let t=(typeof globalThis<"u"?globalThis:window)?.[Tt];if(t&&typeof t=="object")return t}catch{return null}return null}function zt(e){return!e||typeof e!="object"?null:{mode:e.mode==="live"||e.mode==="static"?e.mode:null,debug:e.debug===!0,thisArg:e.thisArg}}function $t(e){if(typeof e!="string")return"log";let t=e.toLowerCase();return Ct.has(t)?t:"log"}function Ut(){if(typeof Le=="function")try{let t=zt(Le());if(t)return t}catch{}let e=Ve();if(e){let t=e?.mode||e?.compiled?.mode||(e?.registry?.isLive?"live":"static"),n=(e?.debug||e?.currentConfig?.debug||e?.currentConfig?.design?.debug||e?.compiled?.debug||e?.compiled?.design?.debug||!1)===!0;return{mode:t,debug:n,thisArg:e}}return{mode:null,debug:!1}}function Mt(){if(typeof Se=="function")try{let t=Se();if(typeof t=="function")return t}catch{}let e=Ve();return typeof e?.logHandler=="function"?e.logHandler:null}function Je(e,t,...n){if(typeof console>"u")return;let o=typeof console[e]=="function"?console[e].bind(console):typeof console.log=="function"?console.log.bind(console):null;o&&(n.length>0?o(t,...n):o(t))}function Ot(e,t){let n=t?.debug===!0;return!(t?.mode==="static"&&!n||!n&&e!=="error"&&e!=="warn")}function Qe({getLogger:e,getContext:t}={}){Se=typeof e=="function"?e:null,Le=typeof t=="function"?t:null}function Ye(e="log",t,...n){let o=$t(e),i=Ut(),r=Mt();if(r)try{r.call(i?.thisArg,o,t,...n);return}catch(d){Je("error","Custom log handler failed:",d)}Ot(o,i)&&Je(o,t,...n)}var Y=class{constructor(t={},n=null){let o=t&&typeof t=="object"?t:{},i=n||(typeof document<"u"?document:new EventTarget),r=new WeakMap,d=m=>m.map(E=>String(E)).join("."),S,L=(m,E,j,a)=>{let l=d(m),h={property:E,path:l,value:j,oldValue:a};i.dispatchEvent(new CustomEvent(`change:${l}`,{detail:h,bubbles:!0,composed:!0})),i.dispatchEvent(new CustomEvent("change",{detail:{...h,state:S},bubbles:!0,composed:!0}))},p=(m,E)=>(typeof E=="function"&&i.addEventListener(m,E),S),c=(m,E)=>(typeof E=="function"&&i.removeEventListener(m,E),S),f=(m,E)=>{if(typeof E=="function"){let j=a=>{E(a),i.removeEventListener(m,j)};i.addEventListener(m,j)}return S},A=(m,E)=>{if(!m||typeof m!="object")return m;if(r.has(m))return r.get(m);let j=new Proxy(m,{get(a,l,h){if(l==="on")return p;if(l==="off")return c;if(l==="once")return f;let u=Reflect.get(a,l,h);return u&&typeof u=="object"?A(u,[...E,l]):u},set(a,l,h,u){let y=Reflect.get(a,l,u);return Object.is(y,h)?!0:Reflect.set(a,l,h,u)?(L([...E,l],l,h,y),!0):!1},deleteProperty(a,l){if(!Reflect.has(a,l))return!0;let h=a[l];return Reflect.deleteProperty(a,l)?(L([...E,l],l,void 0,h),!0):!1}});return r.set(m,j),j};return S=A(o,[]),S}};function Ze(e,t,n){if(!e||!t||typeof n!="object")return()=>{};let o={};return Object.entries(n).forEach(([i,r])=>{o[i]=d=>{typeof r=="function"&&r(e,d.detail.value,d.detail.oldValue)},t.on(`change:${i}`,o[i])}),()=>{Object.entries(o).forEach(([i,r])=>{t.off(`change:${i}`,r)})}}typeof s.initializing!="boolean"&&(s.initializing=!1);"currentPreset"in s||(s.currentPreset=null);typeof s.debug!="boolean"&&(s.debug=!1);"currentConfig"in s||(s.currentConfig=null);"compiled"in s||(s.compiled=null);typeof s.logHandler!="function"&&(s.logHandler=null);"mode"in s||(s.mode=null);var Z=null,X=null,ee=null,te=null,ne=null,oe=null,et="__pdsLocalizationRuntime";function U(){if(oe)return oe;let e=s?.[et];return e&&typeof e=="object"?(oe=e,e):null}function Nt(e){let t=e&&typeof e=="object"?e:null;oe=t,s[et]=t}Qe({getLogger:()=>typeof s.logHandler=="function"?s.logHandler:null,getContext:()=>{let e=s?.mode||s?.compiled?.mode||(s?.registry?.isLive?"live":"static"),t=(s?.debug||s?.currentConfig?.debug||s?.currentConfig?.design?.debug||s?.compiled?.debug||s?.compiled?.design?.debug||!1)===!0;return{mode:e,debug:t,thisArg:s}}});s.log=(e="log",t,...n)=>{Ye(e,t,...n)};var v={locale:"en",messages:{},hasProvider:!1},se=new Set;function tt(e){return!!e&&typeof e!="string"&&typeof e=="object"&&"strTag"in e}function nt(e=[]){let t="";for(let n=0;n<=e.length-1;n+=1)t+=e[n],n<e.length-1&&(t+=`{${n}}`);return t}function It(e,t){return String(e).replace(/\{(\d+)\}/g,(n,o)=>t(Number(o)))}function Ft(e){if(!e||typeof e!="object")return{};let t={};for(let[n,o]of Object.entries(e)){if(typeof o=="string"){t[n]=o;continue}o&&typeof o=="object"&&typeof o.content=="string"&&(t[n]=o.content)}return t}function Wt(e,...t){return{strTag:!0,strings:Array.from(e||[]),values:t,raw:Array.from(e?.raw||[])}}function Bt(e){if(!e)return"";if(tt(e)){let n=nt(e.strings||[]),o=v.messages[n]||n;return It(o,i=>e.values?.[i])}let t=String(e);return v.messages[t]||t}function Ht(e){if(!e)return;let t=tt(e)?nt(e.strings||[]):String(e);typeof t=="string"&&t.length>0&&se.add(t)}function ot(e){if(!e||typeof e.msg!="function"||se.size===0)return;let t=Array.from(se);se.clear();for(let n of t)try{e.msg(n)}catch{}}async function W(){let e=U();return e||(ne||(ne=import(B("pds-localization.js")).then(n=>{if(typeof n?.msg!="function"||typeof n?.str!="function"||typeof n?.configureLocalization!="function"||typeof n?.loadLocale!="function"||typeof n?.setLocale!="function"||typeof n?.getLocalizationState!="function")throw new Error("Failed to load localization runtime exports");return Nt(n),ot(n),n}).catch(n=>{throw ne=null,n})),ne)}var M=(e,t={})=>{let n=U();return typeof n?.msg=="function"?n.msg(e,t):(Ht(e),Bt(e,t))},ie=(e,...t)=>{let n=U();return typeof n?.str=="function"?n.str(e,...t):Wt(e,...t)},re=(e=null)=>{let t=U();if(typeof t?.configureLocalization=="function")return t.configureLocalization(e);if(!e||typeof e!="object")return v.locale="en",v.messages={},v.hasProvider=!1,{locale:v.locale,messages:{...v.messages},hasProvider:v.hasProvider};typeof e.locale=="string"&&e.locale.trim()&&(v.locale=e.locale.trim()),Object.prototype.hasOwnProperty.call(e,"messages")&&(v.messages=Ft(e.messages));let n=!!(e.provider||e.translate||e.loadLocale||e.setLocale);return v.hasProvider=n,n&&W().then(o=>{o.configureLocalization(e),ot(o)}).catch(()=>{}),{locale:v.locale,messages:{...v.messages},hasProvider:v.hasProvider}},st=async e=>(await W()).loadLocale(e),rt=async(e,t={})=>(await W()).setLocale(e,t),it=()=>{let e=U();return typeof e?.getLocalizationState=="function"?e.getLocalizationState():{locale:v.locale,messages:{...v.messages},hasProvider:v.hasProvider}},at=(e={})=>{let t=U();if(typeof t?.createJSONLocalization=="function")return t.createJSONLocalization(e);let n=typeof e?.locale=="string"&&e.locale.trim()?e.locale.trim().toLowerCase():"en",o=Array.isArray(e?.locales)?e.locales.map(L=>String(L||"").trim().toLowerCase()).filter(Boolean):[],i=Array.from(new Set([n,...o])),r=null,d=async()=>(r||(r=W().then(L=>typeof L?.createJSONLocalization=="function"?L.createJSONLocalization(e):null).catch(()=>null)),r),S=async(L="loadLocale")=>{let p=await d();if(!p||typeof p!="object")return null;let c=p.provider;if(!c||typeof c!="object")return null;let f=c[L];return typeof f=="function"?f:L==="setLocale"&&typeof c.loadLocale=="function"?c.loadLocale:null};return{locale:n,locales:[...i],provider:{locales:[...i],async loadLocale(L={}){let p=await S("loadLocale");return typeof p!="function"?{}:p(L)},async setLocale(L={}){let p=await S("setLocale");return typeof p!="function"?{}:p(L)}}}};function B(e,t){return t&&typeof t=="string"?t:`${Q(s.currentConfig||{},{resolvePublicAssetURL:q})}core/${e}`}async function Kt(){return Array.isArray(s.defaultEnhancers)&&s.defaultEnhancers.length>0?s.defaultEnhancers:(te||(te=import(B("pds-enhancers.js",s.currentConfig?.enhancersURL)).then(t=>{let n=Array.isArray(t?.defaultPDSEnhancers)?t.defaultPDSEnhancers:[];return s.defaultEnhancers=n,n}).catch(t=>{throw te=null,t})),te)}async function Gt(){return typeof s.ask=="function"&&s.ask!==ct?s.ask:(X||(X=import(B("pds-ask.js",s.currentConfig?.askURL)).then(t=>{let n=t?.ask;if(typeof n!="function")throw new Error("Failed to load ask helper");return s.ask=n,n}).catch(t=>{throw X=null,t})),X)}async function H(){return typeof s.toast=="function"&&s.toast!==O?s.toast:(ee||(ee=import(B("pds-toast.js",s.currentConfig?.toastURL)).then(t=>{let n=t?.toast;if(typeof n!="function")throw new Error("Failed to load toast helper");return s.toast=n,n}).catch(t=>{throw ee=null,t})),ee)}async function ct(...e){return(await Gt())(...e)}async function O(...e){return(await H())(...e)}O.success=async(...e)=>(await H()).success(...e);O.error=async(...e)=>(await H()).error(...e);O.warning=async(...e)=>(await H()).warning(...e);O.info=async(...e)=>(await H()).info(...e);var Xe=function(e="log",t,...n){s.log(e,t,...n)};function _e(e){if(e==null)return e;if(typeof e=="function")return;if(typeof e!="object")return e;if(Array.isArray(e))return e.map(n=>_e(n)).filter(n=>n!==void 0);let t={};for(let[n,o]of Object.entries(e)){let i=_e(o);i!==void 0&&(t[n]=i)}return t}function lt(e,t=new WeakSet){if(!e||typeof e!="object"||t.has(e))return e;t.add(e),Object.freeze(e);for(let n of Object.keys(e))lt(e[n],t);return e}function ve(e){return e==null||typeof e!="object"?e:lt(structuredClone(_e(e)))}async function qt(e,t={}){if(t?.runtimeConfig===!1||typeof fetch!="function")return null;let n=t?.runtimeConfigURL||`${e}pds-runtime-config.json`;try{let o=await fetch(n,{cache:"no-store"});return o.ok?await o.json():null}catch{return null}}s.registry=$;s.enums=Ue;s.adoptLayers=ze;s.adoptPrimitives=Te;var Jt=fe;s.parse=Jt;var Ae=G;s.html=Ae;s.State=Y;s.bindState=Ze;s.createStylesheet=$e;s.isLiveMode=()=>$.isLive;s.ask=ct;s.toast=O;s.common=me;s.msg=M;s.str=ie;s.configureLocalization=re;s.loadLocale=st;s.setLocale=rt;s.getLocalizationState=it;s.createJSONLocalization=at;s.i18n={msg:M,str:ie,configure:re,loadLocale:st,setLocale:rt,getState:it,createJSONLocalization:at};s.AutoComplete=null;s.loadAutoComplete=async()=>{if(s.AutoComplete&&typeof s.AutoComplete.connect=="function")return s.AutoComplete;let e=B("pds-autocomplete.js",s.currentConfig?.autoCompleteURL);return Z||(Z=import(e).then(t=>{let n=t?.AutoComplete||t?.default?.AutoComplete||t?.default||null;if(!n)throw new Error("AutoComplete export not found in module");return s.AutoComplete=n,n}).catch(t=>{throw Z=null,t})),Z};function dt(e){let t=typeof CustomEvent=="function";try{let n=t?new CustomEvent("pds:ready",{detail:e}):new Event("pds:ready");s.dispatchEvent(n)}catch{}if(typeof document<"u")if(t){let n={detail:e,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:ready",n))}catch{}try{document.dispatchEvent(new CustomEvent("pds-ready",n))}catch{}}else{try{document.dispatchEvent(new Event("pds:ready"))}catch{}try{document.dispatchEvent(new Event("pds-ready"))}catch{}}}function ut(e={}){let t=typeof CustomEvent=="function",n={at:Date.now(),...e};try{let o=t?new CustomEvent("pds:config-changed",{detail:n}):new Event("pds:config-changed");s.dispatchEvent(o)}catch{}if(typeof document<"u")if(t){let o={detail:n,bubbles:!0,composed:!0};try{document.dispatchEvent(new CustomEvent("pds:config-changed",o))}catch{}}else try{document.dispatchEvent(new Event("pds:config-changed"))}catch{}}var Ee="pure-ds-theme",C=null,F=null;function xe(e){try{if(typeof document>"u")return;let t="light";e?e==="system"?t=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t=e:t=typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",document.documentElement.setAttribute("data-theme",t)}catch{}}function je(e){try{if(C&&F){try{typeof C.removeEventListener=="function"?C.removeEventListener("change",F):typeof C.removeListener=="function"&&C.removeListener(F)}catch{}C=null,F=null}if(e==="system"&&typeof window<"u"&&window.matchMedia){let t=window.matchMedia("(prefers-color-scheme: dark)"),n=o=>{let i=o?.matches===void 0?t.matches:o.matches;try{let r=i?"dark":"light";document.documentElement.setAttribute("data-theme",r),s.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:r,source:"system"}}))}catch{}};C=t,F=n,typeof t.addEventListener=="function"?t.addEventListener("change",n):typeof t.addListener=="function"&&t.addListener(n)}}catch{}}var Vt=Object.getOwnPropertyDescriptor(s,"theme");Vt||Object.defineProperty(s,"theme",{get(){try{return typeof window>"u"?null:localStorage.getItem(Ee)||null}catch{return null}},set(e){try{if(typeof window>"u")return;let t=s.currentConfig?.design||null,n=we(e);if(t&&!qe(t,n)){let o=t?.name||s.currentPreset?.name||s.currentConfig?.preset||"current preset";s.log("warn",`PDS theme "${n}" not supported by preset "${o}".`),s.dispatchEvent(new CustomEvent("pds:theme:blocked",{detail:{theme:e,resolvedTheme:n,preset:o}}));return}e==null?localStorage.removeItem(Ee):localStorage.setItem(Ee,e),xe(e),je(e),s.dispatchEvent(new CustomEvent("pds:theme:changed",{detail:{theme:e,source:"api"}}))}catch{}}});s.defaultEnhancers=[];async function Qt(e){s.initializing=!0;try{let t=e&&e.mode||"live",{mode:n,...o}=e||{};s.mode=t,s.logHandler=typeof o?.log=="function"?o.log:null,s.currentConfig=ve(o);let i=o&&typeof o.localization=="object"&&o.localization?o.localization:null;i?(await W(),re(i)):re(null);let r;if(t==="static")r=await Yt(o);else{let{localization:S,...L}=o||{},p=Q(L,{resolvePublicAssetURL:q}),c=L?.managerURL||L?.public?.managerURL||L?.manager?.url||new URL("core/pds-manager.js",p).href||new URL("./pds-manager.js",import.meta.url).href,{startLive:f}=await import(c);r=await f(s,L,{emitReady:dt,emitConfigChanged:ut,applyResolvedTheme:xe,setupSystemListenerIfNeeded:je})}s.compiled=ve(r?.config||null);let d=s?.compiled?.design?.icons?.externalPath||"/assets/img/icons/";return s.log("info",`startup ready; external icon path: ${d}`),r}finally{s.initializing=!1}}s.start=Qt;async function Yt(e){if(!e||typeof e!="object")throw new Error("PDS.start({ mode: 'static', ... }) requires a valid configuration object");let t=e.applyGlobalStyles??!0,n=e.manageTheme??!0,o=e.themeStorageKey??"pure-ds-theme",i=e.staticPaths??{},r=Q(e,{resolvePublicAssetURL:q}),d=e&&e.autoDefine||null,S;d&&d.baseURL?S=J(V(d.baseURL,{preferModule:!1})):S=`${r}components/`;let L=d&&Array.isArray(d.predefine)&&d.predefine||[],p=d&&typeof d.mapper=="function"&&d.mapper||null;try{He(s);let{resolvedTheme:c}=Ke({manageTheme:n,themeStorageKey:o,applyResolvedTheme:xe,setupSystemListenerIfNeeded:je}),f=await qt(r,e),A=Array.isArray(e?.enhancers)?e.enhancers:e?.enhancers&&typeof e.enhancers=="object"?Object.values(e.enhancers):[],m=f?.config?{...f.config,...e,design:e?.design||f.config.design,preset:e?.preset||f.config.preset}:{...e},E={tokens:`${r}styles/pds-tokens.css.js`,primitives:`${r}styles/pds-primitives.css.js`,components:`${r}styles/pds-components.css.js`,utilities:`${r}styles/pds-utilities.css.js`,styles:`${r}styles/pds-styles.css.js`},j=f?.paths||{};if(i={...E,...j,...i},s.registry.setStaticMode(i),t&&typeof document<"u")try{let h=await s.registry.getStylesheet("styles");if(h){h._pds=!0;let u=(document.adoptedStyleSheets||[]).filter(y=>y._pds!==!0);document.adoptedStyleSheets=[...u,h],ut({mode:"static",source:"static:styles-applied"})}}catch(h){Xe.call(s,"warn","Failed to apply static styles:",h)}let a=null,l=[];try{let h=await Kt(),u=await Ge({autoDefineBaseURL:S,autoDefinePreload:L,autoDefineMapper:p,enhancers:A,autoDefineOverrides:d||null,autoDefinePreferModule:!(d&&d.baseURL)},{baseEnhancers:h});a=u.autoDefiner,l=u.mergedEnhancers||[]}catch(h){Xe.call(s,"error","\u274C Failed to initialize AutoDefiner/Enhancers (static):",h)}return s.compiled=ve({mode:"static",...m,theme:c,enhancers:l}),dt({mode:"static",config:m,theme:c,autoDefiner:a}),{config:m,theme:c,autoDefiner:a}}catch(c){throw s.dispatchEvent(new CustomEvent("pds:error",{detail:{error:c}})),c}}var Zt=s.createJSONLocalization({locale:"en-US",locales:["en-US","nl-NL"],aliases:{en:["en-US"],nl:["nl-NL"]},basePath:"/assets/locales"}),pt={mode:"live",liveEdit:!0,preset:"default",localization:Zt,autoDefine:{predefine:["pds-icon","pds-drawer","pds-toaster"]},log(e,t,...n){(this?.mode||this?.compiled?.mode||"live")!=="static"&&(typeof console[e]=="function"?console[e]:console.log)(`[PDS] ${t}`,...n)}};var D={name:"@pure-ds/core",shortname:"pds",version:"0.7.60",description:"Why develop a Design System when you can generate one?",repository:{type:"git",url:"git+https://github.com/Pure-Web-Foundation/pure-ds.git"},bugs:{url:"https://github.com/Pure-Web-Foundation/pure-ds/issues"},homepage:"https://puredesignsystem.z6.web.core.windows.net/",keywords:["design-system","css","web-components","lit","constructable-stylesheets","tokens","utilities","a11y"],type:"module",main:"./public/assets/pds/core.js",module:"./public/assets/pds/core.js",types:"./dist/types/pds.d.ts",bin:{"pds-build":"packages/pds-cli/bin/pds-static.js","pds-sync-assets":"packages/pds-cli/bin/sync-assets.js","pds-build-icons":"packages/pds-cli/bin/pds-build-icons.js","pds-import":"packages/pds-cli/bin/pds-import.js","pds-setup-copilot":"packages/pds-cli/bin/pds-setup-copilot.js","pds-setup-mcp":"packages/pds-cli/bin/pds-setup-mcp.js","pds-init-config":"packages/pds-cli/bin/pds-init-config.js","pds-bootstrap":"packages/pds-cli/bin/pds-bootstrap.js","pds-mcp-server":"packages/pds-cli/bin/pds-mcp-server.js","pds-mcp-health":"packages/pds-cli/bin/pds-mcp-health.js","pds-mcp-eval":"packages/pds-cli/bin/pds-mcp-eval.js"},exports:{".":{types:"./src/js/pds.d.ts",import:"./public/assets/pds/core.js"},"./localization":{types:"./dist/types/src/js/pds-localization.d.ts",import:"./public/assets/pds/core/pds-localization.js"},"./lit":{types:"./dist/types/src/js/lit.d.ts",import:"./public/assets/pds/external/lit.js"},"./pds-core":"./src/js/pds.js","./auto-define/*":"./public/auto-define/*"},files:[".github/copilot-instructions.md",".cursorrules","dist/types/","public/assets/js/","public/assets/pds/components/","public/assets/pds/templates/","public/assets/pds/core.js","public/assets/pds/core/","public/assets/pds/external/","public/assets/pds/vscode-custom-data.json","public/assets/pds/pds.css-data.json","public/assets/pds/pds-css-complete.json","public/auto-define/","public/pds/components/","public/assets/pds/icons/pds-icons.svg","packages/pds-cli/bin/","packages/pds-cli/lib/","src/js/pds.d.ts","src/js/pds.js","src/js/pds-singleton.js","src/js/common/","src/js/pds-live-manager/","src/js/pds-core/","custom-elements.json","custom-elements-manifest.config.js","pds.html-data.json","pds.css-data.json","LOCALIZATION.md","readme.md","INTELLISENSE.md","CSS-INTELLISENSE-LIMITATION.md","CSS-INTELLISENSE-QUICK-REF.md"],scripts:{dev:"node esbuild-dev.js",prebuild:"npm run types",build:"node esbuild-build.js",types:"tsc -p tsconfig.json && node scripts/sync-types.mjs",postinstall:"node packages/pds-cli/bin/postinstall.mjs","prepds:build":"npm run types","pds:build":"node packages/pds-cli/bin/pds-static.js","pds:build-icons":"node packages/pds-cli/bin/pds-build-icons.js","pds:bootstrap":"node packages/pds-cli/bin/pds-bootstrap.js","pds:manifest":"node packages/pds-cli/bin/generate-manifest.js","pds:css-data":"node packages/pds-cli/bin/generate-css-data.js","pds:import":"node packages/pds-cli/bin/pds-import.js","pds:dx":"node packages/pds-cli/bin/pds-dx.js","pds:mcp:server":"node packages/pds-cli/bin/pds-mcp-server.js","pds:mcp:health":"node packages/pds-cli/bin/pds-mcp-health.js","pds:mcp:eval":"node packages/pds-cli/bin/pds-mcp-eval.js","storybook:generate":"cd packages/pds-storybook && npm run generate-stories","storybook:dev":"cd packages/pds-storybook && npm run storybook:dev","storybook:build":"cd packages/pds-storybook && npm run storybook:build"},author:"Marc van Neerven",license:"ISC",engines:{node:">=18"},publishConfig:{access:"public"},devDependencies:{"@custom-elements-manifest/analyzer":"^0.9.9","@types/node":"^22.10.2",esbuild:"^0.19.0","fs-extra":"^11.1.1",typescript:"^5.6.3"},dependencies:{lit:"^3.3.2","pure-web":"1.1.32"},customElements:"custom-elements.json"};await s.start(pt);document.documentElement.lang="en";var ft=typeof D.repository=="string"?D.repository:D.repository?.url,en=ft?ft.replace(/^git\+/,"").replace(/\.git$/,""):"",Tn=D.homepage||en,zn=D.bugs?.url||"";document.body.appendChild(Ae`
|
|
4
4
|
<div class="container text-center">
|
|
5
5
|
<img src="/assets/img/pds-logo.svg" alt="PDS Logo" title="${M("PDS Logo")}" width="64" height="64" />
|
|
6
6
|
<header class="container section">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
function A(a){let t=Array.isArray(a?.strings)?a.strings:[],e=Array.isArray(a?.values)?a.values:[],s=new Set,r=[],n=/(\s)(\.[\w-]+)=["']?\s*$/,i=/(\s)(@[\w-]+)=["']?\s*$/,l=/(\s)(\?[\w-]+)=["']?\s*$/,h=/(\s)([\w:-]+)=["']?\s*$/,f=/=["']\s*$/,g=!1;for(let o=0;o<t.length;o+=1){let u=t[o]??"";if(g&&(u=u.replace(/^["']/,""),g=!1),o<e.length){let m=`pds-val-${o}`,x=u.match(n),y=u.match(i),
|
|
2
|
-
`)!==-1||a.indexOf(" ")!==-1||a.startsWith("#/"))return!1;let t=new URL(a,window.location.origin);return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function P(a,t,e="Operation"){return!t||t<=0?a:new Promise((s,r)=>{let n=setTimeout(()=>{r(new Error(`${e} timed out after ${t}ms`))},t);Promise.resolve(a).then(i=>{clearTimeout(n),s(i)}).catch(i=>{clearTimeout(n),r(i)})})}function H(a){return String(a).replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function L(a,t,e){let s=window.screen.width/2-t/2,r=window.screen.height/2-e/2;return window.open(a,"",`toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=${t}, height=${e}, top=${r}, left=${s}`)}function M(a){if(a==null)return"";let t=String(a).trim();return t?t.replace(/([a-z0-9])([A-Z])/g,"$1 $2").replace(/[_-]+/g," ").replace(/\s+/g," ").trim():""}var E={result:"ac-suggestion",item:"ac-itm"},O=class a extends EventTarget{constructor(t,e,s={}){super(),this.settings={emptyResultsText:"",progressive:!
|
|
1
|
+
function A(a){let t=Array.isArray(a?.strings)?a.strings:[],e=Array.isArray(a?.values)?a.values:[],s=new Set,r=[],n=/(\s)(\.[\w-]+)=["']?\s*$/,i=/(\s)(@[\w-]+)=["']?\s*$/,l=/(\s)(\?[\w-]+)=["']?\s*$/,h=/(\s)([\w:-]+)=["']?\s*$/,f=/=["']\s*$/,g=!1;for(let o=0;o<t.length;o+=1){let u=t[o]??"";if(g&&(u=u.replace(/^["']/,""),g=!1),o<e.length){let m=`pds-val-${o}`,x=u.match(n),y=u.match(i),b=u.match(l),C=u.match(h);if(x){let w=x[2].slice(1);g=f.test(t[o]??""),u=u.replace(n,`$1data-pds-bind-${o}="prop:${w}:${m}"`),s.add(o)}else if(y){let w=y[2].slice(1);g=f.test(t[o]??""),u=u.replace(i,`$1data-pds-bind-${o}="event:${w}:${m}"`),s.add(o)}else if(b){let w=b[2].slice(1);g=f.test(t[o]??""),u=u.replace(l,`$1data-pds-bind-${o}="boolean:${w}:${m}"`),s.add(o)}else if(C){let w=C[2];g=f.test(t[o]??""),u=u.replace(h,`$1data-pds-bind-${o}="attr:${w}:${m}"`),s.add(o)}}r.push(u),o<e.length&&!s.has(o)&&r.push(`<!--pds-val-${o}-->`)}let p=document.createElement("template");p.innerHTML=r.join("");let c=(o,u)=>{let m=o.parentNode;if(!m)return;if(u==null){m.removeChild(o);return}let x=y=>{if(y!=null){if(y instanceof Node){m.insertBefore(y,o);return}if(Array.isArray(y)){y.forEach(b=>x(b));return}m.insertBefore(document.createTextNode(String(y)),o)}};x(u),m.removeChild(o)},d=document.createTreeWalker(p.content,NodeFilter.SHOW_COMMENT),v=[];for(;d.nextNode();){let o=d.currentNode;o?.nodeValue?.startsWith("pds-val-")&&v.push(o)}return v.forEach(o=>{let u=Number(o.nodeValue.replace("pds-val-",""));c(o,e[u])}),p.content.querySelectorAll("*").forEach(o=>{[...o.attributes].forEach(u=>{if(!u.name.startsWith("data-pds-bind-"))return;let m=u.value.indexOf(":"),x=u.value.lastIndexOf(":");if(m<=0||x<=m){o.removeAttribute(u.name);return}let y=u.value.slice(0,m),b=u.value.slice(m+1,x),C=u.value.slice(x+1),w=Number(String(C).replace("pds-val-","")),$=e[w];if(!b||!Number.isInteger(w)){o.removeAttribute(u.name);return}y==="prop"?o[b]=$:y==="event"?(typeof $=="function"||$&&typeof $.handleEvent=="function")&&o.addEventListener(b,$):y==="boolean"?$?o.setAttribute(b,""):o.removeAttribute(b):y==="attr"&&($==null||$===!1?o.removeAttribute(b):o.setAttribute(b,String($))),o.removeAttribute(u.name)})}),p.content}function N(a,...t){if(Array.isArray(a)&&Object.prototype.hasOwnProperty.call(a,"raw"))return A({strings:Array.from(a),values:t});if(Array.isArray(a?.strings)&&Array.isArray(a?.values))return A({strings:a.strings,values:a.values});let s=document.createElement("template");return s.innerHTML=String(a??""),s.content}function S(a,...t){return N(a,...t).childNodes}function D(a,t=100){let e;return function(...r){let n=()=>{clearTimeout(e),a(...r)};clearTimeout(e),e=setTimeout(n,t)}}function I(a){setTimeout(a,0)}function k(a){try{if(typeof a!="string"||a.indexOf(`
|
|
2
|
+
`)!==-1||a.indexOf(" ")!==-1||a.startsWith("#/"))return!1;let t=new URL(a,window.location.origin);return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function P(a,t,e="Operation"){return!t||t<=0?a:new Promise((s,r)=>{let n=setTimeout(()=>{r(new Error(`${e} timed out after ${t}ms`))},t);Promise.resolve(a).then(i=>{clearTimeout(n),s(i)}).catch(i=>{clearTimeout(n),r(i)})})}function H(a){return String(a).replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function L(a,t,e){let s=window.screen.width/2-t/2,r=window.screen.height/2-e/2;return window.open(a,"",`toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=${t}, height=${e}, top=${r}, left=${s}`)}function M(a){if(a==null)return"";let t=String(a).trim();return t?t.replace(/([a-z0-9])([A-Z])/g,"$1 $2").replace(/[_-]+/g," ").replace(/\s+/g," ").trim():""}var E={result:"ac-suggestion",item:"ac-itm"},O=class a extends EventTarget{constructor(t,e,s={}){super(),this.settings={emptyResultsText:"",progressive:!0,maxConcurrentCategories:3,categoryTimeoutMs:0,...s},this.container=t,this.input=e,this.input.setAttribute("autocomplete","off"),this.categories=s.categories||{},this.caches=new Map,this.rowIndex=-1,this.results=[],this.requestToken=0,I(this.attach.bind(this))}static connect(t,e){let s=t.target;if(!s._autoComplete){if(!e?.categories)throw Error("Missing autocomplete settings");s._autoComplete=new a(s.parentNode,s,e),t.type==="focus"&&setTimeout(()=>{s._autoComplete.focusHandler(t)},100)}return s._autoComplete}on(t,e){return this.input.addEventListener(t,e),this}attach(){this.resultsDiv=document.createElement("div"),this.resultsDiv.title="",this.resultsDiv.classList.add(E.result),this.container.offsetWidth>100&&(this.resultsDiv.style.width=`${this.container.offsetWidth}px`),this.resultsDiv.addEventListener("mousedown",this.resultClick.bind(this)),this.container.classList.add("ac-container"),this.input.classList.add("ac-input");let t=getComputedStyle(this.input);this.container.style.setProperty("--ac-bg-default",t.backgroundColor),this.container.style.setProperty("--ac-color-default",t.color);let e=t.accentColor;e!=="auto"&&this.container.style.setProperty("--ac-accent-color",e),(this.container?.shadowRoot??this.container).appendChild(this.resultsDiv),this.controller().clear("attach"),this.on("input",D(this.inputHandler.bind(this),this.settings.throttleInputMs??300)).on("focus",this.focusHandler.bind(this)).on("focusout",this.blurHandler.bind(this)).on("keyup",this.keyUpHandler.bind(this)).on("keydown",this.keyDownHandler.bind(this))}controller(){let t=this.internalController();return typeof this.settings.controller=="function"&&(t=this.settings.controller(this)??t),t}internalController(){return{show:this.show.bind(this),hide:this.hide.bind(this),clear:this.clear.bind(this),empty:()=>{}}}moveResult(t){this.controller().show();let e=this.acItems?.length??0;if(!e)return;this.rowIndex=this.rowIndex+t,this.rowIndex<=0?this.rowIndex=0:this.rowIndex>e-1&&(this.rowIndex=0);for(let r of this.acItems)r.classList.remove("selected");let s=this.getSelectedDiv();s?(s.classList.add("selected"),s.scrollIntoView({behavior:"smooth",block:"end",inline:"nearest"})):this.focusHandler({target:this.input})}getSelectedDiv(){return this.resultsDiv?.querySelector(`div:nth-child(${this.rowIndex+1})`)}selectResult(t){let e=t||this.getSelectedDiv();if(!e)return;let s=Number.parseInt(e.getAttribute("data-index"),10);this.resultClicked=!0;let r=Number.isInteger(s)?this.results[s]:null;if(!r)return;let n=this.categories[r.category]??{},i=typeof n.action=="function"?n.action:this.setText.bind(this);n.newTab&&(this.tabWindow=L("about:blank",960,700));let l={...r,search:this.input.value,selectedItem:e};e.classList.add("ac-active"),setTimeout(()=>{this.controller().hide("result-selected"),typeof l.action=="function"?l.action(l):(i(l),n.newTab&&this.tabWindow&&(l.url?this.tabWindow.location.href=l.url:this.tabWindow.close())),this.input.dispatchEvent(new Event("change",{bubbles:!0})),this.controller().clear("result-selected");let h=new Event("result-selected");h.detail=l,this.input.dispatchEvent(h)},0)}setText(t){let e=!1;this.input?(this.input.value=t.text,e=!0):this.container?.autoCompleteInput?(this.container.autoCompleteInput.value=t.text,e=!0):"value"in this.container&&(this.container.value=t.text,e=!0),e&&this.input&&this.input.dispatchEvent(new Event("input",{bubbles:!0})),this.controller().hide("settext")}resultClick(t){this.selectResult(t.target.closest(`.${E.item}`))}blurHandler(){setTimeout(()=>{this.resultClicked||this.controller().clear("blurred"),this.resultClicked=!1},100)}clear(t,e={}){this.settings.debug||this.resultsDiv&&(this.resultsDiv.innerHTML="",e.preserveOpen||this.controller().hide("clear"),this.cacheTmr&&clearTimeout(this.cacheTmr),this.cacheTmr=setTimeout(()=>{this.caches.clear()},5*60*1e3))}show(){if(!this.resultsDiv.classList.contains("ac-active")){let t=this.getViewBounds();this.resultsDiv.style.position="absolute",t.rect.width>100&&(this.resultsDiv.style.width=`${t.rect.width}px`),this.settings.direction=this.settings.direction??t.suggestedDirection,this.resultsDiv.setAttribute("data-direction",this.settings.direction),this.settings.direction==="up"?(this.resultsDiv.style.top="unset",this.resultsDiv.style.bottom=`${t.rect.height+20}px`,this.rowIndex=this.acItems.length):(this.resultsDiv.style.bottom="unset",this.resultsDiv.style.top=`${t.rect.height}px`,this.rowIndex=-1),this.resultsDiv.style.maxWidth="unset",this.resultsDiv.classList.toggle("ac-active",!0)}}getViewBounds(){let t=this.input.getBoundingClientRect();return{rect:t,suggestedDirection:t.top+t.height+500>window.innerHeight?"up":"down"}}hide(){this.resultsDiv.classList.toggle("ac-active",!1)}empty(){this.resultsDiv.innerHTML=`<div class="ac-empty">${this.settings.emptyResultsText}</div>`,this.controller().show()}async inputHandler(t){this.cacheTmr&&clearTimeout(this.cacheTmr);let e={search:t.target.value,categories:this.categories},s=this.requestToken+1,r=this.settings.progressive===!0,n="",i=!1;this.container.classList.add("search-running");let l=(g,p={})=>{!r||p.token!==this.requestToken||(i=!0,n=this.resultsSignature(g),this.resultsHandler(g,e),this.input.dispatchEvent(new CustomEvent("results:partial",{detail:{results:g,token:p.token,pending:p.pending??0,completed:p.completed??0,settled:p.settled??!1}})))},h=await this.getItems(e,t,{onProgress:l,forceToken:s}).catch(()=>[]);if(s!==this.requestToken){this.container.classList.remove("search-running");return}let f=this.resultsSignature(h);(!i||f!==n)&&this.resultsHandler(h,e),this.input.dispatchEvent(new CustomEvent("results:complete",{detail:{results:h,token:s,pending:0,completed:Object.keys(this.categories||{}).length,settled:!0}})),this.container.classList.remove("search-running")}keyDownHandler(t){switch(t.key){case"Enter":t.stopPropagation(),t.preventDefault();break;case"ArrowDown":I(()=>this.moveResult(1));break;case"ArrowUp":I(()=>this.moveResult(-1));break;default:break}}keyUpHandler(t){switch(t.key){case"Escape":this.controller().hide("escape");break;case"Enter":this.getSelectedDiv()&&(this.container.preventEnter=!0,t.stopPropagation(),t.preventDefault(),this.selectResult(),setTimeout(()=>{this.container.preventEnter=!1},10));break;default:break}}focusHandler(t){this.controller().clear("focus"),this.suggest(t.target.value,t)}suggest(t,e){this.input.focus();let s={suggest:!0,search:t||"",categories:this.categories};this.getItems(s,e).then(r=>{this.input.dispatchEvent(new CustomEvent("show-results",{detail:{results:r}})),this.resultsHandler(r,s)})}sort(t,e){return t.sort((s,r)=>{let n=e.categories[s.category],i=e.categories[r.category],l=typeof n.sortIndex=="function"?n.sortIndex(e):n.sortIndex??0;return(typeof i.sortIndex=="function"?i.sortIndex(e):i.sortIndex??0)>l?1:-1})}resultsHandler(t,e){this.results=t,this.rowIndex=-1,this.resultsDiv.innerHTML="";let s=0,r=(n,i)=>{let l=this.formatCategoryLabel(i.category);return`
|
|
3
3
|
<div title="${i.tooltip||""}" data-index="${s}" class="${`${E.item} cat-${i.category} ${i.class??""}`.trim()}"${i.style?` style="${i.style}"`:""}>
|
|
4
4
|
${this.handleImageOrIcon(i)}
|
|
5
5
|
<span class="text">${this.formatResultItem(i,e,n)}</span>
|
|
6
6
|
${this.settings.hideCategory?"":`<span class="category">${l}</span>`}
|
|
7
|
-
</div>`};t.forEach(n=>{let i=e.categories[n.category]||{};if(n.element)this.resultsDiv.appendChild(n.element);else{let h=S(r(i,typeof n=="string"?{text:n}:n)),f=Array.from(h).find(g=>g&&g.nodeType===Node.ELEMENT_NODE);f&&this.resultsDiv.appendChild(f)}s+=1}),t.length?(this.acItems=this.resultsDiv.querySelectorAll(".ac-itm"),this.controller().show()):e.search.length&&this.controller().empty()}handleImageOrIcon(t){return t.image?`<img src="${t.image}"/>`:typeof this.settings.iconHandler=="function"?this.settings.iconHandler(t):`<svg-icon icon="${t.icon}"></svg-icon>`}formatResultItem(t,e,s){let r=typeof t=="string"?{text:t}:t,n=r.text;return e.search&&(n=n.replace("%search%",e.search),r.description=r.description?.replace("%search%",e.search)),n=this.highlight(n,e.search),r.description&&(n=`<div>${n}</div><small>${r.description}</small>`),s.format&&(n=s.format({item:r,result:n,options:e})),n}formatCategoryLabel(t){return this.settings.humanizeCategoryLabels===!1?t||"":M(t||"")}highlight(t,e){if(!e)return t;try{let s=new RegExp(`(${H(e)})`,"gi");return t.replace(s,'<span class="txt-hl">$1</span>')}catch{return t}}resultsSignature(t){return!Array.isArray(t)||t.length===0?"":t.map(e=>!e||typeof e!="object"?String(e):`${e.category??""}|${e.id??""}|${e.value??""}|${e.text??""}`).join("||")}getCacheKey(t){let e=this.settings.locale||document?.documentElement?.lang||navigator?.language||"",s=String(t?.search??"").trim().toLowerCase(),r=Object.keys(t?.categories||{}).join(",");return`${e}::${s}::${r}`}async getItems(t,e,s={}){this.aborter&&this.aborter.abort();let r=s.forceToken||this.requestToken+1;this.requestToken=r;let n=this.getCacheKey(t);if(this.settings.cache!==!1&&this.caches.has(n)){let c=this.caches.get(n);return typeof s.onProgress=="function"&&s.onProgress(c,{token:r,pending:0,completed:Object.keys(t.categories||{}).length,settled:!0}),c}this.aborter=new AbortController,this.aborterSignal=this.aborter.signal;let i=this.items,l=this.settings.map,h=c=>typeof c=="string"?{text:c}:c,f=c=>l?c.map(d=>({text:d[l]})):c.map(d=>h(d)),g=c=>(this.settings.max&&this.settings.max>0&&(c.length=this.settings.max),c),p=c=>{let d=this.sort(c,t);return this.settings.cache!==!1&&this.caches.set(n,d),d};if(k(i)){if(this.settings.minlength>0&&(!t.search||t.search.length<this.settings.minlength))return p([]);let c=this.formatSearch(i,t),d=await fetch(c,{signal:this.aborterSignal});if(d.status!==200)throw Error(`HTTP error ${d.status} - ${c}`);let T=f(await d.json()).filter(o=>this.isMatch(t,o));return p(g(T))}if(Array.isArray(i)){let c=!0;return this.items=i.map(d=>typeof d=="string"?{text:d}:(c=!1,d)),c&&this.container.classList.add("simple"),p(g(f(this.items)))}if(typeof i=="function"){t.control=this.container;let c=this.settings.progressive===!0,d=await this.items(t,e,{progressive:c,token:r,onProgress:s.onProgress});return p(f(d))}return Promise.resolve(i.apply(this,t)).then(c=>p(c))}async runCategorySearch(t,e,s){let r=Number(this.settings.categoryTimeoutMs||0),n={...t,signal:this.aborterSignal};try{let i=await P(Promise.resolve(s.getItems(n)),r,`Category "${e}"`);return(Array.isArray(i)?i:[]).map(h=>{let f=typeof h=="string"?{text:h}:h;return f.category=e,f})}catch(i){return console.warn(`Error loading items for omniBox category '${e}'.`,i),[]}}async runCategoriesSequentially(t,e,s={}){let r=[],n=0;for(let[i,l]of e){let h=l||{};if(h.trigger=h.trigger??(()=>!0),h.getItems=h.getItems??(()=>[]),t.results=r,!h.trigger(t)){n+=1;continue}let f=await this.runCategorySearch(t,i,h);if(this.aborterSignal?.aborted)return r;if(r=r.concat(f),n+=1,typeof s.onProgress=="function"&&this.requestToken===s.token){let g=this.sort([...r],t);s.onProgress(g,{token:s.token,pending:Math.max(0,e.length-n),completed:n,settled:n===e.length})}}return r}async runCategoriesProgressive(t,e,s={}){let r=Math.max(1,Number(this.settings.maxConcurrentCategories||3)),n=[];for(let[c,d]of e){let
|
|
7
|
+
</div>`};t.forEach(n=>{let i=e.categories[n.category]||{};if(n.element)this.resultsDiv.appendChild(n.element);else{let h=S(r(i,typeof n=="string"?{text:n}:n)),f=Array.from(h).find(g=>g&&g.nodeType===Node.ELEMENT_NODE);f&&this.resultsDiv.appendChild(f)}s+=1}),t.length?(this.acItems=this.resultsDiv.querySelectorAll(".ac-itm"),this.controller().show()):e.search.length&&this.controller().empty()}handleImageOrIcon(t){return t.image?`<img src="${t.image}"/>`:typeof this.settings.iconHandler=="function"?this.settings.iconHandler(t):`<svg-icon icon="${t.icon}"></svg-icon>`}formatResultItem(t,e,s){let r=typeof t=="string"?{text:t}:t,n=r.text;return e.search&&(n=n.replace("%search%",e.search),r.description=r.description?.replace("%search%",e.search)),n=this.highlight(n,e.search),r.description&&(n=`<div>${n}</div><small>${r.description}</small>`),s.format&&(n=s.format({item:r,result:n,options:e})),n}formatCategoryLabel(t){return this.settings.humanizeCategoryLabels===!1?t||"":M(t||"")}highlight(t,e){if(!e)return t;try{let s=new RegExp(`(${H(e)})`,"gi");return t.replace(s,'<span class="txt-hl">$1</span>')}catch{return t}}resultsSignature(t){return!Array.isArray(t)||t.length===0?"":t.map(e=>!e||typeof e!="object"?String(e):`${e.category??""}|${e.id??""}|${e.value??""}|${e.text??""}`).join("||")}getCacheKey(t){let e=this.settings.locale||document?.documentElement?.lang||navigator?.language||"",s=String(t?.search??"").trim().toLowerCase(),r=Object.keys(t?.categories||{}).join(",");return`${e}::${s}::${r}`}async getItems(t,e,s={}){this.aborter&&this.aborter.abort();let r=s.forceToken||this.requestToken+1;this.requestToken=r;let n=this.getCacheKey(t);if(this.settings.cache!==!1&&this.caches.has(n)){let c=this.caches.get(n);return typeof s.onProgress=="function"&&s.onProgress(c,{token:r,pending:0,completed:Object.keys(t.categories||{}).length,settled:!0}),c}this.aborter=new AbortController,this.aborterSignal=this.aborter.signal;let i=this.items,l=this.settings.map,h=c=>typeof c=="string"?{text:c}:c,f=c=>l?c.map(d=>({text:d[l]})):c.map(d=>h(d)),g=c=>(this.settings.max&&this.settings.max>0&&(c.length=this.settings.max),c),p=c=>{let d=this.sort(c,t);return this.settings.cache!==!1&&this.caches.set(n,d),d};if(k(i)){if(this.settings.minlength>0&&(!t.search||t.search.length<this.settings.minlength))return p([]);let c=this.formatSearch(i,t),d=await fetch(c,{signal:this.aborterSignal});if(d.status!==200)throw Error(`HTTP error ${d.status} - ${c}`);let T=f(await d.json()).filter(o=>this.isMatch(t,o));return p(g(T))}if(Array.isArray(i)){let c=!0;return this.items=i.map(d=>typeof d=="string"?{text:d}:(c=!1,d)),c&&this.container.classList.add("simple"),p(g(f(this.items)))}if(typeof i=="function"){t.control=this.container;let c=this.settings.progressive===!0,d=await this.items(t,e,{progressive:c,token:r,onProgress:s.onProgress});return p(f(d))}return Promise.resolve(i.apply(this,t)).then(c=>p(c))}async runCategorySearch(t,e,s){let r=Number(this.settings.categoryTimeoutMs||0),n={...t,signal:this.aborterSignal};try{let i=await P(Promise.resolve(s.getItems(n)),r,`Category "${e}"`);return(Array.isArray(i)?i:[]).map(h=>{let f=typeof h=="string"?{text:h}:h;return f.category=e,f})}catch(i){return console.warn(`Error loading items for omniBox category '${e}'.`,i),[]}}async runCategoriesSequentially(t,e,s={}){let r=[],n=0;for(let[i,l]of e){let h=l||{};if(h.trigger=h.trigger??(()=>!0),h.getItems=h.getItems??(()=>[]),t.results=r,!h.trigger(t)){n+=1;continue}let f=await this.runCategorySearch(t,i,h);if(this.aborterSignal?.aborted)return r;if(r=r.concat(f),n+=1,typeof s.onProgress=="function"&&this.requestToken===s.token){let g=this.sort([...r],t);s.onProgress(g,{token:s.token,pending:Math.max(0,e.length-n),completed:n,settled:n===e.length})}}return r}async runCategoriesProgressive(t,e,s={}){let r=Math.max(1,Number(this.settings.maxConcurrentCategories||3)),n=[];for(let[c,d]of e){let v=d||{};v.trigger=v.trigger??(()=>!0),v.getItems=v.getItems??(()=>[]),t.results=[],v.trigger(t)&&n.push([c,v])}if(!n.length)return[];let i=0,l=0,h=[],f=async()=>{for(;i<n.length;){let c=i;i+=1;let[d,v]=n[c],T=await this.runCategorySearch(t,d,v);if(this.aborterSignal?.aborted)return;if(h.push(...T),l+=1,typeof s.onProgress=="function"&&this.requestToken===s.token){let o=this.sort([...h],t);s.onProgress(o,{token:s.token,pending:Math.max(0,n.length-l),completed:l,settled:l===n.length})}}},g=[],p=Math.min(r,n.length);for(let c=0;c<p;c+=1)g.push(f());return await Promise.all(g),h}async items(t,e,s={}){t.results=[],t.signal=this.aborterSignal;let r=Object.entries(t.categories||{});return r.length?s.progressive?this.runCategoriesProgressive(t,r,s):this.runCategoriesSequentially(t,r,s):[]}formatSearch(t,e){return t.indexOf("%search%")?t.replace("%search%",e.search||""):`${t}?${this.createQueryParam(e)}`}createQueryParam(t){let e=t.suggest?"&suggest=true":"";return`q=${t.text}${e}`}isMatch(t,e){return e.text?.indexOf("%search%")>=0?!0:t.search?e.text?.toLowerCase().indexOf(t.search.toLowerCase())>=0:t.suggest}static textFilter(t,e){return function(r){if(!t.search)return!0;if(r.hidden)return!1;let i=(e?r[e]:r).match(new RegExp(t.search,"gi"));return i||(r.config?.tags?r.config.tags.some(l=>l.match(new RegExp(t.search,"gi"))):!1)}}};export{O as AutoComplete};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
function A(a){let t=Array.isArray(a?.strings)?a.strings:[],e=Array.isArray(a?.values)?a.values:[],s=new Set,r=[],n=/(\s)(\.[\w-]+)=["']?\s*$/,i=/(\s)(@[\w-]+)=["']?\s*$/,l=/(\s)(\?[\w-]+)=["']?\s*$/,h=/(\s)([\w:-]+)=["']?\s*$/,f=/=["']\s*$/,g=!1;for(let o=0;o<t.length;o+=1){let u=t[o]??"";if(g&&(u=u.replace(/^["']/,""),g=!1),o<e.length){let m=`pds-val-${o}`,x=u.match(n),y=u.match(i),
|
|
2
|
-
`)!==-1||a.indexOf(" ")!==-1||a.startsWith("#/"))return!1;let t=new URL(a,window.location.origin);return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function P(a,t,e="Operation"){return!t||t<=0?a:new Promise((s,r)=>{let n=setTimeout(()=>{r(new Error(`${e} timed out after ${t}ms`))},t);Promise.resolve(a).then(i=>{clearTimeout(n),s(i)}).catch(i=>{clearTimeout(n),r(i)})})}function H(a){return String(a).replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function L(a,t,e){let s=window.screen.width/2-t/2,r=window.screen.height/2-e/2;return window.open(a,"",`toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=${t}, height=${e}, top=${r}, left=${s}`)}function M(a){if(a==null)return"";let t=String(a).trim();return t?t.replace(/([a-z0-9])([A-Z])/g,"$1 $2").replace(/[_-]+/g," ").replace(/\s+/g," ").trim():""}var E={result:"ac-suggestion",item:"ac-itm"},O=class a extends EventTarget{constructor(t,e,s={}){super(),this.settings={emptyResultsText:"",progressive:!
|
|
1
|
+
function A(a){let t=Array.isArray(a?.strings)?a.strings:[],e=Array.isArray(a?.values)?a.values:[],s=new Set,r=[],n=/(\s)(\.[\w-]+)=["']?\s*$/,i=/(\s)(@[\w-]+)=["']?\s*$/,l=/(\s)(\?[\w-]+)=["']?\s*$/,h=/(\s)([\w:-]+)=["']?\s*$/,f=/=["']\s*$/,g=!1;for(let o=0;o<t.length;o+=1){let u=t[o]??"";if(g&&(u=u.replace(/^["']/,""),g=!1),o<e.length){let m=`pds-val-${o}`,x=u.match(n),y=u.match(i),b=u.match(l),C=u.match(h);if(x){let w=x[2].slice(1);g=f.test(t[o]??""),u=u.replace(n,`$1data-pds-bind-${o}="prop:${w}:${m}"`),s.add(o)}else if(y){let w=y[2].slice(1);g=f.test(t[o]??""),u=u.replace(i,`$1data-pds-bind-${o}="event:${w}:${m}"`),s.add(o)}else if(b){let w=b[2].slice(1);g=f.test(t[o]??""),u=u.replace(l,`$1data-pds-bind-${o}="boolean:${w}:${m}"`),s.add(o)}else if(C){let w=C[2];g=f.test(t[o]??""),u=u.replace(h,`$1data-pds-bind-${o}="attr:${w}:${m}"`),s.add(o)}}r.push(u),o<e.length&&!s.has(o)&&r.push(`<!--pds-val-${o}-->`)}let p=document.createElement("template");p.innerHTML=r.join("");let c=(o,u)=>{let m=o.parentNode;if(!m)return;if(u==null){m.removeChild(o);return}let x=y=>{if(y!=null){if(y instanceof Node){m.insertBefore(y,o);return}if(Array.isArray(y)){y.forEach(b=>x(b));return}m.insertBefore(document.createTextNode(String(y)),o)}};x(u),m.removeChild(o)},d=document.createTreeWalker(p.content,NodeFilter.SHOW_COMMENT),v=[];for(;d.nextNode();){let o=d.currentNode;o?.nodeValue?.startsWith("pds-val-")&&v.push(o)}return v.forEach(o=>{let u=Number(o.nodeValue.replace("pds-val-",""));c(o,e[u])}),p.content.querySelectorAll("*").forEach(o=>{[...o.attributes].forEach(u=>{if(!u.name.startsWith("data-pds-bind-"))return;let m=u.value.indexOf(":"),x=u.value.lastIndexOf(":");if(m<=0||x<=m){o.removeAttribute(u.name);return}let y=u.value.slice(0,m),b=u.value.slice(m+1,x),C=u.value.slice(x+1),w=Number(String(C).replace("pds-val-","")),$=e[w];if(!b||!Number.isInteger(w)){o.removeAttribute(u.name);return}y==="prop"?o[b]=$:y==="event"?(typeof $=="function"||$&&typeof $.handleEvent=="function")&&o.addEventListener(b,$):y==="boolean"?$?o.setAttribute(b,""):o.removeAttribute(b):y==="attr"&&($==null||$===!1?o.removeAttribute(b):o.setAttribute(b,String($))),o.removeAttribute(u.name)})}),p.content}function N(a,...t){if(Array.isArray(a)&&Object.prototype.hasOwnProperty.call(a,"raw"))return A({strings:Array.from(a),values:t});if(Array.isArray(a?.strings)&&Array.isArray(a?.values))return A({strings:a.strings,values:a.values});let s=document.createElement("template");return s.innerHTML=String(a??""),s.content}function S(a,...t){return N(a,...t).childNodes}function D(a,t=100){let e;return function(...r){let n=()=>{clearTimeout(e),a(...r)};clearTimeout(e),e=setTimeout(n,t)}}function I(a){setTimeout(a,0)}function k(a){try{if(typeof a!="string"||a.indexOf(`
|
|
2
|
+
`)!==-1||a.indexOf(" ")!==-1||a.startsWith("#/"))return!1;let t=new URL(a,window.location.origin);return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function P(a,t,e="Operation"){return!t||t<=0?a:new Promise((s,r)=>{let n=setTimeout(()=>{r(new Error(`${e} timed out after ${t}ms`))},t);Promise.resolve(a).then(i=>{clearTimeout(n),s(i)}).catch(i=>{clearTimeout(n),r(i)})})}function H(a){return String(a).replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function L(a,t,e){let s=window.screen.width/2-t/2,r=window.screen.height/2-e/2;return window.open(a,"",`toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=${t}, height=${e}, top=${r}, left=${s}`)}function M(a){if(a==null)return"";let t=String(a).trim();return t?t.replace(/([a-z0-9])([A-Z])/g,"$1 $2").replace(/[_-]+/g," ").replace(/\s+/g," ").trim():""}var E={result:"ac-suggestion",item:"ac-itm"},O=class a extends EventTarget{constructor(t,e,s={}){super(),this.settings={emptyResultsText:"",progressive:!0,maxConcurrentCategories:3,categoryTimeoutMs:0,...s},this.container=t,this.input=e,this.input.setAttribute("autocomplete","off"),this.categories=s.categories||{},this.caches=new Map,this.rowIndex=-1,this.results=[],this.requestToken=0,I(this.attach.bind(this))}static connect(t,e){let s=t.target;if(!s._autoComplete){if(!e?.categories)throw Error("Missing autocomplete settings");s._autoComplete=new a(s.parentNode,s,e),t.type==="focus"&&setTimeout(()=>{s._autoComplete.focusHandler(t)},100)}return s._autoComplete}on(t,e){return this.input.addEventListener(t,e),this}attach(){this.resultsDiv=document.createElement("div"),this.resultsDiv.title="",this.resultsDiv.classList.add(E.result),this.container.offsetWidth>100&&(this.resultsDiv.style.width=`${this.container.offsetWidth}px`),this.resultsDiv.addEventListener("mousedown",this.resultClick.bind(this)),this.container.classList.add("ac-container"),this.input.classList.add("ac-input");let t=getComputedStyle(this.input);this.container.style.setProperty("--ac-bg-default",t.backgroundColor),this.container.style.setProperty("--ac-color-default",t.color);let e=t.accentColor;e!=="auto"&&this.container.style.setProperty("--ac-accent-color",e),(this.container?.shadowRoot??this.container).appendChild(this.resultsDiv),this.controller().clear("attach"),this.on("input",D(this.inputHandler.bind(this),this.settings.throttleInputMs??300)).on("focus",this.focusHandler.bind(this)).on("focusout",this.blurHandler.bind(this)).on("keyup",this.keyUpHandler.bind(this)).on("keydown",this.keyDownHandler.bind(this))}controller(){let t=this.internalController();return typeof this.settings.controller=="function"&&(t=this.settings.controller(this)??t),t}internalController(){return{show:this.show.bind(this),hide:this.hide.bind(this),clear:this.clear.bind(this),empty:()=>{}}}moveResult(t){this.controller().show();let e=this.acItems?.length??0;if(!e)return;this.rowIndex=this.rowIndex+t,this.rowIndex<=0?this.rowIndex=0:this.rowIndex>e-1&&(this.rowIndex=0);for(let r of this.acItems)r.classList.remove("selected");let s=this.getSelectedDiv();s?(s.classList.add("selected"),s.scrollIntoView({behavior:"smooth",block:"end",inline:"nearest"})):this.focusHandler({target:this.input})}getSelectedDiv(){return this.resultsDiv?.querySelector(`div:nth-child(${this.rowIndex+1})`)}selectResult(t){let e=t||this.getSelectedDiv();if(!e)return;let s=Number.parseInt(e.getAttribute("data-index"),10);this.resultClicked=!0;let r=Number.isInteger(s)?this.results[s]:null;if(!r)return;let n=this.categories[r.category]??{},i=typeof n.action=="function"?n.action:this.setText.bind(this);n.newTab&&(this.tabWindow=L("about:blank",960,700));let l={...r,search:this.input.value,selectedItem:e};e.classList.add("ac-active"),setTimeout(()=>{this.controller().hide("result-selected"),typeof l.action=="function"?l.action(l):(i(l),n.newTab&&this.tabWindow&&(l.url?this.tabWindow.location.href=l.url:this.tabWindow.close())),this.input.dispatchEvent(new Event("change",{bubbles:!0})),this.controller().clear("result-selected");let h=new Event("result-selected");h.detail=l,this.input.dispatchEvent(h)},0)}setText(t){let e=!1;this.input?(this.input.value=t.text,e=!0):this.container?.autoCompleteInput?(this.container.autoCompleteInput.value=t.text,e=!0):"value"in this.container&&(this.container.value=t.text,e=!0),e&&this.input&&this.input.dispatchEvent(new Event("input",{bubbles:!0})),this.controller().hide("settext")}resultClick(t){this.selectResult(t.target.closest(`.${E.item}`))}blurHandler(){setTimeout(()=>{this.resultClicked||this.controller().clear("blurred"),this.resultClicked=!1},100)}clear(t,e={}){this.settings.debug||this.resultsDiv&&(this.resultsDiv.innerHTML="",e.preserveOpen||this.controller().hide("clear"),this.cacheTmr&&clearTimeout(this.cacheTmr),this.cacheTmr=setTimeout(()=>{this.caches.clear()},5*60*1e3))}show(){if(!this.resultsDiv.classList.contains("ac-active")){let t=this.getViewBounds();this.resultsDiv.style.position="absolute",t.rect.width>100&&(this.resultsDiv.style.width=`${t.rect.width}px`),this.settings.direction=this.settings.direction??t.suggestedDirection,this.resultsDiv.setAttribute("data-direction",this.settings.direction),this.settings.direction==="up"?(this.resultsDiv.style.top="unset",this.resultsDiv.style.bottom=`${t.rect.height+20}px`,this.rowIndex=this.acItems.length):(this.resultsDiv.style.bottom="unset",this.resultsDiv.style.top=`${t.rect.height}px`,this.rowIndex=-1),this.resultsDiv.style.maxWidth="unset",this.resultsDiv.classList.toggle("ac-active",!0)}}getViewBounds(){let t=this.input.getBoundingClientRect();return{rect:t,suggestedDirection:t.top+t.height+500>window.innerHeight?"up":"down"}}hide(){this.resultsDiv.classList.toggle("ac-active",!1)}empty(){this.resultsDiv.innerHTML=`<div class="ac-empty">${this.settings.emptyResultsText}</div>`,this.controller().show()}async inputHandler(t){this.cacheTmr&&clearTimeout(this.cacheTmr);let e={search:t.target.value,categories:this.categories},s=this.requestToken+1,r=this.settings.progressive===!0,n="",i=!1;this.container.classList.add("search-running");let l=(g,p={})=>{!r||p.token!==this.requestToken||(i=!0,n=this.resultsSignature(g),this.resultsHandler(g,e),this.input.dispatchEvent(new CustomEvent("results:partial",{detail:{results:g,token:p.token,pending:p.pending??0,completed:p.completed??0,settled:p.settled??!1}})))},h=await this.getItems(e,t,{onProgress:l,forceToken:s}).catch(()=>[]);if(s!==this.requestToken){this.container.classList.remove("search-running");return}let f=this.resultsSignature(h);(!i||f!==n)&&this.resultsHandler(h,e),this.input.dispatchEvent(new CustomEvent("results:complete",{detail:{results:h,token:s,pending:0,completed:Object.keys(this.categories||{}).length,settled:!0}})),this.container.classList.remove("search-running")}keyDownHandler(t){switch(t.key){case"Enter":t.stopPropagation(),t.preventDefault();break;case"ArrowDown":I(()=>this.moveResult(1));break;case"ArrowUp":I(()=>this.moveResult(-1));break;default:break}}keyUpHandler(t){switch(t.key){case"Escape":this.controller().hide("escape");break;case"Enter":this.getSelectedDiv()&&(this.container.preventEnter=!0,t.stopPropagation(),t.preventDefault(),this.selectResult(),setTimeout(()=>{this.container.preventEnter=!1},10));break;default:break}}focusHandler(t){this.controller().clear("focus"),this.suggest(t.target.value,t)}suggest(t,e){this.input.focus();let s={suggest:!0,search:t||"",categories:this.categories};this.getItems(s,e).then(r=>{this.input.dispatchEvent(new CustomEvent("show-results",{detail:{results:r}})),this.resultsHandler(r,s)})}sort(t,e){return t.sort((s,r)=>{let n=e.categories[s.category],i=e.categories[r.category],l=typeof n.sortIndex=="function"?n.sortIndex(e):n.sortIndex??0;return(typeof i.sortIndex=="function"?i.sortIndex(e):i.sortIndex??0)>l?1:-1})}resultsHandler(t,e){this.results=t,this.rowIndex=-1,this.resultsDiv.innerHTML="";let s=0,r=(n,i)=>{let l=this.formatCategoryLabel(i.category);return`
|
|
3
3
|
<div title="${i.tooltip||""}" data-index="${s}" class="${`${E.item} cat-${i.category} ${i.class??""}`.trim()}"${i.style?` style="${i.style}"`:""}>
|
|
4
4
|
${this.handleImageOrIcon(i)}
|
|
5
5
|
<span class="text">${this.formatResultItem(i,e,n)}</span>
|
|
6
6
|
${this.settings.hideCategory?"":`<span class="category">${l}</span>`}
|
|
7
|
-
</div>`};t.forEach(n=>{let i=e.categories[n.category]||{};if(n.element)this.resultsDiv.appendChild(n.element);else{let h=S(r(i,typeof n=="string"?{text:n}:n)),f=Array.from(h).find(g=>g&&g.nodeType===Node.ELEMENT_NODE);f&&this.resultsDiv.appendChild(f)}s+=1}),t.length?(this.acItems=this.resultsDiv.querySelectorAll(".ac-itm"),this.controller().show()):e.search.length&&this.controller().empty()}handleImageOrIcon(t){return t.image?`<img src="${t.image}"/>`:typeof this.settings.iconHandler=="function"?this.settings.iconHandler(t):`<svg-icon icon="${t.icon}"></svg-icon>`}formatResultItem(t,e,s){let r=typeof t=="string"?{text:t}:t,n=r.text;return e.search&&(n=n.replace("%search%",e.search),r.description=r.description?.replace("%search%",e.search)),n=this.highlight(n,e.search),r.description&&(n=`<div>${n}</div><small>${r.description}</small>`),s.format&&(n=s.format({item:r,result:n,options:e})),n}formatCategoryLabel(t){return this.settings.humanizeCategoryLabels===!1?t||"":M(t||"")}highlight(t,e){if(!e)return t;try{let s=new RegExp(`(${H(e)})`,"gi");return t.replace(s,'<span class="txt-hl">$1</span>')}catch{return t}}resultsSignature(t){return!Array.isArray(t)||t.length===0?"":t.map(e=>!e||typeof e!="object"?String(e):`${e.category??""}|${e.id??""}|${e.value??""}|${e.text??""}`).join("||")}getCacheKey(t){let e=this.settings.locale||document?.documentElement?.lang||navigator?.language||"",s=String(t?.search??"").trim().toLowerCase(),r=Object.keys(t?.categories||{}).join(",");return`${e}::${s}::${r}`}async getItems(t,e,s={}){this.aborter&&this.aborter.abort();let r=s.forceToken||this.requestToken+1;this.requestToken=r;let n=this.getCacheKey(t);if(this.settings.cache!==!1&&this.caches.has(n)){let c=this.caches.get(n);return typeof s.onProgress=="function"&&s.onProgress(c,{token:r,pending:0,completed:Object.keys(t.categories||{}).length,settled:!0}),c}this.aborter=new AbortController,this.aborterSignal=this.aborter.signal;let i=this.items,l=this.settings.map,h=c=>typeof c=="string"?{text:c}:c,f=c=>l?c.map(d=>({text:d[l]})):c.map(d=>h(d)),g=c=>(this.settings.max&&this.settings.max>0&&(c.length=this.settings.max),c),p=c=>{let d=this.sort(c,t);return this.settings.cache!==!1&&this.caches.set(n,d),d};if(k(i)){if(this.settings.minlength>0&&(!t.search||t.search.length<this.settings.minlength))return p([]);let c=this.formatSearch(i,t),d=await fetch(c,{signal:this.aborterSignal});if(d.status!==200)throw Error(`HTTP error ${d.status} - ${c}`);let T=f(await d.json()).filter(o=>this.isMatch(t,o));return p(g(T))}if(Array.isArray(i)){let c=!0;return this.items=i.map(d=>typeof d=="string"?{text:d}:(c=!1,d)),c&&this.container.classList.add("simple"),p(g(f(this.items)))}if(typeof i=="function"){t.control=this.container;let c=this.settings.progressive===!0,d=await this.items(t,e,{progressive:c,token:r,onProgress:s.onProgress});return p(f(d))}return Promise.resolve(i.apply(this,t)).then(c=>p(c))}async runCategorySearch(t,e,s){let r=Number(this.settings.categoryTimeoutMs||0),n={...t,signal:this.aborterSignal};try{let i=await P(Promise.resolve(s.getItems(n)),r,`Category "${e}"`);return(Array.isArray(i)?i:[]).map(h=>{let f=typeof h=="string"?{text:h}:h;return f.category=e,f})}catch(i){return console.warn(`Error loading items for omniBox category '${e}'.`,i),[]}}async runCategoriesSequentially(t,e,s={}){let r=[],n=0;for(let[i,l]of e){let h=l||{};if(h.trigger=h.trigger??(()=>!0),h.getItems=h.getItems??(()=>[]),t.results=r,!h.trigger(t)){n+=1;continue}let f=await this.runCategorySearch(t,i,h);if(this.aborterSignal?.aborted)return r;if(r=r.concat(f),n+=1,typeof s.onProgress=="function"&&this.requestToken===s.token){let g=this.sort([...r],t);s.onProgress(g,{token:s.token,pending:Math.max(0,e.length-n),completed:n,settled:n===e.length})}}return r}async runCategoriesProgressive(t,e,s={}){let r=Math.max(1,Number(this.settings.maxConcurrentCategories||3)),n=[];for(let[c,d]of e){let
|
|
7
|
+
</div>`};t.forEach(n=>{let i=e.categories[n.category]||{};if(n.element)this.resultsDiv.appendChild(n.element);else{let h=S(r(i,typeof n=="string"?{text:n}:n)),f=Array.from(h).find(g=>g&&g.nodeType===Node.ELEMENT_NODE);f&&this.resultsDiv.appendChild(f)}s+=1}),t.length?(this.acItems=this.resultsDiv.querySelectorAll(".ac-itm"),this.controller().show()):e.search.length&&this.controller().empty()}handleImageOrIcon(t){return t.image?`<img src="${t.image}"/>`:typeof this.settings.iconHandler=="function"?this.settings.iconHandler(t):`<svg-icon icon="${t.icon}"></svg-icon>`}formatResultItem(t,e,s){let r=typeof t=="string"?{text:t}:t,n=r.text;return e.search&&(n=n.replace("%search%",e.search),r.description=r.description?.replace("%search%",e.search)),n=this.highlight(n,e.search),r.description&&(n=`<div>${n}</div><small>${r.description}</small>`),s.format&&(n=s.format({item:r,result:n,options:e})),n}formatCategoryLabel(t){return this.settings.humanizeCategoryLabels===!1?t||"":M(t||"")}highlight(t,e){if(!e)return t;try{let s=new RegExp(`(${H(e)})`,"gi");return t.replace(s,'<span class="txt-hl">$1</span>')}catch{return t}}resultsSignature(t){return!Array.isArray(t)||t.length===0?"":t.map(e=>!e||typeof e!="object"?String(e):`${e.category??""}|${e.id??""}|${e.value??""}|${e.text??""}`).join("||")}getCacheKey(t){let e=this.settings.locale||document?.documentElement?.lang||navigator?.language||"",s=String(t?.search??"").trim().toLowerCase(),r=Object.keys(t?.categories||{}).join(",");return`${e}::${s}::${r}`}async getItems(t,e,s={}){this.aborter&&this.aborter.abort();let r=s.forceToken||this.requestToken+1;this.requestToken=r;let n=this.getCacheKey(t);if(this.settings.cache!==!1&&this.caches.has(n)){let c=this.caches.get(n);return typeof s.onProgress=="function"&&s.onProgress(c,{token:r,pending:0,completed:Object.keys(t.categories||{}).length,settled:!0}),c}this.aborter=new AbortController,this.aborterSignal=this.aborter.signal;let i=this.items,l=this.settings.map,h=c=>typeof c=="string"?{text:c}:c,f=c=>l?c.map(d=>({text:d[l]})):c.map(d=>h(d)),g=c=>(this.settings.max&&this.settings.max>0&&(c.length=this.settings.max),c),p=c=>{let d=this.sort(c,t);return this.settings.cache!==!1&&this.caches.set(n,d),d};if(k(i)){if(this.settings.minlength>0&&(!t.search||t.search.length<this.settings.minlength))return p([]);let c=this.formatSearch(i,t),d=await fetch(c,{signal:this.aborterSignal});if(d.status!==200)throw Error(`HTTP error ${d.status} - ${c}`);let T=f(await d.json()).filter(o=>this.isMatch(t,o));return p(g(T))}if(Array.isArray(i)){let c=!0;return this.items=i.map(d=>typeof d=="string"?{text:d}:(c=!1,d)),c&&this.container.classList.add("simple"),p(g(f(this.items)))}if(typeof i=="function"){t.control=this.container;let c=this.settings.progressive===!0,d=await this.items(t,e,{progressive:c,token:r,onProgress:s.onProgress});return p(f(d))}return Promise.resolve(i.apply(this,t)).then(c=>p(c))}async runCategorySearch(t,e,s){let r=Number(this.settings.categoryTimeoutMs||0),n={...t,signal:this.aborterSignal};try{let i=await P(Promise.resolve(s.getItems(n)),r,`Category "${e}"`);return(Array.isArray(i)?i:[]).map(h=>{let f=typeof h=="string"?{text:h}:h;return f.category=e,f})}catch(i){return console.warn(`Error loading items for omniBox category '${e}'.`,i),[]}}async runCategoriesSequentially(t,e,s={}){let r=[],n=0;for(let[i,l]of e){let h=l||{};if(h.trigger=h.trigger??(()=>!0),h.getItems=h.getItems??(()=>[]),t.results=r,!h.trigger(t)){n+=1;continue}let f=await this.runCategorySearch(t,i,h);if(this.aborterSignal?.aborted)return r;if(r=r.concat(f),n+=1,typeof s.onProgress=="function"&&this.requestToken===s.token){let g=this.sort([...r],t);s.onProgress(g,{token:s.token,pending:Math.max(0,e.length-n),completed:n,settled:n===e.length})}}return r}async runCategoriesProgressive(t,e,s={}){let r=Math.max(1,Number(this.settings.maxConcurrentCategories||3)),n=[];for(let[c,d]of e){let v=d||{};v.trigger=v.trigger??(()=>!0),v.getItems=v.getItems??(()=>[]),t.results=[],v.trigger(t)&&n.push([c,v])}if(!n.length)return[];let i=0,l=0,h=[],f=async()=>{for(;i<n.length;){let c=i;i+=1;let[d,v]=n[c],T=await this.runCategorySearch(t,d,v);if(this.aborterSignal?.aborted)return;if(h.push(...T),l+=1,typeof s.onProgress=="function"&&this.requestToken===s.token){let o=this.sort([...h],t);s.onProgress(o,{token:s.token,pending:Math.max(0,n.length-l),completed:l,settled:l===n.length})}}},g=[],p=Math.min(r,n.length);for(let c=0;c<p;c+=1)g.push(f());return await Promise.all(g),h}async items(t,e,s={}){t.results=[],t.signal=this.aborterSignal;let r=Object.entries(t.categories||{});return r.length?s.progressive?this.runCategoriesProgressive(t,r,s):this.runCategoriesSequentially(t,r,s):[]}formatSearch(t,e){return t.indexOf("%search%")?t.replace("%search%",e.search||""):`${t}?${this.createQueryParam(e)}`}createQueryParam(t){let e=t.suggest?"&suggest=true":"";return`q=${t.text}${e}`}isMatch(t,e){return e.text?.indexOf("%search%")>=0?!0:t.search?e.text?.toLowerCase().indexOf(t.search.toLowerCase())>=0:t.suggest}static textFilter(t,e){return function(r){if(!t.search)return!0;if(r.hidden)return!1;let i=(e?r[e]:r).match(new RegExp(t.search,"gi"));return i||(r.config?.tags?r.config.tags.some(l=>l.match(new RegExp(t.search,"gi"))):!1)}}};export{O as AutoComplete};
|
|
@@ -20,7 +20,7 @@ class AutoComplete extends EventTarget {
|
|
|
20
20
|
|
|
21
21
|
this.settings = {
|
|
22
22
|
emptyResultsText: "",
|
|
23
|
-
progressive:
|
|
23
|
+
progressive: true,
|
|
24
24
|
maxConcurrentCategories: 3,
|
|
25
25
|
categoryTimeoutMs: 0,
|
|
26
26
|
...settings,
|
|
@@ -221,12 +221,14 @@ class AutoComplete extends EventTarget {
|
|
|
221
221
|
}, 100);
|
|
222
222
|
}
|
|
223
223
|
|
|
224
|
-
clear() {
|
|
224
|
+
clear(_reason, options = {}) {
|
|
225
225
|
if (this.settings.debug) return;
|
|
226
226
|
if (!this.resultsDiv) return;
|
|
227
227
|
|
|
228
228
|
this.resultsDiv.innerHTML = "";
|
|
229
|
-
|
|
229
|
+
if (!options.preserveOpen) {
|
|
230
|
+
this.controller().hide("clear");
|
|
231
|
+
}
|
|
230
232
|
|
|
231
233
|
if (this.cacheTmr) clearTimeout(this.cacheTmr);
|
|
232
234
|
this.cacheTmr = setTimeout(() => {
|
|
@@ -298,7 +300,6 @@ class AutoComplete extends EventTarget {
|
|
|
298
300
|
hadPartial = true;
|
|
299
301
|
lastPartialSignature = this.resultsSignature(partialResults);
|
|
300
302
|
|
|
301
|
-
this.controller().clear("new-results-partial");
|
|
302
303
|
this.resultsHandler(partialResults, options);
|
|
303
304
|
|
|
304
305
|
this.input.dispatchEvent(
|
|
@@ -326,7 +327,6 @@ class AutoComplete extends EventTarget {
|
|
|
326
327
|
|
|
327
328
|
const finalSignature = this.resultsSignature(results);
|
|
328
329
|
if (!hadPartial || finalSignature !== lastPartialSignature) {
|
|
329
|
-
this.controller().clear("new-results");
|
|
330
330
|
this.resultsHandler(results, options);
|
|
331
331
|
}
|
|
332
332
|
|
package/src/js/pds.d.ts
CHANGED
|
@@ -461,6 +461,8 @@ export class PDS extends EventTarget {
|
|
|
461
461
|
/**
|
|
462
462
|
* Reactive state container class for building reactive components.
|
|
463
463
|
* Fires custom events ('change' and 'change:propertyName') when state properties are modified.
|
|
464
|
+
*
|
|
465
|
+
* @experimental API shape and event patterns may evolve.
|
|
464
466
|
*/
|
|
465
467
|
static State: typeof State;
|
|
466
468
|
|
|
@@ -771,12 +773,20 @@ export class SchemaForm extends HTMLElement {
|
|
|
771
773
|
}
|
|
772
774
|
|
|
773
775
|
export function parse(html: PDSParseInput, ...values: unknown[]): NodeListOf<ChildNode>;
|
|
776
|
+
/**
|
|
777
|
+
* Experimental tagged-template helper for building DOM fragments without Lit.
|
|
778
|
+
* Supports attribute, event, boolean, and property-style bindings.
|
|
779
|
+
*
|
|
780
|
+
* @experimental API shape and binding semantics may evolve.
|
|
781
|
+
*/
|
|
774
782
|
export function html(html: PDSParseInput, ...values: unknown[]): DocumentFragment;
|
|
775
783
|
|
|
776
784
|
/**
|
|
777
785
|
* Reactive state container that fires custom events on property mutations.
|
|
778
786
|
* When properties change, it emits "change" and "change:propertyName" events.
|
|
779
787
|
*
|
|
788
|
+
* @experimental API shape and event patterns may evolve.
|
|
789
|
+
*
|
|
780
790
|
* @example
|
|
781
791
|
* ```javascript
|
|
782
792
|
* const state = new State({ count: 0 });
|
package/src/js/pds.js
CHANGED
|
@@ -643,11 +643,11 @@ PDS.adoptPrimitives = adoptPrimitives;
|
|
|
643
643
|
export const parse = common.parseHTML;
|
|
644
644
|
PDS.parse = parse;
|
|
645
645
|
|
|
646
|
-
/**
|
|
646
|
+
/** Experimental: parse HTML or tagged templates into a DocumentFragment */
|
|
647
647
|
export const html = common.parseFragment;
|
|
648
648
|
PDS.html = html;
|
|
649
649
|
|
|
650
|
-
/**
|
|
650
|
+
/** Experimental reactive state container for building reactive components */
|
|
651
651
|
PDS.State = State;
|
|
652
652
|
|
|
653
653
|
// /** Create a reactive component with automatic re-rendering */
|
|
@@ -45,6 +45,522 @@ const dropdownStoryStyles = html`
|
|
|
45
45
|
</style>
|
|
46
46
|
`;
|
|
47
47
|
|
|
48
|
+
const facetedSearchStoryStyles = html`
|
|
49
|
+
<style>
|
|
50
|
+
[data-faceted-story] {
|
|
51
|
+
position: relative;
|
|
52
|
+
z-index: 40;
|
|
53
|
+
width: min(100%, 68rem);
|
|
54
|
+
padding: var(--spacing-6) var(--spacing-5);
|
|
55
|
+
border: 1px solid var(--color-border);
|
|
56
|
+
background-color: var(--color-surface-subtle);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-faceted-story] [data-facet-heading] {
|
|
60
|
+
margin: 0 0 var(--spacing-2) 0;
|
|
61
|
+
font-size: var(--font-size-lg);
|
|
62
|
+
color: var(--color-text-primary);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-faceted-story] [data-facet-intro] {
|
|
66
|
+
margin: 0 0 var(--spacing-4) 0;
|
|
67
|
+
color: var(--color-text-secondary);
|
|
68
|
+
font-size: var(--font-size-sm);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-faceted-story] [data-facet-bar] {
|
|
72
|
+
position: relative;
|
|
73
|
+
z-index: 40;
|
|
74
|
+
overflow: visible;
|
|
75
|
+
padding-top: var(--spacing-xs, 0.4rem);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[data-faceted-story] [data-facet-row] {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: stretch;
|
|
81
|
+
flex-wrap: nowrap;
|
|
82
|
+
gap: var(--spacing-sm, 0.5rem);
|
|
83
|
+
overflow: visible;
|
|
84
|
+
padding-bottom: var(--spacing-2);
|
|
85
|
+
row-gap: var(--spacing-2xs, 0.2rem);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
[data-faceted-story] [data-subfacets] {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-wrap: nowrap;
|
|
91
|
+
gap: var(--spacing-xs, 0.4rem);
|
|
92
|
+
align-items: stretch;
|
|
93
|
+
opacity: 0;
|
|
94
|
+
transform: translateY(var(--spacing-2xs, 0.2rem));
|
|
95
|
+
pointer-events: none;
|
|
96
|
+
transition: opacity 180ms ease 90ms, transform 180ms ease 90ms;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
[data-faceted-story][data-subfacets-ready] [data-subfacets] {
|
|
100
|
+
opacity: 1;
|
|
101
|
+
transform: translateY(0);
|
|
102
|
+
pointer-events: auto;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-faceted-story] [data-facet-group] {
|
|
106
|
+
--facet-accent: var(--color-primary-500);
|
|
107
|
+
position: relative;
|
|
108
|
+
display: inline-flex;
|
|
109
|
+
min-inline-size: 0;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
[data-faceted-story] [data-facet-group][data-group-key="meal-type"] {
|
|
113
|
+
--facet-accent: var(--color-info-500);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
[data-faceted-story] [data-facet-group][data-group-key="diet"] {
|
|
117
|
+
--facet-accent: var(--color-success-500);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
[data-faceted-story] [data-facet-group][data-group-key="allergies"] {
|
|
121
|
+
--facet-accent: var(--color-warning-500);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
[data-faceted-story] [data-facet-group][data-open="true"] {
|
|
125
|
+
z-index: 60;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
[data-faceted-story] [data-facet-toggle] {
|
|
129
|
+
width: auto;
|
|
130
|
+
justify-content: space-between;
|
|
131
|
+
display: inline-flex;
|
|
132
|
+
gap: var(--spacing-2xs, 0.2rem);
|
|
133
|
+
align-items: center;
|
|
134
|
+
text-align: left;
|
|
135
|
+
border-color: color-mix(in oklab, var(--facet-accent) 52%, var(--color-border));
|
|
136
|
+
background: color-mix(in oklab, var(--facet-accent) 8%, var(--color-surface-base));
|
|
137
|
+
color: var(--color-text-primary);
|
|
138
|
+
max-width: 100%;
|
|
139
|
+
min-height: 2.25rem;
|
|
140
|
+
line-height: unset;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
[data-faceted-story] [data-facet-group][data-open="true"] [data-facet-toggle] {
|
|
144
|
+
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--facet-accent) 56%, transparent);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
[data-faceted-story] [data-facet-summary] {
|
|
148
|
+
display: inline-flex;
|
|
149
|
+
align-items: center;
|
|
150
|
+
gap: var(--spacing-3xs, 0.15rem);
|
|
151
|
+
min-width: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
[data-faceted-story] [data-facet-group-label] {
|
|
155
|
+
font-size: var(--font-size-sm);
|
|
156
|
+
color: color-mix(in oklab, var(--facet-accent) 70%, var(--color-text-secondary));
|
|
157
|
+
font-weight: var(--font-weight-semibold);
|
|
158
|
+
letter-spacing: 0.01em;
|
|
159
|
+
line-height: 1;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
[data-faceted-story] [data-facet-summary-sep] {
|
|
163
|
+
opacity: 0.7;
|
|
164
|
+
line-height: 1;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
[data-faceted-story] [data-facet-summary-value] {
|
|
168
|
+
font-size: var(--font-size-sm);
|
|
169
|
+
color: var(--color-text-primary);
|
|
170
|
+
font-weight: var(--font-weight-semibold);
|
|
171
|
+
overflow: hidden;
|
|
172
|
+
text-overflow: ellipsis;
|
|
173
|
+
white-space: nowrap;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
[data-faceted-story] [data-facet-toggle] pds-icon {
|
|
177
|
+
color: color-mix(in oklab, var(--facet-accent) 75%, var(--color-text-secondary));
|
|
178
|
+
pointer-events: none;
|
|
179
|
+
flex-shrink: 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
[data-faceted-story] [data-facet-panel] {
|
|
183
|
+
position: absolute;
|
|
184
|
+
inset-inline-start: 0;
|
|
185
|
+
top: calc(100% + var(--spacing-2xs, 0.2rem));
|
|
186
|
+
z-index: 120;
|
|
187
|
+
min-inline-size: min(28rem, 92vw);
|
|
188
|
+
padding: var(--spacing-xs, 0.4rem);
|
|
189
|
+
border: 1px solid color-mix(in oklab, var(--facet-accent) 34%, var(--color-border));
|
|
190
|
+
border-radius: var(--radius-md, 0.5rem);
|
|
191
|
+
background: color-mix(in oklab, var(--facet-accent) 7%, var(--color-surface-elevated));
|
|
192
|
+
box-shadow: var(--shadow-md);
|
|
193
|
+
margin: 0;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
[data-faceted-story] [data-facet-note] {
|
|
197
|
+
display: block;
|
|
198
|
+
margin-bottom: var(--spacing-xs, 0.4rem);
|
|
199
|
+
font-size: var(--font-size-xs);
|
|
200
|
+
color: var(--color-text-secondary);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
[data-faceted-story] [data-facet-buttons] {
|
|
204
|
+
display: flex;
|
|
205
|
+
flex-wrap: wrap;
|
|
206
|
+
gap: var(--spacing-2xs, 0.2rem);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
[data-faceted-story] [data-facet-buttons] button.btn-secondary[data-active="true"] {
|
|
210
|
+
box-shadow: inset 0 0 0 2px var(--color-primary-500);
|
|
211
|
+
font-weight: var(--font-weight-semibold);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
[data-faceted-story] [data-facet-log] {
|
|
215
|
+
margin: var(--spacing-4) 0 0 0;
|
|
216
|
+
padding: var(--spacing-3);
|
|
217
|
+
border-radius: var(--radius-md);
|
|
218
|
+
border: 1px solid color-mix(in oklab, var(--color-primary-500) 24%, var(--color-border));
|
|
219
|
+
background: color-mix(in oklab, var(--color-surface-base) 90%, var(--color-primary-500) 10%);
|
|
220
|
+
color: var(--color-text-secondary);
|
|
221
|
+
font-size: var(--font-size-xs);
|
|
222
|
+
white-space: pre-wrap;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
@media (max-width: 42rem) {
|
|
226
|
+
[data-faceted-story] {
|
|
227
|
+
padding: var(--spacing-4);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
[data-faceted-story] [data-facet-row] {
|
|
231
|
+
flex-wrap: wrap;
|
|
232
|
+
align-items: flex-start;
|
|
233
|
+
row-gap: var(--spacing-xs);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
[data-faceted-story] [data-subfacets] {
|
|
237
|
+
width: 100%;
|
|
238
|
+
display: flex;
|
|
239
|
+
flex-wrap: wrap;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
[data-faceted-story] [data-facet-group] {
|
|
243
|
+
max-width: 100%;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
[data-faceted-story] [data-facet-panel] {
|
|
247
|
+
min-inline-size: min(100vw - 1rem, 24rem);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
</style>
|
|
251
|
+
`;
|
|
252
|
+
|
|
253
|
+
const FACET_GROUPS = [
|
|
254
|
+
{
|
|
255
|
+
key: "meal-type",
|
|
256
|
+
label: "Meal type",
|
|
257
|
+
multi: false,
|
|
258
|
+
emptyLabel: "Any",
|
|
259
|
+
options: [
|
|
260
|
+
{ key: "pasta", label: "Pasta" },
|
|
261
|
+
{ key: "rice", label: "Rice" },
|
|
262
|
+
{ key: "bread", label: "Bread" },
|
|
263
|
+
{ key: "salad", label: "Salad" },
|
|
264
|
+
],
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
key: "diet",
|
|
268
|
+
label: "Diet",
|
|
269
|
+
multi: true,
|
|
270
|
+
emptyLabel: "Any",
|
|
271
|
+
options: [
|
|
272
|
+
{ key: "vegan", label: "Vegan" },
|
|
273
|
+
{ key: "vegetarian", label: "Vegetarian" },
|
|
274
|
+
{ key: "gluten-free", label: "Gluten-free" },
|
|
275
|
+
{ key: "dairy-free", label: "Dairy-free" },
|
|
276
|
+
],
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
key: "allergies",
|
|
280
|
+
label: "Allergies",
|
|
281
|
+
multi: true,
|
|
282
|
+
emptyLabel: "None",
|
|
283
|
+
options: [
|
|
284
|
+
{ key: "nuts", label: "Nuts" },
|
|
285
|
+
{ key: "shellfish", label: "Shellfish" },
|
|
286
|
+
{ key: "soy", label: "Soy" },
|
|
287
|
+
{ key: "dairy", label: "Dairy" },
|
|
288
|
+
],
|
|
289
|
+
},
|
|
290
|
+
];
|
|
291
|
+
|
|
292
|
+
const FACET_GROUP_MAP = new Map(FACET_GROUPS.map((group) => [group.key, group]));
|
|
293
|
+
let facetedStoryInstance = 0;
|
|
294
|
+
|
|
295
|
+
function toFacetSlug(value) {
|
|
296
|
+
return String(value || "")
|
|
297
|
+
.trim()
|
|
298
|
+
.toLowerCase()
|
|
299
|
+
.replace(/[^a-z0-9]+/g, "-")
|
|
300
|
+
.replace(/^-+|-+$/g, "");
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
function parseFacetString(facetString) {
|
|
304
|
+
const map = new Map();
|
|
305
|
+
if (!facetString) return map;
|
|
306
|
+
|
|
307
|
+
facetString
|
|
308
|
+
.split(";")
|
|
309
|
+
.map((token) => token.trim())
|
|
310
|
+
.filter(Boolean)
|
|
311
|
+
.forEach((token) => {
|
|
312
|
+
const separator = token.indexOf(":");
|
|
313
|
+
if (separator === -1) return;
|
|
314
|
+
const key = toFacetSlug(token.slice(0, separator));
|
|
315
|
+
const values = token
|
|
316
|
+
.slice(separator + 1)
|
|
317
|
+
.split(",")
|
|
318
|
+
.map((value) => toFacetSlug(value))
|
|
319
|
+
.filter(Boolean);
|
|
320
|
+
if (!key || values.length === 0) return;
|
|
321
|
+
map.set(key, values);
|
|
322
|
+
});
|
|
323
|
+
|
|
324
|
+
return map;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
function serializeFacetMap(facetMap) {
|
|
328
|
+
const fixedOrder = ["type", ...FACET_GROUPS.map((group) => group.key)];
|
|
329
|
+
const dynamicKeys = Array.from(facetMap.keys()).filter(
|
|
330
|
+
(key) => !fixedOrder.includes(key),
|
|
331
|
+
);
|
|
332
|
+
const orderedKeys = [...fixedOrder, ...dynamicKeys];
|
|
333
|
+
|
|
334
|
+
return orderedKeys
|
|
335
|
+
.map((key) => {
|
|
336
|
+
const values = facetMap.get(key) || [];
|
|
337
|
+
if (!values.length) return "";
|
|
338
|
+
return `${key}:${values.join(",")}`;
|
|
339
|
+
})
|
|
340
|
+
.filter(Boolean)
|
|
341
|
+
.join(";");
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
function facetOptionLabel(group, optionKey) {
|
|
345
|
+
return group.options.find((option) => option.key === optionKey)?.label || optionKey;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
function summarizeFacetGroup(group, values) {
|
|
349
|
+
if (!values.length) return group.emptyLabel || "Any";
|
|
350
|
+
if (!group.multi) return facetOptionLabel(group, values[0]);
|
|
351
|
+
if (values.length === 1) return facetOptionLabel(group, values[0]);
|
|
352
|
+
return `${values.length} selected`;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
function arraysAreEqual(left, right) {
|
|
356
|
+
if (left.length !== right.length) return false;
|
|
357
|
+
return left.every((item, index) => item === right[index]);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
function isPopoverOpen(element) {
|
|
361
|
+
if (!element || typeof element.matches !== "function") return false;
|
|
362
|
+
try {
|
|
363
|
+
return element.matches(":popover-open");
|
|
364
|
+
} catch {
|
|
365
|
+
return false;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
function initFacetedSearchStory(storyId, initialFacet) {
|
|
370
|
+
const root = document.querySelector(`[data-faceted-story="${storyId}"]`);
|
|
371
|
+
if (!root || root.dataset.facetedStoryReady === "true") return;
|
|
372
|
+
root.dataset.facetedStoryReady = "true";
|
|
373
|
+
|
|
374
|
+
const facetMap = parseFacetString(initialFacet);
|
|
375
|
+
const draftGroupValues = new Map();
|
|
376
|
+
const output = root.querySelector("[data-facet-log]");
|
|
377
|
+
const mainFacetButton = root.querySelector("[data-main-facet-button]");
|
|
378
|
+
const groupElements = Array.from(root.querySelectorAll("[data-facet-group]"));
|
|
379
|
+
|
|
380
|
+
const closeAllGroups = () => {
|
|
381
|
+
groupElements.forEach((groupElement) => {
|
|
382
|
+
const panel = groupElement.querySelector("[data-facet-panel]");
|
|
383
|
+
if (panel && typeof panel.hidePopover === "function") {
|
|
384
|
+
panel.hidePopover();
|
|
385
|
+
}
|
|
386
|
+
groupElement.dataset.open = "false";
|
|
387
|
+
});
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
const dispatchFacetChange = () => {
|
|
391
|
+
const facet = serializeFacetMap(facetMap);
|
|
392
|
+
root.dispatchEvent(
|
|
393
|
+
new CustomEvent("facet-change", {
|
|
394
|
+
bubbles: true,
|
|
395
|
+
composed: true,
|
|
396
|
+
detail: { facet },
|
|
397
|
+
}),
|
|
398
|
+
);
|
|
399
|
+
if (output) {
|
|
400
|
+
output.textContent = `facet-change -> ${facet || "(empty)"}`;
|
|
401
|
+
}
|
|
402
|
+
};
|
|
403
|
+
|
|
404
|
+
const commitDraft = (groupKey) => {
|
|
405
|
+
const group = FACET_GROUP_MAP.get(groupKey);
|
|
406
|
+
if (!group || !group.multi) return;
|
|
407
|
+
|
|
408
|
+
const currentValues = facetMap.get(groupKey) || [];
|
|
409
|
+
const draftValues = draftGroupValues.get(groupKey) || currentValues;
|
|
410
|
+
const normalizedDraft = group.options
|
|
411
|
+
.map((option) => option.key)
|
|
412
|
+
.filter((optionKey) => draftValues.includes(optionKey));
|
|
413
|
+
|
|
414
|
+
if (normalizedDraft.length) {
|
|
415
|
+
facetMap.set(groupKey, normalizedDraft);
|
|
416
|
+
} else {
|
|
417
|
+
facetMap.delete(groupKey);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
if (!arraysAreEqual(currentValues, normalizedDraft)) {
|
|
421
|
+
dispatchFacetChange();
|
|
422
|
+
}
|
|
423
|
+
};
|
|
424
|
+
|
|
425
|
+
const renderState = () => {
|
|
426
|
+
const hasMainFacet = (facetMap.get("type") || []).includes("recipe");
|
|
427
|
+
if (mainFacetButton) {
|
|
428
|
+
mainFacetButton.hidden = !hasMainFacet;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
groupElements.forEach((groupElement) => {
|
|
432
|
+
const groupKey = groupElement.dataset.groupKey;
|
|
433
|
+
const group = FACET_GROUP_MAP.get(groupKey);
|
|
434
|
+
if (!group) return;
|
|
435
|
+
|
|
436
|
+
const panel = groupElement.querySelector("[data-facet-panel]");
|
|
437
|
+
const isOpen = isPopoverOpen(panel);
|
|
438
|
+
groupElement.dataset.open = isOpen ? "true" : "false";
|
|
439
|
+
|
|
440
|
+
const selectedValues = isOpen && group.multi
|
|
441
|
+
? (draftGroupValues.get(groupKey) || facetMap.get(groupKey) || [])
|
|
442
|
+
: (facetMap.get(groupKey) || []);
|
|
443
|
+
|
|
444
|
+
const summaryValue = summarizeFacetGroup(group, selectedValues);
|
|
445
|
+
const summaryValueElement = groupElement.querySelector("[data-facet-summary-value]");
|
|
446
|
+
if (summaryValueElement) {
|
|
447
|
+
summaryValueElement.textContent = summaryValue;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
const toggle = groupElement.querySelector("[data-group-toggle]");
|
|
451
|
+
if (toggle) {
|
|
452
|
+
toggle.setAttribute("aria-label", `${group.label}: ${summaryValue}`);
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
const caret = groupElement.querySelector("[data-group-caret]");
|
|
456
|
+
if (caret) {
|
|
457
|
+
caret.setAttribute("icon", isOpen ? "caret-up" : "caret-down");
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
const selectedSet = new Set(selectedValues);
|
|
461
|
+
groupElement.querySelectorAll("[data-subfacet-option]").forEach((button) => {
|
|
462
|
+
const optionKey = button.dataset.optionKey;
|
|
463
|
+
const isSelected = selectedSet.has(optionKey);
|
|
464
|
+
button.dataset.active = isSelected ? "true" : "false";
|
|
465
|
+
button.setAttribute("aria-pressed", isSelected ? "true" : "false");
|
|
466
|
+
});
|
|
467
|
+
});
|
|
468
|
+
};
|
|
469
|
+
|
|
470
|
+
root.addEventListener("click", (event) => {
|
|
471
|
+
const clearButton = event.target.closest("[data-facet-clear]");
|
|
472
|
+
if (clearButton && root.contains(clearButton)) {
|
|
473
|
+
event.preventDefault();
|
|
474
|
+
facetMap.clear();
|
|
475
|
+
draftGroupValues.clear();
|
|
476
|
+
closeAllGroups();
|
|
477
|
+
renderState();
|
|
478
|
+
dispatchFacetChange();
|
|
479
|
+
return;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
const optionButton = event.target.closest("[data-subfacet-option]");
|
|
483
|
+
if (!optionButton || !root.contains(optionButton)) return;
|
|
484
|
+
|
|
485
|
+
const groupKey = optionButton.dataset.groupKey;
|
|
486
|
+
const optionKey = optionButton.dataset.optionKey;
|
|
487
|
+
const group = FACET_GROUP_MAP.get(groupKey);
|
|
488
|
+
if (!group || !optionKey) return;
|
|
489
|
+
|
|
490
|
+
if (group.multi) {
|
|
491
|
+
const currentDraft = new Set(draftGroupValues.get(groupKey) || facetMap.get(groupKey) || []);
|
|
492
|
+
if (currentDraft.has(optionKey)) {
|
|
493
|
+
currentDraft.delete(optionKey);
|
|
494
|
+
} else {
|
|
495
|
+
currentDraft.add(optionKey);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
const nextDraft = group.options
|
|
499
|
+
.map((option) => option.key)
|
|
500
|
+
.filter((key) => currentDraft.has(key));
|
|
501
|
+
draftGroupValues.set(groupKey, nextDraft);
|
|
502
|
+
renderState();
|
|
503
|
+
return;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
facetMap.set(groupKey, [optionKey]);
|
|
507
|
+
renderState();
|
|
508
|
+
dispatchFacetChange();
|
|
509
|
+
|
|
510
|
+
const panel = optionButton.closest("[data-facet-group]")?.querySelector("[data-facet-panel]");
|
|
511
|
+
if (panel && typeof panel.hidePopover === "function") {
|
|
512
|
+
panel.hidePopover();
|
|
513
|
+
}
|
|
514
|
+
});
|
|
515
|
+
|
|
516
|
+
groupElements.forEach((groupElement) => {
|
|
517
|
+
const groupKey = groupElement.dataset.groupKey;
|
|
518
|
+
const group = FACET_GROUP_MAP.get(groupKey);
|
|
519
|
+
const panel = groupElement.querySelector("[data-facet-panel]");
|
|
520
|
+
if (!group || !panel) return;
|
|
521
|
+
|
|
522
|
+
panel.addEventListener("toggle", (event) => {
|
|
523
|
+
if (event.newState === "open") {
|
|
524
|
+
groupElements.forEach((otherGroup) => {
|
|
525
|
+
if (otherGroup === groupElement) return;
|
|
526
|
+
const otherPanel = otherGroup.querySelector("[data-facet-panel]");
|
|
527
|
+
if (otherPanel && typeof otherPanel.hidePopover === "function" && isPopoverOpen(otherPanel)) {
|
|
528
|
+
otherPanel.hidePopover();
|
|
529
|
+
}
|
|
530
|
+
otherGroup.dataset.open = "false";
|
|
531
|
+
});
|
|
532
|
+
|
|
533
|
+
if (group.multi) {
|
|
534
|
+
draftGroupValues.set(groupKey, [...(facetMap.get(groupKey) || [])]);
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
if (event.newState === "closed") {
|
|
539
|
+
groupElement.dataset.open = "false";
|
|
540
|
+
if (group.multi) {
|
|
541
|
+
commitDraft(groupKey);
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
renderState();
|
|
546
|
+
});
|
|
547
|
+
});
|
|
548
|
+
|
|
549
|
+
root.addEventListener("facet-change", (event) => {
|
|
550
|
+
const detailFacet = event.detail?.facet;
|
|
551
|
+
if (output) {
|
|
552
|
+
output.textContent = `facet-change -> ${detailFacet || "(empty)"}`;
|
|
553
|
+
}
|
|
554
|
+
});
|
|
555
|
+
|
|
556
|
+
requestAnimationFrame(() => {
|
|
557
|
+
root.setAttribute("data-subfacets-ready", "");
|
|
558
|
+
});
|
|
559
|
+
|
|
560
|
+
renderState();
|
|
561
|
+
dispatchFacetChange();
|
|
562
|
+
}
|
|
563
|
+
|
|
48
564
|
export default {
|
|
49
565
|
title: "Enhancements/nav[data-dropdown]",
|
|
50
566
|
tags: ['dropdown', 'menu', 'navigation', 'popover', 'forms', 'interaction'],
|
|
@@ -309,3 +825,132 @@ export const AutoPositionCorners = () => html`
|
|
|
309
825
|
</menu>
|
|
310
826
|
</nav>
|
|
311
827
|
`;
|
|
828
|
+
|
|
829
|
+
export const FacetedSearchSimulation = {
|
|
830
|
+
render: () => {
|
|
831
|
+
const storyId = `faceted-search-story-${++facetedStoryInstance}`;
|
|
832
|
+
|
|
833
|
+
setTimeout(() => {
|
|
834
|
+
initFacetedSearchStory(storyId, "type:recipe;meal-type:pasta;diet:vegan,vegetarian");
|
|
835
|
+
}, 0);
|
|
836
|
+
|
|
837
|
+
return html`
|
|
838
|
+
${facetedSearchStoryStyles}
|
|
839
|
+
${enhancementHeader('dropdown', {
|
|
840
|
+
description: 'Simulates a full faceted-search bar with token-based custom styling on top of nav[data-dropdown], including single-select immediate apply and multi-select apply-on-close behavior.'
|
|
841
|
+
})}
|
|
842
|
+
<section data-faceted-story="${storyId}" class="card">
|
|
843
|
+
<h3 data-facet-heading>Faceted Search Simulation</h3>
|
|
844
|
+
<p data-facet-intro>
|
|
845
|
+
This demo combines a main facet, three custom-styled dropdown facet groups, and a live facet string output.
|
|
846
|
+
</p>
|
|
847
|
+
|
|
848
|
+
<nav data-facet-bar aria-label="Active filters">
|
|
849
|
+
<div data-facet-row>
|
|
850
|
+
<button
|
|
851
|
+
type="button"
|
|
852
|
+
class="btn-primary btn-sm"
|
|
853
|
+
data-main-facet-button
|
|
854
|
+
data-facet-clear="type:recipe"
|
|
855
|
+
aria-label="Remove filter: Recipe"
|
|
856
|
+
>
|
|
857
|
+
Recipe
|
|
858
|
+
<pds-icon icon="x" size="xs" aria-hidden="true"></pds-icon>
|
|
859
|
+
</button>
|
|
860
|
+
|
|
861
|
+
<div data-subfacets>
|
|
862
|
+
<nav data-dropdown data-facet-group data-group-key="meal-type" data-open="false">
|
|
863
|
+
<button
|
|
864
|
+
type="button"
|
|
865
|
+
class="btn-secondary btn-sm"
|
|
866
|
+
data-facet-toggle
|
|
867
|
+
data-dropdown-toggle
|
|
868
|
+
data-group-toggle="meal-type"
|
|
869
|
+
aria-expanded="false"
|
|
870
|
+
aria-label="Meal type: Pasta"
|
|
871
|
+
>
|
|
872
|
+
<span data-facet-summary>
|
|
873
|
+
<span data-facet-group-label>Meal type</span>
|
|
874
|
+
<span data-facet-summary-sep>:</span>
|
|
875
|
+
<span data-facet-summary-value>Pasta</span>
|
|
876
|
+
</span>
|
|
877
|
+
<pds-icon data-group-caret icon="caret-down" size="xs" aria-hidden="true"></pds-icon>
|
|
878
|
+
</button>
|
|
879
|
+
|
|
880
|
+
<section data-facet-panel>
|
|
881
|
+
<small data-facet-note>Selecting an option applies immediately.</small>
|
|
882
|
+
<div data-facet-buttons>
|
|
883
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="meal-type" data-option-key="pasta" data-active="true" aria-pressed="true" data-dropdown-close>Pasta</button>
|
|
884
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="meal-type" data-option-key="rice" data-active="false" aria-pressed="false" data-dropdown-close>Rice</button>
|
|
885
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="meal-type" data-option-key="bread" data-active="false" aria-pressed="false" data-dropdown-close>Bread</button>
|
|
886
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="meal-type" data-option-key="salad" data-active="false" aria-pressed="false" data-dropdown-close>Salad</button>
|
|
887
|
+
</div>
|
|
888
|
+
</section>
|
|
889
|
+
</nav>
|
|
890
|
+
|
|
891
|
+
<nav data-dropdown data-facet-group data-group-key="diet" data-open="false">
|
|
892
|
+
<button
|
|
893
|
+
type="button"
|
|
894
|
+
class="btn-secondary btn-sm"
|
|
895
|
+
data-facet-toggle
|
|
896
|
+
data-dropdown-toggle
|
|
897
|
+
data-group-toggle="diet"
|
|
898
|
+
aria-expanded="false"
|
|
899
|
+
aria-label="Diet: 2 selected"
|
|
900
|
+
>
|
|
901
|
+
<span data-facet-summary>
|
|
902
|
+
<span data-facet-group-label>Diet</span>
|
|
903
|
+
<span data-facet-summary-sep>:</span>
|
|
904
|
+
<span data-facet-summary-value>2 selected</span>
|
|
905
|
+
</span>
|
|
906
|
+
<pds-icon data-group-caret icon="caret-down" size="xs" aria-hidden="true"></pds-icon>
|
|
907
|
+
</button>
|
|
908
|
+
|
|
909
|
+
<section data-facet-panel>
|
|
910
|
+
<small data-facet-note>Selections apply when you close this dropdown.</small>
|
|
911
|
+
<div data-facet-buttons>
|
|
912
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="diet" data-option-key="vegan" data-active="true" aria-pressed="true">Vegan</button>
|
|
913
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="diet" data-option-key="vegetarian" data-active="true" aria-pressed="true">Vegetarian</button>
|
|
914
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="diet" data-option-key="gluten-free" data-active="false" aria-pressed="false">Gluten-free</button>
|
|
915
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="diet" data-option-key="dairy-free" data-active="false" aria-pressed="false">Dairy-free</button>
|
|
916
|
+
</div>
|
|
917
|
+
</section>
|
|
918
|
+
</nav>
|
|
919
|
+
|
|
920
|
+
<nav data-dropdown data-facet-group data-group-key="allergies" data-open="false">
|
|
921
|
+
<button
|
|
922
|
+
type="button"
|
|
923
|
+
class="btn-secondary btn-sm"
|
|
924
|
+
data-facet-toggle
|
|
925
|
+
data-dropdown-toggle
|
|
926
|
+
data-group-toggle="allergies"
|
|
927
|
+
aria-expanded="false"
|
|
928
|
+
aria-label="Allergies: None"
|
|
929
|
+
>
|
|
930
|
+
<span data-facet-summary>
|
|
931
|
+
<span data-facet-group-label>Allergies</span>
|
|
932
|
+
<span data-facet-summary-sep>:</span>
|
|
933
|
+
<span data-facet-summary-value>None</span>
|
|
934
|
+
</span>
|
|
935
|
+
<pds-icon data-group-caret icon="caret-down" size="xs" aria-hidden="true"></pds-icon>
|
|
936
|
+
</button>
|
|
937
|
+
|
|
938
|
+
<section data-facet-panel>
|
|
939
|
+
<small data-facet-note>Selections apply when you close this dropdown.</small>
|
|
940
|
+
<div data-facet-buttons>
|
|
941
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="allergies" data-option-key="nuts" data-active="false" aria-pressed="false">Nuts</button>
|
|
942
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="allergies" data-option-key="shellfish" data-active="false" aria-pressed="false">Shellfish</button>
|
|
943
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="allergies" data-option-key="soy" data-active="false" aria-pressed="false">Soy</button>
|
|
944
|
+
<button type="button" class="btn-secondary btn-sm" data-subfacet-option data-group-key="allergies" data-option-key="dairy" data-active="false" aria-pressed="false">Dairy</button>
|
|
945
|
+
</div>
|
|
946
|
+
</section>
|
|
947
|
+
</nav>
|
|
948
|
+
</div>
|
|
949
|
+
</div>
|
|
950
|
+
</nav>
|
|
951
|
+
|
|
952
|
+
<pre class="card" data-facet-log>facet-change -> type:recipe;meal-type:pasta;diet:vegan,vegetarian</pre>
|
|
953
|
+
</section>
|
|
954
|
+
`;
|
|
955
|
+
}
|
|
956
|
+
};
|
|
@@ -244,8 +244,15 @@ const runtimeSurfaceRows = [
|
|
|
244
244
|
{
|
|
245
245
|
member: 'PDS.html(html | template)',
|
|
246
246
|
type: 'method',
|
|
247
|
+
status: 'Experimental',
|
|
247
248
|
description: 'Parses HTML strings or tagged templates into a DocumentFragment so callers can appendChild() directly. Also available as named export `html` from #pds.'
|
|
248
249
|
},
|
|
250
|
+
{
|
|
251
|
+
member: 'PDS.State',
|
|
252
|
+
type: 'property',
|
|
253
|
+
status: 'Experimental',
|
|
254
|
+
description: 'Reactive state container that emits change events on property mutations. Also available as named export `State` from #pds.'
|
|
255
|
+
},
|
|
249
256
|
{
|
|
250
257
|
member: 'PDS.adoptLayers(root, layers, sheets)',
|
|
251
258
|
type: 'method',
|
|
@@ -407,7 +414,12 @@ function renderTable(rows, columns) {
|
|
|
407
414
|
const body = rows
|
|
408
415
|
.map((row) => {
|
|
409
416
|
const cells = columns
|
|
410
|
-
.map((column) =>
|
|
417
|
+
.map((column) => {
|
|
418
|
+
if (typeof column.render === 'function') {
|
|
419
|
+
return `<td>${column.render(row)}</td>`;
|
|
420
|
+
}
|
|
421
|
+
return `<td>${escapeHTML(row[column.key] ?? '')}</td>`;
|
|
422
|
+
})
|
|
411
423
|
.join('');
|
|
412
424
|
return `<tr>${cells}</tr>`;
|
|
413
425
|
})
|
|
@@ -431,6 +443,13 @@ const pdsObjectDocsHtml = `
|
|
|
431
443
|
${renderTable(runtimeSurfaceRows, [
|
|
432
444
|
{ key: 'member', label: 'Member' },
|
|
433
445
|
{ key: 'type', label: 'Kind' },
|
|
446
|
+
{
|
|
447
|
+
key: 'status',
|
|
448
|
+
label: 'Status',
|
|
449
|
+
render: (row) => row.status
|
|
450
|
+
? `<span class="badge badge-warning">${escapeHTML(row.status)}</span>`
|
|
451
|
+
: 'Stable'
|
|
452
|
+
},
|
|
434
453
|
{ key: 'description', label: 'Description' }
|
|
435
454
|
])}
|
|
436
455
|
</section>
|
|
@@ -3,6 +3,8 @@ import { getCurrentTheme, preloadShiki, renderCodeBlock } from './shiki.js';
|
|
|
3
3
|
|
|
4
4
|
preloadShiki();
|
|
5
5
|
|
|
6
|
+
const experimentalBadgeHTML = '<span class="badge badge-warning">Experimental</span>';
|
|
7
|
+
|
|
6
8
|
const verboseVanillaCode = `const state = { count: 0, saving: false, showTips: false };
|
|
7
9
|
|
|
8
10
|
const save = async () => {
|
|
@@ -224,6 +226,10 @@ const createMergedCard = () => {
|
|
|
224
226
|
section.innerHTML = `
|
|
225
227
|
<header>
|
|
226
228
|
<h3>html template marker</h3>
|
|
229
|
+
<div class="flex gap-sm items-center">
|
|
230
|
+
${experimentalBadgeHTML}
|
|
231
|
+
<small class="text-muted">API shape and binding semantics may evolve while we validate the pattern.</small>
|
|
232
|
+
</div>
|
|
227
233
|
<small class="text-muted">
|
|
228
234
|
Build Lit-style templates in plain JavaScript — no Lit dependency required.
|
|
229
235
|
</small>
|
|
@@ -273,7 +279,7 @@ export default {
|
|
|
273
279
|
},
|
|
274
280
|
docs: {
|
|
275
281
|
description: {
|
|
276
|
-
component: 'Build DOM with the html template marker using vanilla JavaScript, including Lit-style bindings without a Lit dependency.'
|
|
282
|
+
component: 'Experimental API. Build DOM with the html template marker using vanilla JavaScript, including Lit-style bindings without a Lit dependency.'
|
|
277
283
|
}
|
|
278
284
|
}
|
|
279
285
|
}
|
|
@@ -124,9 +124,14 @@ state.saving++; // Updates button state
|
|
|
124
124
|
|
|
125
125
|
export default {
|
|
126
126
|
title: 'PDS/State Management',
|
|
127
|
-
tags: ['utilities', 'reactive', 'state'],
|
|
127
|
+
tags: ['utilities', 'reactive', 'state', 'experimental'],
|
|
128
128
|
parameters: {
|
|
129
129
|
layout: 'centered',
|
|
130
|
+
docs: {
|
|
131
|
+
description: {
|
|
132
|
+
component: 'Experimental API. Reactive state helpers for manual render loops, automatic re-rendering, partial binding updates, and state change events.'
|
|
133
|
+
}
|
|
134
|
+
},
|
|
130
135
|
},
|
|
131
136
|
};
|
|
132
137
|
|
|
@@ -137,6 +142,10 @@ export const BasicStatePattern = {
|
|
|
137
142
|
|
|
138
143
|
div.appendChild(html`
|
|
139
144
|
<div class="stack-sm text-muted">
|
|
145
|
+
<div class="flex gap-sm items-center">
|
|
146
|
+
<span class="badge badge-warning">Experimental</span>
|
|
147
|
+
<small class="text-muted">State APIs are still evolving and may change.</small>
|
|
148
|
+
</div>
|
|
140
149
|
<p><strong>State Class:</strong> A reactive proxy wrapper that fires custom events on property mutations.</p>
|
|
141
150
|
<p><code>state.on('change:propertyName', handler)</code> listens for specific property changes.</p>
|
|
142
151
|
<p><code>state.on('change', handler)</code> listens for any property change.</p>
|
|
@@ -155,6 +164,10 @@ export const ManualRenderApproach = {
|
|
|
155
164
|
|
|
156
165
|
div.appendChild(html`
|
|
157
166
|
<div class="stack-sm text-muted">
|
|
167
|
+
<div class="flex gap-sm items-center">
|
|
168
|
+
<span class="badge badge-warning">Experimental</span>
|
|
169
|
+
<small class="text-muted">State APIs are still evolving and may change.</small>
|
|
170
|
+
</div>
|
|
158
171
|
<p><strong>Manual Render Approach:</strong> You call <code>render()</code> when state changes, or use <code>state.on('change', render)</code>.</p>
|
|
159
172
|
<p>This gives you full control over when and what gets re-rendered.</p>
|
|
160
173
|
</div>
|
|
@@ -220,6 +233,10 @@ export const AutomaticRenderApproach = {
|
|
|
220
233
|
|
|
221
234
|
div.appendChild(html`
|
|
222
235
|
<div class="stack-sm text-muted">
|
|
236
|
+
<div class="flex gap-sm items-center">
|
|
237
|
+
<span class="badge badge-warning">Experimental</span>
|
|
238
|
+
<small class="text-muted">State APIs are still evolving and may change.</small>
|
|
239
|
+
</div>
|
|
223
240
|
<p><strong>Automatic Render Approach:</strong> Use <code>createReactiveComponent()</code> to auto-render on state changes.</p>
|
|
224
241
|
<p>Every state mutation triggers a re-render — no manual <code>render()</code> calls needed!</p>
|
|
225
242
|
</div>
|
|
@@ -276,6 +293,10 @@ export const BindStatePartialUpdates = {
|
|
|
276
293
|
|
|
277
294
|
div.appendChild(html`
|
|
278
295
|
<div class="stack-sm text-muted">
|
|
296
|
+
<div class="flex gap-sm items-center">
|
|
297
|
+
<span class="badge badge-warning">Experimental</span>
|
|
298
|
+
<small class="text-muted">State APIs are still evolving and may change.</small>
|
|
299
|
+
</div>
|
|
279
300
|
<p><strong>Bind State Approach:</strong> Use <code>bindState()</code> for partial, surgery updates without full re-renders.</p>
|
|
280
301
|
<p>Perfect when you want to update specific elements without re-rendering the entire component.</p>
|
|
281
302
|
</div>
|
|
@@ -350,6 +371,10 @@ export const EventListeningPattern = {
|
|
|
350
371
|
|
|
351
372
|
div.appendChild(html`
|
|
352
373
|
<div class="stack-sm text-muted">
|
|
374
|
+
<div class="flex gap-sm items-center">
|
|
375
|
+
<span class="badge badge-warning">Experimental</span>
|
|
376
|
+
<small class="text-muted">State APIs are still evolving and may change.</small>
|
|
377
|
+
</div>
|
|
353
378
|
<p><strong>Event Listening:</strong> State emits two types of custom events:</p>
|
|
354
379
|
<ul class="stack-xs">
|
|
355
380
|
<li><code>'change'</code> — Fired for any property change. Detail: { property, value, oldValue, state }</li>
|