@epa-wg/custom-element-dist 0.0.22 → 0.0.24

package/src/custom-element/demo/form.html

@@ -9,9 +9,18 @@
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";
-        label{ display: flex;  }
-        label:has(input[type="text"],input[type="password"],input:not([type]) ){flex-direction: column;}
-        nav{ max-width: 32em; }
+
+        label {
+            display: flex;
+        }
+
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+
+        nav {
+            max-width: 32em;
+        }
     </style>
     <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
          todo: apply setCustomValidity( warningStr )
@@ -22,36 +31,74 @@
 
 <nav>
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
-    <h3>Forms handling.</h3>
-    <ul>
-        <li> The form triggers re-render on <code>change</code> event before submit</li>
-        <li> <code>disabled</code> form attribute is added when validation is not passed </li>
-        <li> Form action triggered on submit changing the hash in URL </li>
-        <li> URL hash hides the <var>signin</var> form from DOM and shown <var>signout</var> form </li>
-        <li> signout action reverse visibility of signin and signout </li>
-        <li> "remember" checkbox triggers <code>local-storage</code> with value set from <var>form-data/remember</var> slice </li>
-        <li> "username" initial value taken from <code>local-storage</code> <var>usernane</var> slice </li>
-        <li> <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation - MDN</a> </li>
-    </ul>
+
+    <p> <b>formData</b><br/>
+        The values of named form fields are populated into the <b>slice</b> as <b>form-data</b> on <var>change</var>
+        or <var>submit</var> event. The field values can be used in form validation via <var>custom-validity</var>
+        attribute
+        and in condition to enabling the form parts
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">formData MDN</a>
+    </p>
+    <details>
+        <summary>slice to form-data mapping</summary>
+        <html-demo-element>
+            <template>
+                <datadom hidden>
+                    <slice>
+                        <signin-form>
+                            <form-data>
+                                <username>QWE</username>
+                                <password>ASD</password>
+                            </form-data>
+                        </signin-form>
+                    </slice>
+                </datadom>
+            </template>
+        </html-demo-element>
+    </details>
+
+
+    <p> <b> custom-validity attribute </b><br/>
+        applied on the form itself or on the form field.<br/>
+        The value is an XPath over DCE <var>datadom</var>. When evaluated as <u>boolean</u>, it would enable(true) or
+        disable(false)
+        the form submission, acting as form validation mechanism.<br>
+        Alternatively, the value can be evaluated as a <u>string</u> which would be treated as an error and can be used
+        as
+        validation error message set as <var>@validation-message</var> attribute on the form slice.
+        Look for <var>email-form/@validation-message</var> example on the page.<br/>
+    </p>
+    <p> When <var>custom-validity</var> attribute is set on the field, its XPath evaluated value is propagated to
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage">
+            validationMessage property</a>. Which would be shown via browser system popup as the field validation error.
+    </p>
+    <p> <var>@validation-message</var> is set either by <var>custom-validity</var> attribute or by browser as system message.
+        By default, it is shown as popup on the field validation. But also is available for template as a string via
+        form field attribute. Like in <var>email-form/@validation-message</var>.
+
+    </p>
+
+    <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation MDN</a>
 </nav>
 
 <html-demo-element legend="1. Simple validation"
                    description="custom-validity boolean value prevents submission, username length switches Next to 'Sign In' button  ">
     <ol>
-        <li> Click Next, observe the warning </li>
-        <li> Fill input with 10+ characters </li>
-        <li> Click Next, the password and "Sign In" button should appear </li>
+        <li> Click Next, observe the warning</li>
+        <li> Fill input with 10+ characters</li>
+        <li> Click Next, the password and "Sign In" button should appear</li>
     </ol>
     <template>
         <custom-element>
             <template>
