@epa-wg/custom-element-dist 0.0.1

package/storybook-static/assets/local-storage.stories-BkO6djDz.js

@@ -0,0 +1,415 @@
+import{w as x,e as o}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";const p=(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,v,g;function w(){b||(b=localStorage.setItem,localStorage.setItem=function(l,t,...a){b.apply(this,[l,t,...a]),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l,value:t}}))},v=localStorage.removeItem,localStorage.removeItem=function(l,...t){v.apply(this,[l,...t]),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l}}))},g=localStorage.clear,localStorage.clear=function(...l){g.apply(this,[...l]),window.dispatchEvent(new CustomEvent("local-storage",{detail:{}}))})}function I(l,t){localStorage.setItem(l,t),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l,value:t}}))}class T 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=c=>this.getAttribute(c),a=()=>{this.#e=p(t("type"),localStorage.getItem(t("key"))),this.dispatchEvent(new Event("change"))};if(this.#e=p(t("type"),localStorage.getItem(t("key"))),this.hasAttribute("value")?I(t("key"),this.#e=t("value")):a(),this.hasAttribute("live")){const c=e=>(e.detail.key===t("key")||!e.detail.key)&&a();window.addEventListener("local-storage",c),w(),this._destroy=()=>window.removeEventListener("local-storage",c)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",T);const s={title:"",slice:"ls-slice",key:"sb-ls-key",value:"",live:"",body:""};function n(l){return new Promise(t=>setTimeout(t,l))}function V(l){const{title:t,slice:a,key:c,value:e,live:i,body:y}={...s,...l};return`
+        <fieldset>
+            <legend>${t}</legend>
+
+            <custom-element>
+<template><!-- wrapping into template to prevent images loading within DCE declaration -->
+    <local-storage 
+        key="${c}" 
+        slice="${a}" 
+        ${i?`live="${i}"`:""} 
+        ${e?`value="${e}"`:""} 
+        ></local-storage>
+    
+    <br/>
+    <var>${c}</var>:<code data-testid="slice-value">{ //slice/${a} }</code>
+    <br/>
+    ${y}
+</template>
+            </custom-element>
+      </fieldset>
+  `}const E={title:"local-storage",render:V},u={args:{title:"live value",live:"live",body:`
+    <input placeholder="value for localStorage" id="textinput"
+        slice="${s.slice}" 
+        value="{ //${s.slice} ?? '${s.value}' }"/>
+    <button onclick="localStorage.setItem('${s.key}',textinput.value  )">set</button>
+    <button onclick="localStorage.setItem('${s.key}','text value'  )">text value</button>
+    <button onclick="localStorage.setItem('${s.key}','another text')">another text</button>   
+    <button onclick="localStorage.removeItem('${s.key}'            )">set blank</button>   
+`},play:async({canvasElement:l})=>{const t=x(l);await t.findByText(u.args.title);const a=()=>t.getByTestId("slice-value").textContent,c=e=>t.getByText(e);c("set blank").click(),o(localStorage.getItem(s.key)).toEqual(null,"from localStorage"),o(a()).toEqual(""),c("text value").click(),await n(10),o(a()).toEqual("text value"),window.textinput.value="textinput.value",c("set").click(),await n(10),o(a()).toEqual("textinput.value"),c("another text").click(),await n(10),o(a()).toEqual("another text"),c("set blank").click(),await n(10),o(a()).toEqual("")}},k={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="localStorage.setItem('${s.key}','text value'  )">text value</button>  
+    <button onclick="localStorage.removeItem('${s.key}'            )">set blank</button>   
+    `},play:async({canvasElement:l})=>{const t=x(l);await t.findByText(k.args.title);const a=()=>t.getByTestId("slice-value").textContent,c=e=>t.getByText(e);o(localStorage.getItem(s.key)).toEqual("ABC","from localStorage"),c("set blank").click(),o(localStorage.getItem(s.key)).toEqual(null,"from localStorage"),await n(10),o(a()).toEqual("ABC"),c("text value").click(),await n(10),o(localStorage.getItem(s.key)).toEqual("text value","from localStorage"),o(a()).toEqual("ABC"),c("set blank").click(),await n(10),o(a()).toEqual("ABC")}},m={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="localStorage.setItem('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="localStorage.setItem('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(m.args.title);const a=c=>t.getByText(c);o(localStorage.getItem(s.key)).toEqual("ABC","from localStorage"),a("clear localStorage").click(),o(t.getByTestId("slice-value").textContent).toEqual("ABC"),o(t.getByTestId("key2-value").textContent).toEqual("DEF2"),o(t.getByTestId("key3-value").textContent).toEqual("DEF3"),a("update attr2-key value").click(),o(localStorage.getItem("attr2Key")).toEqual("attr2Key value","from localStorage"),await n(10),o(t.getByTestId("slice-value").textContent).toEqual("ABC"),o(t.getByTestId("key2-value").textContent).toEqual("attr2Key value"),o(t.getByTestId("key3-value").textContent).toEqual("DEF3"),a("update attr3-key value").click(),o(localStorage.getItem("attr3Key")).toEqual("attr3Key value","from localStorage"),await n(10),o(t.getByTestId("slice-value").textContent).toEqual("ABC"),o(t.getByTestId("key2-value").textContent).toEqual("attr2Key value"),o(t.getByTestId("key3-value").textContent).toEqual("attr3Key value")}},d={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=> localStorage.setItem(k, typesinput.value) )
+                    "> set to all</button><br>
+                <hr>
+                text-key:
+                    <button onclick="localStorage.setItem('textKey', 'ABC'  )">ABC</button>
+                    <code data-testid="text-key">{//text-key       }</code><br>
+                date-key:
+                    <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
+                    <button onclick="localStorage.setItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
+                    <code data-testid="date-key">{//date-key       }</code><br>
+                time-key:
+                    <button onclick="localStorage.setItem('timeKey', '13:30')">13:30                              </button>
+                    <code data-testid="time-key">{//time-key       }</code><br>
+                local-date-time:
+                    <button onclick="localStorage.setItem('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="localStorage.setItem('numberKey', '2024'       )">2024 - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '24'         )">24   - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
+                    <button onclick="localStorage.setItem('numberKey', '0001'       )">0001                               </button>
+                    <button onclick="localStorage.setItem('numberKey', '000'        )">000                                </button>
+                    <button onclick="localStorage.setItem('numberKey', '0'          )">0                                  </button>
+                    <button onclick="localStorage.setItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
+                    <code data-testid="number-key">{//number-key     }</code> <br>
+                <fieldset>
+                    <legend>json-key: </legend>
+
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
+                    <button onclick="localStorage.setItem('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})=>{const t=x(l);await t.findByText(d.args.title);const a=r=>t.getByText(r),c=r=>t.getByTestId(r).textContent,e=(r,S)=>{o(c(r)).toEqual(S,r)};localStorage.clear(),await n(10),e("text-key",""),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key","");const i=l.querySelector("input");i.value="ABC",a("set to all").click(),await n(10),e("text-key","ABC"),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key",""),i.value="22",a("set to all").click(),await n(10),e("text-key","22"),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","22"),e("json-key","22"),i.value="2024",a("set to all").click(),await n(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"),i.value="2024-04-20T03:58:42.131Z",a("set to all").click(),await n(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 y=new Date(Date.now()).toISOString();i.value=y,a("set to all").click(),await n(10),e("text-key",y),e("date-key",y.substring(0,10)),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key",""),i.value="23:25",a("set to all").click(),await n(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",""),i.value="1977-04-01T14:00:30",a("set to all").click(),await n(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",""),i.value="1.23456e+5",a("set to all").click(),await n(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"),i.value="0001",a("set to all").click(),await n(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",""),i.value="001",a("set to all").click(),await n(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",""),i.value="000",a("set to all").click(),await n(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",""),i.value="0",a("set to all").click(),await n(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"),i.value='"abc"',a("set to all").click(),await n(10),e("text-key",'"abc"'),e("date-key",""),e("time-key",""),e("local-date-time",""),e("number-key","NaN"),e("json-key","abc"),i.value="12.345",a("set to all").click(),await n(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"),i.value='{"a":1,"b":"B"}',a("set to all").click(),await n(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`)}};u.parameters={...u.parameters,docs:{...u.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="localStorage.setItem('\${defs.key}',textinput.value  )">set</button>
+    <button onclick="localStorage.setItem('\${defs.key}','text value'  )">text value</button>
+    <button onclick="localStorage.setItem('\${defs.key}','another text')">another text</button>   
+    <button onclick="localStorage.removeItem('\${defs.key}'            )">set blank</button>   
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText((Demo.args!.title as string));
+    const val = () => canvas.getByTestId('slice-value').textContent,
+      byText = txt => canvas.getByText(txt);
+    byText('set blank').click();
+    expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+    expect(val()).toEqual('');
+    byText('text value').click();
+    await sleep(10);
+    expect(val()).toEqual('text value');
+    window['textinput'].value = 'textinput.value';
+    byText('set').click();
+    await sleep(10);
+    expect(val()).toEqual('textinput.value');
+    byText('another text').click();
+    await sleep(10);
+    expect(val()).toEqual('another text');
+    byText('set blank').click();
+    await sleep(10);
+    expect(val()).toEqual('');
+  }
+}`,...u.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.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="localStorage.setItem('\${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,
+      byText = txt => canvas.getByText(txt);
+    expect(localStorage.getItem(defs.key)).toEqual('ABC', 'from localStorage');
+    byText('set blank').click();
+    expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+    await sleep(10);
+    expect(val()).toEqual('ABC');
+    byText('text value').click();
+    await sleep(10);
+    expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
+    expect(val()).toEqual('ABC');
+    byText('set blank').click();
+    await sleep(10);
+    expect(val()).toEqual('ABC');
+  }
+}`,...k.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.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="localStorage.setItem('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="localStorage.setItem('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');
+  }
+}`,...m.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.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=> localStorage.setItem(k, typesinput.value) )
+                    "> set to all</button><br>
+                <hr>
+                text-key:
+                    <button onclick="localStorage.setItem('textKey', 'ABC'  )">ABC</button>
+                    <code data-testid="text-key">{//text-key       }</code><br>
+                date-key:
+                    <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
+                    <button onclick="localStorage.setItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
+                    <code data-testid="date-key">{//date-key       }</code><br>
+                time-key:
+                    <button onclick="localStorage.setItem('timeKey', '13:30')">13:30                              </button>
+                    <code data-testid="time-key">{//time-key       }</code><br>
+                local-date-time:
+                    <button onclick="localStorage.setItem('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="localStorage.setItem('numberKey', '2024'       )">2024 - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '24'         )">24   - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
+                    <button onclick="localStorage.setItem('numberKey', '0001'       )">0001                               </button>
+                    <button onclick="localStorage.setItem('numberKey', '000'        )">000                                </button>
+                    <button onclick="localStorage.setItem('numberKey', '0'          )">0                                  </button>
+                    <button onclick="localStorage.setItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
+                    <code data-testid="number-key">{//number-key     }</code> <br>
+                <fieldset>
+                    <legend>json-key: </legend>
+
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
+                    <button onclick="localStorage.setItem('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
+  }) => {
+    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)).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', '\\na : 1b : B');
+  }
+}`,...d.parameters?.docs?.source}}};const f=["Demo","AlwaysOverride","FromStorageWithDefault","TypeAttribute"];export{k as AlwaysOverride,u as Demo,m as FromStorageWithDefault,d as TypeAttribute,f as __namedExportsOrder,E as default};

