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

package/storybook-static/assets/{dom-merge.stories-CgHZUABU.js → dom-merge.test.stories-BhbNeum_.js}

@@ -1,4 +1,4 @@
-import{w as l,e as a,u as c}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";function r(s){return new Promise(t=>setTimeout(t,s))}function d(s){const{title:t,body:e}=s;return`
+import{w as l,e as n,u as c}from"./custom-element-BV8-hRQS.js";import"./index-CVRyq5ci.js";function r(s){return new Promise(t=>setTimeout(t,s))}function d(s){const{title:t,body:e}=s;return`
         <fieldset>
             <legend>${t}</legend>
             ${e}
@@ -16,7 +16,7 @@ import{w as l,e as a,u as c}from"./index-CDavW7r9.js";import"./custom-element-BL
              <br/><input placeholder="after textarea input, click here " data-testid="refocus-id" />
         </form>
     </custom-element>
-`},play:async({canvasElement:s})=>{const t=o.args.title,e=l(s);await e.findByText(t),await r(100),a(await e.findByTestId("textarea-id")).toBeInTheDocument();const n=e.getByTestId("textarea-id");n.value="",n.focus(),await c.keyboard(t),a(n.value).toEqual(t),a(n.value.length).toEqual(t.length);debugger;e.getByTestId("refocus-id").focus(),await r(10),a(e.getByTestId("counter-id").textContent).toEqual(""+t?.length,"counter of symbols")}},i={args:{title:"Word count in HTML input field",body:`
+`},play:async({canvasElement:s})=>{const t=o.args.title,e=l(s);await e.findByText(t),await r(100),n(await e.findByTestId("textarea-id")).toBeInTheDocument();const a=e.getByTestId("textarea-id");a.value="",a.focus(),await c.keyboard(t),n(a.value).toEqual(t),n(a.value.length).toEqual(t.length),e.getByTestId("refocus-id").focus(),await r(10),n(e.getByTestId("counter-id").textContent).toEqual(""+t?.length,"counter of symbols")}},i={args:{title:"Word count in HTML input field",body:`
     <p>Counter update happens on keyup event. The update should not interfere with the input</p>
     <custom-element>
             <form>
@@ -33,7 +33,7 @@ import{w as l,e as a,u as c}from"./index-CDavW7r9.js";import"./custom-element-BL
                         <code data-testid="words-id"
                             >{
                                 string-length(normalize-space(//slice/txt)) -
-                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1 
+                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1
                             }</code>
                         <!-- The expression first normalizes the string by removing leading and trailing whitespace and
                             collapsing internal whitespace into a single space. It then subtracts the length of the string
@@ -46,7 +46,7 @@ import{w as l,e as a,u as c}from"./index-CDavW7r9.js";import"./custom-element-BL
                 <p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
             </form>
         </custom-element>
-`},play:async({canvasElement:s})=>{const t=i.args.title,e=l(s);await e.findByText(t);const n=await e.findByTestId("input-id");n.value="",n.focus(),a(n).toBeInTheDocument(),await c.keyboard(t),await r(10),a(n.value).toEqual(t),a(e.getByTestId("chars-id").textContent.trim()).toEqual(""+t.length,"counter of symbols"),a(t.split(" ").length).toEqual(6,"counter of words in text sample"),a(e.getByTestId("words-id").textContent.trim()).toEqual("6","counter of words in render")}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+`},play:async({canvasElement:s})=>{const t=i.args.title,e=l(s);await e.findByText(t);const a=await e.findByTestId("input-id");a.value="",a.focus(),n(a).toBeInTheDocument(),await c.keyboard(t),await r(10),n(a.value).toEqual(t),n(e.getByTestId("chars-id").textContent.trim()).toEqual(""+t.length,"counter of symbols"),n(t.split(" ").length).toEqual(6,"counter of words in text sample"),n(e.getByTestId("words-id").textContent.trim()).toEqual("6","counter of words in render")}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Chars count in textarea',
     body: \`
@@ -78,7 +78,6 @@ import{w as l,e as a,u as c}from"./index-CDavW7r9.js";import"./custom-element-BL
     await userEvent.keyboard(titleText);
     expect(textarea.value).toEqual(titleText);
     expect(textarea.value.length).toEqual(titleText.length);
-    debugger;
     canvas.getByTestId('refocus-id').focus();
     await sleep(10);
     expect(canvas.getByTestId('counter-id').textContent).toEqual('' + titleText?.length, 'counter of symbols');
@@ -103,7 +102,7 @@ import{w as l,e as a,u as c}from"./index-CDavW7r9.js";import"./custom-element-BL
                         <code data-testid="words-id"
                             >{
                                 string-length(normalize-space(//slice/txt)) -
-                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1 
+                                string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1
                             }</code>
                         <!-- The expression first normalizes the string by removing leading and trailing whitespace and
                             collapsing internal whitespace into a single space. It then subtracts the length of the string

package/storybook-static/assets/{entry-preview-CQqNFx4W.js → entry-preview-DrgzXgwT.js}

@@ -1,4 +1,4 @@
-import{d as l}from"./index-DrFu-skq.js";import{j as _}from"./lit-element-B4_0akdT.js";/**
+import{d as l}from"./index-DrFu-skq.js";import{j as _}from"./lit-element-CenEXOuS.js";/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/storybook-static/assets/{entry-preview-docs-CWgqLfd3.js → entry-preview-docs-Bxv0qQWs.js}

@@ -1,2 +1,2 @@
-import{S as u,e as O,a as y}from"./index-Cc7K62zD.js";import{i as S}from"./tiny-invariant-BxWVcicq.js";import{j as p}from"./lit-element-B4_0akdT.js";const{global:i}=__STORYBOOK_MODULE_GLOBAL__;var{window:g}=i;g.STORYBOOK_ENV="web-components";function d(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function l(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+import{S as u,e as O,a as y}from"./index-Cc7K62zD.js";import{i as S}from"./tiny-invariant-BxWVcicq.js";import{j as p}from"./lit-element-CenEXOuS.js";const{global:i}=__STORYBOOK_MODULE_GLOBAL__;var{window:g}=i;g.STORYBOOK_ENV="web-components";function d(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function l(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
     See the readme of addon-docs for web components for more details.`)}function c(){return i.__STORYBOOK_CUSTOM_ELEMENTS__||i.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:w,EventSource:h}=i;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new h("__webpack_hmr").addEventListener("message",function(e){try{let{action:r}=JSON.parse(e.data);r==="built"&&w.location.reload()}catch{}}));const{logger:m}=__STORYBOOK_MODULE_CLIENT_LOGGER__,{useEffect:v,addons:b}=__STORYBOOK_MODULE_PREVIEW_API__;function _(e,r){let t;switch(r){case"attributes":case"properties":t={name:e.type?.text||e.type};break;case"slots":t={name:"string"};break;default:t={name:"void"};break}return{name:e.name,required:!1,description:e.description,type:t,table:{category:r,type:{summary:e.type?.text||e.type},defaultValue:{summary:e.default!==void 0?e.default:e.defaultValue}}}}function D(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(t,n,a)=>a?a.toUpperCase():"").replace(/^([A-Z])/,t=>t.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},_(e,"events")]}function o(e,r){return e&&e.filter(t=>t&&t.name).reduce((t,n)=>{if(n.kind==="method")return t;switch(r){case"events":D(n).forEach(a=>{S(a.name,`${a} should have a name property.`),t[a.name]=a});break;default:t[n.name]=_(n,r);break}return t},{})}var C=(e,r)=>{if(!d(e)||!l(r))return null;let t=r.tags.find(n=>n.name.toUpperCase()===e.toUpperCase());return t||m.warn(`Component not found in custom-elements.json: ${e}`),t},T=(e,r)=>{if(!d(e)||!l(r))return null;let t;return r?.modules?.forEach(n=>{n?.declarations?.forEach(a=>{a.tagName===e&&(t=a)})}),t||m.warn(`Component not found in custom-elements.json: ${e}`),t},f=(e,r)=>r?.version==="experimental"?C(e,r):T(e,r),A=(e,r)=>{let t=f(e,r);return t&&{...o(t.members??[],"properties"),...o(t.properties??[],"properties"),...o(t.attributes??[],"attributes"),...o(t.events??[],"events"),...o(t.slots??[],"slots"),...o(t.cssProperties??[],"css custom properties"),...o(t.cssParts??[],"css shadow parts")}},M=e=>{let r=c();return A(e,r)},L=e=>{let r=f(e,c());return r&&r.description},R=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function I(e){let r=e?.parameters.docs?.source,t=e?.parameters.__isArgsStory;return r?.type===u.DYNAMIC?!1:!t||r?.code||r?.type===u.CODE}function P(e,r){let t=e(),n=r?.parameters.docs?.source?.excludeDecorators?r.originalStoryFn(r.args,r):t,a;if(v(()=>{let{id:s,unmappedArgs:E}=r;a&&b.getChannel().emit(y,{id:s,source:a,args:E})}),!I(r)){let s=window.document.createElement("div");n instanceof DocumentFragment?p(n.cloneNode(!0),s):p(n,s),a=s.innerHTML.replace(R,"")}return t}var N=[P],B={docs:{extractArgTypes:M,extractComponentDescription:L,story:{inline:!0},source:{type:u.DYNAMIC,language:"html"}}},V=[O];export{V as argTypesEnhancers,N as decorators,B as parameters};

