@epa-wg/custom-element-dist 0.0.21 → 0.0.23

package/dist/custom-element-N-sWiqGK.cjs

@@ -0,0 +1,53 @@
+"use strict";const B="http://www.w3.org/1999/XSL/Transform",q="http://www.w3.org/1999/xhtml",de="http://exslt.org/common",x=(e,l)=>e.getAttribute?.(l),K=e=>e.nodeType===3,pe=e=>typeof e=="string",fe=e=>e&&typeof e.nodeType=="number",N=(e,l="",t=document)=>(s=>(l&&s.append(S(t.ownerDocument||t,l)),s))((t.ownerDocument||t).createElement(e)),S=(e,l)=>(e.ownerDocument||e).createTextNode(l),Z=e=>{for(;e.firstChild;)e.firstChild.remove();return e},H=e=>(e.getAttributeNames().map(l=>e.removeAttribute(l)),Z(e)),he=e=>(e?.setAttribute("xmlns:xsl",B),e),xe=e=>(e?.setAttribute("xmlns:xhtml",q),he(e)),Q=(e,l)=>{const t=e.ownerDocument.createElementNS(e.namespaceURI,l);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(;e.firstChild;)t.append(e.firstChild);return t};function $(e){return new DOMParser().parseFromString(e,"application/xml")}function M(e){return new XMLSerializer().serializeToString(e)}function U(e,l,t,s){const n=h=>e.ownerDocument.createElement(h),c=((h,p,m)=>(p.append(m=n(h)),m))(l,e);return[...t].forEach(h=>c.append(s(h))),c}function ye(e){return e.slot||(e.setAttribute||(e=N("span",e.textContent.replaceAll(`
+`,""))),e.setAttribute("slot","")),e}function C(e,l,t){const s=typeof e;if(s==="string")return N(l,e,t);if(s==="number")return N(l,""+e,t);if(e instanceof Array){const i=N("array","",t);return e.map(c=>i.append(C(c,l,t))),i}if(e instanceof FormData){const i=N("form-data","",t);for(const c of e)i.append(C(c[1],c[0],t));return i}const n=N(l,"",t);for(let i in e)fe(e[i])||typeof e[i]=="function"||e[i]instanceof Window||(typeof e[i]!="object"?n.setAttribute(i,e[i]):n.append(C(e[i],i,t)));return n}function W(e){if(D(e,"*",l=>[...l.childNodes].filter(t=>t.nodeType===3&&t.parentNode.localName!=="style"&&t.data).forEach(t=>{const s=t.data,n=s.matchAll(/{([^}]*)}/g);if(n){let i=0,c=p=>S(t,p),h=[];if([...n].forEach(p=>{p.index>i&&h.push(c(p.input.substring(i,p.index)));const m=e.querySelector("value-of").cloneNode();m.setAttribute("select",p[1]),h.push(m),i=p.index+p[0].length}),i<s.length&&h.push(c(s.substring(i,s.length))),h.length){for(let p of h)l.insertBefore(p,t);l.removeChild(t)}}})),"all"in e){let l=1;for(let t of e.all)t.setAttribute&&!t.tagName.startsWith("xsl:")&&t.setAttribute("data-dce-id",""+l++)}return e}function ee(e,l="xsl:stylesheet"){if(e.tagName===l||e.documentElement?.tagName===l)return W(e);const t=$(`<xsl:stylesheet version="1.0" xmlns:xsl="${B}" xmlns:xhtml="${q}" xmlns:exsl="${de}" exclude-result-prefixes="exsl" >
+        <xsl:output method="xml" />
+        <xsl:template match="/"><dce-root xmlns="${q}"><xsl:apply-templates select="*"/></dce-root></xsl:template>
+        <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
+        <xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
+        <xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
+        <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"><xsl:copy><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:copy></xsl:template>
+        <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:element></xsl:template>
+        <xsl:template mode="sanitize" match="*|@*"><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></xsl:template>
+        <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
+        <xsl:template mode="sanitize" match="text()"><dce-text><xsl:copy/></dce-text></xsl:template>
+        <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></xsl:template>
+        <xsl:template mode="sanitize" match="xhtml:*"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:element></xsl:template>
+    </xsl:stylesheet>`),s=new XSLTProcessor,n=(a=>{D(a,"script",v=>v.remove());const o=a.content??a.firstElementChild?.content??a.body??a;oe.forEach(v=>D(o,v,b=>ce(b,o)));const E=a.firstElementChild?.content||a.content,g=v=>{const b=$("<xhtml/>"),P=b.importNode(v,!0);return b.replaceChild(P,b.documentElement),xe(P)};if(E){const v=N("div");return[...E.childNodes].map(b=>v.append(b.cloneNode(!0))),g(v)}return g(a.documentElement||a.body||a)})(e),i=$(`<xsl:stylesheet version="1.0"
+        xmlns:xsl="${B}"
+        xmlns:xhtml="${q}"
+        xmlns:dce="urn:schemas-epa-wg:dce"
+        xmlns:exsl="http://exslt.org/common"
+        exclude-result-prefixes="exsl"
+    >
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr">{//attr}</xsl:when>
+            <xsl:otherwise>{def}</xsl:otherwise>
+        </xsl:choose><xsl:value-of select="."></xsl:value-of></xsl:template>
+    <xsl:template mode="payload"  match="attributes"></xsl:template>
+    <xsl:template match="/">
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </xsl:template>
+    <xsl:template name="slot" >
+        <xsl:param name="slotname" />
+        <xsl:param name="defaultvalue" />
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:copy-of select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:variable name="js-injected-body">
+        <xsl:call-template name="slot" >
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>`);s.importStylesheet(t);const c=s.transformToFragment(n,document),h=(a,o)=>a.querySelector(o),p=h(i,'template[mode="payload"]');if(!c)return console.error("transformation error",{xml:n.outerHTML,xsl:M(t)});const m=[];[...c.querySelectorAll("dce-root>attribute")].forEach(a=>{const o=Q(a,"xsl:param"),E=x(a,"name");p.append(o);let g=x(o,"select")?.split("??");g||(g=["//"+E,`'${o.textContent}'`],H(o),o.setAttribute("name",E));let v;if(g?.length>1){o.removeAttribute("select");const b=h(i,'template[match="ignore"]>choose').cloneNode(!0);H(b.firstElementChild).append(S(b,"{"+g[0]+"}")),H(b.lastElementChild).append(S(b,"{"+g[1]+"}")),b.firstElementChild.setAttribute("test",g[0]),o.append(b),v=b.cloneNode(!0)}else v=Q(a,"xsl:value-of");v.removeAttribute("name"),a.append(v),a.removeAttribute("select"),m.push(o)}),[...c.querySelectorAll("[value]")].filter(a=>a.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(a=>{const o=x(a,"value");o&&a.setAttribute("value",re(o))});for(const a of c.childNodes)p.append(i.importNode(a,!0));[...p.querySelectorAll("template")].forEach(a=>p.ownerDocument.documentElement.append(a));const R=h(i,'call-template[name="slot"]'),d=a=>{const o=R.cloneNode(!0),E=x(a,"name");E&&o.firstElementChild.setAttribute("select",`'${E}'`);for(let g of a.childNodes)o.lastElementChild.append(g);return o};D(p,"slot",a=>a.parentNode.replaceChild(d(a),a));const u=W(i);return u.params=m,u}async function te(e){return await new Promise((t,s)=>{const n=new XMLHttpRequest;n.open("GET",e),n.responseType="document",n.onload=()=>{n.readyState===n.DONE&&n.status===200&&t(n.responseXML||N("div",n.responseText)),s(n.statusText)},n.addEventListener("error",i=>s(i)),n.send()})}function se(e,l,t=!1){if(e===l)return!0;if(typeof e!="object"||e===null||typeof l!="object"||l===null||Object.keys(e).length!==Object.keys(l).length)return t;for(let s in e)if(!(s in l)||!se(e[s],l[s]))return t;return!0}const le=e=>e.split("|").map(l=>l.trim()).filter(l=>l),ne=(e,l)=>le(l).map(t=>{let s=e.ownerDocument,n=i=>(e.append(i),i);if(t.includes("/")){const i=[],c=s.evaluate(t,e);for(let h;h=c.iterateNext();)i.push(h);return i}return[...e.childNodes].find(i=>i.localName===t)||n(N(t,"",s))}).flat();function Y(e,l,t,s){if(!t.sliceProcessed)return t.sliceProcessed=1,ne(e,l??"").map(n=>{const i=e.ownerDocument,c=t.sliceEventSource,h=t.sliceElement,p=()=>[...n.childNodes].filter(m=>m.nodeType===3||m.localName==="value"||m.localName==="form-data").map(m=>m.remove());if(c.getAttributeNames().map(m=>n.setAttribute(m,x(c,m))),[...n.childNodes].filter(m=>m.localName==="event").map(m=>m.remove()),"validationMessage"in c&&n.setAttribute("validation-message",c.validationMessage),t.type==="init"&&p(),n.append(C(t,"event",i)),h.hasAttribute("slice-value")){c.value===void 0?n.removeAttribute("value"):n.setAttribute("value",c.value);const m=L(x(h,"slice-value"),n);p(),n.append(S(i,m))}else{if("elements"in c)return p(),n.append(C(new FormData(c),"value",n.ownerDocument)),n;const m=c.value??x(h,"value");p(),m==null?[...n.childNodes].filter(w=>w.localName!=="event").map(w=>w.remove()):pe(m)?n.append(S(i,m)):n.append(C(m,"value",n.ownerDocument))}return n})}function D(e,l,t){e.querySelectorAll&&[...e.querySelectorAll(l)].forEach(t)}const be=async(e,l)=>{if(!e||!e.trim())return[l];if(e.startsWith("#"))return(t=>{if(!t)return[];const s=t.querySelectorAll(e);if(s.length)return[...s];const n=t.getRootNode();return n===t?[]:getByHashId(n)})(l.parentElement);try{const t=await te(e),s=new URL(e,location).hash;if(s){const n=t.querySelectorAll(s);return n.length?[...n]:[l]}return[t]}catch{return[l]}};function ae(e,l){for(let t of e.attributes)t.namespaceURI?l.setAttributeNS(t.namespaceURI,t.name,t.value):l.setAttribute(t.name,t.value),t.name==="value"&&(l.value=t.value)}function G(e,l=0){const t={};for(const s of e.childNodes){const n=x(s,"data-dce-id")||s.dceId||0;if(!t[n])n?t[n]=1:(t[n]=s.dceId=++l,s.setAttribute&&s.setAttribute("data-dce-id",s.dceId));else{const i=s.dceId=n+"-"+t[n]++;s.setAttribute&&s.setAttribute("data-dce-id",i)}s.childNodes.length&&G(s)}}function J(e,l){if(!l.length)return Z(e);const t={};for(let s of e.childNodes)t[s.dceId],K(s)?(s.data.trim(),t[s.dceId||0]=s):t[x(s,"data-dce-id")||0]=s;for(let s of[...l]){const n=x(s,"data-dce-id")||s.dceId,i=t[n];i?(K(s)?i.nodeValue!==s.nodeValue&&(i.nodeValue=s.nodeValue):(ae(s,i),(i.childNodes.length||s.childNodes.length)&&J(i,s.childNodes)),delete t[n]):e.append(s)}for(let s of Object.values(t))s.remove()}function ie(e,l){return e.hasAttribute(l)||e.setAttribute(l,crypto.randomUUID()),e.getAttribute(l)}const re=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${V(t[3])}}${t[4]}`).join(""),V=e=>{if(!e.trim())return e;const l=e.split("??"),t=l.shift(),s=V(l.join("??"));return l.length?`concat( ${t} , substring( ${s} , (1+string-length( ${s} )) * string-length( ${t} ) ) )`:e},L=(e,l)=>{const t=e.split("??");if(t.length>1)return L(t[0],l)||L(t[1],l);e=V(e);const s=l.ownerDocument.evaluate(e,l);switch(s.resultType){case XPathResult.NUMBER_TYPE:return s.numberValue;case XPathResult.STRING_TYPE:return s.stringValue;case XPathResult.BOOLEAN_TYPE:return s.booleanValue}let n="";for(let i;i=s.iterateNext();)n+=i.textContent;return n},oe="stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback".split(","),ce=(e,l)=>{const t=N("xsl:"+e.localName);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(;e.firstChild;)t.append(e.firstChild);if(e.parentElement)e.parentElement.replaceChild(t,e);else{const s=e.parentElement||l,n=[...s.childNodes];n.forEach((i,c)=>{i===e&&(n[c]=t)}),s.replaceChildren(...n)}};class me extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){const l=await be(x(this,"src"),this),t=x(this,"tag"),s=t||"dce-"+crypto.randomUUID();for(const d of l)D(d.templateNode||d.content||d,"style",u=>{const a=u.closest("slot"),o=a?`slot[name="${a.name}"]`:"";u.innerHTML=`${s} ${o}{${u.innerHTML}}`,this.append(u)});const n=l.map(d=>ee(d)),i=n.map((d,u)=>(u=new XSLTProcessor,u.importStylesheet(d),u));Object.defineProperty(this,"xsltString",{get:()=>n.map(d=>M(d)).join(`
+`)});const c=this,h=[...this.templateNode.querySelectorAll("[slice]")],p=h.map(d=>x(d,"slice")).filter(d=>!d.includes("/")).filter((d,u,a)=>a.indexOf(d)===u).map(le).flat(),m=n.reduce((d,u)=>(u.params&&d.push(...u.params),d),[]);class w extends HTMLElement{static get observedAttributes(){return m.map(u=>x(u,"name"))}#e=0;connectedCallback(){let u=this.childNodes;if(this.firstElementChild?.tagName==="TEMPLATE"){this.firstElementChild!==this.lastElementChild&&console.error("payload should have TEMPLATE as only child",this.outerHTML);const f=this.firstElementChild;f.remove(),u=f.content.childNodes;for(const r of[...f.content.childNodes])if(r.localName==="style"){const y=ie(this,"data-dce-style");r.innerHTML=`${s}[data-dce-style="${y}"]{${r.innerHTML}}`,f.insertAdjacentElement("beforebegin",r)}else r.nodeType===1?f.insertAdjacentElement("beforebegin",r):r.nodeType===3&&f.insertAdjacentText("beforebegin",r.data)}const a=$("<datadom/>").documentElement,o=(f,r="")=>(y=>(r&&y.append(S(a,r)),y))(a.ownerDocument.createElement(f));U(a,"payload",u,ye),this.innerHTML="";const E=U(a,"attributes",this.attributes,f=>o(f.nodeName,f.value));U(a,"dataset",Object.keys(this.dataset),f=>o(f,this.dataset[f]));const g=U(a,"slice",p,f=>o(f,"")),v=f=>L(f,g);this.xml=a;const b=[],P=()=>{const f={};for(let r;r=b.pop();){const y=x(r.sliceElement,"slice");f[y]||(Y(g,y,r),f[y]=r)}Object.keys(f).length!==0&&X()};let k;this.onSlice=f=>{b.push(f),k||(k=setTimeout(()=>{P(),k=0},1))};const X=this.transform=()=>{if(this.#e)debugger;this.#e=1,i.map((r,y)=>{const I=r.transformToFragment(a.ownerDocument,document);return I||console.error(`XSLT transformation error. xsl:
+`,M(n[y]),`
+xml:
+`,M(a)),I}).map(r=>{r&&(G(r),J(this,r.childNodes))}),w.observedAttributes.map(r=>{let y=x(this.firstElementChild,r);y!==x(this,r)&&(this.setAttribute(r,y),this.#t(r,y))}),D(this,"[slice],[slice-event]",r=>{if(!r.dceInitialized){r.dceInitialized=1;let y=x(r,"slice-event");x(r,"custom-validity")&&(y+=" change submit"),[...new Set((y||"change").split(" "))].forEach(I=>(r.localName==="slice"?r.parentElement:r).addEventListener(I,A=>{A.sliceElement=r,A.sliceEventSource=A.currentTarget||A.target;const ue=Y(g,x(A.sliceElement,"slice"),A);D(this,"[custom-validity]",z=>{if(!z.setCustomValidity)return;const F=x(z,"custom-validity");try{const j=F&&L(F,E);z.setCustomValidity(j===!0?"":j===!1?"invalid":j)}catch(j){console.error(j,"xPath",F)}});const O=x(r,"custom-validity"),T=O&&L(O,E),_=T===!0?"":T;if(O){if(r.setCustomValidity?r.setCustomValidity(_):r.validationMessage=_,ue.map(z=>z.setAttribute("validation-message",_)),A.type==="submit")return T===!0?void 0:(setTimeout(X,1),!!T===T?(T||A.preventDefault(),T):T?(A.preventDefault(),!1):void 0);setTimeout(X,1)}this.onSlice(A)})),(!y||y.includes("init"))&&(r.hasAttribute("slice-value")||r.hasAttribute("value")||r.value?this.onSlice({type:"init",target:r,sliceElement:r,sliceEventSource:r}):r.value=v(x(r,"slice")))}}),this.#e=0};X(),P()}#t(u,a){let o=this.xml.querySelector(`attributes>${u}`);o?H(o).append(S(o,a)):(o=N(u,a,this.xml),this.xml.querySelector("attributes").append(o))}attributeChangedCallback(u,a,o){!this.xml||this.#e||(this.#t(u,o),this.transform())}get dce(){return c}}const R=d=>{window.customElements.get(d)!==w&&window.customElements.define(d,w)};if(t)R(t);else{const d=s;this.setAttribute("tag",d),R(d);const u=document.createElement(d);this.getAttributeNames().forEach(a=>u.setAttribute(a,this.getAttribute(a))),u.append(...[...this.childNodes].filter(a=>a.localName!=="style")),this.append(u)}}get templateNode(){return this.firstElementChild?.tagName==="TEMPLATE"?this.firstElementChild.content:this}get dce(){return this}get xslt(){return $(this.xsltString)}}window.customElements.define("custom-element",me);exports.CustomElement=me;exports.assureSlices=ne;exports.assureUID=ie;exports.assureUnique=G;exports.createXsltFromDom=ee;exports.deepEqual=se;exports.evalCurly=re;exports.event2slice=Y;exports.merge=J;exports.mergeAttr=ae;exports.obj2node=C;exports.tagUid=W;exports.toXsl=ce;exports.xPath=L;exports.xPathDefaults=V;exports.xhrTemplate=te;exports.xml2dom=$;exports.xmlString=M;exports.xslTags=oe;

package/dist/custom-element-bundle.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-B4v-KaIh.cjs"),l=require("./http-request-DPrY7mGh.cjs"),t=require("./local-storage-Boafngui.cjs"),a=require("./location-element-2m0gWq_d.cjs");exports.CustomElement=e.CustomElement;exports.assureSlices=e.assureSlices;exports.assureUID=e.assureUID;exports.assureUnique=e.assureUnique;exports.createXsltFromDom=e.createXsltFromDom;exports.deepEqual=e.deepEqual;exports.default=e.CustomElement;exports.evalCurly=e.evalCurly;exports.event2slice=e.event2slice;exports.merge=e.merge;exports.mergeAttr=e.mergeAttr;exports.obj2node=e.obj2node;exports.tagUid=e.tagUid;exports.toXsl=e.toXsl;exports.xPath=e.xPath;exports.xPathDefaults=e.xPathDefaults;exports.xhrTemplate=e.xhrTemplate;exports.xml2dom=e.xml2dom;exports.xmlString=e.xmlString;exports.xslTags=e.xslTags;exports.HttpRequestElement=l.HttpRequestElement;exports.LocalStorageElement=t.LocalStorageElement;exports.localStorageSetItem=t.localStorageSetItem;exports.LocationElement=a.LocationElement;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-N-sWiqGK.cjs"),l=require("./http-request-DPrY7mGh.cjs"),t=require("./local-storage-Boafngui.cjs"),a=require("./location-element-2m0gWq_d.cjs");exports.CustomElement=e.CustomElement;exports.assureSlices=e.assureSlices;exports.assureUID=e.assureUID;exports.assureUnique=e.assureUnique;exports.createXsltFromDom=e.createXsltFromDom;exports.deepEqual=e.deepEqual;exports.default=e.CustomElement;exports.evalCurly=e.evalCurly;exports.event2slice=e.event2slice;exports.merge=e.merge;exports.mergeAttr=e.mergeAttr;exports.obj2node=e.obj2node;exports.tagUid=e.tagUid;exports.toXsl=e.toXsl;exports.xPath=e.xPath;exports.xPathDefaults=e.xPathDefaults;exports.xhrTemplate=e.xhrTemplate;exports.xml2dom=e.xml2dom;exports.xmlString=e.xmlString;exports.xslTags=e.xslTags;exports.HttpRequestElement=l.HttpRequestElement;exports.LocalStorageElement=t.LocalStorageElement;exports.localStorageSetItem=t.localStorageSetItem;exports.LocationElement=a.LocationElement;

package/dist/custom-element-bundle.js

@@ -1,5 +1,5 @@
-import { C as e } from "./custom-element-_g0GTup2.js";
-import { e as o, i as r, g as l, c as m, d as x, j as n, f as p, h as u, m as f, o as g, t as i, p as c, l as d, k as E, b as S, x as h, a as L, n as q } from "./custom-element-_g0GTup2.js";
+import { C as e } from "./custom-element-BISbI4SU.js";
+import { e as o, i as r, g as l, c as m, d as x, j as n, f as p, h as u, m as f, o as g, t as i, p as c, l as d, k as E, b as S, x as h, a as L, n as q } from "./custom-element-BISbI4SU.js";
 import { H as D } from "./http-request-BOvP4KTl.js";
 import { L as b, l as j } from "./local-storage-BqDEu2kF.js";
 import { L as H } from "./location-element-nA_wsqBt.js";

package/dist/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.14'
+const PACKAGE_VERSION = '2.3.1'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element-dist",
-    "version": "0.0.21",
+    "version": "0.0.23",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -14,10 +14,10 @@
         "test:watch": "vitest --inspect-brk --no-file-parallelism --browser.headless=false --test-timeout=0",
         "test:storybook": "test-storybook",
         "sb": "yarn storybook",
-        "t": "vitest --no-file-parallelism --watch=false src/stories/location-element.test.ts"
+        "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/attributes.test.stories.ts"
     },
     "dependencies": {
-        "@epa-wg/custom-element": "0.0.21"
+        "@epa-wg/custom-element": "0.0.23"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^1.3.3",
@@ -39,7 +39,7 @@
         "playwright": "^1.43.1",
         "storybook": "^8.0.10",
         "typescript": "^5.2.2",
-        "vite": "^5.2.0",
+        "vite": "^5.3.1",
         "vitest": "^1.6.0",
         "webdriverio": "^8.36.1"
     },

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.14'
+const PACKAGE_VERSION = '2.3.1'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/src/custom-element/custom-element.d.ts

@@ -1,5 +1,9 @@
 export function log(x: any): void;
 export function deepEqual(a: any, b:any): boolean|0;
+export function xml2dom(xmlString:string): Document;
+export function xmlString(doc:Node|Document): string;
+export function obj2node(o:any, tag:string, doc:Document): HTMLElement;
+export function tagUid(node:HTMLElement): HTMLElement;
 
 /**
  * @summary Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating

package/src/custom-element/custom-element.js

@@ -13,7 +13,6 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
 ,   removeChildren = n => { while(n.firstChild) n.firstChild.remove(); return n; }
 ,   emptyNode = n => {  n.getAttributeNames().map( a => n.removeAttribute(a) ); return removeChildren(n); }
-,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
 ,   cloneAs = (p,tag) =>
@@ -23,7 +22,7 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
     while( p.firstChild )
         px.append(p.firstChild);
     return px;
-}
+};
 
     function
 ASSERT(x)
@@ -66,17 +65,22 @@ assureSlot( e )
     export function
 obj2node( o, tag, doc )
 {   const t = typeof o;
-    if( t === 'function'){debugger}
     if( t === 'string' )
         return create(tag,o,doc);
     if( t === 'number' )
         return create(tag,''+o,doc);
 
     if( o instanceof Array )
-    {   const ret = create('array');
+    {   const ret = create('array','',doc);
         o.map( ae => ret.append( obj2node(ae,tag,doc)) );
         return ret
     }
+    if( o instanceof FormData )
+    {   const ret = create('form-data','',doc);
+        for( const p of o )
+            ret.append( obj2node(p[1],p[0],doc) );
+        return ret
+    }
     const ret = create(tag,'',doc);
     for( let k in o )
         if( isNode(o[k]) || typeof o[k] ==='function' || o[k] instanceof Window )
@@ -91,13 +95,14 @@ obj2node( o, tag, doc )
     export function
 tagUid( node )
 {   // {} to xsl:value-of
-    forEach$(node,'*',d => [...d.childNodes].filter( e=>e.nodeType === 3 ).forEach( e=>
-    {   if( e.parentNode.localName === 'style' )
-            return;
-        const m = e.data.matchAll( /{([^}]*)}/g );
+    forEach$(node,'*',d => [...d.childNodes]
+        .filter( e => e.nodeType === 3 && e.parentNode.localName !== 'style' && e.data )
+        .forEach( e=>
+    {   const s = e.data,
+              m = s.matchAll( /{([^}]*)}/g );
         if(m)
         {   let l = 0
-            , txt = t => createText(e,t||'')
+            , txt = t => createText(e,t)
             ,  tt = [];
             [...m].forEach(t=>
             {   if( t.index > l )
@@ -107,8 +112,8 @@ tagUid( node )
                 tt.push(v);
                 l = t.index+t[0].length;
             })
-            if( l < e.data.length)
-                tt.push( txt( e.data.substring(l,e.data.length) ));
+            if( l < s.length)
+                tt.push( txt( s.substring(l,s.length) ));
             if( tt.length )
             {   for( let t of tt )
                     d.insertBefore(t,e);
@@ -250,7 +255,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     const   slotCall = $(xslDom,'call-template[name="slot"]')
     ,       slot2xsl = s =>
     {   const v = slotCall.cloneNode(true)
-        ,  name = attr(s,'name') || '';
+        ,  name = attr(s,'name');
         name && v.firstElementChild.setAttribute('select',`'${ name }'`)
         for( let c of s.childNodes)
             v.lastElementChild.append(c)
@@ -297,16 +302,20 @@ deepEqual(a, b, O=false)
             return O
     return true;
 }
+const splitSliceNames = v => v.split('|').map( s=>s.trim() ).filter(s=>s);
+
     export const
 assureSlices = ( root, names) =>
-    names.split('|').map(n=>n.trim()).map( xp =>
-    {   if(xp.includes('/'))
-        {   const ret = [], r = root.ownerDocument.evaluate( xp, root );
+    splitSliceNames(names).map( xp =>
+    {   let d = root.ownerDocument
+        , append = n=> (root.append(n),n);
+        if(xp.includes('/'))
+        {   const ret = [], r = d.evaluate( xp, root );
             for( let n; n = r.iterateNext(); )
                 ret.push( n )
             return ret
         }
-        return [...root.childNodes].find(n=>n.localName === xp) || create(xp);
+        return [...root.childNodes].find(n=>n.localName === xp) || append( create(xp,'',d) );
     }).flat();
 
 /**
@@ -319,19 +328,24 @@ assureSlices = ( root, names) =>
     export function
 event2slice( x, sliceNames, ev, dce )
 {
+    if( ev.sliceProcessed )
+        return
+    ev.sliceProcessed = 1;
     // evaluate slices[]
     // inject @attributes
     // inject event
     // evaluate slice-value
     // slice[i] = slice-value
-    assureSlices(x,sliceNames).map( s =>
+    return assureSlices( x, sliceNames ?? '' ).map( s =>
     {
         const d = x.ownerDocument
         ,    el = ev.sliceEventSource
         ,   sel = ev.sliceElement
-        ,   cleanSliceValue = ()=>[...s.childNodes].filter(n=>n.nodeType===3 || n.localName==='value').map(n=>n.remove());
+        ,   cleanSliceValue = ()=>[...s.childNodes].filter(n=>n.nodeType===3 || n.localName==='value' || n.localName==='form-data').map(n=>n.remove());
         el.getAttributeNames().map( a => s.setAttribute( a, attr(el,a) ) );
         [...s.childNodes].filter(n=>n.localName==='event').map(n=>n.remove());
+        if( 'validationMessage' in el )
+            s.setAttribute('validation-message', el.validationMessage);
         ev.type==='init' && cleanSliceValue();
         s.append( obj2node( ev, 'event', d ) );
         if( sel.hasAttribute('slice-value') )
@@ -343,7 +357,12 @@ event2slice( x, sliceNames, ev, dce )
             cleanSliceValue();
             s.append( createText( d, v ) );
         }else
-        {   const v = el.value ?? attr( sel, 'value' ) ;
+        {   if( 'elements' in el )
+            {   cleanSliceValue();
+                s.append( obj2node(new FormData(el),'value', s.ownerDocument) )
+                return s
+            }
+            const v = el.value ?? attr( sel, 'value' ) ;
             cleanSliceValue();
             if( v === null || v === undefined )
                 [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
@@ -353,6 +372,7 @@ event2slice( x, sliceNames, ev, dce )
                 else
                     s.append( obj2node(v,'value',s.ownerDocument) )
         }
+        return s
     })
 }
 
@@ -360,7 +380,6 @@ function forEach$( el, css, cb){
     if( el.querySelectorAll )
         [...el.querySelectorAll(css)].forEach(cb)
 }
-const getByHashId = ( n, id )=> ( p => n===p? null: (p && ( p.querySelector(id) || getByHashId(p,id) ) ))( n.getRootNode() )
 const loadTemplateRoots = async ( src, dce )=>
 {
     if( !src || !src.trim() )
@@ -388,12 +407,7 @@ const loadTemplateRoots = async ( src, dce )=>
     }catch (error){ return [dce]}
 }
 export function mergeAttr( from, to )
-{   if( isText(from) )
-    {
-        if( !isText(to) ){ debugger }
-        return
-    }
-    for( let a of from.attributes)
+{   for( let a of from.attributes)
     {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
         if( a.name === 'value')
             to.value = a.value
@@ -472,12 +486,18 @@ export const xPathDefaults = x=>
     // return xx.length ? `${a}|(${xPathDefaults(xx.join('??'))})[not(${a})]`: a
 }
 export const xPath = (x,root)=>
-{   x = xPathDefaults(x);
+{
+    const xx = x.split('??');
+    if( xx.length > 1 )
+        return xPath(xx[0], root) || xPath(xx[1], root);
+
+    x = xPathDefaults(x);
 
     const it = root.ownerDocument.evaluate(x, root);
     switch( it.resultType )
     {   case XPathResult.NUMBER_TYPE: return it.numberValue;
         case XPathResult.STRING_TYPE: return it.stringValue;
+        case XPathResult.BOOLEAN_TYPE: return it.booleanValue;
     }
 
     let ret = '';
@@ -529,7 +549,10 @@ CustomElement extends HTMLElement
 
         const dce = this
         , sliceNodes = [...this.templateNode.querySelectorAll('[slice]')]
-        , sliceNames = sliceNodes.map(e=>attr(e,'slice')).filter(n=>!n.includes('/')).filter((v, i, a)=>a.indexOf(v) === i)
+        , sliceNames = sliceNodes.map(e=>attr(e,'slice'))
+                                .filter(n=>!n.includes('/'))
+                                .filter((v, i, a)=>a.indexOf(v) === i)
+                                .map(splitSliceNames).flat()
         , declaredAttributes = templateDocs.reduce( (ret,t) => { if( t.params ) ret.push( ...t.params ); return ret; }, [] );
 
         class DceElement extends HTMLElement
@@ -540,6 +563,8 @@ CustomElement extends HTMLElement
             {   let payload = this.childNodes;
                 if( this.firstElementChild?.tagName === 'TEMPLATE' )
                 {
+                    if( this.firstElementChild !== this.lastElementChild )
+                        { console.error('payload should have TEMPLATE as only child', this.outerHTML ) }
                     const t = this.firstElementChild;
                     t.remove();
                     payload = t.content.childNodes;
@@ -563,7 +588,7 @@ CustomElement extends HTMLElement
                 })(x.ownerDocument.createElement( tag ))
                 injectData( x, 'payload'    , payload , assureSlot );
                 this.innerHTML='';
-                injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
+                const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
                 const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) )
                 ,     sliceXPath = x => xPath(x, sliceRoot);
@@ -585,14 +610,12 @@ CustomElement extends HTMLElement
                 let timeoutID;
 
                 this.onSlice = ev=>
-                {   ev.stopPropagation?.();
-                    ev.sliceEventSource = ev.currentTarget || ev.target;
-                    sliceEvents.push(ev);
+                {   sliceEvents.push(ev);
                     if( !timeoutID )
                         timeoutID = setTimeout(()=>
                         {   applySlices();
                             timeoutID =0;
-                        },10);
+                        },1);
                 };
                 const transform = this.transform = ()=>
                 {   if(this.#inTransform){ debugger }
@@ -619,20 +642,58 @@ CustomElement extends HTMLElement
                         }
                     })
 
-                    forEach$( this,'[slice]', el =>
+                    forEach$( this,'[slice],[slice-event]', el =>
                     {   if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
-                            const evs = attr(el,'slice-event');
-                            (evs || 'change')
-                                .split(' ')
+                            let evs = attr(el,'slice-event');
+                            if( attr(el,'custom-validity') )
+                                evs += ' change submit';
+
+                            [...new Set((evs || 'change') .split(' '))]
                                 .forEach( t=> (el.localName==='slice'? el.parentElement : el)
-                                                .addEventListener( t, ev=>
-                                                {   ev.sliceElement = el;
-                                                    this.onSlice(ev)
-                                                } ));
+                                    .addEventListener( t, ev=>
+                                    {   ev.sliceElement = el;
+                                        ev.sliceEventSource = ev.currentTarget || ev.target;
+                                        const slices = event2slice( sliceRoot, attr( ev.sliceElement, 'slice'), ev, this );
+
+                                        forEach$(this,'[custom-validity]',el =>
+                                        {   if( !el.setCustomValidity )
+                                                return;
+                                            const x = attr( el, 'custom-validity' );
+                                            try
+                                            {   const v = x && xPath( x, attrsRoot );
+                                                el.setCustomValidity( v === true? '': v === false ? 'invalid' : v );
+                                            }catch(err)
+                                                { console.error(err, 'xPath', x) }
+                                        })
+                                        const x = attr(el,'custom-validity')
+                                        ,     v = x && xPath( x, attrsRoot )
+                                        ,   msg = v === true? '' : v;
+
+                                        if( x )
+                                        {   el.setCustomValidity ? el.setCustomValidity( msg ) : ( el.validationMessage = msg );
+                                            slices.map( s => s.setAttribute('validation-message', msg ) );
+                                            if( ev.type === 'submit' )
+                                            {   if( v === true )
+                                                    return;
+                                                setTimeout(transform,1)
+                                                if( !!v === v )
+                                                {   v || ev.preventDefault();
+                                                    return v;
+                                                }
+                                                if( v )
+                                                {   ev.preventDefault();
+                                                    return !1
+                                                }
+                                                return ;
+                                            }else
+                                                setTimeout(transform,1)
+                                        }
+                                        this.onSlice(ev);
+                                    } ));
                             if( !evs || evs.includes('init') )
                             {   if( el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value )
-                                    this.onSlice({type:'init', target: el, sliceElement:el })
+                                    this.onSlice({type:'init', target: el, sliceElement:el, sliceEventSource:el })
                                 else
                                     el.value = sliceXPath( attr(el,'slice') )
                             }

package/src/custom-element/demo/a.html

@@ -1,63 +1,60 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-      xmlns:html="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>custom-element Declarative Custom Element implementation demo</title>
+    <title>Data slices - Declarative Custom Element implementation demo</title>
     <link rel="icon" href="./wc-square.svg"/>
+
     <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../local-storage.js"></script>
     <script type="module" src="../custom-element.js"></script>
-
     <style>
         @import "./demo.css";
 
-        button {
-            background: forestgreen;
-        }
-
-        table {
-            min-width: 16rem;
-        }
-
-        td {
-            border-bottom: 1px solid silver;
-        }
-
-        tfoot td {
-            border-bottom: none;
+        label {
+            display: flex;
         }
 
-        td, th {
-            text-align: right;
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
         }
 
-        caption {
-            padding: 1rem;
-            font-weight: bolder;
-            font-family: sans-serif;
+        nav {
+            max-width: 32em;
         }
     </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+
 </head>
 <body>
 
-
-    <custom-element tag="dce-1">
-        <template >
-            <style >
-                color:red;
-            </style>
-
-            <u ><slot>red</slot></u>
+<fieldset>
+    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
+            style="color:red">red</i> in 1st instance
+    </legend>
+    <custom-element tag="dce-3">
+        <template>
+            <u>
+                <slot>is green</slot>
+            </u>
         </template>
+        <style>dce-3 {
+            color: green
+        }</style>
     </custom-element>
-<dce-1></dce-1> *
-<dce-1><template >
-            <style >
-                color:green;
-            </style>
-
-            <u >green</u>
-        </template></dce-1>
+   <u>should be</u> <i style="color:red">red</i>:
+    <dce-3 id="dce32">
+        <template>
+            <style> color:red; </style>
+            <u>red</u>
+        </template>
+    </dce-3> <br/>
+    should be GREEN:
+    <dce-3 id="dce31">green</dce-3>
+</fieldset>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
 </body>
 </html>

package/src/custom-element/demo/b.html

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><u data-dce-id="2" xmlns="">
+    <dce-text data-dce-id="3">
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
+            dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
+        </xhtml:style>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+    </dce-text>
+</u></dce-root>

package/src/custom-element/demo/data-slices.html

@@ -178,6 +178,38 @@
     </template>
 </html-demo-element>
 
+
+<html-demo-element legend="10. multiple slices by same field"
+                   description="same element value sets s1 and s2 slice">
+    <template>
+        <custom-element>
+        <template>
+            <input  slice="s1|s2"
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="11. slices and attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="emotion">😃</attribute>
+                <input slice="/datadom/attributes/emotion | s1"/>
+                Type and unfocus to update emotion attribute: {emotion}
+                and slice: {//slice/s1}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 
 </body>