package/storybook-static/assets/location-element.stories-DCIOUd0D.js

@@ -0,0 +1,108 @@
+import{w as v,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";const x=(o,a)=>o.getAttribute(a);let m;function y(){m||(m={},"back,forward,go,pushState,replaceState".split(",").forEach(o=>{m[o]=history[o],history[o]=function(...a){m[o].apply(history,a),window.dispatchEvent(new CustomEvent("dce-location",{detail:{k:o}}))}}))}class b extends HTMLElement{static observedAttributes=["value","slice","href","type","live"];constructor(){super();const a={},t=()=>setTimeout(c,1),c=()=>{const l=x(this,"href");l||y();const i=l?new URL(l,window.location):window.location,e={},r=new URLSearchParams(i.search);for(const s of r.keys())e[s]=r.getAll(s);const d={params:e};for(const s in i)typeof i[s]=="string"&&(d[s]=i[s]);this.value=d,this.dispatchEvent(new Event("change"))};this.sliceInit=l=>(!a.listener&&this.hasAttribute("live")&&(a.listener=1,window.navigation?.addEventListener("navigate",t),window.addEventListener("popstate",t),window.addEventListener("hashchange",t),window.addEventListener("dce-location",t)),c(),l||{}),this._destroy=()=>{window.removeEventListener("popstate",t),window.removeEventListener("hashchange",t),window.removeEventListener("dce-location",t),delete a.listener}}attributeChangedCallback(a,t,c){a==="href"&&this.sliceInit&&this.sliceInit()}connectedCallback(){this.sliceInit()}disconnectedCallback(){this._destroy()}}window.customElements.define("location-element",b);const w={title:"",slice:"url-slice",href:"",live:"",body:""};function u(o){return new Promise(a=>setTimeout(a,o))}function E(o){const{title:a,slice:t,href:c,live:l,body:i}={...w,...o};return`
+        <fieldset>
+            <legend>${a}</legend>
+
+            <custom-element>
+<template><!-- wrapping into template to prevent images loading within DCE declaration -->
+    <location-element 
+        slice="${t}" 
+        ${c?`href="${c}"`:""} 
+        live="${l}"
+        ></location-element>
+    
+    
+    ${i}
+    <xhtml:table>
+        <xhtml:tbody>
+            <xhtml:tr>
+                <xhtml:th><h3> URL properties </h3></xhtml:th>
+                <xhtml:td>{count(//value/@*)}</xhtml:td>
+            </xhtml:tr>
+            <apply-templates mode="attrs" select="//value/@*"></apply-templates>
+        </xhtml:tbody>
+    </xhtml:table>
+    <xhtml:table>
+            <h3> URL parameters </h3>
+            <apply-templates mode="attrs" select="//params/*/*"></apply-templates>
+    </xhtml:table>
+    <xsl:template mode="attrs" match="*|@*">
+        <xhtml:tr>
+            <xhtml:th>{name()}</xhtml:th>
+            <xhtml:td data-testid="param-{name()}">{.}</xhtml:td>
+        </xhtml:tr>
+    </xsl:template>
+</template>
+            </custom-element>
+      </fieldset>
+  `}const q={title:"location-element",render:E},h={args:{title:"live value",live:"live",body:`
+    <button onclick="history.pushState( {'{}'},'', '/location.html?pushstate=p1&p2=P2#h1')">history.pushState</button>
+    <button onclick="history.replaceState( {'{}'},'', '/vacation.html?replaceState=r1&r2=R2#h2')">history.replaceState</button>
+`},play:async({canvasElement:o})=>{const a=v(o);await a.findByText(h.args.title);const t=e=>a.getByTestId("param-"+e).textContent.trim(),c=e=>a.getByText(e),l=(e,r)=>n(t(r)).toEqual(e[r],r),i="href,origin,protocol,host,hostname,port,pathname,search,hash".split(",");i.forEach(e=>l(window.location,e)),c("history.pushState").click(),await u(100),n(t("pathname")).toEqual("/location.html"),n(t("search")).toEqual("?pushstate=p1&p2=P2"),i.forEach(e=>l(window.location,e)),c("history.replaceState").click(),await u(100),n(t("pathname")).toEqual("/vacation.html"),n(t("search")).toEqual("?replaceState=r1&r2=R2"),i.forEach(e=>l(window.location,e))}},p={args:{title:"scr attribute as URL",live:"live",href:"/some/path?param1=/story/location-element--href-attribute?p1=P1&p2=P2#h1",body:`
+    <button onclick="document.querySelector('location-element').setAttribute('href','/location.html?a1=A1&b2=B2#h2')">/location.html?a1=A1&b2=B2#h2</button>
+    <button onclick="document.querySelector('location-element').setAttribute('href','/vacation.html?c1=C1&d2=D2#h3')">/vacation.html?c1=C1&d2=D2#h3</button>
+`},play:async({canvasElement:o})=>{const a=v(o);await a.findByText(p.args.title);const t=e=>a.getByTestId("param-"+e).textContent.trim(),c=e=>a.getByText(e),l=(e,r)=>n(t(r)).toEqual(e[r],r);"origin,protocol,host,hostname,port".split(",").forEach(e=>l(window.location,e)),c("/location.html?a1=A1&b2=B2#h2").click(),await u(10),n(t("pathname")).toEqual("/location.html","pathname #2"),n(t("search")).toEqual("?a1=A1&b2=B2"),n(t("hash")).toEqual("#h2"),n(t("a1")).toEqual("A1"),n(t("b2")).toEqual("B2"),c("/vacation.html?c1=C1&d2=D2#h3").click(),await u(10),n(t("pathname")).toEqual("/vacation.html","pathname #3"),n(t("search")).toEqual("?c1=C1&d2=D2"),n(t("hash")).toEqual("#h3"),n(t("c1")).toEqual("C1"),n(t("d2")).toEqual("D2")}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'live value',
+    live: 'live',
+    body: \`
+    <button onclick="history.pushState( {'{}'},'', '/location.html?pushstate=p1&p2=P2#h1')">history.pushState</button>
+    <button onclick="history.replaceState( {'{}'},'', '/vacation.html?replaceState=r1&r2=R2#h2')">history.replaceState</button>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    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),
+      locationProps = 'href,origin,protocol,host,hostname,port,pathname,search,hash'.split(',');
+    locationProps.forEach(prop => expectMatch(window.location, prop));
+    byText('history.pushState').click();
+    await sleep(100);
+    expect(val('pathname')).toEqual('/location.html');
+    expect(val('search')).toEqual('?pushstate=p1&p2=P2');
+    locationProps.forEach(prop => expectMatch(window.location, prop));
+    byText('history.replaceState').click();
+    await sleep(100);
+    expect(val('pathname')).toEqual('/vacation.html');
+    expect(val('search')).toEqual('?replaceState=r1&r2=R2');
+    locationProps.forEach(prop => expectMatch(window.location, prop));
+  }
+}`,...h.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'scr attribute as URL',
+    live: 'live',
+    href: '/some/path?param1=/story/location-element--href-attribute?p1=P1&p2=P2#h1',
+    body: \`
+    <button onclick="document.querySelector('location-element').setAttribute('href','/location.html?a1=A1&b2=B2#h2')">/location.html?a1=A1&b2=B2#h2</button>
+    <button onclick="document.querySelector('location-element').setAttribute('href','/vacation.html?c1=C1&d2=D2#h3')">/vacation.html?c1=C1&d2=D2#h3</button>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    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),
+      locationProps = 'origin,protocol,host,hostname,port'.split(',');
+    locationProps.forEach(prop => expectMatch(window.location, prop));
+    byText('/location.html?a1=A1&b2=B2#h2').click();
+    await sleep(10);
+    expect(val('pathname')).toEqual('/location.html', 'pathname #2');
+    expect(val('search')).toEqual('?a1=A1&b2=B2');
+    expect(val('hash')).toEqual('#h2');
+    expect(val('a1')).toEqual('A1');
+    expect(val('b2')).toEqual('B2');
+    byText('/vacation.html?c1=C1&d2=D2#h3').click();
+    await sleep(10);
+    expect(val('pathname')).toEqual('/vacation.html', 'pathname #3');
+    expect(val('search')).toEqual('?c1=C1&d2=D2');
+    expect(val('hash')).toEqual('#h3');
+    expect(val('c1')).toEqual('C1');
+    expect(val('d2')).toEqual('D2');
+  }
+}`,...p.parameters?.docs?.source}}};const S=["Demo","SrcAttribute"];export{h as Demo,p as SrcAttribute,S as __namedExportsOrder,q as default};