-                <form   slice="signin-form"
-                        custom-validity="
+                <form slice="signin-form"
+                      custom-validity="
                             string-length(/datadom/slice/signin-form/form-data/username) &gt; 10
                             and string-length(//form-data/password) &gt; 3 "
-                    >
+                >
                     <label> Email
-                        <input name="username" autocomplete="username" placeholder="Email, phone, or username" required="">
+                        <input name="username" autocomplete="username" placeholder="Email, phone, or username"
+                               required="">
                     </label>
                     <variable name="showpassword" select="string-length(//form-data/username) &gt; 10 "></variable>
                     <if test="not($showpassword)">
@@ -69,20 +116,20 @@
 </html-demo-element>
 
 <html-demo-element legend="2. Form life cycle demo"
-                   description="form-data in the form slice is the source of truth" >
+                   description="form-data in the form slice is the source of truth">
 
     <template>
         <custom-element>
             <template>
-                <form   slice="signin-form"
-                        custom-validity="
+                <form slice="signin-form"
+                      custom-validity="
                             string-length(/datadom/slice/signin-form/form-data/username) &gt; 9
                             and (   ( //confirm-by = 'sms' )
                                     or ( //confirm-by = 'email' )
                                     or ( //confirm-by = 'password' and string-length(//form-data/password) &gt; 3 )
                                 )
                         "
-                    >
+                >
                     <!-- form validity should be based on form-data -->
                     <variable name="warn">
                         <if test="string-length(//username-slice) &lt; 9 ">
@@ -96,22 +143,22 @@
                     </variable>
                     <label> Enter your email, phone, or user name
                         <input name="username" autocomplete="username"
-                            placeholder="Email, phone, or username"
-                            custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
-                            slice-event="input"
-                            slice="username-slice"
-                            required
+                               placeholder="Email, phone, or username"
+                               custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
+                               slice-event="input"
+                               slice="username-slice"
+                               required
                         />
                     </label>
                     <var> {$warn} </var>
                     <fieldset>
                         <legend>Confirm by</legend>
-                        <label><input type="radio" name="confirm-by" value="email"      /> email         </label>
-                        <label><input type="radio" name="confirm-by" value="sms"        /> text to phone </label>
-                        <label><input type="radio" name="confirm-by" value="password"   /> password      </label>
+                        <label><input type="radio" name="confirm-by" value="email"/> email </label>
+                        <label><input type="radio" name="confirm-by" value="sms"/> text to phone </label>
+                        <label><input type="radio" name="confirm-by" value="password"/> password </label>
                         <if test="/datadom/slice/signin-form/form-data/confirm-by = 'password'">
                             <label>Enter password: <input type="password" NAME="password"
-                                   custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
+                                                          custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
                             /></label>
                         </if>
                         <if test="not(//confirm-by)">
@@ -136,8 +183,8 @@
     <ol>
         <li> type in input field</li>
         <li> delete input field content</li>
-        <li> observe the warning in string bellow input</li>
-        <li> Click Next observe the system warning in  dropdown and in string bellow input</li>
+        <li> observe the warning in string after input</li>
+        <li> Click Next observe the system warning in dropdown over input</li>
     </ol>
     <template>
         <custom-element>
@@ -150,7 +197,6 @@
                         <var>{//username/@validation-message}</var>
                     </if>
                     <button>Next</button>
-                    <p>{//email-form/@validation-message}</p>
                 </form>
             </template>
         </custom-element>
@@ -160,27 +206,27 @@
 <html-demo-element legend="4. form validity message"
                    description="@validation-message propagated into form slice and  ">
     <ol>
-        <li> type up to 3 chars in input field          </li>
-        <li> observe the slice value change             </li>
-        <li> click next                                 </li>
-        <li> observe the warning bellow the button      </li>
+        <li> type up to 3 chars in input field</li>
+        <li> observe the slice value change</li>
+        <li> click next</li>
+        <li> observe the warning bellow the button</li>
     </ol>
     <template>
         <custom-element>
             <template>
                 <form slice="email-form"
-                    custom-validity=" string-length(//slice/username) &gt; 3 ??
+                      custom-validity=" string-length(//slice/username) &gt; 3 ??
                         concat('should be more than 3 characters, now is ',string-length(//slice/username) ) "
-                    >
+                >
                     <label> Email
-                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required />
+                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required/>
                     </label>
                     <if test="//username/@validation-message">
                         <var>{//username/@validation-message}</var>
                     </if>
                     <button>Next</button>
-                    <p>//email-form/@validation-message:    {//email-form/@validation-message}  </p>
-                    <p>//slice/username:                    {//slice/username}                  </p>
+                    <p>//email-form/@validation-message: {//email-form/@validation-message} </p>
+                    <p>//slice/username: {//slice/username} </p>
                 </form>
             </template>
         </custom-element>

package/src/custom-element/demo/s.xml

@@ -1,19 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<datadom xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-         xmlns:dce="urn:schemas-epa-wg:dce">
-    <payload>
-        <xhtml:span slot=""></xhtml:span>
-        <xhtml:style slot="" title="ABC">dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }</xhtml:style>
-        <xhtml:span slot=""></xhtml:span>
-        <xhtml:u slot="">red</xhtml:u>
-        <xhtml:span slot=""></xhtml:span>
-    </payload>
-    <attributes>
-        <id>dce32</id>
-        <data-dce-style>54f96d52-ce70-435d-83c4-b421357d9a17</data-dce-style>
-    </attributes>
-    <dataset>
-        <dceStyle>54f96d52-ce70-435d-83c4-b421357d9a17</dceStyle>
-    </dataset>
-    <slice/>
+<datadom>
+    <slice>
+        <signin-form>
+            <form-data>
+                <username>QWE</username>
+                <password>ASD</password>
+            </form-data>
+        </signin-form>
+    </slice>
 </datadom>

package/src/custom-element/ide/web-types-dce.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@epa-wg/custom-element",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/src/custom-element/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.22",
+    "version": "0.0.24",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/stories/attributes.test.stories.ts

@@ -1,14 +1,14 @@
 // noinspection DuplicatedCode
 
 import type { StoryObj }                        from '@storybook/web-components';
-import {expect, getByTestId, within, userEvent} from '@storybook/test';
+import {expect, within} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
-import {OverrideInPayload, StyleDoesNotLeak, StyleIn2Instances} from './css.test.stories';
 
 type TProps = { title: string; body:string};
 
 type Story = StoryObj<TProps>;
+
 function sleep(ms: number) {    return new Promise((resolve) => setTimeout(resolve, ms)); }
 
 function render(args: TProps)
@@ -123,7 +123,7 @@ export const InstanceAttributes:Story  =
         const titleText = AttributeDefaults.args!.title as string;
         const canvas = within(canvasElement)
         , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
-
+debugger;
         await sleep(20)
         expect( await code('p1') ).toEqual('123' );
         expect( await code('p2') ).toEqual('always_p2'  );
@@ -131,14 +131,12 @@ export const InstanceAttributes:Story  =
     },
 };
 
-
-
-const TestStories = { AttributeDefaults, AttributesRuntimeChange, InstanceAttributes };
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./attributes.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/css.test.stories.ts

@@ -112,13 +112,12 @@ export const OverrideInPayload: Story =
     },
 };
 
-
-const TestStories = { StyleDoesNotLeak, StyleIn2Instances, OverrideInPayload };
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./css.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/dom-merge.test.stories.ts

@@ -118,12 +118,88 @@ export const WordCountOnType:Story  =
     },
 };
 
-const TestStories = { CharsCountInTextarea, WordCountOnType };
+export const OrderPreservingOn2ndTransform:Story  =
+{   args : {title: 'Order preserving on 2nd transform', body:`
+    <p>IF condition content should be displayed in place where it is defined (not shifted down on the parent children)</p>
+    <custom-element>
+        <form slice="f1">
+            <label>
+                <input type="checkbox"  name="c1" data-testid="cb1"/>
+                click to display #1 bellow
+            </label>
+            <br data-testid="beforeC1"/>
+            <if test="//c1">
+                <p data-testid="isC1">#1</p>
+            </if>
+            <label>
+                <input type="checkbox"  name="c2" data-testid="cb2"/>
+                click to display #2 bellow
+            </label>
+            <br data-testid="beforeC2"/>
+            <if test="//c2">
+                <p>#2</p>
+            </if>
+        </form>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const titleText = OrderPreservingOn2ndTransform.args!.title as string;
+        const canvas = within(canvasElement);
+        await canvas.findByText(titleText);
+
+        await userEvent.click(canvas.getByTestId('cb1'));
+        await expect(await canvas.findByText('#1')).toBeInTheDocument();
+        await userEvent.click(canvas.getByTestId('cb2'));
+        await expect(await canvas.findByText('#2')).toBeInTheDocument();
+        await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"))
+    },
+};
+export const ReadSystemValidityMessage:Story  =
+{   args : {title: 'read system validity message', body:`
+    <p>validationMessage propagated into slice as 'validation-message' attribute</p>
+    <ol>
+        <li> type in input field</li>
+        <li> delete input field content</li>
+        <li> observe the warning in string after input</li>
+        <li> Click Next observe the system warning in dropdown over input</li>
+    </ol>
+    <custom-element>
+        <template>
+            <form slice="email-form">
+                <label> Email
+                    <input slice="username" slice-event="input" placeholder="non-empty" required data-testid="inp1">
+                </label>
+                <if test="//username/@validation-message">
+                    <var data-testid="var1">{//username/@validation-message}</var>
+                </if>
+                <button data-testid="btn1">Next</button>
+            </form>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const titleText = ReadSystemValidityMessage.args!.title as string;
+        const canvas = within(canvasElement);
+        await canvas.findByText(titleText);
+        await userEvent.type(canvas.getByTestId('inp1'),'Hi');
+        await userEvent.clear(canvas.getByTestId('inp1'));
+        await userEvent.click(canvas.getByTestId('btn1'));
+        await expect(await canvas.findByTestId('var1')).toBeInTheDocument();
+        await expect(canvas.getByTestId("var1").textContent).toEqual(canvas.getByTestId("inp1").validationMessage);
+        await expect(canvas.getByTestId("var1").textContent.length>1).toEqual(true);
+    },
+};
 
+//<editor-fold desc="unit test run" collapsed>
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./dom-merge.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//</editor-fold>

package/src/stories/external-template.test.stories.ts

@@ -244,12 +244,12 @@ export const EmbeddingInAnotherFile:Story  =
     },
 };
 
-const TestStories = { TemplateInPage, NoTag, ExternalSvg, ExternalXsltFile, ExternalHtmlFile, ExternalHtmlFileInline, HtmlWithinHtmlFile, SvgWithinHtmlFile, MathMLWithinHtmlFile, ByIdWithinXsltFile, MissingIdWithinXsltFile, EmbeddingInAnotherFile };
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./external-template.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/form.test.stories.ts

@@ -179,13 +179,12 @@ export const FormCustomValidityString:Story =
 };
 // custom validity rules on form : boolean and string values
 
