@epa-wg/custom-element-dist 0.0.26 → 0.0.28

package/storybook-static/assets/{index-Dz4OaB2k.js → index-f2MAjm2i.js}

@@ -1 +1 @@
-import{ae as e}from"./index-BnXBQqj9.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function s(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{s as M,u};
+import{ae as e}from"./index-CiCdFubk.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function s(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{s as M,u};

package/storybook-static/assets/index-lY6s0fkU.js

@@ -0,0 +1 @@
+import{f as p,n as i,F as l,$ as m,L as c,h as T,B as b,e as d,m as S,g as B,v as L,u as C,I as H,t as u,X as g,x as y,w as I,b as h,y as k,D as P,a as W,C as A,E as F,T as x,c as D,_ as R,S as f,R as v,O as E,d as M,G as N,i as q,A as w,j as O,P as U,k as Z,l as j,o as z,p as G,q as J,r as K,z as Q,H as V,s as X,J as Y,K as _,M as $,N as aa,Q as sa,U as oa,V as ta,W as ea,Y as ra,Z as na,a0 as pa,a1 as ia,a2 as la,a3 as ma,a4 as ca,a5 as Ta,a6 as ba,a7 as da,a8 as Sa,a9 as Ba,aa as La,ab as Ca,ac as Ha,ad as ua}from"./index-CiCdFubk.js";import"./iframe-Ddc_axoC.js";import"../sb-preview/runtime.js";import"./index-BdcJ-iJ7.js";import"./index-D-8MO0q_.js";import"./index-DrFu-skq.js";export{p as A,i as ActionBar,l as AddonPanel,m as Badge,c as Bar,T as Blockquote,b as Button,d as ClipboardCode,S as Code,B as DL,L as Div,C as DocumentWrapper,H as EmptyTabContent,u as ErrorFormatter,g as FlexBar,y as Form,I as H1,h as H2,k as H3,P as H4,W as H5,A as H6,F as HR,x as IconButton,D as IconButtonSkeleton,R as Icons,f as Img,v as LI,E as Link,M as ListItem,N as Loader,q as Modal,w as OL,O as P,U as Placeholder,Z as Pre,j as ResetWrapper,z as ScrollArea,G as Separator,J as Spaced,K as Span,Q as StorybookIcon,V as StorybookLogo,X as Symbols,Y as SyntaxHighlighter,_ as TT,$ as TabBar,aa as TabButton,sa as TabWrapper,oa as Table,ta as Tabs,ea as TabsState,ra as TooltipLinkList,na as TooltipMessage,pa as TooltipNote,ia as UL,la as WithTooltip,ma as WithTooltipPure,ca as Zoom,Ta as codeCommon,ba as components,da as createCopyToClipboardFunction,Sa as getStoryHref,Ba as icons,La as interleaveSeparators,Ca as nameSpaceClassNames,Ha as resetComponents,ua as withReset};

package/storybook-static/assets/index-tfEkrhWr.js

@@ -0,0 +1 @@
+import{M,u as a}from"./index-f2MAjm2i.js";import"./index-CiCdFubk.js";import"./iframe-Ddc_axoC.js";import"../sb-preview/runtime.js";import"./index-BdcJ-iJ7.js";import"./index-D-8MO0q_.js";import"./index-DrFu-skq.js";export{M as MDXProvider,a as useMDXComponents};

package/storybook-static/assets/local-storage.test.stories-BY-PWhuk.js

