@epa-wg/custom-element-dist 0.0.1

package/storybook-static/assets/attributes.stories-ZB0RTY1d.js

@@ -0,0 +1,151 @@
+import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";function d(a){return new Promise(n=>setTimeout(n,a))}function r(a){const{title:n,body:t}=a;return`
+        <fieldset>
+            <legend>${n}</legend>
+            ${t}
+        </fieldset>
+  `}const b={title:"attributes",render:r},i={args:{title:"Attributes definition",body:`
+    <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
+    <custom-element tag="dce-link" >
+        <template>
+            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"      ></attribute>
+            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            p1: <code data-testid="p1">{$p1}</code> <br/> 
+            p2: <code data-testid="p2">{$p2}</code> <br/> 
+            p3: <code data-testid="p3">{$p3}</code>
+        </template>
+    </custom-element>
+    <dce-link id="dce1"></dce-link>
+`},play:async({canvasElement:a})=>{i.args.title;const n=o(a),t=async s=>(await n.findByTestId(s)).textContent.trim();await d(20),e(await t("p1")).toEqual("default_P1"),e(await t("p2")).toEqual("always_p2"),e(await t("p3")).toEqual("def_P3")}},c={args:{title:"Attributes runtime change",body:`
+    <p>Params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.</p>
+    <custom-element tag="dce-link2" >
+        <template>
+            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"      ></attribute>
+            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            p1: <code data-testid="p1">{$p1}</code> <br/> 
+            p2: <code data-testid="p2">{$p2}</code> <br/> 
+            p3: <code data-testid="p3">{$p3}</code>
+        </template>
+    </custom-element>
+    <section>
+        <dce-link2   id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
+        <div><input id="i1" value="p1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+        <div><input id="i2" value="p2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+        <div><input id="i3" value="p3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+    </section>
+`},play:async({canvasElement:a})=>{i.args.title;const n=o(a),t=async s=>(await n.findByTestId(s)).textContent.trim();await d(20),e(await t("p1")).toEqual("123"),e(await t("p2")).toEqual("always_p2","no overrides due to value is hardcoded"),e(await t("p3")).toEqual("def_P3"),dce2.setAttribute("p1",i1.value),await d(10),e(await t("p1")).toEqual("p1","set p1 in runtime"),dce2.setAttribute("p2",i2.value),await d(10),e(await t("p2")).toEqual("always_p2","can not set p2 in runtime"),dce2.setAttribute("p3",i3.value),await d(10),e(await t("p3")).toEqual("p3","set p3 in runtime")}},p={args:{title:"Instance Attributes",body:`
+    <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
+    <custom-element tag="dce-link3" >
+        <template>
+            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"      ></attribute>
+            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            p1: <code data-testid="p1">{$p1}</code> <br/> 
+            p2: <code data-testid="p2">{$p2}</code> <br/> 
+            p3: <code data-testid="p3">{$p3}</code>
+        </template>
+    </custom-element>
+    <dce-link3 id="dce3" p1="123" p3="qwe"></dce-link3> |
+`},play:async({canvasElement:a})=>{i.args.title;const n=o(a),t=async s=>(await n.findByTestId(s)).textContent.trim();await d(20),e(await t("p1")).toEqual("123"),e(await t("p2")).toEqual("always_p2"),e(await t("p3")).toEqual("qwe")}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Attributes definition',
+    body: \`
+    <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
+    <custom-element tag="dce-link" >
+        <template>
+            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"      ></attribute>
+            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            p1: <code data-testid="p1">{$p1}</code> <br/> 
+            p2: <code data-testid="p2">{$p2}</code> <br/> 
+            p3: <code data-testid="p3">{$p3}</code>
+        </template>
+    </custom-element>
+    <dce-link id="dce1"></dce-link>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (AttributeDefaults.args!.title as string);
+    const canvas = within(canvasElement),
+      code = async id => (await canvas.findByTestId(id)).textContent.trim();
+    await sleep(20);
+    expect(await code('p1')).toEqual('default_P1');
+    expect(await code('p2')).toEqual('always_p2');
+    expect(await code('p3')).toEqual('def_P3');
+  }
+}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Attributes runtime change',
+    body: \`
+    <p>Params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.</p>
+    <custom-element tag="dce-link2" >
+        <template>
+            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"      ></attribute>
+            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            p1: <code data-testid="p1">{$p1}</code> <br/> 
+            p2: <code data-testid="p2">{$p2}</code> <br/> 
+            p3: <code data-testid="p3">{$p3}</code>
+        </template>
+    </custom-element>
+    <section>
+        <dce-link2   id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
+        <div><input id="i1" value="p1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+        <div><input id="i2" value="p2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+        <div><input id="i3" value="p3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+    </section>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (AttributeDefaults.args!.title as string);
+    const canvas = within(canvasElement),
+      code = async id => (await canvas.findByTestId(id)).textContent.trim();
+    await sleep(20);
+    expect(await code('p1')).toEqual('123');
+    expect(await code('p2')).toEqual('always_p2', 'no overrides due to value is hardcoded');
+    expect(await code('p3')).toEqual('def_P3');
+    dce2.setAttribute('p1', i1.value);
+    await sleep(10);
+    expect(await code('p1')).toEqual('p1', 'set p1 in runtime');
+    dce2.setAttribute('p2', i2.value);
+    await sleep(10);
+    expect(await code('p2')).toEqual('always_p2', 'can not set p2 in runtime');
+    dce2.setAttribute('p3', i3.value);
+    await sleep(10);
+    expect(await code('p3')).toEqual('p3', 'set p3 in runtime');
+  }
+}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Instance Attributes',
+    body: \`
+    <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
+    <custom-element tag="dce-link3" >
+        <template>
+            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"      ></attribute>
+            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            p1: <code data-testid="p1">{$p1}</code> <br/> 
+            p2: <code data-testid="p2">{$p2}</code> <br/> 
+            p3: <code data-testid="p3">{$p3}</code>
+        </template>
+    </custom-element>
+    <dce-link3 id="dce3" p1="123" p3="qwe"></dce-link3> |
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (AttributeDefaults.args!.title as string);
+    const canvas = within(canvasElement),
+      code = async id => (await canvas.findByTestId(id)).textContent.trim();
+    await sleep(20);
+    expect(await code('p1')).toEqual('123');
+    expect(await code('p2')).toEqual('always_p2');
+    expect(await code('p3')).toEqual('qwe');
+  }
+}`,...p.parameters?.docs?.source}}};const m=["AttributeDefaults","AttributesRuntimeChange","InstanceAttributes"];export{i as AttributeDefaults,c as AttributesRuntimeChange,p as InstanceAttributes,m as __namedExportsOrder,b as default};

