@epa-wg/custom-element-dist 0.0.24 → 0.0.25

package/dist/custom-element-DZvvhscI.cjs

@@ -0,0 +1,53 @@
+"use strict";const F="http://www.w3.org/1999/XSL/Transform",q="http://www.w3.org/1999/xhtml",ye="http://exslt.org/common",x=(e,l)=>e.getAttribute?.(l),K=e=>e.nodeType===3,be=e=>typeof e=="string",ge=e=>e&&typeof e.nodeType=="number",S=(e,l)=>(e.ownerDocument||e).createTextNode(l),ee=e=>{for(;e.firstChild;)e.firstChild.remove();return e},H=e=>(e.getAttributeNames().map(l=>e.removeAttribute(l)),ee(e)),te=e=>(e?.setAttribute("xmlns:xsl",F),e),se=e=>(e?.setAttribute("xmlns:xhtml",q),te(e)),le=e=>/^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e),A=(e,l="",t=document)=>{const s=a=>(o=>(l&&o.append(S(t.ownerDocument||t,l)),o))((t.ownerDocument||t).createElement(a));if(le(e))return s(e);const n=s("dce-object");return n.setAttribute("dce-object-name",e),n},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 I(e){return new XMLSerializer().serializeToString(e)}function U(e,l,t,s){const n=h=>e.ownerDocument.createElement(h),o=((h,p,m)=>(p.append(m=n(h)),m))(l,e);return[...t].forEach(h=>o.append(s(h))),o}function ve(e){return e.slot||(e.setAttribute||(e=A("span",e.textContent.replaceAll(`
+`,""))),e.setAttribute("slot","")),e}function C(e,l,t){const s=typeof e;if(s==="string")return A(l,e,t);if(s==="number")return A(l,""+e,t);if(e instanceof Array){const a=A("array","",t);return e.map(o=>a.append(C(o,l,t))),a}if(e instanceof FormData){const a=A("form-data","",t);for(const o of e)a.append(C(o[1],o[0],t));return a}const n=A(l,"",t);for(let a in e)ge(e[a])||typeof e[a]=="function"||e[a]instanceof Window||(typeof e[a]!="object"&&le(a)?n.setAttribute(a,e[a]):n.append(C(e[a],a,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 a=0,o=p=>S(t,p),h=[];if([...n].forEach(p=>{p.index>a&&h.push(o(p.input.substring(a,p.index)));const m=e.querySelector("value-of").cloneNode();m.setAttribute("select",p[1]),h.push(m),a=p.index+p[0].length}),a<s.length&&h.push(o(s.substring(a,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 ne(e,l="xsl:stylesheet"){if(e.tagName===l||e.documentElement?.tagName===l)return W(e);const t=$(`<xsl:stylesheet version="1.0" xmlns:xsl="${F}" xmlns:xhtml="${q}" xmlns:exsl="${ye}" 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=(i=>{D(i,"script",b=>b.remove());const c=i.content??i.firstElementChild?.content??i.body??i;pe.forEach(b=>D(c,b,g=>fe(g,c)));const E=i.firstElementChild?.content||i.content,v=b=>{const g=$("<xhtml/>"),z=g.importNode(b,!0);return g.replaceChild(z,g.documentElement),se(z)};if(E){const b=A("div");return[...E.childNodes].map(g=>b.append(g.cloneNode(!0))),v(b)}return v(i.documentElement||i.body||i)})(e),a=$(`<xsl:stylesheet version="1.0"
+        xmlns:xsl="${F}"
+        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 o=s.transformToFragment(n,document),h=(i,c)=>i.querySelector(c),p=h(a,'template[mode="payload"]');if(!o)return console.error("transformation error",{xml:n.outerHTML,xsl:I(t)});const m=[];[...o.querySelectorAll("dce-root>attribute")].forEach(i=>{const c=Q(i,"xsl:param"),E=x(i,"name");p.append(c);let v=x(c,"select")?.split("??");v||(v=["//"+E,`'${c.textContent}'`],H(c),c.setAttribute("name",E));let b;if(v?.length>1){c.removeAttribute("select");const g=h(a,'template[match="ignore"]>choose').cloneNode(!0);H(g.firstElementChild).append(S(g,"{"+v[0]+"}")),H(g.lastElementChild).append(S(g,"{"+v[1]+"}")),g.firstElementChild.setAttribute("test",v[0]),c.append(g),b=g.cloneNode(!0)}else b=Q(i,"xsl:value-of");b.removeAttribute("name"),i.append(b),i.removeAttribute("select"),m.push(c)}),[...o.querySelectorAll("[value]")].filter(i=>i.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(i=>{const c=x(i,"value");c&&i.setAttribute("value",de(c))});for(const i of o.childNodes)p.append(a.importNode(i,!0));[...p.querySelectorAll("template")].forEach(i=>p.ownerDocument.documentElement.append(i));const M=h(a,'call-template[name="slot"]'),d=i=>{const c=M.cloneNode(!0),E=x(i,"name");E&&c.firstElementChild.setAttribute("select",`'${E}'`);for(let v of i.childNodes)c.lastElementChild.append(v);return c};D(p,"slot",i=>i.parentNode.replaceChild(d(i),i));const u=W(a);return u.params=m,u}async function ae(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||A("div",n.responseText)),s(n.statusText)},n.addEventListener("error",a=>s(a)),n.send()})}function ie(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)||!ie(e[s],l[s]))return t;return!0}const re=e=>e.split("|").map(l=>l.trim()).filter(l=>l),oe=(e,l)=>re(l).map(t=>{let s=e.ownerDocument,n=a=>(e.append(a),a);if(t.includes("/")){const a=[],o=s.evaluate(t,e);for(let h;h=o.iterateNext();)a.push(h);return a}return[...e.childNodes].find(a=>a.localName===t)||n(A(t,"",s))}).flat();function Y(e,l,t,s){if(!t.sliceProcessed)return t.sliceProcessed=1,oe(e,l??"").map(n=>{const a=e.ownerDocument,o=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(o.getAttributeNames().map(m=>n.setAttribute(m,x(o,m))),[...n.childNodes].filter(m=>m.localName==="event").map(m=>m.remove()),"validationMessage"in o&&n.setAttribute("validation-message",o.validationMessage),t.type==="init"&&p(),n.append(C(t,"event",a)),h.hasAttribute("slice-value")){o.value===void 0?n.removeAttribute("value"):n.setAttribute("value",o.value);const m=L(x(h,"slice-value"),n);p(),n.append(S(a,m))}else{if("elements"in o)return p(),n.append(C(new FormData(o),"value",n.ownerDocument)),n;const m=o.value??x(h,"value");p(),m==null?[...n.childNodes].filter(w=>w.localName!=="event").map(w=>w.remove()):be(m)?n.append(S(a,m)):n.append(C(m,"value",n.ownerDocument))}return n})}function D(e,l,t){e.querySelectorAll&&[...e.querySelectorAll(l)].forEach(t)}const Ee=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 ae(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 ce(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 a=s.dceId=n+"-"+t[n]++;s.setAttribute&&s.setAttribute("data-dce-id",a)}s.childNodes.length&&G(s)}}function me(e,l,t){t=1*t;for(let s of e.childNodes)if((s.dceId??s.getAttribute("data-dce-id")*1)>t)return e.insertBefore(l,s);e.append(l)}function Z(e,l){if(!l.length)return ee(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,a=t[n];a?(K(s)?a.nodeValue!==s.nodeValue&&(a.nodeValue=s.nodeValue):(ce(s,a),(a.childNodes.length||s.childNodes.length)&&Z(a,s.childNodes)),delete t[n]):me(e,s,n)}for(let s of Object.values(t))s.remove()}function ue(e,l){return e.hasAttribute(l)||e.setAttribute(l,crypto.randomUUID()),e.getAttribute(l)}const de=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 a;a=s.iterateNext();)n+=a.textContent;return n},pe="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(","),fe=(e,l)=>{const t=A("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((a,o)=>{a===e&&(n[o]=t)}),s.replaceChildren(...n)}};class he extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){const l=await Ee(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 i=u.closest("slot"),c=i?`slot[name="${i.name}"]`:"";u.innerHTML=`${s} ${c}{${u.innerHTML}}`,this.append(u)});const n=l.map(d=>ne(d)),a=n.map((d,u)=>(u=new XSLTProcessor,u.importStylesheet(d),u));Object.defineProperty(this,"xsltString",{get:()=>n.map(d=>I(d)).join(`
+`)});const o=this,h=[...this.templateNode.querySelectorAll("[slice]")],p=h.map(d=>x(d,"slice")).filter(d=>!d.includes("/")).filter((d,u,i)=>i.indexOf(d)===u).map(re).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=ue(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 i=$("<datadom/>").documentElement,c=(f,r="")=>(y=>(r&&y.append(S(i,r)),y))(i.ownerDocument.createElement(f)),E=U(i,"payload",u,ve);te(E),se(E),this.innerHTML="";const v=U(i,"attributes",this.attributes,f=>c(f.nodeName,f.value));U(i,"dataset",Object.keys(this.dataset),f=>c(f,this.dataset[f]));const b=U(i,"slice",p,f=>c(f,"")),g=f=>L(f,b);this.xml=i;const z=[],J=()=>{const f={};for(let r;r=z.pop();){const y=x(r.sliceElement,"slice");f[y]||(Y(b,y,r),f[y]=r)}Object.keys(f).length!==0&&R()};let O;this.onSlice=f=>{z.push(f),O||(O=setTimeout(()=>{J(),O=0},1))};const R=this.transform=()=>{if(this.#e)debugger;this.#e=1,a.map((r,y)=>{const X=r.transformToFragment(i.ownerDocument,document);return X||console.error(`XSLT transformation error. xsl:
+`,I(n[y]),`
+xml:
+`,I(i)),X}).map(r=>{r&&(G(r),Z(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");r.hasAttribute("custom-validity")&&(y+=" change submit"),[...new Set((y||"change").split(" "))].forEach(X=>(r.localName==="slice"?r.parentElement:r).addEventListener(X,N=>{N.sliceElement=r,N.sliceEventSource=N.currentTarget||N.target;const xe=Y(b,x(N.sliceElement,"slice"),N);D(this,"[custom-validity]",j=>{if(!j.setCustomValidity)return;const B=x(j,"custom-validity");try{const P=B&&L(B,v);j.setCustomValidity(P===!0?"":P===!1?"invalid":P)}catch(P){console.error(P,"xPath",B)}});const _=x(r,"custom-validity"),T=_&&L(_,v),k=T===!0?"":T;if(_){if(r.setCustomValidity?r.setCustomValidity(k):r.validationMessage=k,xe.map(j=>j.setAttribute("validation-message",k)),N.type==="submit")return T===!0?void 0:(setTimeout(R,1),!!T===T?(T||N.preventDefault(),T):T?(N.preventDefault(),!1):void 0);setTimeout(R,1)}this.onSlice(N)})),(!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=g(x(r,"slice")))}}),this.#e=0};R(),J()}#t(u,i){let c=this.xml.querySelector(`attributes>${u}`);c?H(c).append(S(c,i)):(c=A(u,i,this.xml),this.xml.querySelector("attributes").append(c))}attributeChangedCallback(u,i,c){!this.xml||this.#e||(this.#t(u,c),this.transform())}get dce(){return o}}const M=d=>{window.customElements.get(d)!==w&&window.customElements.define(d,w)};if(t)M(t);else{const d=s;this.setAttribute("tag",d),M(d);const u=document.createElement(d);this.getAttributeNames().forEach(i=>u.setAttribute(i,this.getAttribute(i))),u.append(...[...this.childNodes].filter(i=>i.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",he);exports.CustomElement=he;exports.appendByDceId=me;exports.assureSlices=oe;exports.assureUID=ue;exports.assureUnique=G;exports.createXsltFromDom=ne;exports.deepEqual=ie;exports.evalCurly=de;exports.event2slice=Y;exports.merge=Z;exports.mergeAttr=ce;exports.obj2node=C;exports.tagUid=W;exports.toXsl=fe;exports.xPath=L;exports.xPathDefaults=V;exports.xhrTemplate=ae;exports.xml2dom=$;exports.xmlString=I;exports.xslTags=pe;

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-BDK7dcJN.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.appendByDceId=e.appendByDceId;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-DZvvhscI.cjs"),l=require("./http-request-DPrY7mGh.cjs"),t=require("./local-storage-Boafngui.cjs"),a=require("./location-element-DRB7hCwA.cjs");exports.CustomElement=e.CustomElement;exports.appendByDceId=e.appendByDceId;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,8 +1,8 @@
-import { C as e } from "./custom-element-DqtzLkTG.js";
-import { h as o, e as r, j as l, g as m, c as p, d as x, k as n, f as u, i as c, m as d, o as f, t as g, q as i, n as E, l as S, b as h, x as q, a as D, p as L } from "./custom-element-DqtzLkTG.js";
+import { C as e } from "./custom-element-DAe7uvIt.js";
+import { h as o, e as r, j as l, g as m, c as p, d as x, k as n, f as u, i as c, m as d, o as f, t as g, q as i, n as E, l as S, b as h, x as q, a as D, p as L } from "./custom-element-DAe7uvIt.js";
 import { H as I } from "./http-request-BOvP4KTl.js";
 import { L as b, l as j } from "./local-storage-BqDEu2kF.js";
-import { L as y } from "./location-element-nA_wsqBt.js";
+import { L as y } from "./location-element-FJlONi2n.js";
 export {
   e as CustomElement,
   I as HttpRequestElement,

package/dist/location-element-DRB7hCwA.cjs

@@ -0,0 +1 @@
+"use strict";const u=(t,e)=>t.getAttribute(e);let c;function f(){c||(c={},"back,forward,go,pushState,replaceState".split(",").forEach(t=>{c[t]=history[t],history[t]=function(...e){c[t].apply(history,e),window.dispatchEvent(new CustomEvent("dce-location",{detail:{k:t}}))}}))}const d={"location.href":t=>window.location.href=t,"location.hash":t=>window.location.hash=t,"location.assign":t=>window.location.assign(t),"location.replace":t=>window.location.replace(t),"history.pushState":t=>window.history.pushState({},"",t),"history.replaceState":t=>window.history.replaceState({},"",t)};class w extends HTMLElement{static observedAttributes=["value","slice","href","type","live","src","method"];constructor(){super();const e={},n=()=>setTimeout(r,1),r=()=>{const a=u(this,"href");a||f();const i=a?new URL(a,window.location):window.location,o={},l=new URLSearchParams(i.search);for(const s of l.keys())o[s]=l.getAll(s);const h={params:o};for(const s in i)typeof i[s]=="string"&&(h[s]=i[s]);this.value=h,this.dispatchEvent(new Event("change"))};this.sliceInit=a=>{if(this.hasAttribute("method")){const i=this.getAttribute("method"),o=this.getAttribute("src");i&&o&&(i==="location.hash"?o!==window.location.hash&&d[i]?.(o):window.location.href!==new URL(o,window.location).href&&d[i]?.(o))}return!e.listener&&this.hasAttribute("live")&&(e.listener=1,window.navigation?.addEventListener("navigate",n),window.addEventListener("popstate",n),window.addEventListener("hashchange",n),window.addEventListener("dce-location",n)),r(),a||{}},this._destroy=()=>{window.removeEventListener("popstate",n),window.removeEventListener("hashchange",n),window.removeEventListener("dce-location",n),delete e.listener}}attributeChangedCallback(e,n,r){e!=="href"&&e!=="method"&&!["method","src","href"].includes(e)||this.sliceInit&&this.sliceInit()}connectedCallback(){this.sliceInit()}disconnectedCallback(){this._destroy()}}window.customElements.define("location-element",w);exports.LocationElement=w;

package/dist/location-element-FJlONi2n.js

@@ -0,0 +1,65 @@
+const w = (t, e) => t.getAttribute(e);
+let r;
+function f() {
+  r || (r = {}, "back,forward,go,pushState,replaceState".split(",").forEach((t) => {
+    r[t] = history[t], history[t] = function(...e) {
+      r[t].apply(history, e), window.dispatchEvent(new CustomEvent("dce-location", { detail: { k: t } }));
+    };
+  }));
+}
+const d = {
+  "location.href": (t) => window.location.href = t,
+  "location.hash": (t) => window.location.hash = t,
+  "location.assign": (t) => window.location.assign(t),
+  "location.replace": (t) => window.location.replace(t),
+  "history.pushState": (t) => window.history.pushState({}, "", t),
+  "history.replaceState": (t) => window.history.replaceState({}, "", t)
+};
+class u extends HTMLElement {
+  static observedAttributes = [
+    "value",
+    "slice",
+    "href",
+    "type",
+    "live",
+    "src",
+    "method"
+    // when defined, changes URL by one of predefined methods.
+  ];
+  constructor() {
+    super();
+    const e = {}, o = () => setTimeout(c, 1), c = () => {
+      const a = w(this, "href");
+      a || f();
+      const i = a ? new URL(a, window.location) : window.location, n = {}, l = new URLSearchParams(i.search);
+      for (const s of l.keys())
+        n[s] = l.getAll(s);
+      const h = { params: n };
+      for (const s in i)
+        typeof i[s] == "string" && (h[s] = i[s]);
+      this.value = h, this.dispatchEvent(new Event("change"));
+    };
+    this.sliceInit = (a) => {
+      if (this.hasAttribute("method")) {
+        const i = this.getAttribute("method"), n = this.getAttribute("src");
+        i && n && (i === "location.hash" ? n !== window.location.hash && d[i]?.(n) : window.location.href !== new URL(n, window.location).href && d[i]?.(n));
+      }
+      return !e.listener && this.hasAttribute("live") && (e.listener = 1, window.navigation?.addEventListener("navigate", o), window.addEventListener("popstate", o), window.addEventListener("hashchange", o), window.addEventListener("dce-location", o)), c(), a || {};
+    }, this._destroy = () => {
+      window.removeEventListener("popstate", o), window.removeEventListener("hashchange", o), window.removeEventListener("dce-location", o), delete e.listener;
+    };
+  }
+  attributeChangedCallback(e, o, c) {
+    e !== "href" && e !== "method" && !["method", "src", "href"].includes(e) || this.sliceInit && this.sliceInit();
+  }
+  connectedCallback() {
+    this.sliceInit();
+  }
+  disconnectedCallback() {
+    this._destroy();
+  }
+}
+window.customElements.define("location-element", u);
+export {
+  u as L
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element-dist",
-    "version": "0.0.24",
+    "version": "0.0.25",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -17,7 +17,7 @@
         "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/attributes.test.stories.ts"
     },
     "dependencies": {
-        "@epa-wg/custom-element": "0.0.24"
+        "@epa-wg/custom-element": "0.0.25"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^1.3.3",

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

@@ -9,12 +9,22 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isText = e => e.nodeType === 3
 ,   isString = s => typeof s === 'string'
 ,   isNode = e => e && typeof e.nodeType === 'number'
-,   create = ( tag, t = '', d=document ) => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   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); }
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
+,   isValidTagName = tag=> ( /^[_a-zA-Z][-_:a-zA-Z0-9]*$/ .test(tag) )
+,   create = ( tag, t = '', d=document ) =>
+{
+    const create = tag => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
+
+    if( isValidTagName(tag) )
+        return  create(tag)
+    const e = create('dce-object');
+    e.setAttribute('dce-object-name',tag)
+    return e;
+}
 ,   cloneAs = (p,tag) =>
 {   const px = p.ownerDocument.createElementNS(p.namespaceURI,tag);
     for( let a of p.attributes)
@@ -86,7 +96,7 @@ obj2node( o, tag, doc )
         if( isNode(o[k]) || typeof o[k] ==='function' || o[k] instanceof Window )
             continue
         else
-            if( typeof o[k] !== "object" )
+            if( typeof o[k] !== "object" && isValidTagName(k) )
                 ret.setAttribute(k, o[k] );
             else
                 ret.append(obj2node(o[k], k, doc))
@@ -594,7 +604,9 @@ CustomElement extends HTMLElement
                         e.append( createText( x, t ))
                     return e;
                 })(x.ownerDocument.createElement( tag ))
-                injectData( x, 'payload'    , payload , assureSlot );
+                const payloadNode = injectData( x, 'payload'    , payload , assureSlot );
+                xslNs(payloadNode);
+                xslHtmlNs(payloadNode);
                 this.innerHTML='';
                 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 ] ) );
@@ -654,7 +666,7 @@ CustomElement extends HTMLElement
                     {   if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
                             let evs = attr(el,'slice-event');
-                            if( attr(el,'custom-validity') )
+                            if( el.hasAttribute('custom-validity') )
                                 evs += ' change submit';
 
                             [...new Set((evs || 'change') .split(' '))]

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

@@ -22,7 +22,19 @@
 <nav>
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
 </nav>
-<html-demo-element legend="Change window URL">
+<main>
+    <h3>How to get the page URL by location-element?</h3>
+    Answer: by defining following attributes:
+    <ol>
+        <li><code>slice</code> to one of values provided bellow</li>
+        <li><code>src</code> optionally with URL, If omitted, it would match the <code>window.location.href</code> </li>
+    </ol>
+    URL properties would be a part of slice data.
+    <p><a href="./set-url.html">Set page URL demo</a> </p>
+</main>
+<html-demo-element legend="Change window URL"
+                    description="use browser URL bar or those controls to change the page URL"
+                   >
     <template>
         <a href="#dce2">#dce2</a>
         <form method="get">
@@ -40,7 +52,8 @@
 
 
 <html-demo-element legend="1. window.location live update"
-                   description="In the page beginning change the window URL via link or by history change"
+                   description="Change the window URL via link or history change by controls in #1.
+                    Observe the changes detected by location-element slice."
                    id="dce2"
     >
     <p>Has to produce URL properties</p>
@@ -48,7 +61,7 @@
         <custom-element tag="dce-2" hidden>
             <template>
 
-                <location-element slice="window-url" live></location-element>
+                <location-element slice="window-url" live method="" src=""></location-element>
 
                 <xhtml:table>
                     <xhtml:tbody>
@@ -121,7 +134,7 @@
         <custom-element tag="dce-3" hidden>
             <template>
 
-                <location-element slice="href-url" href="https://my.example?a=1&b=2#3"></location-element>
+                <location-element slice="href-url" href="https://my.example?a=1&b=2#3" ></location-element>
 
                 <xhtml:table>
                     <xhtml:tbody>

package/src/custom-element/demo/s.xml

@@ -1,11 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <datadom>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <button xmlns="http://www.w3.org/1999/xhtml" value="#dce4" slice="set-button" slice-event="click" slot="">set
+        </button>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//form-data/url" slot="">
+            <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
+            {$selected-method} - {//form-data/url}
+        </xsl:if>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+    </payload>
+    <attributes>
+        <tag>dce-9d95a532-8e54-414a-9077-08799530a637</tag>
+    </attributes>
+    <dataset/>
     <slice>
-        <signin-form>
-            <form-data>
-                <username>QWE</username>
-                <password>ASD</password>
-            </form-data>
-        </signin-form>
+        <set-button xmlns="" value="#dce4" slice="set-button" slice-event="click" data-dce-id="2" validation-message="">
+            <event isTrusted="true" sliceProcessed="1" pointerId="1" width="1" height="1" pressure="0" tiltX="0"
+                   tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0"
+                   pointerType="mouse" isPrimary="false" screenX="47" screenY="538" clientX="47" clientY="451"
+                   ctrlKey="false" shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="47"
+                   pageY="451" x="47" y="451" offsetX="20" offsetY="8" movementX="0" movementY="0" layerX="47"
+                   layerY="451" detail="1" which="1" type="click" eventPhase="2" bubbles="true" cancelable="true"
+                   defaultPrevented="false" composed="true" timeStamp="11628.100000143051" returnValue="true"
+                   cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
+                <relatedTarget/>
+                <fromElement/>
+                <toElement/>
+                <sourceCapabilities firesTouchEvents="false"/>
+            </event>
+            #dce4
+        </set-button>
     </slice>
 </datadom>

package/src/custom-element/demo/s.xslt

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
                 exclude-result-prefixes="exsl">
@@ -15,39 +14,77 @@
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <u xmlns="" data-dce-id="2">
-                <dce-text data-dce-id="3">
-                    <xsl:call-template name="slot">
-                        <xsl:with-param name="slotname" select="''"/>
-                        <xsl:with-param name="defaultvalue">
-                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
-                        </xsl:with-param>
-                    </xsl:call-template>
-                </dce-text>
-            </u>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="methods">
+                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href" data-dce-id="2">
+                    location.href
+                </a>
+                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" data-dce-id="3">
+                    location.hash
+                </a>
+                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign" data-dce-id="4">
+                    location.assign
+                </a>
+            </xsl:variable>
+            <fieldset xmlns="" data-dce-id="5">
+                <legend data-dce-id="6">
+                    <b data-dce-id="7">set-by</b>
+                </legend>
+                <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$methods">
+                    <p data-dce-id="8">
+                        <label data-dce-id="9">
+                            <input type="radio" name="method" value="{.}" data-dce-id="10"/>
+                            <dce-text data-dce-id="11">
+                                <xsl:value-of select="."/>
+                            </dce-text>
+                        </label>
+                        <a class="infolink" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
+                           data-dce-id="12">mdn
+                        </a>
+                    </p>
+                </xsl:for-each>
+                <label data-dce-id="13">
+                    <input type="radio" name="method" value="location.href" data-dce-id="14"/>
+                    <dce-text data-dce-id="15">location.href</dce-text>
+                </label>
+                <label data-dce-id="16">
+                    <input type="radio" name="method" value="location" data-dce-id="17"/>
+                    <dce-text data-dce-id="18">location</dce-text>
+                </label>
+                <label data-dce-id="19">
+                    <input type="radio" name="method" value="location.replace" data-dce-id="20"/>
+                    <dce-text data-dce-id="21">location.replace</dce-text>
+                </label>
+                <label data-dce-id="22">
+                    <input type="radio" name="method" value="location.assign" data-dce-id="23"/>
+                    <dce-text data-dce-id="24">location.assign</dce-text>
+                </label>
+                <label data-dce-id="25">
+                    <input type="radio" name="method" value="location.hash" data-dce-id="26"/>
+                    <dce-text data-dce-id="27">location.hash</dce-text>
+                </label>
+                <label data-dce-id="28">
+                    <input type="radio" name="method" value="history.pushState" data-dce-id="29"/>
+                    <dce-text data-dce-id="30">history.pushState</dce-text>
+                </label>
+                <label data-dce-id="31">
+                    <input type="radio" name="method" value="history.replaceState" data-dce-id="32"/>
+                    <dce-text data-dce-id="33">history.replaceState</dce-text>
+                </label>
+            </fieldset>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
-
-    <xsl:template match="@*|node()" mode="copy-html">
-      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
-    </xsl:template>
-    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
-      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
-    </xsl:template>
-
-
     <xsl:template name="slot">
         <xsl:param name="slotname"/>
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
+                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
-                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
+                <xsl:copy-of select="$defaultvalue"/>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>

package/src/custom-element/demo/set-url.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<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>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        input[type="text"]{ min-width: 30rem; }
+
+        .infolink {
+            &:before {
+                content: '❔';
+                display: inline-block;
+                border-radius: 1.2em;
+            }
+
+            &:hover:before {
+                background: blue;
+            }
+        }
+    </style>
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<main>
+    <h3>How to set the page URL by location-element?</h3>
+    Answer: by defining following attributes:
+    <ol>
+        <li><code>method</code> to one of values provided bellow</li>
+        <li><code>src</code> with URL </li>
+    </ol>
+    <p> &lt;location-element&gt; is safe to be used unconditionally as long as `src` is missing or same as page URL.
+        Otherwise it can be injected by event driven condition as in sample <a href="#dce3">#3</a> </p>
+</main>
+<html-demo-element legend="1. Set the page URL by location.hash"
+                   description="click on 'set' button and observe hash value change in url"
+                   id="dce1">
+    <template>
+        <custom-element>
+            <template>
+                <button value="#dce1" slice="set-button" slice-event="click">#dce1</button>
+                <button value="#dce2" slice="set-button" slice-event="click">#dce2</button>
+                <location-element method="location.href" src="{//set-button/@value}"></location-element>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. Set the page URL by method"
+                   description="click on 'set' button and observe hash value change in url"
+                   id="dce2">
+    <template>
+        <custom-element>
+            <template>
+                <style>
+                    button{ display: block; width: 100%; }
+                </style>
+                <button value="location.href"           slice="set-button" slice-event="click"> location.href        </button>
+                <button value="location.hash"           slice="set-button" slice-event="click"> location.hash        </button>
+                <button value="location.assign"         slice="set-button" slice-event="click"> location.assign      </button>
+                <button value="location.replace"        slice="set-button" slice-event="click"> location.replace     </button>
+                <button value="history.pushState"       slice="set-button" slice-event="click"> history.pushState    </button>
+                <button value="history.replaceState"    slice="set-button" slice-event="click"> history.replaceState </button>
+                <location-element method="{//set-button/@value}" src="#dce2"></location-element>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. Set the page URL by location.href in conditionally injected location-element"
+                   description="click on 'set' button and observe in url #dce3"
+                   id="dce3">
+    <p>Has to produce URL properties</p>
+    <template>
+        <custom-element>
+            <template>
+                <button value="#dce3" slice="set-button" slice-event="click">set</button>
+                <if test="//set-button/@slice-event">
+                    <location-element method="location.href" src="#dce3"></location-element>
+                    look for <b>#dce3</b> in URL which is set by <code>location-element</code>
+                </if>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. Set page URL methods"
+                   description="To define the URL, fill input field or click the radio button, then 'set' button. "
+                   id="dce4">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="methods">
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
+                       title="./set-url.html?a=A">location.href</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"
+                       title="#dec4">location.hash</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
+                       title="./set-url.html?assign=1">location.assign</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace"
+                       title="./set-url.html?replace=location">location.replace</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState"
+                       title="./set-url.html?history=pushState">history.pushState</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
+                       title="./set-url.html?history=replaceState">history.replaceState</a>
+                </xsl:variable>
+                <form slice="url-form" custom-validity="'invalid'" method="post">
+                    <fieldset>
+                        <legend><b>set-by</b></legend>
+                        <for-each select="exsl:node-set($methods)/*">
+                            <p><label><input type="radio" name="method" value="{.}"/> {.} </label>
+                                <a class="infolink" href="{@href}">mdn</a>
+                            </p>
+                        </for-each>
+                    </fieldset>
+                    <variable name="selected-method" select="//form-data/method/text()"></variable>
+                    <variable name="selected-url"
+                              select="exsl:node-set($methods)/*[text() = $selected-method ]/@title"></variable>
+
+                    <label><input name="url" value="{//url ?? $selected-url }" type="text"/></label>
+                    <button name="submit-btn" value="by-submit" type="submit">set</button>
+                    <if test="//form-data/url">
+                        <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
+                        {$selected-method} = {//form-data/url}
+                    </if>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>