@@ -0,0 +1,420 @@
+import{w as x,u as y,e as c}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";const g=(l,t)=>{if(l==="text")return t;if(l==="json")try{return JSON.parse(t)}catch{return null}const a=document.createElement("input");return a.setAttribute("type",l),l==="number"?(a.value=t,a.valueAsNumber):l==="date"?t?(a.valueAsDate=new Date(t),a.value):null:(a.value=t,a.value)};let b,S,w;function I(l,t){b.call(localStorage,l,t),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l,value:t}}))}function B(l){S.call(localStorage,l),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l}}))}function p(){w.call(localStorage),window.dispatchEvent(new CustomEvent("local-storage",{detail:{}}))}function T(){b||(b=localStorage.setItem,localStorage.setItem=I,S=localStorage.removeItem,localStorage.removeItem=B,w=localStorage.clear,localStorage.clear=p)}T();function V(l,t){I(l,t)}class K extends HTMLElement{static observedAttributes=["value","slice","key","type","live"];#e;get value(){return this.#e===null?void 0:this.#e}set value(t){return this.#e=t}async connectedCallback(){const t=i=>this.getAttribute(i),a=()=>{this.#e=g(t("type"),localStorage.getItem(t("key"))),this.dispatchEvent(new Event("change"))};if(this.#e=g(t("type"),localStorage.getItem(t("key"))),this.hasAttribute("value")?V(t("key"),this.#e=t("value")):a(),this.hasAttribute("live")){const i=e=>(e.detail.key===t("key")||!e.detail.key)&&a();window.addEventListener("local-storage",i),T(),this._destroy=()=>window.removeEventListener("local-storage",i)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",K);const r={title:"",slice:"ls-slice",key:"sb-ls-key",value:"",live:"",body:""};function o(l){return new Promise(t=>setTimeout(t,l))}function f(l){const{title:t,slice:a,key:i,value:e,live:n,body:u}={...r,...l};return`
+        <fieldset>
+            <legend>${t}</legend>
+
+            <custom-element>
+<template><!-- wrapping into template to prevent images loading within DCE declaration -->
+    <local-storage
+        key="${i}"
+        slice="${a}"
+        ${n?`live="${n}"`:""}
+        ${e?`value="${e}"`:""}
+        ></local-storage>
+
+    <br/>
+    <var>${i}</var>:<code data-testid="slice-value">{ //slice/${a} }</code>
+    <br/>
+    ${u}
+</template>
+            </custom-element>
+      </fieldset>
+  `}const h={title:"local-storage",render:f};window.localStorageSetItem=V;window.localStorage_clear=p;window.localStorage_removeItem=B;const k={args:{title:"live value",live:"live",body:`
+    <input placeholder="value for localStorage" id="textinput"
+        slice="${r.slice}"
+        value="{ //${r.slice} ?? '${r.value}' }"/>
+    <button onclick="localStorageSetItem('${r.key}',textinput.value  )">set</button>
+    <button onclick="localStorageSetItem('${r.key}','text value'  )">text value</button>
+    <button onclick="localStorageSetItem('${r.key}','another text')">another text</button>
+    <button onclick="localStorage_removeItem('${r.key}'            )">set blank</button>
+`},play:async({canvasElement:l})=>{p();const t=x(l);await t.findByText(k.args.title);const a=()=>t.getByTestId("slice-value").textContent;await y.click(await t.findByText("set blank")),await c(localStorage.getItem(r.key)).toEqual(null,"from localStorage"),await c(a()).toEqual(""),await y.click(t.getByText("text value")),await o(10),await c(localStorage.getItem(r.key)).toEqual("text value","from localStorage"),await c(a()).toEqual("text value"),window.textinput.value="textinput.value",await y.click(t.getByText("set")),await o(10),c(a()).toEqual("textinput.value"),await y.click(t.getByText("another text")),await o(10),c(a()).toEqual("another text"),await y.click(t.getByText("set blank")),await o(10),c(a()).toEqual("")}},m={args:{title:"AlwaysOverride",live:"",value:"ABC",body:`
+    buttons are changing the localStorage value, but without 'live' attribute slice ^^ from <i>local-storage</i> is not updated<br/>
+    <button onclick="localStorageSetItem('${r.key}','text value')">text value</button>
+    <button onclick="localStorage_removeItem('${r.key}')">set blank</button>
+    `},play:async({canvasElement:l})=>{const t=x(l);await t.findByText(m.args.title);const a=()=>t.getByTestId("slice-value").textContent,i=async e=>await y.click(await t.findByText(e));await o(10),await c(localStorage.getItem(r.key)).toEqual("ABC"),await i("set blank"),await c(localStorage.getItem(r.key)).toEqual(null,"from localStorage"),await o(10),await c(a()).toEqual("ABC"),await i("text value"),await o(10),await c(localStorage.getItem(r.key)).toEqual("text value","from localStorage"),await c(a()).toEqual("ABC"),await i("set blank"),await o(10),await c(a()).toEqual("ABC")}},d={args:{title:"live value with defaults",live:"",value:"ABC",body:`
+
+    <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF2'"></local-storage>
+    <button onclick="localStorage_removeItem('attr2Key')">clear key</button>
+    <button onclick="localStorageSetItem('attr2Key','attr2Key value')">update attr2-key value</button>
+    //attr2-key: <code data-testid="key2-value">{//attr2-key}</code><br/>
+
+    <local-storage key="attr3Key" slice="attr3-key" type="text" live="live" slice-value="@value ?? 'DEF3'"></local-storage>
+    <button onclick="localStorage_removeItem('attr3Key')">clear attr3-key key</button>
+    <button onclick="localStorageSetItem('attr3Key','attr3Key value')">update attr3-key value</button>
+    //attr3-key: <code data-testid="key3-value">{//attr3-key}</code><br/>
+    <button onclick="localStorage_clear()">clear localStorage</button>
+    `},play:async({canvasElement:l})=>{const t=x(l);await t.findByText(d.args.title);const a=i=>t.getByText(i);c(localStorage.getItem(r.key)).toEqual("ABC","from localStorage"),a("clear localStorage").click(),c(t.getByTestId("slice-value").textContent).toEqual("ABC"),c(t.getByTestId("key2-value").textContent).toEqual("DEF2"),c(t.getByTestId("key3-value").textContent).toEqual("DEF3"),a("update attr2-key value").click(),c(localStorage.getItem("attr2Key")).toEqual("attr2Key value","from localStorage"),await o(10),c(t.getByTestId("slice-value").textContent).toEqual("ABC"),c(t.getByTestId("key2-value").textContent).toEqual("attr2Key value"),c(t.getByTestId("key3-value").textContent).toEqual("DEF3"),a("update attr3-key value").click(),c(localStorage.getItem("attr3Key")).toEqual("attr3Key value","from localStorage"),await o(10),c(t.getByTestId("slice-value").textContent).toEqual("ABC"),c(t.getByTestId("key2-value").textContent).toEqual("attr2Key value"),c(t.getByTestId("key3-value").textContent).toEqual("attr3Key value")}},v={args:{title:"local-storage type attribute variations",body:`
+
+                <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
+                <local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
+                <local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
+                <local-storage key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live"></local-storage>
+                <local-storage key="numberKey" slice="number-key" type="number" live="live"></local-storage>
+                <local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
+                <input id="typesinput" placeholder="set value"><button onclick="
+                        'textKey,dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
+                            .map( k=> localStorageSetItem(k, typesinput.value) )
+                    "> set to all</button><br>
+                <hr>
+                text-key:
+                    <button onclick="localStorageSetItem('textKey', 'ABC'  )">ABC</button>
+                    <code data-testid="text-key">{//text-key       }</code><br>
+                date-key:
+                    <button onclick="localStorageSetItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorageSetItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
+                    <button onclick="localStorageSetItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
+                    <code data-testid="date-key">{//date-key       }</code><br>
+                time-key:
+                    <button onclick="localStorageSetItem('timeKey', '13:30')">13:30                              </button>
+                    <code data-testid="time-key">{//time-key       }</code><br>
+                local-date-time:
+                    <button onclick="localStorageSetItem('localDateTimeKey', '1977-04-01T14:00:30')">1977-04-01T14:00:30 - local       </button>
+                    <code data-testid="local-date-time">{//local-date-time}</code><br>
+                number-key:
+                    <button onclick="localStorageSetItem('numberKey', '2024'       )">2024 - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '24'         )">24   - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
+                    <button onclick="localStorageSetItem('numberKey', '0001'       )">0001                               </button>
+                    <button onclick="localStorageSetItem('numberKey', '000'        )">000                                </button>
+                    <button onclick="localStorageSetItem('numberKey', '0'          )">0                                  </button>
+                    <button onclick="localStorageSetItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
+                    <code data-testid="number-key">{//number-key     }</code> <br>
+                <fieldset>
+                    <legend>json-key: </legend>
+
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
+                    <button onclick="localStorageSetItem('jsonKey', 'ABC'  )">ABC - invalid     </button><br>
+                    json-key:<code data-testid="json-key"><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
+                </fieldset>
+                <xsl:template mode="json" match="*|@*">
+                    <div>{name()} : {.}</div>
+            </xsl:template>
+    `},play:async({canvasElement:l})=>{window.JsonSample={a:1,b:"B"};const t=x(l);await t.findByText(v.args.title);const a=s=>t.getByText(s),i=s=>t.getByTestId(s).textContent,e=(s,E)=>{c(i(s).trim()).toEqual(E,s)};p(),await o(10),e("text-key",""),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key","");const n=l.querySelector("input");n.value="ABC",a("set to all").click(),await o(10),e("text-key","ABC"),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key",""),n.value="22",a("set to all").click(),await o(10),e("text-key","22"),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","22"),e("json-key","22"),n.value="2024",a("set to all").click(),await o(10),e("text-key","2024"),e("date-key","2024-01-01"),e("time-key",""),e("local-date-time",""),e("number-key","2024"),e("json-key","2024"),n.value="2024-04-20T03:58:42.131Z",a("set to all").click(),await o(10),e("text-key","2024-04-20T03:58:42.131Z"),e("date-key","2024-04-20"),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key","");const u=new Date(Date.now()).toISOString();n.value=u,a("set to all").click(),await o(10),e("text-key",u),e("date-key",u.substring(0,10)),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key",""),n.value="23:25",a("set to all").click(),await o(10),e("text-key","23:25"),e("date-key",""),e("time-key","23:25"),e("local-date-time",""),e("number-key","NaN"),e("json-key",""),n.value="1977-04-01T14:00:30",a("set to all").click(),await o(10),e("text-key","1977-04-01T14:00:30"),e("date-key","1977-04-01"),e("time-key",""),e("local-date-time","1977-04-01T14:00:30"),e("number-key","NaN"),e("json-key",""),n.value="1.23456e+5",a("set to all").click(),await o(10),e("text-key","1.23456e+5"),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","123456"),e("json-key","123456"),n.value="0001",a("set to all").click(),await o(10),e("text-key","0001"),e("date-key","0001-01-01"),e("time-key",""),e("local-date-time",""),e("number-key","1"),e("json-key",""),n.value="001",a("set to all").click(),await o(10),e("text-key","001"),e("date-key","2001-01-01"),e("time-key",""),e("local-date-time",""),e("number-key","1"),e("json-key",""),n.value="000",a("set to all").click(),await o(10),e("text-key","000"),e("date-key","2000-01-01"),e("time-key",""),e("local-date-time",""),e("number-key","0"),e("json-key",""),n.value="0",a("set to all").click(),await o(10),e("text-key","0"),e("date-key","2000-01-01"),e("time-key",""),e("local-date-time",""),e("number-key","0"),e("json-key","0"),n.value='"abc"',a("set to all").click(),await o(10),e("text-key",'"abc"'),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key","abc"),n.value="12.345",a("set to all").click(),await o(10),e("text-key","12.345"),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","12.345"),e("json-key","12.345"),n.value='{"a":1,"b":"B"}',a("set to all").click(),await o(10),e("text-key",'{"a":1,"b":"B"}'),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key","a : 1b : B")}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'live value',
+    live: 'live',
+    body: \`
+    <input placeholder="value for localStorage" id="textinput"
+        slice="\${defs.slice}"
+        value="{ //\${defs.slice} ?? '\${defs.value}' }"/>
+    <button onclick="localStorageSetItem('\${defs.key}',textinput.value  )">set</button>
+    <button onclick="localStorageSetItem('\${defs.key}','text value'  )">text value</button>
+    <button onclick="localStorageSetItem('\${defs.key}','another text')">another text</button>
+    <button onclick="localStorage_removeItem('\${defs.key}'            )">set blank</button>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    localStorage_clear();
+    const canvas = within(canvasElement);
+    await canvas.findByText(Demo.args!.title as string);
+    const val = () => canvas.getByTestId('slice-value').textContent;
+    await userEvent.click(await canvas.findByText('set blank'));
+    await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+    await expect(val()).toEqual('');
+    await userEvent.click(canvas.getByText('text value'));
+    await sleep(10);
+    await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
+    await expect(val()).toEqual('text value');
+    window['textinput'].value = 'textinput.value';
+    await userEvent.click(canvas.getByText('set'));
+    await sleep(10);
+    expect(val()).toEqual('textinput.value');
+    await userEvent.click(canvas.getByText('another text'));
+    await sleep(10);
+    expect(val()).toEqual('another text');
+    await userEvent.click(canvas.getByText('set blank'));
+    await sleep(10);
+    expect(val()).toEqual('');
+  }
+}`,...k.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'AlwaysOverride',
+    live: '',
+    value: 'ABC',
+    body: \`
+    buttons are changing the localStorage value, but without 'live' attribute slice ^^ from <i>local-storage</i> is not updated<br/>
+    <button onclick="localStorageSetItem('\${defs.key}','text value')">text value</button>
+    <button onclick="localStorage_removeItem('\${defs.key}')">set blank</button>
+    \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(AlwaysOverride.args!.title as string);
+    const val = () => canvas.getByTestId('slice-value').textContent;
+    const click = async text => await userEvent.click(await canvas.findByText(text));
+    await sleep(10);
+    await expect(localStorage.getItem(defs.key)).toEqual('ABC');
+    await click('set blank');
+    await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+    await sleep(10);
+    await expect(val()).toEqual('ABC');
+    await click('text value');
+    await sleep(10);
+    await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
+    await expect(val()).toEqual('ABC');
+    await click('set blank');
+    await sleep(10);
+    await expect(val()).toEqual('ABC');
+  }
+}`,...m.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'live value with defaults',
+    live: '',
+    value: 'ABC',
+    body: \`
+
+    <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF2'"></local-storage>
+    <button onclick="localStorage_removeItem('attr2Key')">clear key</button>
+    <button onclick="localStorageSetItem('attr2Key','attr2Key value')">update attr2-key value</button>
+    //attr2-key: <code data-testid="key2-value">{//attr2-key}</code><br/>
+
+    <local-storage key="attr3Key" slice="attr3-key" type="text" live="live" slice-value="@value ?? 'DEF3'"></local-storage>
+    <button onclick="localStorage_removeItem('attr3Key')">clear attr3-key key</button>
+    <button onclick="localStorageSetItem('attr3Key','attr3Key value')">update attr3-key value</button>
+    //attr3-key: <code data-testid="key3-value">{//attr3-key}</code><br/>
+    <button onclick="localStorage_clear()">clear localStorage</button>
+    \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(FromStorageWithDefault.args!.title as string);
+    const byText = txt => canvas.getByText(txt);
+    expect(localStorage.getItem(defs.key)).toEqual('ABC', 'from localStorage');
+    byText('clear localStorage').click();
+    expect(canvas.getByTestId('slice-value').textContent).toEqual('ABC');
+    expect(canvas.getByTestId('key2-value').textContent).toEqual('DEF2');
+    expect(canvas.getByTestId('key3-value').textContent).toEqual('DEF3');
+    byText('update attr2-key value').click();
+    expect(localStorage.getItem('attr2Key')).toEqual('attr2Key value', 'from localStorage');
+    await sleep(10);
+    expect(canvas.getByTestId('slice-value').textContent).toEqual('ABC');
+    expect(canvas.getByTestId('key2-value').textContent).toEqual('attr2Key value');
+    expect(canvas.getByTestId('key3-value').textContent).toEqual('DEF3');
+    byText('update attr3-key value').click();
+    expect(localStorage.getItem('attr3Key')).toEqual('attr3Key value', 'from localStorage');
+    await sleep(10);
+    expect(canvas.getByTestId('slice-value').textContent).toEqual('ABC');
+    expect(canvas.getByTestId('key2-value').textContent).toEqual('attr2Key value');
+    expect(canvas.getByTestId('key3-value').textContent).toEqual('attr3Key value');
+  }
+}`,...d.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'local-storage type attribute variations',
+    body: \`
+
+                <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
+                <local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
+                <local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
+                <local-storage key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live"></local-storage>
+                <local-storage key="numberKey" slice="number-key" type="number" live="live"></local-storage>
+                <local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
+                <input id="typesinput" placeholder="set value"><button onclick="
+                        'textKey,dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
+                            .map( k=> localStorageSetItem(k, typesinput.value) )
+                    "> set to all</button><br>
+                <hr>
+                text-key:
+                    <button onclick="localStorageSetItem('textKey', 'ABC'  )">ABC</button>
+                    <code data-testid="text-key">{//text-key       }</code><br>
+                date-key:
+                    <button onclick="localStorageSetItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorageSetItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
+                    <button onclick="localStorageSetItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
+                    <code data-testid="date-key">{//date-key       }</code><br>
+                time-key:
+                    <button onclick="localStorageSetItem('timeKey', '13:30')">13:30                              </button>
+                    <code data-testid="time-key">{//time-key       }</code><br>
+                local-date-time:
+                    <button onclick="localStorageSetItem('localDateTimeKey', '1977-04-01T14:00:30')">1977-04-01T14:00:30 - local       </button>
+                    <code data-testid="local-date-time">{//local-date-time}</code><br>
+                number-key:
+                    <button onclick="localStorageSetItem('numberKey', '2024'       )">2024 - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '24'         )">24   - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
+                    <button onclick="localStorageSetItem('numberKey', '0001'       )">0001                               </button>
+                    <button onclick="localStorageSetItem('numberKey', '000'        )">000                                </button>
+                    <button onclick="localStorageSetItem('numberKey', '0'          )">0                                  </button>
+                    <button onclick="localStorageSetItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
+                    <code data-testid="number-key">{//number-key     }</code> <br>
+                <fieldset>
+                    <legend>json-key: </legend>
+
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
+                    <button onclick="localStorageSetItem('jsonKey', 'ABC'  )">ABC - invalid     </button><br>
+                    json-key:<code data-testid="json-key"><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
+                </fieldset>
+                <xsl:template mode="json" match="*|@*">
+                    <div>{name()} : {.}</div>
+            </xsl:template>
+    \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    window['JsonSample'] = {
+      a: 1,
+      b: 'B'
+    };
+    const canvas = within(canvasElement);
+    await canvas.findByText(TypeAttribute.args!.title as string);
+    const byText = txt => canvas.getByText(txt),
+      val = testId => canvas.getByTestId(testId).textContent,
+      expectVal = (key, value) => {
+        expect(val(key).trim()).toEqual(value, key);
+      };
+    localStorage_clear(); // cleanup before test
+    await sleep(10);
+    expectVal('text-key', '');
+    expectVal('date-key', '');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', '');
+    const input = canvasElement.querySelector('input');
+    input.value = 'ABC';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', 'ABC');
+    expectVal('date-key', '');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', '');
+    input.value = '22';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '22');
+    expectVal('date-key', '');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '22');
+    expectVal('json-key', '22');
+    input.value = '2024';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '2024');
+    expectVal('date-key', '2024-01-01');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '2024');
+    expectVal('json-key', '2024');
+    input.value = '2024-04-20T03:58:42.131Z';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '2024-04-20T03:58:42.131Z');
+    expectVal('date-key', '2024-04-20');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', '');
+    const nowStr = new Date(Date.now()).toISOString();
+    input.value = nowStr;
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', nowStr);
+    expectVal('date-key', nowStr.substring(0, 10));
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', '');
+    input.value = '23:25';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '23:25');
+    expectVal('date-key', '');
+    expectVal('time-key', '23:25');
+    expectVal('local-date-time', '');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', '');
+    input.value = '1977-04-01T14:00:30';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '1977-04-01T14:00:30');
+    expectVal('date-key', '1977-04-01');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '1977-04-01T14:00:30');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', '');
+    input.value = '1.23456e+5';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '1.23456e+5');
+    expectVal('date-key', '');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '123456');
+    expectVal('json-key', '123456');
+    input.value = '0001'; // as YYYY for year
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '0001');
+    expectVal('date-key', '0001-01-01');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '1');
+    expectVal('json-key', '');
+    input.value = '001'; // as 2001 year
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '001');
+    expectVal('date-key', '2001-01-01');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '1');
+    expectVal('json-key', '');
+    input.value = '000'; // as 2001 year
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '000');
+    expectVal('date-key', '2000-01-01');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '0');
+    expectVal('json-key', '');
+    input.value = '0'; // as 2000 year
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '0');
+    expectVal('date-key', '2000-01-01');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '0');
+    expectVal('json-key', '0');
+    input.value = '"abc"';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '"abc"');
+    expectVal('date-key', '');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', 'abc');
+    input.value = '12.345';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '12.345');
+    expectVal('date-key', '');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', '12.345');
+    expectVal('json-key', '12.345');
+    input.value = '{"a":1,"b":"B"}';
+    byText('set to all').click();
+    await sleep(10);
+    expectVal('text-key', '{"a":1,"b":"B"}');
+    expectVal('date-key', '');
+    expectVal('time-key', '');
+    expectVal('local-date-time', '');
+    expectVal('number-key', 'NaN');
+    expectVal('json-key', 'a : 1b : B');
+  }
+}`,...v.parameters?.docs?.source}}};const N=["Demo","AlwaysOverride","FromStorageWithDefault","TypeAttribute"];export{m as AlwaysOverride,k as Demo,d as FromStorageWithDefault,v as TypeAttribute,N as __namedExportsOrder,h as default};