package/storybook-static/assets/preview-B4GcaC1c.js

@@ -0,0 +1 @@
+var e={viewport:"reset",viewportRotated:!1};export{e as globals};

package/storybook-static/assets/preview-B63p-W8V.js

@@ -0,0 +1,20 @@
+import{d as _}from"./index-DrFu-skq.js";const{useMemo:f,useEffect:y}=__STORYBOOK_MODULE_PREVIEW_API__,{global:E}=__STORYBOOK_MODULE_GLOBAL__,{logger:M}=__STORYBOOK_MODULE_CLIENT_LOGGER__;var g="backgrounds",{document:l,window:h}=E,B=()=>h.matchMedia("(prefers-reduced-motion: reduce)").matches,x=(r,e=[],n)=>{if(r==="transparent")return"transparent";if(e.find(a=>a.value===r))return r;let d=e.find(a=>a.name===n);if(d)return d.value;if(n){let a=e.map(i=>i.name).join(", ");M.warn(_`
+        Backgrounds Addon: could not find the default color "${n}".
+        These are the available colors for your story based on your configuration:
+        ${a}.
+      `)}return"transparent"},v=r=>{(Array.isArray(r)?r:[r]).forEach(O)},O=r=>{let e=l.getElementById(r);e&&e.parentElement?.removeChild(e)},S=(r,e)=>{let n=l.getElementById(r);if(n)n.innerHTML!==e&&(n.innerHTML=e);else{let d=l.createElement("style");d.setAttribute("id",r),d.innerHTML=e,l.head.appendChild(d)}},w=(r,e,n)=>{let d=l.getElementById(r);if(d)d.innerHTML!==e&&(d.innerHTML=e);else{let a=l.createElement("style");a.setAttribute("id",r),a.innerHTML=e;let i=`addon-backgrounds-grid${n?`-docs-${n}`:""}`,t=l.getElementById(i);t?t.parentElement?.insertBefore(a,t):l.head.appendChild(a)}},A=(r,e)=>{let{globals:n,parameters:d}=e,a=n[g]?.value,i=d[g],t=f(()=>i.disable?"transparent":x(a,i.values,i.default),[i,a]),o=f(()=>t&&t!=="transparent",[t]),s=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",p=f(()=>`
+      ${s} {
+        background: ${t} !important;
+        ${B()?"":"transition: background-color 0.3s;"}
+      }
+    `,[t,s]);return y(()=>{let u=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!o){v(u);return}w(u,p,e.viewMode==="docs"?e.id:null)},[o,p,e]),r()},L=(r,e)=>{let{globals:n,parameters:d}=e,a=d[g].grid,i=n[g]?.grid===!0&&a.disable!==!0,{cellAmount:t,cellSize:o,opacity:s}=a,p=e.viewMode==="docs",u=d.layout===void 0||d.layout==="padded"?16:0,c=a.offsetX??(p?20:u),m=a.offsetY??(p?20:u),$=f(()=>{let b=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",k=[`${o*t}px ${o*t}px`,`${o*t}px ${o*t}px`,`${o}px ${o}px`,`${o}px ${o}px`].join(", ");return`
+      ${b} {
+        background-size: ${k} !important;
+        background-position: ${c}px ${m}px, ${c}px ${m}px, ${c}px ${m}px, ${c}px ${m}px !important;
+        background-blend-mode: difference !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${s}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${s}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${s/2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${s/2}) 1px, transparent 1px) !important;
+      }
+    `},[o]);return y(()=>{let b=e.viewMode==="docs"?`addon-backgrounds-grid-docs-${e.id}`:"addon-backgrounds-grid";if(!i){v(b);return}S(b,$)},[i,$,e]),r()},C=[L,A],I={[g]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},R={[g]:null};export{C as decorators,R as globals,I as parameters};