package/storybook-static/assets/{external-template.stories-DtSLMxvg.js → external-template.test.stories-Bpr_wxBo.js}

@@ -1,25 +1,25 @@
-import{w as l,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";function T(t){return new Promise(e=>setTimeout(e,t))}function v(t){const{title:e,body:a}=t;return`
+import{w as l,e as a}from"./custom-element-BV8-hRQS.js";import"./index-CVRyq5ci.js";function T(t){return new Promise(e=>setTimeout(e,t))}function v(t){const{title:e,body:n}=t;return`
         <fieldset>
             <legend>${e}</legend>
-            ${a}
+            ${n}
         </fieldset>
-  `}const D={title:"external-templates",render:v},s={args:{title:"Template in page DOM",body:`
+  `}const H={title:"external-templates",render:v},s={args:{title:"Template in page DOM",body:`
     <template id="template1">
     <slot>Hello</slot> World!
     </template>
-    
+
     <custom-element tag="dce-internal" src="#template1"></custom-element>
     <!-- no need for loading fallback as the template exists -->
-    
+
     <dce-internal data-testid="slot-override">👋</dce-internal>
     <dce-internal  data-testid="slot-default"></dce-internal>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(s.args.title);const a=f=>e.getByTestId(f).textContent.trim();n(a("slot-override")).toEqual("👋 World!"),n(a("slot-default")).toEqual("Hello World!")}},i={args:{title:"no tag, template in same DOM",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(s.args.title);const n=f=>e.getByTestId(f).textContent.trim();a(n("slot-override")).toEqual("👋 World!"),a(n("slot-default")).toEqual("Hello World!")}},i={args:{title:"no tag, template in same DOM",body:`
 <template id="template2">
     🏗️ construction
 </template>
 
 <custom-element src="#template2"></custom-element>
-<custom-element src="#template2"></custom-element>`},play:async({canvasElement:t})=>{await l(t).findByText(i.args.title),n(t.querySelectorAll("custom-element")[0].textContent.trim()).toEqual("🏗️ construction"),n(t.querySelectorAll("custom-element")[1].textContent.trim()).toEqual("🏗️ construction")}},m={args:{title:"External SVG as template",body:`
+<custom-element src="#template2"></custom-element>`},play:async({canvasElement:t})=>{await l(t).findByText(i.args.title),a(t.querySelectorAll("custom-element")[0].textContent.trim()).toEqual("🏗️ construction"),a(t.querySelectorAll("custom-element")[1].textContent.trim()).toEqual("🏗️ construction")}},m={args:{title:"External SVG as template",body:`
     <custom-element tag="dce-external" src="/confused.svg">
         <template><i>loading from SVG ...</i></template>
     </custom-element>
@@ -30,7 +30,7 @@ import{w as l,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.
     <custom-element src="no.svg">
         <i>fallback for missing image</i>
     </custom-element>
-`},play:async({canvasElement:t})=>{await l(t).findByText(m.args.title),n(t.querySelector('[src="confused.svg"]').innerHTML).to.include("loading from SVG ..."),await T(100),n(t.querySelector("dce-external").innerHTML).to.include("<svg"),n(t.querySelector('[src="no.svg"]').innerHTML).to.include("Vitest Browser Tester")}},o={args:{title:"External XSLT file",body:`
+`},play:async({canvasElement:t})=>{await l(t).findByText(m.args.title),a(t.querySelector('[src="confused.svg"]').innerHTML).to.include("loading from SVG ..."),await T(100),a(t.querySelector("dce-external").innerHTML).to.include("<svg"),a(t.querySelector('[src="no.svg"]').innerHTML).to.include("Vitest Browser Tester")}},o={args:{title:"External XSLT file",body:`
     <custom-element tag="dce-external-4" src="/tree.xsl">
         <template><i>loading from XSLT ...</i></template>
     </custom-element>
@@ -39,50 +39,50 @@ import{w as l,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.
     <custom-element src="/tree.xsl" data-smile="👼" data-basket="🍒">
         <i>inline DCE loading from XSLT ...</i>
     </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(o.args.title),n(t.querySelector("dce-external-4").innerHTML).to.include("Hi"),n(t.querySelector('[data-smile="👼"]').innerHTML).to.include("loading from XSLT ..."),await T(100),n(e.getByTestId("data-fruit").innerHTML).to.include("🍌"),n(e.getByTestId("data-smile").innerHTML).to.include("👼")}},c={args:{title:"external HTML template",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(o.args.title),a(t.querySelector("dce-external-4").innerHTML).to.include("Hi"),a(t.querySelector('[data-smile="👼"]').innerHTML).to.include("loading from XSLT ..."),await T(100),a(e.getByTestId("data-fruit").innerHTML).to.include("🍌"),a(e.getByTestId("data-smile").innerHTML).to.include("👼")}},c={args:{title:"external HTML template",body:`
     <custom-element tag="dce-external-5" src="/html-template.html">
                 <template><i>loading from HTML file ...</i></template>
             </custom-element>
             <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(c.args.title),await e.findByText("👋");const a=t.querySelector("dce-external-5").innerHTML;n(a).to.include("👋"),n(a).to.include("👌"),n(a).to.include("<svg"),n(a).to.include("<math")}},r={args:{title:"external HTML template",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(c.args.title),await e.findByText("👋");const n=t.querySelector("dce-external-5").innerHTML;a(n).to.include("👋"),a(n).to.include("👌"),a(n).to.include("<svg"),a(n).to.include("<math")}},r={args:{title:"external HTML template",body:`
             <custom-element src="/html-template.html" data-smile="👼" data-basket="🍒">
                 <i>inline DCE loading from HTML file ...</i>
             </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(r.args.title),await e.findByText("👋");const a=t.innerHTML;n(a).to.include("👋"),n(a).to.include("👌"),n(a).to.include("<svg"),n(a).to.include("<math")}},d={args:{title:"external HTML template - html by id",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(r.args.title),await e.findByText("👋");const n=t.innerHTML;a(n).to.include("👋"),a(n).to.include("👌"),a(n).to.include("<svg"),a(n).to.include("<math")}},d={args:{title:"external HTML template - html by id",body:`
         <custom-element src="/html-template.html#wave">
             <template><i>loading HTML from templates file ...</i></template>
         </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(d.args.title),n(await e.findByText("👋")).toBeInTheDocument()}},u={args:{title:"external HTML template - SVG by id",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(d.args.title),a(await e.findByText("👋")).toBeInTheDocument()}},p={args:{title:"external HTML template - SVG by id",body:`
         <custom-element src="/html-template.html#dwc-logo">
             <template><i>loading  SVG from templates file ...</i></template>
         </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(u.args.title),n(await e.findByTestId("svg-test")).toBeInTheDocument()}},p={args:{title:"external HTML template - MathML by id",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(p.args.title),a(await e.findByTestId("svg-test")).toBeInTheDocument()}},u={args:{title:"external HTML template - MathML by id",body:`
         <custom-element src="/html-template.html#sophomores-dream">
             <template><i>loading MathML from HTML file ...</i></template>
         </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(p.args.title);const a=await e.findByTestId("ml-test");debugger;n(a.firstElementChild.localName).toEqual("mrow")}},g={args:{title:"external XHTML template - xsl by id",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(u.args.title);const n=await e.findByTestId("ml-test");a(n.firstElementChild.localName).toEqual("mrow")}},g={args:{title:"external XHTML template - xsl by id",body:`
         <custom-element src="/html-template.xhtml#embedded-xsl">
             <template>whole XSLT is  embedded into HTML body</template>
         </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(g.args.title);const a=await e.findByTestId("src");n(a.textContent).to.include("/html-template.xhtml#embedded-xsl")}},y={args:{title:"external HTML template - missing id",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(g.args.title);const n=await e.findByTestId("src");a(n.textContent).to.include("/html-template.xhtml#embedded-xsl")}},y={args:{title:"external HTML template - missing id",body:`
     <custom-element src="/html-template.html#none">
         <template><i data-testid="no-id">element with id=none is missing in template</i></template>
     </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(y.args.title),await T(100);const a=await e.findByTestId("no-id");n(a.textContent).to.include("element with id=none is missing in template")}},x={args:{title:"external file with embedding of another external DCE",body:`
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(y.args.title),await T(100);const n=await e.findByTestId("no-id");a(n.textContent).to.include("element with id=none is missing in template")}},x={args:{title:"external file with embedding of another external DCE",body:`
     <custom-element src="/embed-1.html">
         loading from embed-1.html ...
     </custom-element>
-`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(x.args.title),await T(100),n(await e.findByTestId("wave")).toBeInTheDocument(),n(e.getByTestId("wave").innerHTML).toEqual("🖖")}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+`},play:async({canvasElement:t})=>{const e=l(t);await e.findByText(x.args.title),await T(100),a(await e.findByTestId("wave")).toBeInTheDocument(),a(e.getByTestId("wave").innerHTML).toEqual("🖖")}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Template in page DOM',
     body: \`
     <template id="template1">
     <slot>Hello</slot> World!
     </template>
-    
+
     <custom-element tag="dce-internal" src="#template1"></custom-element>
     <!-- no need for loading fallback as the template exists -->
-    
+
     <dce-internal data-testid="slot-override">👋</dce-internal>
     <dce-internal  data-testid="slot-default"></dce-internal>
 \`
@@ -226,7 +226,7 @@ import{w as l,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.
     await canvas.findByText((HtmlWithinHtmlFile.args!.title as string));
     expect(await canvas.findByText('👋')).toBeInTheDocument();
   }
-}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'external HTML template - SVG by id',
     body: \`
@@ -242,7 +242,7 @@ import{w as l,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.
     await canvas.findByText((SvgWithinHtmlFile.args!.title as string));
     expect(await canvas.findByTestId('svg-test')).toBeInTheDocument();
   }
-}`,...u.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...p.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'external HTML template - MathML by id',
     body: \`
@@ -257,10 +257,9 @@ import{w as l,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.
     const canvas = within(canvasElement);
     await canvas.findByText((MathMLWithinHtmlFile.args!.title as string));
     const ml = await canvas.findByTestId('ml-test');
-    debugger;
     expect(ml.firstElementChild.localName).toEqual('mrow');
   }
-}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'external XHTML template - xsl by id',
     body: \`
@@ -313,4 +312,4 @@ import{w as l,e as n}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.
     expect(await canvas.findByTestId('wave')).toBeInTheDocument();
     expect(canvas.getByTestId('wave').innerHTML).toEqual('🖖');
   }
-}`,...x.parameters?.docs?.source}}};const E=["TemplateInPage","NoTag","ExternalSvg","ExternalXsltFile","ExternalHtmlFile","ExternalHtmlFileInline","HtmlWithinHtmlFile","SvgWithinHtmlFile","MathMLWithinHtmlFile","ByIdWithinXsltFile","MissingIdWithinXsltFile","EmbeddingInAnotherFile"];export{g as ByIdWithinXsltFile,x as EmbeddingInAnotherFile,c as ExternalHtmlFile,r as ExternalHtmlFileInline,m as ExternalSvg,o as ExternalXsltFile,d as HtmlWithinHtmlFile,p as MathMLWithinHtmlFile,y as MissingIdWithinXsltFile,i as NoTag,u as SvgWithinHtmlFile,s as TemplateInPage,E as __namedExportsOrder,D as default};
+}`,...x.parameters?.docs?.source}}};const E=["TemplateInPage","NoTag","ExternalSvg","ExternalXsltFile","ExternalHtmlFile","ExternalHtmlFileInline","HtmlWithinHtmlFile","SvgWithinHtmlFile","MathMLWithinHtmlFile","ByIdWithinXsltFile","MissingIdWithinXsltFile","EmbeddingInAnotherFile"];export{g as ByIdWithinXsltFile,x as EmbeddingInAnotherFile,c as ExternalHtmlFile,r as ExternalHtmlFileInline,m as ExternalSvg,o as ExternalXsltFile,d as HtmlWithinHtmlFile,u as MathMLWithinHtmlFile,y as MissingIdWithinXsltFile,i as NoTag,p as SvgWithinHtmlFile,s as TemplateInPage,E as __namedExportsOrder,H as default};

package/storybook-static/assets/form.test.stories-3tURbEdv.js

@@ -0,0 +1,250 @@
+import{w as i,e as n,u as e}from"./custom-element-BV8-hRQS.js";import"./index-CVRyq5ci.js";function l(a){const{title:t,body:s}=a;return`
+        <fieldset>
+            <legend>${t}</legend>
+            ${s}
+        </fieldset>
+  `}const y={title:"form",render:l},o={args:{title:"custom-validity boolean",body:`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form>
+                <label> Email
+                    <input slice="username" slice-event="input" placeholder="non-empty" required data-testid="input-1">
+                </label>
+                <if test="//username/@validation-message">
+                    <var data-testid="validation-msg">{//username/@validation-message}</var>
+                </if>
+                <button>Next</button>
+            </form>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{o.args.title;const t=i(a);await n(t.queryByTestId("validation-msg")).toBeNull();const s=await t.findByTestId("input-1");s.focus(),await e.keyboard("abc"),await e.clear(s),await n(t.queryByTestId("validation-msg")).toBeInTheDocument()}},d={args:{title:"form-data populated",body:`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form slice="signin-form" >
+                <input name="f1" placeholder="non-empty" required data-testid="input-1"/>
+                <input name="f2" placeholder="non-empty" required data-testid="input-2"/>
+                <input name="f3" placeholder="non-empty" required data-testid="input-3"/>
+
+                <button data-testid="next-button">Next</button><br/>
+                f1: <code data-testid="c1">{ /datadom/slice/signin-form/form-data/f1 }</code><br/>
+                f2: <code data-testid="c2">{                          //form-data/f2 }</code><br/>
+                f3: <code data-testid="c3">{/datadom/slice/signin-form/form-data/f3}</code><br/>
+            </form>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const t=i(a);await e.type(t.getByTestId("input-1"),"ABC"),await e.click(t.getByRole("button")),await n(await t.findByText("ABC")).toBeInTheDocument(),await e.type(t.getByTestId("input-2"),"DCE"),await e.click(t.getByRole("button")),await n(await t.findByText("DCE")).toBeInTheDocument(),await e.type(t.getByTestId("input-3"),"XYZ"),t.getByTestId("input-1").focus(),await n(await t.findByText("XYZ")).toBeInTheDocument()}},r={args:{title:"setCustomValidity",body:`
+    <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity">setCustomValidity()</a>
+        invoked by <code>custom-validity</code> attribute. Type in the input fiels to observe the chars count in
+        text, click "next" and observe same message in dropdown.
+    </p>
+    <custom-element>
+        <template>
+            <form>
+                <input slice="s1" slice-event="input keyup" placeholder="type to see the custom error"
+                    custom-validity=" concat( 'char count ', string-length(//s1) ) "
+                    data-testid="input-1"/><br/>
+                s1: <code data-testid="c1">{ //s1 }</code><br/>
+                @validation-message: <var data-testid="validation-msg">{//s1/@validation-message}</var>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const t=i(a);await e.type(t.getByTestId("input-1"),"ABC"),await n(t.getByText("ABC")).toBeInTheDocument(),await n(t.getByText("char count 3")).toBeInTheDocument()}},c={args:{title:"form custom-validity, boolean",body:`
+    <p> Form is valid only when input text length longer of 3 characters. </p>
+    <custom-element>
+        <template>
+            <form slice="form-1" custom-validity=" string-length(//form-1//f1) &gt; 3 "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-boolean"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const t=i(a);await e.type(t.getByTestId("input-1"),"AB"),await e.click(t.getByRole("button")),await n(t.getByText("AB")).toBeInTheDocument()}},m={args:{title:"form custom-validity, string",body:`
+    <p> Form is valid only when input text is longer of 3 characters, @validation-message propagated in form slot </p>
+    <custom-element>
+        <template>
+            <form slice="form-1"
+                custom-validity=" string-length(//form-1//f1) &gt; 3 ?? concat('should be more than 3 characters, now is ',string-length(//form-1//f1) ) "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-string"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                //form-1/@validation-message: <code data-testid="c1">{ //@validation-message }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const t=i(a);await e.type(t.getByTestId("input-1"),"AB"),await e.click(t.getByRole("button")),await n(t.getByText("AB")).toBeInTheDocument(),await n(t.getByText("should be more than 3 characters, now is 2")).toBeInTheDocument()}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'custom-validity boolean',
+    body: \`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form>
+                <label> Email
+                    <input slice="username" slice-event="input" placeholder="non-empty" required data-testid="input-1">
+                </label>
+                <if test="//username/@validation-message">
+                    <var data-testid="validation-msg">{//username/@validation-message}</var>
+                </if>
+                <button>Next</button>
+            </form>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (SystemMessage.args!.title as string);
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByTestId('validation-msg')).toBeNull();
+    const input = await canvas.findByTestId('input-1');
+    input.focus();
+    await userEvent.keyboard('abc');
+    await userEvent.clear(input);
+    await expect(canvas.queryByTestId('validation-msg')).toBeInTheDocument();
+  }
+}`,...o.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'form-data populated',
+    body: \`
+    <p>type and then clear test in input should lead to system validation message shown next to input field.
+        Something like <q>Please fill out this field</q>.</p>
+    <custom-element>
+        <template>
+            <form slice="signin-form" >
+                <input name="f1" placeholder="non-empty" required data-testid="input-1"/>
+                <input name="f2" placeholder="non-empty" required data-testid="input-2"/>
+                <input name="f3" placeholder="non-empty" required data-testid="input-3"/>
+
+                <button data-testid="next-button">Next</button><br/>
+                f1: <code data-testid="c1">{ /datadom/slice/signin-form/form-data/f1 }</code><br/>
+                f2: <code data-testid="c2">{                          //form-data/f2 }</code><br/>
+                f3: <code data-testid="c3">{/datadom/slice/signin-form/form-data/f3}</code><br/>
+            </form>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('input-1'), 'ABC');
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(await canvas.findByText('ABC')).toBeInTheDocument();
+    await userEvent.type(canvas.getByTestId('input-2'), 'DCE');
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(await canvas.findByText('DCE')).toBeInTheDocument();
+    await userEvent.type(canvas.getByTestId('input-3'), 'XYZ');
+    canvas.getByTestId('input-1').focus();
+    await expect(await canvas.findByText('XYZ')).toBeInTheDocument();
+  }
+}`,...d.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'setCustomValidity',
+    body: \`
+    <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity">setCustomValidity()</a>
+        invoked by <code>custom-validity</code> attribute. Type in the input fiels to observe the chars count in
+        text, click "next" and observe same message in dropdown.
+    </p>
+    <custom-element>
+        <template>
+            <form>
+                <input slice="s1" slice-event="input keyup" placeholder="type to see the custom error"
+                    custom-validity=" concat( 'char count ', string-length(//s1) ) "
+                    data-testid="input-1"/><br/>
+                s1: <code data-testid="c1">{ //s1 }</code><br/>
+                @validation-message: <var data-testid="validation-msg">{//s1/@validation-message}</var>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('input-1'), 'ABC');
+    await expect(canvas.getByText('ABC')).toBeInTheDocument();
+    await expect(canvas.getByText('char count 3')).toBeInTheDocument();
+  }
+}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'form custom-validity, boolean',
+    body: \`
+    <p> Form is valid only when input text length longer of 3 characters. </p>
+    <custom-element>
+        <template>
+            <form slice="form-1" custom-validity=" string-length(//form-1//f1) &gt; 3 "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-boolean"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('input-1'), 'AB');
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(canvas.getByText('AB')).toBeInTheDocument(); // i.e. not reloaded by form submit
+  }
+}`,...c.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'form custom-validity, string',
+    body: \`
+    <p> Form is valid only when input text is longer of 3 characters, @validation-message propagated in form slot </p>
+    <custom-element>
+        <template>
+            <form slice="form-1"
+                custom-validity=" string-length(//form-1//f1) &gt; 3 ?? concat('should be more than 3 characters, now is ',string-length(//form-1//f1) ) "
+                data-testid="form-1"
+                >
+                <input name="f1" data-testid="input-1"/><br/>
+
+                <input type="hidden" name="id" value="form--form-custom-validity-string"/>
+                <input type="hidden" name="viewMode" value="story"/>
+                //form-1//f1: <code data-testid="c1">{ //form-1//f1 }</code><br/>
+                //form-1/@validation-message: <code data-testid="c1">{ //@validation-message }</code><br/>
+                <button>next</button>
+            </form>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('input-1'), 'AB');
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(canvas.getByText('AB')).toBeInTheDocument(); // i.e. not reloaded by form submit
+    await expect(canvas.getByText('should be more than 3 characters, now is 2')).toBeInTheDocument();
+  }
+}`,...m.parameters?.docs?.source}}};const f=["SystemMessage","FormData","SetValidityMessage","FormCustomValidityBoolean","FormCustomValidityString"];export{c as FormCustomValidityBoolean,m as FormCustomValidityString,d as FormData,r as SetValidityMessage,o as SystemMessage,f as __namedExportsOrder,y as default};