package/storybook-static/assets/{location-element.test.stories-BiFvBop7.js → location-element.test.stories-3auBYEaU.js}

@@ -1,4 +1,4 @@
-import{w as m,e}from"./custom-element-wn23PUwN.js";import"./location-element-hKpcXCdn.js";import"./index-C8k3Z-3Y.js";const u={title:"",slice:"url-slice",href:"",live:"",body:""};function h(c){return new Promise(o=>setTimeout(o,c))}function x(c){const{title:o,slice:t,href:l,live:r,body:i}={...u,...c};return`
+import{w as m,e}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";import"./location-element-hKpcXCdn.js";const u={title:"",slice:"url-slice",href:"",live:"",body:""};function h(c){return new Promise(o=>setTimeout(o,c))}function x(c){const{title:o,slice:t,href:l,live:r,body:i}={...u,...c};return`
         <fieldset>
             <legend>${o}</legend>
 
@@ -53,7 +53,7 @@ import{w as m,e}from"./custom-element-wn23PUwN.js";import"./location-element-hKp
     canvasElement
   }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText((Demo.args!.title as string));
+    await canvas.findByText(Demo.args!.title as string);
     const val = prop => canvas.getByTestId('param-' + prop).textContent.trim(),
       byText = txt => canvas.getByText(txt),
       expectMatch = (l, prop) => expect(val(prop)).toEqual(l[prop], prop),