package/storybook-static/assets/css.stories-CLSX-Xxd.js

@@ -0,0 +1,86 @@
+import{w as u,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";const g={title:"",tag:"",style:"",slot:"",payload:""};function p(t){const{title:e,tag:o,style:s,slot:l,payload:y}={...g,...t};return`
+        <fieldset>
+            <legend>${e}</legend>
+            <custom-element ${o?`tag="${o}"`:""} >
+                <template>
+                    <style>
+                        ${s}
+                    </style>
+                    <u><slot>${l}</slot></u>
+                </template>
+            </custom-element>
+            ${y}
+        </fieldset>
+  `}const h={title:"Css",render:p},d='<b style="color:green">green</b>',i='<i style="color:red">red</i>',a={args:{title:`The default color should stay on this label, the message inside should be ${d}`,style:"color:green",slot:"text has to be green",payload:"<u>no tags</u>"},play:async({canvasElement:t})=>{const o=await u(t).findByText("text has to be green"),l=getComputedStyle(o).getPropertyValue("color");n(l).to.equal("rgb(0, 128, 0)")}},c={args:{title:`The default color should apply ${d} in all instances`,style:"color:green",slot:"text has to be green",tag:"dce-2",payload:'<u>2 instances:</u> <dce-2 id="dce21"></dce-2> * <dce-2 id="dce22"></dce-2>'},play:async({canvasElement:t})=>{await u(t).findByText("2 instances:");const e=o=>{const s=t.querySelector(o);return getComputedStyle(s).getPropertyValue("color")};n(e("legend")).to.not.equal(e("b")),n(e("legend")).to.not.equal(e("b")),n(e("#dce21 u")).to.equal(e("b")),n(e("#dce22 u")).to.equal(e("b"))}},r={args:{title:`${d} in instance style can be overridden in payload as ${i} in 1st instance`,style:"color:green",slot:"is green",tag:"dce-3",payload:`  <u>should be</u> ${i}:<dce-3 id="dce32">
+                        <template>
+                            <style> color:red; </style>
+                            <u>red</u>
+                        </template>
+                    </dce-3> <br/>
+                     should be ${d}: <dce-3 id="dce31">green</dce-3>   `},play:async({canvasElement:t})=>{await u(t).findByText("should be");const e=o=>{const s=t.querySelector(o);return getComputedStyle(s).getPropertyValue("color")};n(e("legend")).to.not.equal(e("b")),n(e("#dce31 u")).to.equal(e("b")),n(e("#dce32 u")).to.equal(e("i"))}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: \`The default color should stay on this label, the message inside should be \${GREEN}\`,
+    style: \`color:green\`,
+    slot: 'text has to be green',
+    payload: '<u>no tags</u>'
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const el = await canvas.findByText('text has to be green');
+    const st = getComputedStyle(el);
+    const color = st.getPropertyValue('color');
+    // @ts-ignore
+    expect(color).to.equal('rgb(0, 128, 0)');
+  }
+}`,...a.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: \`The default color should apply \${GREEN} in all instances\`,
+    style: \`color:green\`,
+    slot: 'text has to be green',
+    tag: 'dce-2',
+    payload: \`<u>2 instances:</u> <dce-2 id="dce21"></dce-2> * <dce-2 id="dce22"></dce-2>\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    await within(canvasElement).findByText('2 instances:');
+    const color = (css: string) => {
+      const el = canvasElement.querySelector(css);
+      const st = getComputedStyle(el!);
+      return st.getPropertyValue('color');
+    };
+    expect(color('legend')).to.not.equal(color('b'));
+    expect(color('legend')).to.not.equal(color('b'));
+    expect(color('#dce21 u')).to.equal(color('b'));
+    expect(color('#dce22 u')).to.equal(color('b'));
+  }
+}`,...c.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: \`\${GREEN} in instance style can be overridden in payload as \${RED} in 1st instance\`,
+    style: \`color:green\`,
+    slot: 'is green',
+    tag: 'dce-3',
+    payload: \`  <u>should be</u> \${RED}:<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>   \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    await within(canvasElement).findByText('should be');
+    const color = (css: string) => {
+      const el = canvasElement.querySelector(css);
+      const st = getComputedStyle(el!);
+      return st.getPropertyValue('color');
+    };
+    expect(color('legend')).to.not.equal(color('b'));
+    expect(color('#dce31 u')).to.equal(color('b'));
+    expect(color('#dce32 u')).to.equal(color('i'));
+  }
+}`,...r.parameters?.docs?.source}}};const x=["StyleDoesNotLeak","StyleIn2Instances","OverrideInPayload"];export{r as OverrideInPayload,a as StyleDoesNotLeak,c as StyleIn2Instances,x as __namedExportsOrder,h as default};

