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

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

@@ -1,419 +0,0 @@
-import{w as x,e as c}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.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=n=>this.getAttribute(n),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 n=e=>(e.detail.key===t("key")||!e.detail.key)&&a();window.addEventListener("local-storage",n),w(),this._destroy=()=>window.removeEventListener("local-storage",n)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",T);const s={title:"",slice:"ls-slice",key:"sb-ls-key",value:"",live:"",body:""};function o(l){return new Promise(t=>setTimeout(t,l))}function V(l){const{title:t,slice:a,key:n,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="${n}"
-        slice="${a}"
-        ${i?`live="${i}"`:""}
-        ${e?`value="${e}"`:""}
-        ></local-storage>
-
-    <br/>
-    <var>${n}</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,n=e=>t.getByText(e);n("set blank").click(),c(localStorage.getItem(s.key)).toEqual(null,"from localStorage"),c(a()).toEqual(""),n("text value").click(),await o(10),c(a()).toEqual("text value"),window.textinput.value="textinput.value",n("set").click(),await o(10),c(a()).toEqual("textinput.value"),n("another text").click(),await o(10),c(a()).toEqual("another text"),n("set blank").click(),await o(10),c(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,n=e=>t.getByText(e);c(localStorage.getItem(s.key)).toEqual("ABC","from localStorage"),n("set blank").click(),c(localStorage.getItem(s.key)).toEqual(null,"from localStorage"),await o(10),c(a()).toEqual("ABC"),n("text value").click(),await o(10),c(localStorage.getItem(s.key)).toEqual("text value","from localStorage"),c(a()).toEqual("ABC"),n("set blank").click(),await o(10),c(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=n=>t.getByText(n);c(localStorage.getItem(s.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")}},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})=>{window.JsonSample={a:1,b:"B"};const t=x(l);await t.findByText(d.args.title);const a=r=>t.getByText(r),n=r=>t.getByTestId(r).textContent,e=(r,S)=>{c(n(r)).toEqual(S,r)};localStorage.clear(),await o(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 o(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 o(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 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"),i.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 y=new Date(Date.now()).toISOString();i.value=y,a("set to all").click(),await o(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 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",""),i.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",""),i.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"),i.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",""),i.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",""),i.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",""),i.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"),i.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"),i.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"),i.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`)}};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
-  }) => {
-    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)).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/preview-BJPLiuSt.js

@@ -1 +0,0 @@
-import"./index-D-8MO0q_.js";const{global:O}=__STORYBOOK_MODULE_GLOBAL__,{makeDecorator:E,addons:_}=__STORYBOOK_MODULE_PREVIEW_API__,{STORY_CHANGED:l,SELECT_STORY:L}=__STORYBOOK_MODULE_CORE_EVENTS__;var c="links",{document:i,HTMLElement:m}=O,v=e=>_.getChannel().emit(L,e),o=e=>{let{target:t}=e;if(!(t instanceof m))return;let s=t,{sbKind:a,sbStory:r}=s.dataset;(a||r)&&(e.preventDefault(),v({kind:a,story:r}))},n=!1,d=()=>{n||(n=!0,i.addEventListener("click",o))},k=()=>{n&&(n=!1,i.removeEventListener("click",o))},R=E({name:"withLinks",parameterName:c,wrapper:(e,t)=>(d(),_.getChannel().once(l,k),e(t))}),T=[R];export{T as decorators};

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

