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

package/storybook-static/assets/http-request.stories-B2skuTFV.js

@@ -0,0 +1,281 @@
+import{w as m,e as t}from"./custom-element-D8hcDZHh.js";import"./http-request-DNq59pnj.js";import{h as p}from"./handlers-B5969HUu.js";import"./index-C8k3Z-3Y.js";const v={title:"",slice:"page",url:"/pokemon?limit=6"};function r(a){return new Promise(e=>setTimeout(e,a))}function f({title:a,slice:e,url:n}){return`
+        <fieldset>
+            <legend>${a}</legend>
+            <custom-element>
+<template><!-- wrapping into template to prevent images loading within DCE declaration -->
+    <http-request
+        url="{ //slice/url  }"
+        slice="${e}"
+        ></http-request>
+    <input placeholder="URL for fetch" slice="url" value="{ //url ?? '${n}' }"/>
+    <button>set</button>
+    <button slice="url" slice-value="''" slice-event="click">set blank</button>
+    <button slice="url" slice-value="'/reflect'" slice-event="click">/reflect</button>
+    <button slice="url" slice-value="'/pokemon'"         slice-event="click">/pokemon</button>
+    <button slice="url" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
+    <button slice="url" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
+
+    <p>Pokemon Count: {count(/datadom/slice/${e}//results)}</p>
+    <if test="count(/datadom/slice/${e}//results) &lt; 0">
+        <h3>loading...</h3>
+    </if>
+    <for-each select="/datadom/slice/${e}//results">
+        <variable name="pokeid"
+            select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
+            ></variable>
+        <button>
+            <value-of select='@name'/>
+        </button>
+    </for-each>
+    <for-each select="//slice/${e}/value/*">
+        <ul>
+            <var data-testid="request-section"><value-of select='name(.)'/></var>
+            <for-each select="@*">
+                <div>
+                    <var>@{local-name(.)}</var>
+                    =
+                    <code data-testid="attr-{local-name(.)}">{.}</code>
+                </div>
+            </for-each>
+        </ul>
+    </for-each>
+</template>
+            </custom-element>
+      </fieldset>
+  `}const y={title:"http-request",render:a=>f(a),renderPlay:async function(e){document.body.innerHTML=(e.render?e:y).render({...v,...e.args}),await new Promise(n=>setTimeout(async()=>{await e.play({canvasElement:document.body.firstElementChild}),n(0)},0))}},l={args:{title:"url and slice",url:"/pokemon?limit=4"},play:async({canvasElement:a})=>{const e=m(a);await e.findByText(l.args.title),t(await e.findByText("bulbasaur")).toBeInTheDocument(),t(await e.findByText("Pokemon Count: 4")).toBeInTheDocument(a)},parameters:{msw:p}},c={args:{title:"url change",url:""},play:async({canvasElement:a})=>{const e=m(a);await e.findByText(c.args.title);const n=h=>e.getByText(h),o=a.querySelector("http-request"),s=()=>o.getAttribute("url");t(n("Pokemon Count: 0")).toBeInTheDocument(),t(s()).toEqual(""),n("/pokemon").click(),await r(100),t(s()).toEqual("/pokemon"),t(n("Pokemon Count: 6")).toBeInTheDocument(),n("/pokemon?limit=6").click(),await r(100),t(s()).toEqual("/pokemon?limit=6"),t(n("Pokemon Count: 6")).toBeInTheDocument(),n("/pokemon?limit=3").click(),await r(100),t(s()).toEqual("/pokemon?limit=3"),t(n("Pokemon Count: 3")).toBeInTheDocument(),n("set blank").click(),await r(100),t(s()).toEqual(""),t(n("Pokemon Count: 0")).toBeInTheDocument()},parameters:{msw:p}},i={args:{title:"http-request with error",url:"/404"},play:async({canvasElement:a})=>{const e=m(a),n=async o=>(await e.findByTestId(o)).textContent;await e.findByText(i.args.title),await r(200),t(await n("attr-status")).to.include("404")},parameters:{msw:p}},u={args:{title:"http-request with delayed .5 seconds response",url:"/noreturn"},play:async({canvasElement:a})=>{const e=m(a);await e.findByText(u.args.title),t(await e.findByText("request")).toBeInTheDocument(),t(e.queryByText("response")).toBe(null),t(await e.findByText("response")).toBeInTheDocument(),t(await e.findByText("bulbasaur")).toBeInTheDocument(),t(await e.findByText("Pokemon Count: 6")).toBeInTheDocument()},parameters:{msw:p}},d={args:{title:"http-request headers and response status and headers",url:"/reflect"},play:async({canvasElement:a})=>{const e=m(a);await e.findByText(d.args.title),await r(200);const n=await e.findByTestId("section-request-attr-x-test");t(n).toBeInTheDocument(),t(n.textContent.trim()).toEqual("testing");const o=await e.findByTestId("section-response-attr-x-test");t(o).toBeInTheDocument(),t(o.textContent.trim()).toEqual("reflected-testing");const s=await e.findByTestId("section-response-attr-x-added");t(s).toBeInTheDocument(),t(s.textContent.trim()).toEqual("abc")},parameters:{msw:p},render:({url:a,title:e})=>`
+        <fieldset>
+            <legend>${e}</legend>
+            <p> <b>request</b> headers are populated into dedicated <b>slice/request/headers</b></p>
+
+            <custom-element tag="headers-demo" >
+                <template>
+<http-request
+    url="${a}"
+    slice="request_slice"
+    type="text"
+    mode="cors"
+    header-x-test="testing"
+    ></http-request>
+Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
+from <code>${a}</code>
+
+<h3>Samples</h3>
+<table>
+<tr><th>//slice/request_slice/value/request/headers/@mode</th>
+    <td><value-of select="//slice/request_slice/value/request/@mode"/></td></tr>
+<tr><th>//slice/request_slice/value/response/headers/@content-type</th>
+    <td><value-of select="//slice/request_slice/value/response/headers/@content-type"/></td></tr>
+<tr><th>//slice/request_slice/value/response/@status</th>
+    <td><value-of select="//slice/request_slice/value/response/@status"/></td></tr>
+</table>
+<for-each select="//slice/request_slice/value/*">
+    <xsl:variable name="section">{name(.)}</xsl:variable>
+    <ul date-testid="section-{$section}">
+        <b data-testid="request-section"><value-of select='name(.)'/></b>
+        <for-each select="@*">
+            <div>
+                <var >@{local-name(.)}</var>
+                =
+                <code data-testid="section-{$section}-prop-{local-name(.)}">{.}</code>
+            </div>
+        </for-each>
+        <for-each select="*">
+            <div>
+                <b data-testid="section-deep"><value-of select='local-name(.)'/></b>
+                <ul>
+                    <for-each select="@*">
+                        <li>
+                            <var data-testid="section-attribute">@{local-name(.)}</var>
+                            =
+                            <code data-testid="section-{$section}-attr-{local-name(.)}">{.}</code>
+                        </li>
+                    </for-each>
+                    <code><value-of select='.'/></code>
+                </ul>
+            </div>
+        </for-each>
+    </ul>
+</for-each>
+</template>
+            </custom-element>
+            <headers-demo></headers-demo>
+      </fieldset>
+`};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'url and slice',
+    url: '/pokemon?limit=4'
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText((Demo.args!.title as string));
+    expect(await canvas.findByText('bulbasaur')).toBeInTheDocument();
+    expect(await canvas.findByText('Pokemon Count: 4')).toBeInTheDocument(canvasElement);
+  },
+  parameters: {
+    msw: handlers
+  }
+}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'url change',
+    url: ''
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText((UrlChange.args!.title as string));
+    const byText = txt => canvas.getByText(txt);
+    const requestElement = canvasElement.querySelector('http-request'),
+      urlAttr = () => requestElement.getAttribute('url');
+    expect(byText('Pokemon Count: 0')).toBeInTheDocument();
+    expect(urlAttr()).toEqual('');
+    byText('/pokemon').click();
+    await sleep(100);
+    expect(urlAttr()).toEqual('/pokemon');
+    expect(byText('Pokemon Count: 6')).toBeInTheDocument();
+    byText('/pokemon?limit=6').click();
+    await sleep(100);
+    expect(urlAttr()).toEqual('/pokemon?limit=6');
+    expect(byText('Pokemon Count: 6')).toBeInTheDocument();
+    byText('/pokemon?limit=3').click();
+    await sleep(100);
+    expect(urlAttr()).toEqual('/pokemon?limit=3');
+    expect(byText('Pokemon Count: 3')).toBeInTheDocument();
+    byText('set blank').click();
+    await sleep(100);
+    expect(urlAttr()).toEqual('');
+    expect(byText('Pokemon Count: 0')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: handlers
+  }
+}`,...c.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'http-request with error',
+    url: '/404'
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement),
+      $t = async testId => (await canvas.findByTestId(testId)).textContent;
+    await canvas.findByText((Http404.args!.title as string));
+    await sleep(200);
+    expect(await $t('attr-status')).to.include('404');
+  },
+  parameters: {
+    msw: handlers
+  }
+}`,...i.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'http-request with delayed .5 seconds response',
+    url: '/noreturn'
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText((LifecycleInitialized.args!.title as string));
+    expect(await canvas.findByText('request')).toBeInTheDocument(); // after DCE initiated
+    expect(canvas.queryByText('response')).toBe(null); // response is not available
+    // wait while response appears ~ 0.5 seconds
+    expect(await canvas.findByText('response')).toBeInTheDocument(); // only after delay is shown
+
+    expect(await canvas.findByText('bulbasaur')).toBeInTheDocument();
+    expect(await canvas.findByText('Pokemon Count: 6')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: handlers
+  }
+}`,...u.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'http-request headers and response status and headers',
+    url: '/reflect'
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText((RequestResponseHeaders.args!.title as string));
+    await sleep(200);
+
+    // see response made by /reflect handler
+
+    const te = await canvas.findByTestId('section-request-attr-x-test');
+    expect(te).toBeInTheDocument();
+    expect(te.textContent.trim()).toEqual('testing');
+    const t1 = await canvas.findByTestId('section-response-attr-x-test');
+    expect(t1).toBeInTheDocument();
+    expect(t1.textContent.trim()).toEqual('reflected-testing');
+    const tAdded = await canvas.findByTestId('section-response-attr-x-added');
+    expect(tAdded).toBeInTheDocument();
+    expect(tAdded.textContent.trim()).toEqual('abc');
+  },
+  parameters: {
+    msw: handlers
+  },
+  render: ({
+    url,
+    title
+  }) => \`
+        <fieldset>
+            <legend>\${title}</legend>
+            <p> <b>request</b> headers are populated into dedicated <b>slice/request/headers</b></p>
+
+            <custom-element tag="headers-demo" >
+                <template>
+<http-request
+    url="\${url}"
+    slice="request_slice"
+    type="text"
+    mode="cors"
+    header-x-test="testing"
+    ></http-request>
+Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
+from <code>\${url}</code>
+
+<h3>Samples</h3>
+<table>
+<tr><th>//slice/request_slice/value/request/headers/@mode</th>
+    <td><value-of select="//slice/request_slice/value/request/@mode"/></td></tr>
+<tr><th>//slice/request_slice/value/response/headers/@content-type</th>
+    <td><value-of select="//slice/request_slice/value/response/headers/@content-type"/></td></tr>
+<tr><th>//slice/request_slice/value/response/@status</th>
+    <td><value-of select="//slice/request_slice/value/response/@status"/></td></tr>
+</table>
+<for-each select="//slice/request_slice/value/*">
+    <xsl:variable name="section">{name(.)}</xsl:variable>
+    <ul date-testid="section-{$section}">
+        <b data-testid="request-section"><value-of select='name(.)'/></b>
+        <for-each select="@*">
+            <div>
+                <var >@{local-name(.)}</var>
+                =
+                <code data-testid="section-{$section}-prop-{local-name(.)}">{.}</code>
+            </div>
+        </for-each>
+        <for-each select="*">
+            <div>
+                <b data-testid="section-deep"><value-of select='local-name(.)'/></b>
+                <ul>
+                    <for-each select="@*">
+                        <li>
+                            <var data-testid="section-attribute">@{local-name(.)}</var>
+                            =
+                            <code data-testid="section-{$section}-attr-{local-name(.)}">{.}</code>
+                        </li>
+                    </for-each>
+                    <code><value-of select='.'/></code>
+                </ul>
+            </div>
+        </for-each>
+    </ul>
+</for-each>
+</template>
+            </custom-element>
+            <headers-demo></headers-demo>
+      </fieldset>
+\`
+}`,...d.parameters?.docs?.source}}};const w=["Demo","UrlChange","Http404","LifecycleInitialized","RequestResponseHeaders"];export{l as Demo,i as Http404,u as LifecycleInitialized,d as RequestResponseHeaders,c as UrlChange,w as __namedExportsOrder,y as default};