package/storybook-static/assets/custom-element-BLZZ00dz.js

@@ -0,0 +1,53 @@
+const M="http://www.w3.org/1999/XSL/Transform",z="http://www.w3.org/1999/xhtml",W="http://exslt.org/common",f=(e,n)=>e.getAttribute?.(n),X=e=>e.nodeType===3,G=e=>typeof e=="string",Y=e=>e&&typeof e.nodeType=="number",E=(e,n="",t=document)=>(s=>(n&&s.append(w(t.ownerDocument||t,n)),s))((t.ownerDocument||t).createElement(e)),w=(e,n)=>(e.ownerDocument||e).createTextNode(n),O=e=>{for(;e.firstChild;)e.firstChild.remove();return e},R=e=>(e.getAttributeNames().map(n=>e.removeAttribute(n)),O(e)),J=e=>(e?.setAttribute("xmlns:xsl",M),e),K=e=>(e?.setAttribute("xmlns:xhtml",z),J(e)),H=(e,n)=>{const t=e.ownerDocument.createElementNS(e.namespaceURI,n);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(;e.firstChild;)t.append(e.firstChild);return t};function C(e){return new DOMParser().parseFromString(e,"application/xml")}function I(e){return new XMLSerializer().serializeToString(e)}function D(e,n,t,s){const l=p=>e.ownerDocument.createElement(p),h=((p,y,d)=>(y.append(d=l(p)),d))(n,e);return[...t].forEach(p=>h.append(s(p))),h}function Q(e){return e.slot||(e.setAttribute||(e=E("span",e.textContent.replaceAll(`
+`,""))),e.setAttribute("slot","")),e}function j(e,n,t){const s=typeof e;if(s==="function")debugger;if(s==="string")return E(n,e,t);if(s==="number")return E(n,""+e,t);if(e instanceof Array){const o=E("array");return e.map(h=>o.append(j(h,n,t))),o}const l=E(n,"",t);for(let o in e)Y(e[o])||typeof e[o]=="function"||e[o]instanceof Window||(typeof e[o]!="object"?l.setAttribute(o,e[o]):l.append(j(e[o],o,t)));return l}function k(e){if(S(e,"*",n=>[...n.childNodes].filter(t=>t.nodeType===3).forEach(t=>{if(t.parentNode.localName==="style")return;const s=t.data.matchAll(/{([^}]*)}/g);if(s){let l=0,o=p=>w(t,p||""),h=[];if([...s].forEach(p=>{p.index>l&&h.push(o(p.input.substring(l,p.index)));const y=e.querySelector("value-of").cloneNode();y.setAttribute("select",p[1]),h.push(y),l=p.index+p[0].length}),l<t.data.length&&h.push(o(t.data.substring(l,t.data.length))),h.length){for(let p of h)n.insertBefore(p,t);n.removeChild(t)}}})),"all"in e){let n=1;for(let t of e.all)t.setAttribute&&!t.tagName.startsWith("xsl:")&&t.setAttribute("data-dce-id",""+n++)}return e}function Z(e,n="xsl:stylesheet"){if(e.tagName===n||e.documentElement?.tagName===n)return k(e);const t=C(`<xsl:stylesheet version="1.0" xmlns:xsl="${M}" xmlns:xhtml="${z}" xmlns:exsl="${W}" exclude-result-prefixes="exsl" >
+        <xsl:output method="xml" />
+        <xsl:template match="/"><dce-root xmlns="${z}"><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,l=(a=>{S(a,"script",g=>g.remove());const i=a.content??a.firstElementChild?.content??a.body??a;re.forEach(g=>S(i,g,x=>ie(x,i)));const N=a.firstElementChild?.content||a.content,v=g=>{const x=C("<xhtml/>"),T=x.importNode(g,!0);return x.replaceChild(T,x.documentElement),K(T)};if(N){const g=E("div");return[...N.childNodes].map(x=>g.append(x.cloneNode(!0))),v(g)}return v(a.documentElement||a.body||a)})(e),o=C(`<xsl:stylesheet version="1.0"
+        xmlns:xsl="${M}"
+        xmlns:xhtml="${z}"
+        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 h=s.transformToFragment(l,document),p=(a,i)=>a.querySelector(i),y=p(o,'template[mode="payload"]');if(!h)return console.error("transformation error",{xml:l.outerHTML,xsl:I(t)});const d=[];[...h.querySelectorAll("dce-root>attribute")].forEach(a=>{const i=H(a,"xsl:param"),N=f(a,"name");y.append(i);let v=f(i,"select")?.split("??");v||(v=["//"+N,`'${i.textContent}'`],R(i),i.setAttribute("name",N));let g;if(v?.length>1){i.removeAttribute("select");const x=p(o,'template[match="ignore"]>choose').cloneNode(!0);R(x.firstElementChild).append(w(x,"{"+v[0]+"}")),R(x.lastElementChild).append(w(x,"{"+v[1]+"}")),x.firstElementChild.setAttribute("test",v[0]),i.append(x),g=x.cloneNode(!0)}else g=H(a,"xsl:value-of");g.removeAttribute("name"),a.append(g),a.removeAttribute("select"),d.push(i)}),[...h.querySelectorAll("[value]")].filter(a=>a.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(a=>{const i=f(a,"value");i&&a.setAttribute("value",oe(i))});for(const a of h.childNodes)y.append(o.importNode(a,!0));[...y.querySelectorAll("template")].forEach(a=>y.ownerDocument.documentElement.append(a));const $=p(o,'call-template[name="slot"]'),u=a=>{const i=$.cloneNode(!0),N=f(a,"name")||"";N&&i.firstElementChild.setAttribute("select",`'${N}'`);for(let v of a.childNodes)i.lastElementChild.append(v);return i};S(y,"slot",a=>a.parentNode.replaceChild(u(a),a));const c=k(o);return c.params=d,c}async function ee(e){return await new Promise((t,s)=>{const l=new XMLHttpRequest;l.open("GET",e),l.responseType="document",l.onload=()=>{l.readyState===l.DONE&&l.status===200&&t(l.responseXML||E("div",l.responseText)),s(l.statusText)},l.addEventListener("error",o=>s(o)),l.send()})}const te=(e,n)=>n.split("|").map(t=>t.trim()).map(t=>{if(t.includes("/")){const s=[],l=e.ownerDocument.evaluate(t,e);for(let o;o=l.iterateNext();)s.push(o);return s}return[...e.childNodes].find(s=>s.localName===t)||E(t)}).flat();function se(e,n,t,s){te(e,n).map(l=>{const o=e.ownerDocument,h=t.sliceEventSource,p=t.sliceElement,y=()=>[...l.childNodes].filter(d=>d.nodeType===3||d.localName==="value").map(d=>d.remove());if(h.getAttributeNames().map(d=>l.setAttribute(d,f(h,d))),[...l.childNodes].filter(d=>d.localName==="event").map(d=>d.remove()),t.type==="init"&&y(),l.append(j(t,"event",o)),p.hasAttribute("slice-value")){h.value===void 0?l.removeAttribute("value"):l.setAttribute("value",h.value);const d=B(f(p,"slice-value"),l);y(),l.append(w(o,d))}else{const d=h.value??f(p,"value");y(),d==null?[...l.childNodes].filter(A=>A.localName!=="event").map(A=>A.remove()):G(d)?l.append(w(o,d)):l.append(j(d,"value",l.ownerDocument))}})}function S(e,n,t){e.querySelectorAll&&[...e.querySelectorAll(n)].forEach(t)}const V=(e,n)=>(t=>e===t?null:t&&(t.querySelector(n)||V(t,n)))(e.getRootNode()),le=async(e,n)=>{if(!e||!e.trim())return[n];if(e.startsWith("#"))return(t=>{if(!t)return[];const s=t.querySelectorAll(e);if(s.length)return[...s];const l=t.getRootNode();return l===t?[]:V(l)})(n.parentElement);try{const t=await ee(e),s=new URL(e,location).hash;if(s){const l=t.querySelectorAll(s);return l.length?[...l]:[n]}return[t]}catch{return[n]}};function ne(e,n){if(X(e)){if(!X(n))debugger;return}for(let t of e.attributes)t.namespaceURI?n.setAttributeNS(t.namespaceURI,t.name,t.value):n.setAttribute(t.name,t.value),t.name==="value"&&(n.value=t.value)}function _(e,n=0){const t={};for(const s of e.childNodes){const l=f(s,"data-dce-id")||s.dceId||0;if(!t[l])l?t[l]=1:(t[l]=s.dceId=++n,s.setAttribute&&s.setAttribute("data-dce-id",s.dceId));else{const o=s.dceId=l+"-"+t[l]++;s.setAttribute&&s.setAttribute("data-dce-id",o)}s.childNodes.length&&_(s)}}function F(e,n){if(!n.length)return O(e);const t={};for(let s of e.childNodes)t[s.dceId],X(s)?(s.data.trim(),t[s.dceId||0]=s):t[f(s,"data-dce-id")||0]=s;for(let s of[...n]){const l=f(s,"data-dce-id")||s.dceId,o=t[l];o?(X(s)?o.nodeValue!==s.nodeValue&&(o.nodeValue=s.nodeValue):(ne(s,o),(o.childNodes.length||s.childNodes.length)&&F(o,s.childNodes)),delete t[l]):e.append(s)}for(let s of Object.values(t))s.remove()}function ae(e,n){return e.hasAttribute(n)||e.setAttribute(n,crypto.randomUUID()),e.getAttribute(n)}const oe=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${P(t[3])}}${t[4]}`).join(""),P=e=>{if(!e.trim())return e;const n=e.split("??"),t=n.shift(),s=P(n.join("??"));return n.length?`concat( ${t} , substring( ${s} , (1+string-length( ${s} )) * string-length( ${t} ) ) )`:e},B=(e,n)=>{e=P(e);const t=n.ownerDocument.evaluate(e,n);switch(t.resultType){case XPathResult.NUMBER_TYPE:return t.numberValue;case XPathResult.STRING_TYPE:return t.stringValue}let s="";for(let l;l=t.iterateNext();)s+=l.textContent;return s},re="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(","),ie=(e,n)=>{const t=E("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||n,l=[...s.childNodes];l.forEach((o,h)=>{o===e&&(l[h]=t)}),s.replaceChildren(...l)}};class ce extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){const n=await le(f(this,"src"),this),t=f(this,"tag"),s=t||"dce-"+crypto.randomUUID();for(const u of n)S(u.templateNode||u.content||u,"style",c=>{const a=c.closest("slot"),i=a?`slot[name="${a.name}"]`:"";c.innerHTML=`${s} ${i}{${c.innerHTML}}`,this.append(c)});const l=n.map(u=>Z(u)),o=l.map((u,c)=>(c=new XSLTProcessor,c.importStylesheet(u),c));Object.defineProperty(this,"xsltString",{get:()=>l.map(u=>I(u)).join(`
+`)});const h=this,p=[...this.templateNode.querySelectorAll("[slice]")],y=p.map(u=>f(u,"slice")).filter(u=>!u.includes("/")).filter((u,c,a)=>a.indexOf(u)===c),d=l.reduce((u,c)=>(c.params&&u.push(...c.params),u),[]);class A extends HTMLElement{static get observedAttributes(){return d.map(c=>f(c,"name"))}#e=0;connectedCallback(){let c=this.childNodes;if(this.firstElementChild?.tagName==="TEMPLATE"){const m=this.firstElementChild;m.remove(),c=m.content.childNodes;for(const r of[...m.content.childNodes])if(r.localName==="style"){const b=ae(this,"data-dce-style");r.innerHTML=`${s}[data-dce-style="${b}"]{${r.innerHTML}}`,m.insertAdjacentElement("beforebegin",r)}else r.nodeType===1?m.insertAdjacentElement("beforebegin",r):r.nodeType===3&&m.insertAdjacentText("beforebegin",r.data)}const a=C("<datadom/>").documentElement,i=(m,r="")=>(b=>(r&&b.append(w(a,r)),b))(a.ownerDocument.createElement(m));D(a,"payload",c,Q),this.innerHTML="",D(a,"attributes",this.attributes,m=>i(m.nodeName,m.value)),D(a,"dataset",Object.keys(this.dataset),m=>i(m,this.dataset[m]));const N=D(a,"slice",y,m=>i(m,"")),v=m=>B(m,N);this.xml=a;const g=[],x=()=>{const m={};for(let r;r=g.pop();){const b=f(r.sliceElement,"slice");m[b]||(se(N,b,r),m[b]=r)}Object.keys(m).length!==0&&q()};let T;this.onSlice=m=>{m.stopPropagation?.(),m.sliceEventSource=m.currentTarget||m.target,g.push(m),T||(T=setTimeout(()=>{x(),T=0},10))};const q=this.transform=()=>{if(this.#e)debugger;this.#e=1,o.map((r,b)=>{const L=r.transformToFragment(a.ownerDocument,document);return L||console.error(`XSLT transformation error. xsl:
+`,I(l[b]),`
+xml:
+`,I(a)),L}).map(r=>{r&&(_(r),F(this,r.childNodes))}),A.observedAttributes.map(r=>{let b=f(this.firstElementChild,r);b!==f(this,r)&&(this.setAttribute(r,b),this.#t(r,b))}),S(this,"[slice]",r=>{if(!r.dceInitialized){r.dceInitialized=1;const b=f(r,"slice-event");(b||"change").split(" ").forEach(L=>(r.localName==="slice"?r.parentElement:r).addEventListener(L,U=>{U.sliceElement=r,this.onSlice(U)})),(!b||b.includes("init"))&&(r.hasAttribute("slice-value")||r.hasAttribute("value")||r.value?this.onSlice({type:"init",target:r,sliceElement:r}):r.value=v(f(r,"slice")))}}),this.#e=0};q(),x()}#t(c,a){let i=this.xml.querySelector(`attributes>${c}`);i?R(i).append(w(i,a)):(i=E(c,a,this.xml),this.xml.querySelector("attributes").append(i))}attributeChangedCallback(c,a,i){!this.xml||this.#e||(this.#t(c,i),this.transform())}get dce(){return h}}const $=u=>{window.customElements.get(u)!==A&&window.customElements.define(u,A)};if(t)$(t);else{const u=s;this.setAttribute("tag",u),$(u);const c=document.createElement(u);this.getAttributeNames().forEach(a=>c.setAttribute(a,this.getAttribute(a))),c.append(...[...this.childNodes].filter(a=>a.localName!=="style")),this.append(c)}}get templateNode(){return this.firstElementChild?.tagName==="TEMPLATE"?this.firstElementChild.content:this}get dce(){return this}get xslt(){return C(this.xsltString)}}window.customElements.define("custom-element",ce);

package/storybook-static/assets/dom-merge.stories-CgHZUABU.js

@@ -0,0 +1,138 @@
+import{w as l,e as a,u as c}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";function r(s){return new Promise(t=>setTimeout(t,s))}function d(s){const{title:t,body:e}=s;return`
+        <fieldset>
+            <legend>${t}</legend>
+            ${e}
+        </fieldset>
+  `}const h={title:"dom-merge",render:d},o={args:{title:"Chars count in textarea",body:`
+    <p>Counter update happens on change event(focus change). The update should not interfere with the input</p>
+    <custom-element>
+        <form>
+            <label>
+                <textarea slice="text-container" data-testid="textarea-id">Hello world!</textarea>
+                <span> Chars count:
+                    <code data-testid="counter-id">{string-length(//slice/text-container/text())}</code>
+                </span>
+            </label>
+             <br/><input placeholder="after textarea input, click here " data-testid="refocus-id" />
+        </form>
+    </custom-element>
+`},play:async({canvasElement:s})=>{const t=o.args.title,e=l(s);await e.findByText(t),await r(100),a(await e.findByTestId("textarea-id")).toBeInTheDocument();const n=e.getByTestId("textarea-id");n.value="",n.focus(),await c.keyboard(t),a(n.value).toEqual(t),a(n.value.length).toEqual(t.length);debugger;e.getByTestId("refocus-id").focus(),await r(10),a(e.getByTestId("counter-id").textContent).toEqual(""+t?.length,"counter of symbols")}},i={args:{title:"Word count in HTML input field",body:`
+    <p>Counter update happens on keyup event. The update should not interfere with the input</p>
+    <custom-element>
+            <form>
+                <label>
+                    <input type="text" value="{//txt ?? 'Type time update'}" slice="txt" slice-event="init input" data-testid="input-id">
+
+                    <span> Character count:
+                        <code data-testid="chars-id"
+                            >{
+                                string-length(//slice/txt)
+                            }</code>
+                    </span>
+                    <span> Word count:
+                        <code data-testid="words-id"
+                            >{
+                                string-length(normalize-space(//slice/txt)) -
+                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1 
+                            }</code>
+                        <!-- The expression first normalizes the string by removing leading and trailing whitespace and
+                            collapsing internal whitespace into a single space. It then subtracts the length of the string
+                            with all spaces removed from the length of the original string,
+                            and adds 1 to account for the last word.
+                        -->
+                    </span>
+
+                </label>
+                <p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
+            </form>
+        </custom-element>
+`},play:async({canvasElement:s})=>{const t=i.args.title,e=l(s);await e.findByText(t);const n=await e.findByTestId("input-id");n.value="",n.focus(),a(n).toBeInTheDocument(),await c.keyboard(t),await r(10),a(n.value).toEqual(t),a(e.getByTestId("chars-id").textContent.trim()).toEqual(""+t.length,"counter of symbols"),a(t.split(" ").length).toEqual(6,"counter of words in text sample"),a(e.getByTestId("words-id").textContent.trim()).toEqual("6","counter of words in render")}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Chars count in textarea',
+    body: \`
+    <p>Counter update happens on change event(focus change). The update should not interfere with the input</p>
+    <custom-element>
+        <form>
+            <label>
+                <textarea slice="text-container" data-testid="textarea-id">Hello world!</textarea>
+                <span> Chars count:
+                    <code data-testid="counter-id">{string-length(//slice/text-container/text())}</code>
+                </span>
+            </label>
+             <br/><input placeholder="after textarea input, click here " data-testid="refocus-id" />
+        </form>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (CharsCountInTextarea.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    await sleep(100);
+    expect(await canvas.findByTestId('textarea-id')).toBeInTheDocument();
+    const textarea = canvas.getByTestId('textarea-id');
+    textarea.value = '';
+    textarea.focus();
+    await userEvent.keyboard(titleText);
+    expect(textarea.value).toEqual(titleText);
+    expect(textarea.value.length).toEqual(titleText.length);
+    debugger;
+    canvas.getByTestId('refocus-id').focus();
+    await sleep(10);
+    expect(canvas.getByTestId('counter-id').textContent).toEqual('' + titleText?.length, 'counter of symbols');
+  }
+}`,...o.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Word count in HTML input field',
+    body: \`
+    <p>Counter update happens on keyup event. The update should not interfere with the input</p>
+    <custom-element>
+            <form>
+                <label>
+                    <input type="text" value="{//txt ?? 'Type time update'}" slice="txt" slice-event="init input" data-testid="input-id">
+
+                    <span> Character count:
+                        <code data-testid="chars-id"
+                            >{
+                                string-length(//slice/txt)
+                            }</code>
+                    </span>
+                    <span> Word count:
+                        <code data-testid="words-id"
+                            >{
+                                string-length(normalize-space(//slice/txt)) -
+                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1 
+                            }</code>
+                        <!-- The expression first normalizes the string by removing leading and trailing whitespace and
+                            collapsing internal whitespace into a single space. It then subtracts the length of the string
+                            with all spaces removed from the length of the original string,
+                            and adds 1 to account for the last word.
+                        -->
+                    </span>
+
+                </label>
+                <p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
+            </form>
+        </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (WordCountOnType.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const input = await canvas.findByTestId('input-id');
+    input.value = '';
+    input.focus();
+    expect(input).toBeInTheDocument();
+    await userEvent.keyboard(titleText);
+    await sleep(10);
+    expect(input.value).toEqual(titleText);
+    expect(canvas.getByTestId('chars-id').textContent.trim()).toEqual('' + titleText.length, 'counter of symbols');
+    expect(titleText.split(' ').length).toEqual(6, 'counter of words in text sample');
+    expect(canvas.getByTestId('words-id').textContent.trim()).toEqual('6', 'counter of words in render');
+  }
+}`,...i.parameters?.docs?.source}}};const x=["CharsCountInTextarea","WordCountOnType"];export{o as CharsCountInTextarea,i as WordCountOnType,x as __namedExportsOrder,h as default};

package/storybook-static/assets/entry-preview-CQqNFx4W.js

@@ -0,0 +1,8 @@
+import{d as l}from"./index-DrFu-skq.js";import{j as _}from"./lit-element-B4_0akdT.js";/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const O=(o,t)=>t===void 0?o?._$litType$!==void 0:o?._$litType$===t,{global:h}=__STORYBOOK_MODULE_GLOBAL__,{simulatePageLoad:s,simulateDOMContentLoaded:u}=__STORYBOOK_MODULE_PREVIEW_API__;var{Node:y}=h,m=(o,t)=>{let{id:p,component:i}=t;if(!i)throw new Error(`Unable to render story ${p} as the component annotation is missing from the default export`);let n=document.createElement(i);return Object.entries(o).forEach(([d,e])=>{n[d]=e}),n};function M({storyFn:o,kind:t,name:p,showMain:i,showError:n,forceRemount:d},e){let r=o();if(i(),O(r)){(d||!e.querySelector('[id="root-inner"]'))&&(e.innerHTML='<div id="root-inner"></div>');let f=e.querySelector('[id="root-inner"]');_(r,f),s(e)}else if(typeof r=="string")e.innerHTML=r,s(e);else if(r instanceof y){if(e.firstChild===r&&!d)return;e.innerHTML="",e.appendChild(r),u()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${p}" of "${t}".`,description:l`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var a={renderer:"web-components"};export{a as parameters,m as render,M as renderToCanvas};

package/storybook-static/assets/entry-preview-docs-CWgqLfd3.js

@@ -0,0 +1,2 @@
+import{S as u,e as O,a as y}from"./index-Cc7K62zD.js";import{i as S}from"./tiny-invariant-BxWVcicq.js";import{j as p}from"./lit-element-B4_0akdT.js";const{global:i}=__STORYBOOK_MODULE_GLOBAL__;var{window:g}=i;g.STORYBOOK_ENV="web-components";function d(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function l(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function c(){return i.__STORYBOOK_CUSTOM_ELEMENTS__||i.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:w,EventSource:h}=i;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new h("__webpack_hmr").addEventListener("message",function(e){try{let{action:r}=JSON.parse(e.data);r==="built"&&w.location.reload()}catch{}}));const{logger:m}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{useEffect:v,addons:b}=__STORYBOOK_MODULE_PREVIEW_API__;function _(e,r){let t;switch(r){case"attributes":case"properties":t={name:e.type?.text||e.type};break;case"slots":t={name:"string"};break;default:t={name:"void"};break}return{name:e.name,required:!1,description:e.description,type:t,table:{category:r,type:{summary:e.type?.text||e.type},defaultValue:{summary:e.default!==void 0?e.default:e.defaultValue}}}}function D(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(t,n,a)=>a?a.toUpperCase():"").replace(/^([A-Z])/,t=>t.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},_(e,"events")]}function o(e,r){return e&&e.filter(t=>t&&t.name).reduce((t,n)=>{if(n.kind==="method")return t;switch(r){case"events":D(n).forEach(a=>{S(a.name,`${a} should have a name property.`),t[a.name]=a});break;default:t[n.name]=_(n,r);break}return t},{})}var C=(e,r)=>{if(!d(e)||!l(r))return null;let t=r.tags.find(n=>n.name.toUpperCase()===e.toUpperCase());return t||m.warn(`Component not found in custom-elements.json: ${e}`),t},T=(e,r)=>{if(!d(e)||!l(r))return null;let t;return r?.modules?.forEach(n=>{n?.declarations?.forEach(a=>{a.tagName===e&&(t=a)})}),t||m.warn(`Component not found in custom-elements.json: ${e}`),t},f=(e,r)=>r?.version==="experimental"?C(e,r):T(e,r),A=(e,r)=>{let t=f(e,r);return t&&{...o(t.members??[],"properties"),...o(t.properties??[],"properties"),...o(t.attributes??[],"attributes"),...o(t.events??[],"events"),...o(t.slots??[],"slots"),...o(t.cssProperties??[],"css custom properties"),...o(t.cssParts??[],"css shadow parts")}},M=e=>{let r=c();return A(e,r)},L=e=>{let r=f(e,c());return r&&r.description},R=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function I(e){let r=e?.parameters.docs?.source,t=e?.parameters.__isArgsStory;return r?.type===u.DYNAMIC?!1:!t||r?.code||r?.type===u.CODE}function P(e,r){let t=e(),n=r?.parameters.docs?.source?.excludeDecorators?r.originalStoryFn(r.args,r):t,a;if(v(()=>{let{id:s,unmappedArgs:E}=r;a&&b.getChannel().emit(y,{id:s,source:a,args:E})}),!I(r)){let s=window.document.createElement("div");n instanceof DocumentFragment?p(n.cloneNode(!0),s):p(n,s),a=s.innerHTML.replace(R,"")}return t}var N=[P],B={docs:{extractArgTypes:M,extractComponentDescription:L,story:{inline:!0},source:{type:u.DYNAMIC,language:"html"}}},V=[O];export{V as argTypesEnhancers,N as decorators,B as parameters};