npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.31 → 0.0.33 - Mend

@epa-wg/custom-element-dist 0.0.31 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/src/material/components.html CHANGED Viewed

@@ -34,8 +34,12 @@
 </head>
 <body>
+<custom-element tag="cem-icon"      hidden src="./components/icon.html#cem-icon" ></custom-element>
+<custom-element tag="cem-input"     hidden src="./components/input.html#cem-input" ></custom-element>
 <custom-element tag="cem-icon-link" hidden src="./components/icon-link.html#cem-icon-link" ></custom-element>
-<custom-element tag="cem-menu" hidden src="./components/menu.html#cem-menu"></custom-element>
+<custom-element tag="cem-menu"      hidden src="./components/menu.html#cem-menu"></custom-element>
+<custom-element tag="cem-badge"     hidden src="./components/badge.html#cem-badge" ></custom-element>
+<custom-element tag="cem-dropdown"  hidden src="./components/dropdown.html#cem-dropdown" ></custom-element>
 <header class="cem-theme-teal">
     <custom-element src="./index.html#nav-head" ></custom-element>
@@ -49,8 +53,10 @@
             <attribute name="head"></attribute>
             <attribute name="description"></attribute>
             <style>
+                &{ display: flex;}
                 &>dce-root
-                {   display: inline-flex; flex-direction: column;
+                {   display: inline-flex; flex-direction: column; justify-content: space-between;
+                    flex: 1;
                     transition: background .3s ease;
                     border: 1px solid #c4c6d0;
                     border-radius: 12px;
@@ -59,6 +65,7 @@
                     &>a
                     {   color: var(--cem-action-secondary-color, black);
                         background-color:var(--cem-action-secondary-background, silver);
+                        min-height: 6rem;
                         transition: background .3s ease;
                         transform: translateZ(0);
                         &:hover { background-color: var(--cem-action-secondary-background-hover); }
@@ -79,7 +86,19 @@
         </template>
     </custom-element>
-    <demo-list-card head="icon-link" description="Vertical or horizontal List of actions: links or buttons">
+    <demo-list-card head="icon" description="Icons from popular collections">
+        <cem-icon image="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg"
+                    >Material Icon </cem-icon>
+        <cem-icon image="recycling"
+                    > Recycling </cem-icon>
+    </demo-list-card>
+    <demo-list-card head="input" description="Text input field">
+        <cem-input  leading="search" label="Text input" supporting="required field"></cem-input>
+    </demo-list-card>
+    <demo-list-card head="icon-link" description="Button like link">
         <cem-icon-link icon="format_color_fill"
                        title="Select a theme for the documentation"
                        href="./components/icon-link.html"
@@ -95,6 +114,16 @@
         </cem-menu>
     </demo-list-card>
+    <demo-list-card head="badge" description="A small value indicator that can be overlaid on another object.">
+        <template>
+            <div style="display: inline-flex; gap:2rem;">
+                <cem-badge text="0"    color="secondary"><template> <cem-icon image="far fa-envelope"                   ></cem-icon> </template></cem-badge>
+                <cem-badge text="999+"                  ><template> <cem-icon image="🛒" vertical="middle"              ></cem-icon> </template></cem-badge>
+                <cem-badge text="999+"  dot             ><template> <cem-icon image="notifications" vertical="middle"   ></cem-icon> </template></cem-badge>
+            </div>
+        </template>
+    </demo-list-card>
     <demo-list-card head="autocomplete" description="Suggests relevant options as the user types.">
         <cem-autocomplete placeholder="Greetings" >
             <p>hello</p>
@@ -102,15 +131,23 @@
         </cem-autocomplete>
     </demo-list-card>
     <demo-list-card head="dropdown" description="dropdown overlay which hangs above the background html">
-        <cem-dropdown>
-            cem-dropdown
+        <div>
+        <cem-dropdown label="drop base" >
+            <template>
+                <style>aside{background-color: silver; padding: 1rem; }</style>
+                dropped content
+            </template>
         </cem-dropdown>
-    </demo-list-card>
-    <demo-list-card head="badge" description="A small value indicator that can be overlaid on another object.">
-        <cem-badge placeholder="Greetings" >
-            <p>hello</p>
-            <p>hi</p>
-        </cem-badge>
+        <hr/>
+        <hr/>
+        <hr/>
+        <hr/>
+        <hr/>
+        <hr/>
+        <hr/>
+        <hr/>
+        </div>
     </demo-list-card>
 </main>
 <footer>

package/src/material/theme/semantic.css CHANGED Viewed

@@ -51,9 +51,16 @@
 /*#region semantic colors  */
 :root, .cem-theme-default, .cem-theme-azure{
+    --cem-icon-size: 2rem;
+    --cem-icon-size-small: 1rem;
+    --cem-icon-size-large: 3rem;
+    --cem-sys-body-small-size: .75rem;
+    --cem-form-field-subscript-text-size: var(--cem-sys-body-small-size);
     --primary-background-color: var(--ng-azure-90);
     --secondary-background-color: var(--ng-azure-80);
-    --alert-color: var(--ng-magenta-80);
+    --alert-color: var(--ng-error-40);
     --text-color: var(--ng-azure-10);
     --cem-action-primary-color: var(--text-color);
@@ -75,12 +82,17 @@
     --cem-app-surface-variant: var(--ng-azure-variant-90);
     --cem-app-on-surface: var(--ng-azure-variant-70);
     --cem-app-primary: var(--ng-azure-variant-60);
+    --cem-on-surface-variant: var(--cem-action-secondary-color);
     --cem-filled-text-field-container-color: var(--ng-azure-variant-90);
+    --cem-filled-text-field-container-color-hover: var(--ng-azure-variant-80);
     --cem-filled-text-field-label-text-color: var(--ng-azure-variant-30);
     --cem-filled-text-field-input-text-color: var(--ng-azure-variant-0);
     --cem-filled-text-field-caret-color: var(--ng-azure-variant-10);
     --cem-outline-color-focus: var(--ng-azure-40);
+    --cem-focus-outline-height: 3px;
+    --cem-input-outline-color: black;
+    --cem-input-outline: inset 0 -1px 0 var(--cem-input-outline-color,black);
     --cem-list-background-color: var(--ng-azure-neutral-94);
     --cem-list-background-color-hover: var(--ng-azure-variant-90);
@@ -93,6 +105,13 @@
     --cem-menu-item-hover-color: black;
     --cem-menu-item-padding: 0.5rem;
     --cem-menu-item-font-weight: bold;
+    --cem-badge-color-primary: var(--ng-azure-50);
+    --cem-badge-color-secondary: var(--ng-magenta-50);
+    --cem-badge-color-success: var(--ng-cyan-60);
+    --cem-badge-color-alert: var(--ng-error-50);
+    --cem-badge-color: var(--cem-badge-color-primary);
 }
 .cem-theme-teal{

package/src/mocks/versions.mock.ts CHANGED Viewed

@@ -3,7 +3,7 @@ export default {
     "_rev": "5-df363ab4a2b9c478c01e021bde4fbafe",
     "name": "@epa-wg/custom-element-dist",
     "dist-tags": {
-        "latest": "0.0.31"
+        "latest": "0.0.33"
     },
     "versions": {
         "0.0.1": {

package/src/stories/__screenshots__/attributes.test.stories.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default {}

package/src/stories/__screenshots__/external-template.test.stories.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default {}

package/src/stories/__screenshots__/module-url.test.stories.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default {}

package/src/stories/__screenshots__/stories.test.ts/attributes-Attributes-definition-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-Attributes-runtime-change-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-Instance-Attributes-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-Instance-Attributes-2.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-cloneAs-el-newTag--1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-mergeAttr--from--to---1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-mergeAttr--from--to---2.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-mergeAttr--from--to---3.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/attributes-mix-to-from--1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-Attributes-definition-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-Attributes-runtime-change-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-Instance-Attributes-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-Instance-Attributes-2.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-cloneAs-el-newTag--1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-http-request-headers-and-response-status-and-headers-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-http-request-with-delayed--5-seconds-response-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-http-request-with-error-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-mergeAttr--from--to---1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-mergeAttr--from--to---2.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-mergeAttr--from--to---3.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-mix-to-from--1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-url-and-slice-1.png ADDED Viewed

Binary file

package/src/stories/__screenshots__/stories.test.ts/http-request-url-change-1.png ADDED Viewed

Binary file

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

@@ -1,9 +1,9 @@
 // noinspection DuplicatedCode
 import type { StoryObj }                        from '@storybook/web-components';
-import {expect, within} from '@storybook/test';
+import {expect, userEvent, within} from '@storybook/test';
-import '../custom-element/custom-element.js';
+import {cloneAs, mix, mergeAttr} from'../custom-element/custom-element.js';
 type TProps = { title: string; body:string};
@@ -29,14 +29,116 @@ const meta =
 export default meta;
+function html2Element( htmlStr: string)
+{   const n = document.createElement('div');
+    n.innerHTML = htmlStr;
+    return n.firstElementChild as HTMLElement;
+}
+export const CloneAs:Story  =
+{   args : {title: 'cloneAs(el,newTag)', body:`
+    <p><code>cloneAs()</code> used for conversion of <code>attribute</code> to <code>xsl:param</code></p>
+    <attribute data-testid="t1" >default_P1                </attribute>
+    <attribute data-testid="t2" select="'always_p2'"      ></attribute>
+    <attribute data-testid="t3" ></attribute>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        const cmp = async ( tid:string ) =>
+        {   const t1 = await canvas.findByTestId(tid);
+            const c1 = cloneAs(t1, 'xsl:param');
+            for( let a of t1.attributes )
+                {   await expect(a.value).toEqual(c1.getAttribute(a.name)); }
+            await expect( c1.textContent ).toEqual(t1.textContent);
+        }
+        await cmp('t1');
+        await cmp('t2');
+        await cmp('t3');
+    },
+};
+export const Mix:Story  =
+{   args : {title: 'mix(to,from)', body:`
+    <p><code>mix(to,from)</code> used for <code>attribute</code> collections</p>
+`}
+,   play: async () =>
+    {
+        await expect( mix({},{a:1,b:'2'})).toEqual({a:1,b:'2'});
+    },
+};
+export const MergeAttr:Story  =
+{   args : {title: 'mergeAttr( from, to )', body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+`}
+,   play: async () =>
+    {
+        const from = html2Element('<br title="a" id="b" readonly />');
+        const to = html2Element('<br removed/>');
+        await expect( to).toHaveAttribute('removed');
+        mergeAttr(from!,to);
+        await expect( to).toHaveAttribute('title','a');
+        await expect( to).toHaveAttribute('id','b');
+        await expect( to).toHaveAttribute('readonly');
+        await expect( to.getAttributeNames().length).toEqual(3);
+        await expect( to).not.toHaveAttribute('removed');
+    },
+};
+export const dceExportedAttributes:Story  =
+{   args : {title: 'mergeAttr( from, to )', body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dceExportedAttributes</code> property on target element defines the set of attributes which
+    would not be removed from target element</p>
+`}
+,   play: async () =>
+    {
+        const from = html2Element('<br id="b" readonly />');
+        const to = html2Element('<br removed/>') as (HTMLElement & {dceExportedAttributes:Set<string>});
+        to.dceExportedAttributes = new Set(['enforced']);
+        to.setAttribute('enforced',"defined by inner component");
+        await expect( to).toHaveAttribute('enforced');
+        mergeAttr(from,to);
+        await expect( to).toHaveAttribute('id','b');
+        await expect( to).toHaveAttribute('readonly');
+        await expect( to).not.toHaveAttribute('removed');
+        await expect( to).toHaveAttribute('enforced',"defined by inner component");
+    },
+};
+export const dceExportedAttributes_attr:Story  =
+{   args : {title: 'mergeAttr( from, to )', body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dce-exported-attributes</code> attribute on target element defines the space separated list of attributes which
+    would not be removed from target element</p>
+`}
+,   play: async () =>
+    {
+        const from = html2Element('<br id="b" readonly />');
+        const to = html2Element('<br removed dce-exported-attributes="enforced"/>') as (HTMLElement & {dceExportedAttributes:Set<string>});
+        to.setAttribute('enforced',"defined by inner component");
+        await expect( to).toHaveAttribute('enforced');
+        mergeAttr(from,to);
+        await expect( to).toHaveAttribute('id','b');
+        await expect( to).toHaveAttribute('readonly');
+        await expect( to).not.toHaveAttribute('removed');
+        await expect( to).toHaveAttribute('enforced',"defined by inner component");
+    },
+};
 export const AttributeDefaults:Story  =
 {   args : {title: 'Attributes definition', body:`
     <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
     <custom-element tag="dce-link" >
         <template>
-            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p1">default_P1</attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
@@ -46,9 +148,7 @@ export const AttributeDefaults:Story  =
 `}
 ,   play: async ({canvasElement}) =>
     {
-        const titleText = AttributeDefaults.args!.title as string;
-        const canvas = within(canvasElement)
-        , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
+        const canvas = within(canvasElement);
         expect( await await canvas.findByTestId('p1') ).toHaveTextContent('default_P1' );
         expect( await await canvas.findByTestId('p2') ).toHaveTextContent('always_p2'  );
@@ -63,14 +163,14 @@ export const AttributesRuntimeChange:Story  =
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="t1">{$p1}</code> <br/>
             p2: <code data-testid="t2">{$p2}</code> <br/>
             p3: <code data-testid="t3">{$p3}</code>
         </template>
     </custom-element>
     <section>
-        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
+        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br/>
         <div><input id="i1" value="P1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
         <div><input id="i2" value="P2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
         <div><input id="i3" value="P3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
@@ -109,7 +209,7 @@ export const InstanceAttributes:Story  =
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
@@ -122,7 +222,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();
-        await sleep(20)
+        await sleep(200)
         expect( await code('p1') ).toEqual('123' );
         expect( await code('p2') ).toEqual('always_p2'  );
         expect( await code('p3') ).toEqual('qwe'     );
@@ -130,6 +230,72 @@ export const InstanceAttributes:Story  =
 };
+export const AttributesPropagationUp:Story  =
+{   args : {title: 'Instance Attributes', body:`
+    <p>Attributes with value(p2) or <code>select</code>(p3) should be propagated to DCE</p>
+    <p>p1 attribute is not propagated as does not have the value.</p>
+    <custom-element tag="sample-el">
+    <template>
+        <attribute name="data-testid"></attribute>
+        <attribute name="p1"></attribute>
+        <attribute name="p2">DEFAULT VALUE</attribute>
+        <attribute name="p3" select=" //from-input "></attribute>
+        <input slice="from-input" slice-event="input"/><br/>
+        p1:<code data-testid="{$data-testid}-p1" >{ $p1 }</code><br/>
+        p2:<code data-testid="{$data-testid}-p2" >{ $p2 }</code><br/>
+        p3:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>
+        //from-input: {//from-input}      <hr/>
+    </template>
+</custom-element>
+<sample-el data-testid="t1" value="123"                 ></sample-el>
+<sample-el data-testid="t2" p1="P1" p2="123" p3="P3"    ></sample-el>
+<sample-el data-testid="t3"                             ></sample-el>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement)
+        , code = async (id:string) => (await canvas.findByTestId(id)).textContent?.trim();
+        await sleep(20)
+        await expect( await code('t1-p1') ).toEqual('' );
+        await expect( await code('t1-p2') ).toEqual('DEFAULT VALUE' );
+        await expect( await code('t1-p3') ).toEqual('' );
+        const t1 = await canvas.findByTestId('t1');
+        await expect( t1 ).toHaveAttribute('value','123');
+        await expect( t1 ).toHaveAttribute('p2','DEFAULT VALUE');
+        await expect( t1 ).toHaveAttribute('p3','');
+        await expect( t1 ).not.toHaveAttribute('p1');
+        await expect( await code('t2-p1') ).toEqual('P1' );
+        await expect( await code('t2-p2') ).toEqual('123' );
+        await expect( await code('t2-p3') ).toEqual('' );
+        const t2 = await canvas.findByTestId('t2');
+        await expect( t2 ).toHaveAttribute('p1','P1');
+        await expect( t2 ).toHaveAttribute('p2','123');
+        await expect( t2 ).toHaveAttribute('p3','');
+        await expect( await code('t3-p1') ).toEqual('' );
+        await expect( await code('t3-p2') ).toEqual('DEFAULT VALUE' );
+        await expect( await code('t3-p3') ).toEqual('' );
+        const t3 = await canvas.findByTestId('t3');
+        await expect( t1 ).not.toHaveAttribute('p1');
+        await expect( t3 ).toHaveAttribute('p2','DEFAULT VALUE');
+        await expect( t3 ).toHaveAttribute('p3','');
+        t3.querySelector('input')?.focus();
+        await userEvent.keyboard('DCE');
+        await expect( t3 ).toHaveAttribute('p3','DCE');
+    },
+};
 //#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&

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

@@ -4,7 +4,7 @@ import type { StoryObj }             from '@storybook/web-components';
 import {expect, getByTestId, within} from '@storybook/test';
 import '../custom-element/custom-element.js';
-import {Demo, SrcAttribute}          from './location-element.test.stories';
+import {frameCanvas} from "./frame.canvas";
 type TProps = { title: string; body:string};
@@ -44,7 +44,7 @@ export const TemplateInPage:Story  =
     {
         const canvas = within(canvasElement);
         await canvas.findByText(TemplateInPage.args!.title as string);
-        const         val = (prop)=> canvas.getByTestId(prop).textContent.trim();
+        const val = (prop:string)=> canvas.getByTestId(prop).textContent?.trim();
         expect(val('slot-override')).toEqual('👋 World!');
         expect(val('slot-default' )).toEqual('Hello World!');
@@ -75,7 +75,7 @@ export const ExternalSvg:Story  =
         <template><i>loading from SVG ...</i></template>
     </custom-element>
     <dce-external></dce-external>
-    <custom-element src="confused.svg">
+    <custom-element src="/confused.svg">
         <i>inline DCE loading from SVG ...</i>
     </custom-element>
     <custom-element src="no.svg">
@@ -92,7 +92,7 @@ export const ExternalSvg:Story  =
         // needs separate test
         // await expect( await canvas.findByText('loading from SVG ...')).toBeInTheDocument();
-        expect(canvasElement.querySelector('[src="confused.svg"]').innerHTML).to.include('loading from SVG ...');
+        expect(canvasElement.querySelector('[src="/confused.svg"]').innerHTML).to.include('loading from SVG ...');
         await expect(await canvas.findByText('fallback for missing image')).toBeInTheDocument();
         await expect(await canvas.findByTitle('Confused')).toBeInTheDocument();
     },
@@ -188,32 +188,34 @@ export const SvgWithinHtmlFile:Story  =
 };
 export const MathMLWithinHtmlFile:Story  =
-{   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>
+{   args : {title: '6. external HTML template - MathML by id', body:`
+                <iframe src="/demo/external-templates-sb-6.html" data-testid="fr"></iframe>
 `}
 ,   play: async ({canvasElement}) =>
     {
         const canvas = within(canvasElement);
         await canvas.findByText(MathMLWithinHtmlFile.args!.title as string);
-        const ml = await canvas.findByTestId('ml-test');
+        const frCanvas = await frameCanvas('fr',canvas);
+        const ml = await frCanvas.findByTestId('ml-test');
         expect(ml.firstElementChild.localName).toEqual('mrow');
     },
 };
 export const ByIdWithinXsltFile:Story  =
-{   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>
+{   args : {title: '7. external XHTML template - xsl by id', body:`
+        <iframe src="/demo/external-templates-sb-7.html" data-testid="fr"></iframe>
 `}
 ,   play: async ({canvasElement}) =>
     {
         const canvas = within(canvasElement);
         await canvas.findByText(ByIdWithinXsltFile.args!.title as string);
-        const ml = await canvas.findByTestId('src');
-        expect(ml.textContent).to.include('/html-template.xhtml#embedded-xsl');
+        const frCanvas = await frameCanvas('fr',canvas);
+        await expect( await frCanvas.findByText('whole XSLT is embedded into HTML body') ).toBeInTheDocument();
+        await expect( await frCanvas.findByText('./html-template.xhtml#embedded-xsl') ).toBeInTheDocument();
     },
 };
 export const MissingIdWithinXsltFile:Story  =

package/src/stories/frame.canvas.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import {within} from "@storybook/test";
+/*
+    example of use
+import {frameCanvas} from "./frame.canvas";
+export const ModuleByName:Story  =
+{   args : {title: '4. module path by symbolic name', body:`
+    <iframe src="../demo/module-url-sb-4.html" name="sb" data-testid="fr"></iframe>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await canvas.findByText(ModuleByName.args!.title as string);
+        const frCanvas = await frameCanvas('fr',canvas);
+        await expect(await frCanvas.findByText('👌 from embed-relative-hash invoking')).toBeInTheDocument();
+    },
+};
+ */
+    export async function
+frameCanvas(frameTestId: string, canvas: ReturnType<typeof within>)
+    : Promise<ReturnType<typeof within>>
+{
+    const frEl: HTMLIFrameElement = await canvas.findByTestId(frameTestId);
+    return new Promise(resolve => frEl.addEventListener('load', () =>
+    {
+        resolve(within(frEl.contentWindow?.document.documentElement!));
+    }));
+}