@@ -84,7 +84,7 @@ import{w as m,e}from"./custom-element-wn23PUwN.js";import"./location-element-hKp
     canvasElement
   }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText((SrcAttribute.args!.title as string));
+    await canvas.findByText(SrcAttribute.args!.title as string);
     const val = prop => canvas.getByTestId('param-' + prop).textContent.trim(),
       byText = txt => canvas.getByText(txt),
       expectMatch = (l, prop) => expect(val(prop)).toEqual(l[prop], prop),

package/storybook-static/assets/{module-url.test.stories-BXoM34tX.js → module-url.test.stories-B7L9cL60.js}

@@ -1,4 +1,4 @@
-import{w as s,e as a}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.js";const c=(t,e)=>t.getAttribute(e);class b extends HTMLElement{static observedAttributes=["slice","src"];sliceInit(){let e=c(this,"src");try{const l=e.charAt(0)==="."?new URL(e,this.closest("[base]")?.getAttribute("base")).href:import.meta.resolve(e);this.setAttribute("value",this.value=l)}catch(l){this.setAttribute("error",l.message),this.setAttribute("value",e),console.error(l.message??l,e)}this.dispatchEvent(new Event("change"))}attributeChangedCallback(e,l,u){e==="src"&&this.sliceInit()}}window.customElements.define("module-url",b);function d(t){const{title:e,body:l}=t;return`
+import{w as s,e as a}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";const c=(t,e)=>t.getAttribute(e);class b extends HTMLElement{static observedAttributes=["slice","src"];sliceInit(){let e=c(this,"src");try{const l=e.charAt(0)==="."?new URL(e,this.closest("[base]")?.getAttribute("base")||location.href).href:import.meta.resolve(e);this.setAttribute("value",this.value=l)}catch(l){this.setAttribute("error",l.message),this.setAttribute("value",e),console.error(l.message??l,e)}this.dispatchEvent(new Event("change"))}attributeChangedCallback(e,l,u){e==="src"&&this.sliceInit()}}window.customElements.define("module-url",b);function d(t){const{title:e,body:l}=t;return`
         <fieldset>
             <legend>${e}</legend>
             ${l}