package/storybook-static/assets/iframe-Dfrt81rk.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Configure-DdXbGKhY.js","./index-Ay195x2L.js","./index-D-8MO0q_.js","./index-DGdNYaqV.js","./index-DrFu-skq.js","./index-C7lvoJNv.js","./attributes.test.stories-Bt5V18qO.js","./custom-element-D8hcDZHh.js","./index-C8k3Z-3Y.js","./css.test.stories-CGYy2daE.js","./dom-merge.test.stories-XlsZ0UvX.js","./external-template.test.stories-Bt_Pflu8.js","./form.test.stories-B0NoI8wm.js","./http-request.stories-B2skuTFV.js","./http-request-DNq59pnj.js","./handlers-B5969HUu.js","./local-storage.test.stories-DfY6feqG.js","./location-element-hKpcXCdn.js","./location-element.test.stories-944AotIJ.js","./module-url.test.stories-DSKcwApl.js","./set-url.test.stories-DjLHKkEh.js","./slice-events.test.stories-8I_BrHd6.js","./slots.test.stories-CvZz4jyP.js","./version-select.test.stories-DSxmJylI.js","./entry-preview-BKQ8UCxI.js","./lit-element-DzhCn-8W.js","./entry-preview-docs-BMKNVQXA.js","./tiny-invariant-BxWVcicq.js","./preview-BJPLiuSt.js","./preview-Djh1_Tal.js","./preview-BMWqy4Bi.js","./preview-DB9FwMii.js","./preview-0Jj89qip.js","./preview-AJR7rVPD.js"])))=>i.map(i=>d[i]);
+import"../sb-preview/runtime.js";(function(){const _=document.createElement("link").relList;if(_&&_.supports&&_.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))a(r);new MutationObserver(r=>{for(const s of r)if(s.type==="childList")for(const o of s.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&a(o)}).observe(document,{childList:!0,subtree:!0});function c(r){const s={};return r.integrity&&(s.integrity=r.integrity),r.referrerPolicy&&(s.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?s.credentials="include":r.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function a(r){if(r.ep)return;r.ep=!0;const s=c(r);fetch(r.href,s)}})();const R="modulepreload",f=function(e,_){return new URL(e,_).href},O={},t=function(_,c,a){let r=Promise.resolve();if(c&&c.length>0){const s=document.getElementsByTagName("link"),o=document.querySelector("meta[property=csp-nonce]"),p=o?.nonce||o?.getAttribute("nonce");r=Promise.all(c.map(i=>{if(i=f(i,a),i in O)return;O[i]=!0;const m=i.endsWith(".css"),d=m?'[rel="stylesheet"]':"";if(!!a)for(let l=s.length-1;l>=0;l--){const u=s[l];if(u.href===i&&(!m||u.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${d}`))return;const n=document.createElement("link");if(n.rel=m?"stylesheet":R,m||(n.as="script"),n.crossOrigin="",n.href=i,p&&n.setAttribute("nonce",p),document.head.appendChild(n),m)return new Promise((l,u)=>{n.addEventListener("load",l),n.addEventListener("error",()=>u(new Error(`Unable to preload CSS for ${i}`)))})}))}return r.then(()=>_()).catch(s=>{const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=s,window.dispatchEvent(o),!o.defaultPrevented)throw s})},{createBrowserChannel:T}=__STORYBOOK_MODULE_CHANNELS__,{addons:L}=__STORYBOOK_MODULE_PREVIEW_API__,E=T({page:"preview"});L.setChannel(E);window.__STORYBOOK_ADDONS_CHANNEL__=E;window.CONFIG_TYPE==="DEVELOPMENT"&&(window.__STORYBOOK_SERVER_CHANNEL__=E);const P={"./src/stories/Configure.mdx":async()=>t(()=>import("./Configure-DdXbGKhY.js"),__vite__mapDeps([0,1,2,3,4,5]),import.meta.url),"./src/stories/attributes.test.stories.ts":async()=>t(()=>import("./attributes.test.stories-Bt5V18qO.js"),__vite__mapDeps([6,7,8]),import.meta.url),"./src/stories/css.test.stories.ts":async()=>t(()=>import("./css.test.stories-CGYy2daE.js"),__vite__mapDeps([9,7,8]),import.meta.url),"./src/stories/dom-merge.test.stories.ts":async()=>t(()=>import("./dom-merge.test.stories-XlsZ0UvX.js"),__vite__mapDeps([10,7,8]),import.meta.url),"./src/stories/external-template.test.stories.ts":async()=>t(()=>import("./external-template.test.stories-Bt_Pflu8.js"),__vite__mapDeps([11,7,8]),import.meta.url),"./src/stories/form.test.stories.ts":async()=>t(()=>import("./form.test.stories-B0NoI8wm.js"),__vite__mapDeps([12,7,8]),import.meta.url),"./src/stories/http-request.stories.ts":async()=>t(()=>import("./http-request.stories-B2skuTFV.js"),__vite__mapDeps([13,7,8,14,15]),import.meta.url),"./src/stories/local-storage.test.stories.ts":async()=>t(()=>import("./local-storage.test.stories-DfY6feqG.js"),__vite__mapDeps([16,7,8,14,17]),import.meta.url),"./src/stories/location-element.test.stories.ts":async()=>t(()=>import("./location-element.test.stories-944AotIJ.js"),__vite__mapDeps([18,7,8,17]),import.meta.url),"./src/stories/module-url.test.stories.ts":async()=>t(()=>import("./module-url.test.stories-DSKcwApl.js"),__vite__mapDeps([19,7,8]),import.meta.url),"./src/stories/set-url.test.stories.ts":async()=>t(()=>import("./set-url.test.stories-DjLHKkEh.js"),__vite__mapDeps([20,7,8,17]),import.meta.url),"./src/stories/slice-events.test.stories.ts":async()=>t(()=>import("./slice-events.test.stories-8I_BrHd6.js"),__vite__mapDeps([21,7,8]),import.meta.url),"./src/stories/slots.test.stories.ts":async()=>t(()=>import("./slots.test.stories-CvZz4jyP.js"),__vite__mapDeps([22,7,8]),import.meta.url),"./src/stories/version-select.test.stories.ts":async()=>t(()=>import("./version-select.test.stories-DSxmJylI.js"),__vite__mapDeps([23,7,8,14,17]),import.meta.url)};async function y(e){return P[e]()}const{composeConfigs:I,PreviewWeb:V,ClientApi:S}=__STORYBOOK_MODULE_PREVIEW_API__,D=async(e=[])=>{const _=await Promise.all([e.at(0)??t(()=>import("./entry-preview-BKQ8UCxI.js"),__vite__mapDeps([24,4,25]),import.meta.url),e.at(1)??t(()=>import("./entry-preview-docs-BMKNVQXA.js"),__vite__mapDeps([26,3,27,25]),import.meta.url),e.at(2)??t(()=>import("./preview-BJPLiuSt.js"),__vite__mapDeps([28,2]),import.meta.url),e.at(3)??t(()=>import("./preview-CadgX-4y.js"),[],import.meta.url),e.at(4)??t(()=>import("./preview-FpHGYA1q.js"),[],import.meta.url),e.at(5)??t(()=>import("./preview-Djh1_Tal.js"),__vite__mapDeps([29,4]),import.meta.url),e.at(6)??t(()=>import("./preview-BnWGZYux.js"),[],import.meta.url),e.at(7)??t(()=>import("./preview-BMWqy4Bi.js"),__vite__mapDeps([30,27]),import.meta.url),e.at(8)??t(()=>import("./preview-DB9FwMii.js"),__vite__mapDeps([31,4]),import.meta.url),e.at(9)??t(()=>import("./preview-4Up_z4Em.js"),[],import.meta.url),e.at(10)??t(()=>import("./preview-0Jj89qip.js"),__vite__mapDeps([32,8]),import.meta.url),e.at(11)??t(()=>import("./preview-AJR7rVPD.js"),__vite__mapDeps([33,15]),import.meta.url)]);return I(_)};window.__STORYBOOK_PREVIEW__=window.__STORYBOOK_PREVIEW__||new V(y,D);window.__STORYBOOK_STORY_STORE__=window.__STORYBOOK_STORY_STORE__||window.__STORYBOOK_PREVIEW__.storyStore;export{t as _};