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

package/storybook-static/assets/{attributes.stories-ZB0RTY1d.js → attributes.test.stories-IuwazrdL.js}

@@ -1,30 +1,30 @@
-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`
+import{w as o,e}from"./custom-element-BV8-hRQS.js";import"./index-CVRyq5ci.js";function s(a){return new Promise(i=>setTimeout(i,a))}function r(a){const{title:i,body:t}=a;return`
         <fieldset>
-            <legend>${n}</legend>
+            <legend>${i}</legend>
             ${t}
         </fieldset>
-  `}const b={title:"attributes",render:r},i={args:{title:"Attributes definition",body:`
+  `}const b={title:"attributes",render:r},d={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/> 
+            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:`
+`},play:async({canvasElement:a})=>{d.args.title;const i=o(a),t=async c=>(await i.findByTestId(c)).textContent.trim();await s(20),e(await t("p1")).toEqual("default_P1"),e(await t("p2")).toEqual("always_p2"),e(await t("p3")).toEqual("def_P3")}},n={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/> 
+            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>
@@ -34,20 +34,20 @@ import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";f
         <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:`
+`},play:async({canvasElement:a})=>{d.args.title;const i=o(a),t=async c=>(await i.findByTestId(c)).textContent.trim();await s(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 s(10),e(await t("p1")).toEqual("p1","set p1 in runtime"),dce2.setAttribute("p2",i2.value),await s(10),e(await t("p2")).toEqual("always_p2","can not set p2 in runtime"),dce2.setAttribute("p3",i3.value),await s(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/> 
+            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:`{
+`},play:async({canvasElement:a})=>{d.args.title;const i=o(a),t=async c=>(await i.findByTestId(c)).textContent.trim();await s(20),e(await t("p1")).toEqual("123"),e(await t("p2")).toEqual("always_p2"),e(await t("p3")).toEqual("qwe")}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Attributes definition',
     body: \`
@@ -57,8 +57,8 @@ import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";f
             <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/> 
+            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>
@@ -76,7 +76,7 @@ import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";f
     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:`{
+}`,...d.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Attributes runtime change',
     body: \`
@@ -86,8 +86,8 @@ import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";f
             <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/> 
+            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>
@@ -119,7 +119,7 @@ import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";f
     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:`{
+}`,...n.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Instance Attributes',
     body: \`
@@ -129,8 +129,8 @@ import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";f
             <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/> 
+            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>
@@ -148,4 +148,4 @@ import{w as o,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";f
     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};
+}`,...p.parameters?.docs?.source}}};const m=["AttributeDefaults","AttributesRuntimeChange","InstanceAttributes"];export{d as AttributeDefaults,n as AttributesRuntimeChange,p as InstanceAttributes,m as __namedExportsOrder,b as default};

package/storybook-static/assets/css.test.stories-D9WaxrEv.js

@@ -0,0 +1,96 @@
+import{w as i,e as t}from"./custom-element-BV8-hRQS.js";import"./index-CVRyq5ci.js";const g={title:"",tag:"",style:"",slot:"",payload:""};function p(n){const{title:e,tag:o,style:s,slot:a,payload:l}={...g,...n};return`
+        <fieldset>
+            <legend>${e}</legend>
+            <custom-element ${o?`tag="${o}"`:""} >
+                <template>
+                    <style>
+                        ${s}
+                    </style>
+                    <u><slot>${a}</slot></u>
+                </template>
+            </custom-element>
+            ${l}
+        </fieldset>
+  `}const b={title:"Css",render:p},u='<b style="color:green">green</b>',y='<i style="color:red">red</i>',c={args:{title:`The default color should stay on this label, the message inside should be ${u}`,style:"color:green",slot:"text has to be green",payload:"<u>no tags</u>"},play:async({canvasElement:n})=>{const o=await i(n).findByText("text has to be green"),a=getComputedStyle(o).getPropertyValue("color");t(a).to.equal("rgb(0, 128, 0)"),await t(o.closest("custom-element")).toBeInTheDocument();const l=o.closest("custom-element");await t(l.xsltString).toContain("<xsl:stylesheet"),await t(l.dce.localName).toEqual("custom-element"),await t(l.dce.xsltString).toEqual(l.xsltString),await t(l.dce.xslt.documentElement.tagName).toEqual("xsl:stylesheet")}},r={args:{title:`The default color should apply ${u} 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:n})=>{await i(n).findByText("2 instances:");const e=o=>{const s=n.querySelector(o);return getComputedStyle(s).getPropertyValue("color")};t(e("legend")).to.not.equal(e("b")),t(e("legend")).to.not.equal(e("b")),t(e("#dce21 u")).to.equal(e("b")),t(e("#dce22 u")).to.equal(e("b"))}},d={args:{title:`${u} in instance style can be overridden in payload as ${y} in 1st instance`,style:"color:green",slot:"is green",tag:"dce-3",payload:`<u>should be</u> ${y}:
+                <dce-3 id="dce32">
+                    <template>
+                        <style> color:red; </style>
+                        <u>red</u>
+                    </template>
+                </dce-3> <br/>
+                should be ${u}: 
+                <dce-3 id="dce31">green</dce-3>   `},play:async({canvasElement:n})=>{await i(n).findByText("should be");const e=o=>{const s=n.querySelector(o);return getComputedStyle(s).getPropertyValue("color")};t(e("legend")).to.not.equal(e("b")),t(e("#dce31 u")).to.equal(e("b")),t(e("#dce32 u")).to.equal(e("i"))}};c.parameters={...c.parameters,docs:{...c.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)');
+    await expect(el.closest('custom-element')).toBeInTheDocument();
+    const dce = el.closest('custom-element');
+    await expect(dce.xsltString).toContain('<xsl:stylesheet');
+    await expect(dce.dce.localName).toEqual('custom-element');
+    await expect(dce.dce.xsltString).toEqual(dce.xsltString);
+    await expect(dce.dce.xslt.documentElement.tagName).toEqual('xsl:stylesheet');
+  }
+}`,...c.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.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'));
+  }
+}`,...r.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.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'));
+  }
+}`,...d.parameters?.docs?.source}}};const h=["StyleDoesNotLeak","StyleIn2Instances","OverrideInPayload"];export{d as OverrideInPayload,c as StyleDoesNotLeak,r as StyleIn2Instances,h as __namedExportsOrder,b as default};