@@ -84,7 +84,7 @@ import{w as s,e as a}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.
     canvasElement
   }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText((RelativeToPagePath.args!.title as string));
+    await canvas.findByText(RelativeToPagePath.args!.title as string);
     await expect(await canvas.findByText('🖖')).toBeInTheDocument();
     await expect(await canvas.findByText('embed-1.html')).toBeInTheDocument();
   }
@@ -113,7 +113,7 @@ import{w as s,e as a}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.
   }) => {
     const p = import.meta.resolve('embed-lib');
     const canvas = within(canvasElement);
-    await canvas.findByText((ModuleBySymbolicName.args!.title as string));
+    await canvas.findByText(ModuleBySymbolicName.args!.title as string);
     await expect(await canvas.findByText('check the link:')).toBeInTheDocument();
     await expect(await canvas.findByText('👋 from embed-lib-component')).toBeInTheDocument();
   }
@@ -141,7 +141,7 @@ import{w as s,e as a}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.
     canvasElement
   }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText((MissingImportmapEntry.args!.title as string));
+    await canvas.findByText(MissingImportmapEntry.args!.title as string);
     await expect(await canvas.findByText('error:')).toBeInTheDocument();
     await expect(await canvas.findByText('failed to load')).toBeInTheDocument();
   }