-
-const TestStories = { SystemMessage, FormData, SetValidityMessage, FormCustomValidityBoolean, FormCustomValidityString};
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./form.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/local-storage.test.stories.ts

@@ -389,12 +389,12 @@ export const TypeAttribute:Story  =
     },
 };
 
-const TestStories = { Demo, AlwaysOverride, FromStorageWithDefault, TypeAttribute };
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
-{   localStorage.clear();
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./local-storage.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/location-element.test.stories.ts

@@ -134,12 +134,12 @@ export const SrcAttribute:Story  =
 };
 
 
-const TestStories = { Demo, SrcAttribute };
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./location-element.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/slice-events.test.stories.ts

@@ -189,12 +189,12 @@ export const SlicesInAttrAndName:Story  =
     },
 };
 
-const TestStories = { SliceInitChangeEvent, RealtimeEventInSlice, DoubleEventInSlice,  MultipleSlices, SlicesInAttrAndName };
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./slice-events.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/slots.test.stories.ts

@@ -206,13 +206,12 @@ export const TemplateWithAttributesAndCondition:Story  =
     }
 };
 
-const TestStories = {Regular, NamedSlot, DoubleSlot, NamedUnnamedDefaultSlot, NamedDefaultSlot
-, DefaultSlot, TemplateWithAttributesAndCondition};
-
 /* istanbul ignore else -- @preserve */
-if( 'test' === import.meta.env.MODE )
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
 {
-    const {playStories} = await  import('./renderPlay');
-    const {describe} = await import('vitest')
-    describe('slots', () => playStories( TestStories, meta ) );
+    const mod = await import('./slots.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
 }

package/src/stories/testStoryBook.ts

@@ -0,0 +1,28 @@
+import type {StoryObj, Meta} from '@storybook/web-components';
+import {it}            from 'vitest';
+
+async function playStory( story: StoryObj, meta: Meta )
+{
+    document.body.innerHTML = meta.render(story.args);
+    await new Promise( (resolve) => setTimeout(async ()=>
+    {
+        await story.play({canvasElement: document.body.lastElementChild});
+        resolve(0);
+    },0))
+}
+
+export async function testStoryBook<TProps>( mod: Record<string, StoryObj>, meta: Meta )
+{
+    const {describe, it } = await import('vitest');
+    function playStories( mod: Record<string, StoryObj>, meta: Meta )
+    {
+        Object.keys(mod).map(name=>
+        {
+            const story = mod[name];
+            if( !story.play )
+                return;
+            it( name, async()=>playStory(story,meta));
+        })
+    }
+    describe( meta.title, async () => playStories(mod, meta) )
+}