@@ -1 +0,0 @@
-import{i as S}from"./tiny-invariant-BxWVcicq.js";const{useEffect:T}=__STORYBOOK_MODULE_PREVIEW_API__,{global:d}=__STORYBOOK_MODULE_GLOBAL__;function Y(){let e=d.document.documentElement,t=Math.max(e.scrollHeight,e.offsetHeight);return{width:Math.max(e.scrollWidth,e.offsetWidth),height:t}}function j(){let e=d.document.createElement("canvas");e.id="storybook-addon-measure";let t=e.getContext("2d");S(t!=null);let{width:o,height:l}=Y();return A(e,t,{width:o,height:l}),e.style.position="absolute",e.style.left="0",e.style.top="0",e.style.zIndex="2147483647",e.style.pointerEvents="none",d.document.body.appendChild(e),{canvas:e,context:t,width:o,height:l}}function A(e,t,{width:o,height:l}){e.style.width=`${o}px`,e.style.height=`${l}px`;let i=d.window.devicePixelRatio;e.width=Math.floor(o*i),e.height=Math.floor(l*i),t.scale(i,i)}var h={};function K(){h.canvas||(h=j())}function H(){h.context&&h.context.clearRect(0,0,h.width??0,h.height??0)}function G(e){H(),e(h.context)}function U(){S(h.canvas,"Canvas should exist in the state."),S(h.context,"Context should exist in the state."),A(h.canvas,h.context,{width:0,height:0});let{width:e,height:t}=Y();A(h.canvas,h.context,{width:e,height:t}),h.width=e,h.height=t}function V(){h.canvas&&(H(),h.canvas.parentNode?.removeChild(h.canvas),h={})}var w={margin:"#f6b26b",border:"#ffe599",padding:"#93c47d",content:"#6fa8dc",text:"#232020"},c=6;function W(e,{x:t,y:o,w:l,h:i,r:n}){t=t-l/2,o=o-i/2,l<2*n&&(n=l/2),i<2*n&&(n=i/2),e.beginPath(),e.moveTo(t+n,o),e.arcTo(t+l,o,t+l,o+i,n),e.arcTo(t+l,o+i,t,o+i,n),e.arcTo(t,o+i,t,o,n),e.arcTo(t,o,t+l,o,n),e.closePath()}function Z(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom,s=r+o.left+t.left,u=n+o.top+t.top;return e==="top"?s+=f/2:e==="right"?(s+=f,u+=a/2):e==="bottom"?(s+=f/2,u+=a):e==="left"?u+=a/2:e==="center"&&(s+=f/2,u+=a/2),{x:s,y:u}}function J(e,t,{margin:o,border:l,padding:i},n,r){let f=m=>0,a=0,s=0,u=r?1:.5,g=r?n*2:0;return e==="padding"?f=m=>i[m]*u+g:e==="border"?f=m=>i[m]+l[m]*u+g:e==="margin"&&(f=m=>i[m]+l[m]+o[m]*u+g),t==="top"?s=-f("top"):t==="right"?a=f("right"):t==="bottom"?s=f("bottom"):t==="left"&&(a=-f("left")),{offsetX:a,offsetY:s}}function Q(e,t){return Math.abs(e.x-t.x)<Math.abs(e.w+t.w)/2&&Math.abs(e.y-t.y)<Math.abs(e.h+t.h)/2}function x(e,t,o){return e==="top"?t.y=o.y-o.h-c:e==="right"?t.x=o.x+o.w/2+c+t.w/2:e==="bottom"?t.y=o.y+o.h+c:e==="left"&&(t.x=o.x-o.w/2-c-t.w/2),{x:t.x,y:t.y}}function C(e,t,{x:o,y:l,w:i,h:n},r){return W(e,{x:o,y:l,w:i,h:n,r:3}),e.fillStyle=`${w[t]}dd`,e.fill(),e.strokeStyle=w[t],e.stroke(),e.fillStyle=w.text,e.fillText(r,o,l),W(e,{x:o,y:l,w:i,h:n,r:3}),e.fillStyle=`${w[t]}dd`,e.fill(),e.strokeStyle=w[t],e.stroke(),e.fillStyle=w.text,e.fillText(r,o,l),{x:o,y:l,w:i,h:n}}function X(e,t){e.font="600 12px monospace",e.textBaseline="middle",e.textAlign="center";let o=e.measureText(t),l=o.actualBoundingBoxAscent+o.actualBoundingBoxDescent,i=o.width+c*2,n=l+c*2;return{w:i,h:n}}function tt(e,t,{type:o,position:l="center",text:i},n,r=!1){let{x:f,y:a}=Z(l,t),{offsetX:s,offsetY:u}=J(o,l,t,c+1,r);f+=s,a+=u;let{w:g,h:m}=X(e,i);if(n&&Q({x:f,y:a,w:g,h:m},n)){let M=x(l,{x:f,y:a,w:g,h:m},n);f=M.x,a=M.y}return C(e,o,{x:f,y:a,w:g,h:m},i)}function et(e,{w:t,h:o}){let l=t*.5+c,i=o*.5+c;return{offsetX:(e.x==="left"?-1:1)*l,offsetY:(e.y==="top"?-1:1)*i}}function ot(e,t,{type:o,text:l}){let{floatingAlignment:i,extremities:n}=t,r=n[i.x],f=n[i.y],{w:a,h:s}=X(e,l),{offsetX:u,offsetY:g}=et(i,{w:a,h:s});return r+=u,f+=g,C(e,o,{x:r,y:f,w:a,h:s},l)}function E(e,t,o,l){let i=[];o.forEach((n,r)=>{let f=l&&n.position==="center"?ot(e,t,n):tt(e,t,n,i[r-1],l);i[r]=f})}function it(e,t,o,l){let i=o.reduce((n,r)=>(Object.prototype.hasOwnProperty.call(n,r.position)||(n[r.position]=[]),n[r.position]?.push(r),n),{});i.top&&E(e,t,i.top,l),i.right&&E(e,t,i.right,l),i.bottom&&E(e,t,i.bottom,l),i.left&&E(e,t,i.left,l),i.center&&E(e,t,i.center,l)}var L={margin:"#f6b26ba8",border:"#ffe599a8",padding:"#93c47d8c",content:"#6fa8dca8"},B=30;function p(e){return parseInt(e.replace("px",""),10)}function b(e){return Number.isInteger(e)?e:e.toFixed(2)}function P(e){return e.filter(t=>t.text!==0&&t.text!=="0")}function lt(e){let t={top:d.window.scrollY,bottom:d.window.scrollY+d.window.innerHeight,left:d.window.scrollX,right:d.window.scrollX+d.window.innerWidth},o={top:Math.abs(t.top-e.top),bottom:Math.abs(t.bottom-e.bottom),left:Math.abs(t.left-e.left),right:Math.abs(t.right-e.right)};return{x:o.left>o.right?"left":"right",y:o.top>o.bottom?"top":"bottom"}}function nt(e){let t=d.getComputedStyle(e),{top:o,left:l,right:i,bottom:n,width:r,height:f}=e.getBoundingClientRect(),{marginTop:a,marginBottom:s,marginLeft:u,marginRight:g,paddingTop:m,paddingBottom:M,paddingLeft:k,paddingRight:F,borderBottomWidth:D,borderTopWidth:I,borderLeftWidth:$,borderRightWidth:N}=t;o=o+d.window.scrollY,l=l+d.window.scrollX,n=n+d.window.scrollY,i=i+d.window.scrollX;let y={top:p(a),bottom:p(s),left:p(u),right:p(g)},q={top:p(m),bottom:p(M),left:p(k),right:p(F)},z={top:p(I),bottom:p(D),left:p($),right:p(N)},_={top:o-y.top,bottom:n+y.bottom,left:l-y.left,right:i+y.right};return{margin:y,padding:q,border:z,top:o,left:l,bottom:n,right:i,width:r,height:f,extremities:_,floatingAlignment:lt(_)}}function ft(e,{margin:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l+t.bottom+t.top;e.fillStyle=L.margin,e.fillRect(n,i-t.top,o,t.top),e.fillRect(f,i-t.top,t.right,a),e.fillRect(n,r,o,t.bottom),e.fillRect(n-t.left,i-t.top,t.left,a);let s=[{type:"margin",text:b(t.top),position:"top"},{type:"margin",text:b(t.right),position:"right"},{type:"margin",text:b(t.bottom),position:"bottom"},{type:"margin",text:b(t.left),position:"left"}];return P(s)}function rt(e,{padding:t,border:o,width:l,height:i,top:n,left:r,bottom:f,right:a}){let s=l-o.left-o.right,u=i-t.top-t.bottom-o.top-o.bottom;e.fillStyle=L.padding,e.fillRect(r+o.left,n+o.top,s,t.top),e.fillRect(a-t.right-o.right,n+t.top+o.top,t.right,u),e.fillRect(r+o.left,f-t.bottom-o.bottom,s,t.bottom),e.fillRect(r+o.left,n+t.top+o.top,t.left,u);let g=[{type:"padding",text:t.top,position:"top"},{type:"padding",text:t.right,position:"right"},{type:"padding",text:t.bottom,position:"bottom"},{type:"padding",text:t.left,position:"left"}];return P(g)}function at(e,{border:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l-t.top-t.bottom;e.fillStyle=L.border,e.fillRect(n,i,o,t.top),e.fillRect(n,r-t.bottom,o,t.bottom),e.fillRect(n,i+t.top,t.left,a),e.fillRect(f-t.right,i+t.top,t.right,a);let s=[{type:"border",text:t.top,position:"top"},{type:"border",text:t.right,position:"right"},{type:"border",text:t.bottom,position:"bottom"},{type:"border",text:t.left,position:"left"}];return P(s)}function st(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom;return e.fillStyle=L.content,e.fillRect(r+o.left+t.left,n+o.top+t.top,f,a),[{type:"content",position:"center",text:`${b(f)} x ${b(a)}`}]}function ht(e){return t=>{if(e&&t){let o=nt(e),l=ft(t,o),i=rt(t,o),n=at(t,o),r=st(t,o),f=o.width<=B*3||o.height<=B;it(t,o,[...r,...i,...n,...l],f)}}}function ut(e){G(ht(e))}var dt=(e,t)=>{let o=d.document.elementFromPoint(e,t),l=i=>{if(i&&i.shadowRoot){let n=i.shadowRoot.elementFromPoint(e,t);return i.isEqualNode(n)?i:n.shadowRoot?l(n):n}return i};return l(o)||o},O,v={x:0,y:0};function R(e,t){O=dt(e,t),ut(O)}var mt=(e,t)=>{let{measureEnabled:o}=t.globals;return T(()=>{let l=i=>{window.requestAnimationFrame(()=>{i.stopPropagation(),v.x=i.clientX,v.y=i.clientY})};return document.addEventListener("pointermove",l),()=>{document.removeEventListener("pointermove",l)}},[]),T(()=>{let l=n=>{window.requestAnimationFrame(()=>{n.stopPropagation(),R(n.clientX,n.clientY)})},i=()=>{window.requestAnimationFrame(()=>{U()})};return t.viewMode==="story"&&o&&(document.addEventListener("pointerover",l),K(),window.addEventListener("resize",i),R(v.x,v.y)),()=>{window.removeEventListener("resize",i),V()}},[o,t.viewMode]),e()},gt="measureEnabled",ct=[mt],wt={[gt]:!1};export{ct as decorators,wt as initialGlobals};

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

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

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

@@ -1,20 +0,0 @@
-import{d as _}from"./index-DrFu-skq.js";const{useMemo:b,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=[],d)=>{if(r==="transparent")return"transparent";if(e.find(a=>a.value===r))return r;let n=e.find(a=>a.name===d);if(n)return n.value;if(d){let a=e.map(o=>o.name).join(", ");M.warn(_`
-        Backgrounds Addon: could not find the default color "${d}".
-        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 d=l.getElementById(r);if(d)d.innerHTML!==e&&(d.innerHTML=e);else{let n=l.createElement("style");n.setAttribute("id",r),n.innerHTML=e,l.head.appendChild(n)}},w=(r,e,d)=>{let n=l.getElementById(r);if(n)n.innerHTML!==e&&(n.innerHTML=e);else{let a=l.createElement("style");a.setAttribute("id",r),a.innerHTML=e;let o=`addon-backgrounds-grid${d?`-docs-${d}`:""}`,t=l.getElementById(o);t?t.parentElement?.insertBefore(a,t):l.head.appendChild(a)}},A=(r,e)=>{let{globals:d,parameters:n}=e,a=d[g]?.value,o=n[g],t=b(()=>o.disable?"transparent":x(a,o.values,o.default),[o,a]),i=b(()=>t&&t!=="transparent",[t]),s=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",p=b(()=>`
-      ${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(!i){v(u);return}w(u,p,e.viewMode==="docs"?e.id:null)},[i,p,e]),r()},L=(r,e)=>{let{globals:d,parameters:n}=e,a=n[g].grid,o=d[g]?.grid===!0&&a.disable!==!0,{cellAmount:t,cellSize:i,opacity:s}=a,p=e.viewMode==="docs",u=n.layout===void 0||n.layout==="padded"?16:0,c=a.offsetX??(p?20:u),m=a.offsetY??(p?20:u),$=b(()=>{let f=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",k=[`${i*t}px ${i*t}px`,`${i*t}px ${i*t}px`,`${i}px ${i}px`,`${i}px ${i}px`].join(", ");return`
-      ${f} {
-        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;
-      }
-    `},[i]);return y(()=>{let f=e.viewMode==="docs"?`addon-backgrounds-grid-docs-${e.id}`:"addon-backgrounds-grid";if(!o){v(f);return}S(f,$)},[o,$,e]),r()},C=[L,A],I={[g]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},G={[g]:null};export{C as decorators,G as initialGlobals,I as parameters};