@@ -170,7 +170,7 @@ import{w as s,e as a}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.
     canvasElement
   }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText((ModuleByName.args!.title as string));
+    await canvas.findByText(ModuleByName.args!.title as string);
     await expect(await canvas.findByText('👌 from embed-relative-hash invoking')).toBeInTheDocument();
     await expect(await canvas.findByText('lib-root/embed-lib.html#embed-relative-hash')).toBeInTheDocument();
     await expect(await canvas.findByText('#embed-lib-component')).toBeInTheDocument();
@@ -198,7 +198,7 @@ import{w as s,e as a}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.
     canvasElement
   }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText((HashWithinLib.args!.title as string));
+    await canvas.findByText(HashWithinLib.args!.title as string);
     await expect(await canvas.findByText('lib-root/embed-lib.html#embed-relative-file')).toBeInTheDocument();
     await expect(await canvas.findByText('👍 from embed-relative-file invoking')).toBeInTheDocument();
     await expect(await canvas.findByText('../embed-1.html')).toBeInTheDocument();

package/storybook-static/assets/{preview-0Jj89qip.js → preview-BRPR-UXC.js}

@@ -1 +1 @@
-import{i as r}from"./index-C8k3Z-3Y.js";var{step:a}=r({step:(p,t,e)=>t(e)},{intercept:!0}),i={throwPlayFunctionExceptions:!1};export{i as parameters,a as runStep};
+import{i as r}from"./index-BSz1w4Gl.js";var{step:a}=r({step:(p,t,e)=>t(e)},{intercept:!0}),i={throwPlayFunctionExceptions:!1};export{i as parameters,a as runStep};