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

@epa-wg/custom-element-dist 0.0.32 → 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 (219) hide show

package/storybook-static/demo/external-templates-sb-6.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+    -->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <style>
+        dce-root {
+            box-shadow: 0 0 0.5rem lime;
+            padding: 1rem;
+            display: inline-block;
+        }
+    </style>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+<p>Should render formula</p>
+<custom-element src="./html-template.html#sophomores-dream">
+    <template><i>loading MathML from HTML file ...</i></template>
+</custom-element>
+</body>
+</html>

package/storybook-static/demo/external-templates-sb-7.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+    -->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <style>
+        dce-root {
+            box-shadow: 0 0 0.5rem lime;
+            padding: 1rem;
+            display: inline-block;
+        }
+    </style>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+<p>Should render tree</p>
+ <custom-element src="./html-template.xhtml#embedded-xsl">
+    <template>whole XSLT is  embedded into HTML body</template>
+</custom-element>
+</body>
+</html>

package/storybook-static/demo/html-template.html CHANGED Viewed

@@ -73,7 +73,7 @@
     <path class="cls-1"
           d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
 </svg>
-<math id="sophomores-dream" display="block">
+<math id="sophomores-dream"  data-testid="ml-test" display="block">
     <mrow>
         <msubsup>
             <mo>∫</mo>

package/storybook-static/demo/module-url-sb-2.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+    -->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+    <p><code>embed-lib</code> resolved to <code>./lib-dir/embed-lib.html</code> by page <i>importmap</i></p>
+        <custom-element>
+            <template>
+                <module-url slice="lib-url" src="embed-lib"></module-url>
+                <if test="//lib-url/@error">
+                    <p>error: <b>{//lib-url/@error}</b></p>
+                </if>
+                <span data-testid="check">check the link:</span>
+                <a href="{//lib-url}">
+                    <custom-element src="embed-lib#embed-lib-component">
+                        failed to load
+                    </custom-element>
+                </a>
+            </template>
+        </custom-element>
+</body>
+</html>

package/storybook-static/demo/module-url-sb-4.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+    -->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+    <p><code>lib-root</code> resolved to <code>lib-dir</code> by page <i>importmap</i></p>
+    <custom-element>
+        <template>
+            <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-hash"></module-url>
+            <module-url slice="img-url" src="lib-root/Smiley.svg"></module-url>
+            <if test="//lib-url/@error">
+                <p>error: <b>{//lib-url/@error}</b></p>
+            </if>
+            check the link:
+            <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-hash <img src="{//img-url}" alt=""/></a>
+            <custom-element src="lib-root/embed-lib.html#embed-relative-hash">
+                failed to load
+            </custom-element>
+        </template>
+    </custom-element>
+</body>
+</html>

package/storybook-static/demo/module-url-sb-5.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+    -->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <style>
+        dce-root {
+            box-shadow: 0 0 0.5rem lime;
+            padding: 1rem;
+            display: inline-block;
+        }
+    </style>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+<p>should render '👍 from embed-relative-file' and Vulcan Salute 🖖. Links should open matching page
+</p>
+    <custom-element>
+        <template>
+            <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-file"></module-url>
+            <if test="//lib-url/@error">
+                <p>error: <b>{//lib-url/@error}</b></p>
+            </if>
+            check the link:
+            <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-file </a>
+            <custom-element src="lib-root/embed-lib.html#embed-relative-file">
+                failed to load
+            </custom-element>
+        </template>
+    </custom-element>
+</body>
+</html>

package/storybook-static/demo/s.xml CHANGED Viewed

@@ -1,12 +1,75 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <datadom>
-    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"/>
-    <attributes>
-        <id>dce1</id>
-        <p1>default_P1</p1>
-        <p2>always_p2</p2>
-        <p3></p3>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        <div xmlns="http://www.w3.org/1999/xhtml" slot="leading" data-dce-id="4">
+            <cem-icon image="history_edu" class="input-focused" data-dce-id="5">
+                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">history_edu</span>
+                </dce-root>
+            </cem-icon>
+            <cem-icon image="edit" class="input-unfocused" data-dce-id="6">
+                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">edit</span>
+                </dce-root>
+            </cem-icon>
+        </div>
+        <div xmlns="http://www.w3.org/1999/xhtml" slot="trailing" data-dce-id="7">
+            <label class="eye-contailer" for="visible-cb" data-dce-id="8">
+                <cem-icon image="visibility" class="visible-ico" tabindex="0" data-dce-id="9">
+                    <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                              xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility</span>
+                    </dce-root>
+                </cem-icon>
+                <cem-icon image="visibility_off" class="invisible-ico" tabindex="0" data-dce-id="10">
+                    <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                              xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility_off</span>
+                    </dce-root>
+                </cem-icon>
+            </label>
+            <cem-icon image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
+                      data-dce-id="11">
+                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">close</span>
+                </dce-root>
+            </cem-icon>
+            <dce-text data-dce-id="12">️
+            </dce-text>
+        </div>
+    </payload>
+    <attributes xmlns="" label="password sample" value="secret word" slice="password" data-dce-id="3" type="">
+        <xmlns/>
+        <label>password sample</label>
+        <value>secret word</value>
+        <slice>password</slice>
+        <data-dce-id>3</data-dce-id>
+        <type></type>
     </attributes>
-    <dataset/>
-    <slice/>
+    <dataset>
+        <dceId>3</dceId>
+    </dataset>
+    <slice>
+        <selected/>
+        <password image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
+                  data-dce-id="11">
+            <event isTrusted="true" sliceProcessed="1" pointerId="1" width="1" height="1" pressure="0" tiltX="0"
+                   tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0"
+                   pointerType="mouse" isPrimary="false" persistentDeviceId="0" screenX="345" screenY="682"
+                   clientX="345" clientY="595" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false"
+                   button="0" buttons="0" pageX="345" pageY="4354" x="345" y="595" offsetX="14" offsetY="15"
+                   movementX="0" movementY="0" layerX="248" layerY="27" detail="1" which="1" type="click" eventPhase="3"
+                   bubbles="true" cancelable="true" defaultPrevented="false" composed="true"
+                   timeStamp="1974517.2999999523" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1"
+                   AT_TARGET="2" BUBBLING_PHASE="3">
+                <relatedTarget/>
+                <fromElement/>
+                <toElement/>
+                <sourceCapabilities firesTouchEvents="false"/>
+            </event>
+        </password>
+    </slice>
 </datadom>

package/storybook-static/demo/s.xslt CHANGED Viewed

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
                 exclude-result-prefixes="exsl">
@@ -14,54 +13,79 @@
         <xsl:value-of select="."/>
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
-        <xsl:param name="p1" select="/datadom/attributes/p1">default_P1</xsl:param>
-        <xsl:param name="p2" select="'always_p2'"/>
-        <xsl:param name="p3">
+        <xsl:param name="v">
             <xsl:choose>
-                <xsl:when test="string-length(//p3)>0 ">RRRR
-                    <xsl:value-of select="count(//p3)"/>
-                    +<xsl:value-of select="//p3 "/>=
+                <xsl:when test="//s[//s/event] ">
+                    <xsl:value-of select="//s[//s/event] "/>
                 </xsl:when>
-                <xsl:otherwise>OOO
-                    <xsl:value-of select=" 'def_P3' "/>
+                <xsl:when test=" //attributes/@v ">
+                    <xsl:value-of select=" //attributes/@v "/>
+                </xsl:when>
+                <xsl:otherwise>
+                    <xsl:value-of select=" 'def' "/>
                 </xsl:otherwise>
             </xsl:choose>
         </xsl:param>
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <xsl:attribute name="p1">default_P1</xsl:attribute>
-            <xsl:attribute name="p2">
-                <xsl:value-of select="'always_p2'"/>
-            </xsl:attribute>
-            <xsl:attribute name="p3">
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="has-input"
+                          select="count(//s/*) &gt; 0"/>
+            <xsl:attribute name="v">
                 <xsl:choose>
-                    <xsl:when test="//p3 ">
-                        <xsl:value-of select="//p3 "/>
+                    <xsl:when test="//s[//s/event] ">
+                        <xsl:value-of select="//s[//s/event] "/>
+                    </xsl:when>
+                    <xsl:when test=" //attributes/@v ">
+                        <xsl:value-of select=" //attributes/@v "/>
                     </xsl:when>
                     <xsl:otherwise>
-                        <xsl:value-of select=" 'def_P3' "/>
+                        <xsl:value-of select=" 'def' "/>
                     </xsl:otherwise>
                 </xsl:choose>
             </xsl:attribute>
             <dce-text xmlns="" data-dce-id="2">
-                p1:
+                //attributes/v='<xsl:value-of select="//attributes/v"/>'
             </dce-text>
-            <code xmlns="" data-testid="p1" data-dce-id="3">
-                <xsl:value-of select="$p1"/>
-            </code>
-            <br xmlns="" data-dce-id="4"/>
-            <dce-text xmlns="" data-dce-id="5">
-                p2:
+            <br xmlns="" data-dce-id="3"/>
+            <dce-text xmlns="" data-dce-id="4">
+                //attributes/@v='<xsl:value-of select="//attributes/@v"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="5"/>
+            <dce-text xmlns="" data-dce-id="6">
+                $v='<xsl:value-of select="$v"/>'
             </dce-text>
-            <code xmlns="" data-testid="p2" data-dce-id="6">
-                <xsl:value-of select="$p2"/>
-            </code>
             <br xmlns="" data-dce-id="7"/>
             <dce-text xmlns="" data-dce-id="8">
-                p3:
+                //s='<xsl:value-of select="//s"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="9"/>
+            <dce-text xmlns="" data-dce-id="10">
+                A='<xsl:value-of select="//s[//s/event] | //attributes/v[not(//s/event)]"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="11"/>
+            <dce-text xmlns="" data-dce-id="12">
+                has-input =<xsl:value-of select=" $has-input "/>
+            </dce-text>
+            <br xmlns="" data-dce-id="13"/>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="in-value">
+                <xsl:choose>
+                    <xsl:when test="//s/event">
+                        <xsl:value-of select="//s">
+                        </xsl:value-of>
+                    </xsl:when>
+                    <xsl:when test="//attributes/@v">
+                        <xsl:value-of select="//attributes/@v">
+                        </xsl:value-of>
+                    </xsl:when>
+                    <xsl:otherwise>def</xsl:otherwise>
+                </xsl:choose>
+            </xsl:variable>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="xx"
+                          select="//s[//s/event] ?? //attributes/@v ?? 'def' "/>
+            <input xmlns="" slice="s" slice-event="input" value="{$in-value}" data-dce-id="14"/>
+            <dce-text xmlns="" data-dce-id="15">$in-value:<xsl:value-of select="$in-value"/> | $xx:<xsl:value-of
+                    select="$xx"/>
             </dce-text>
-            <code xmlns="" data-testid="p3" data-dce-id="9">
-                <xsl:value-of select="$p3"/>
-            </code>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">

package/storybook-static/demo/ss.html CHANGED Viewed

@@ -1,5 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" value="123"
-          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2">
-    <dce-text data-dce-id="3"/>
-    <input data-dce-id="4" slice="selected" slice-event="input" value="123"/></label></dce-root>
+<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2" xmlns=""><input data-dce-id="3"
+                                                                                            slice="disabled-slice"
+                                                                                            type="checkbox"
+                                                                                            value="disabled"/>
+    <dce-text data-dce-id="4">disabled</dce-text>
+</label>
+        <cem-input data-dce-id="6" value="123"/>
+        <button data-dce-id="7">Next</button>
+        </p></form>
+</dce-root>

package/storybook-static/iframe.html CHANGED Viewed

@@ -517,7 +517,7 @@
     }
 }
 </script>
-    <script type="module" crossorigin src="./assets/iframe-CJEL_4Nu.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-CZwRpnn9.js"></script>
   </head>
   <body>

package/storybook-static/index.html CHANGED Viewed

@@ -48,11 +48,11 @@
     <link href="./sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
-    <link href="./sb-addons/links-1/manager-bundle.js" rel="modulepreload" />
+    <link href="./sb-addons/essentials-controls-1/manager-bundle.js" rel="modulepreload" />
-    <link href="./sb-addons/essentials-controls-2/manager-bundle.js" rel="modulepreload" />
+    <link href="./sb-addons/essentials-actions-2/manager-bundle.js" rel="modulepreload" />
-    <link href="./sb-addons/essentials-actions-3/manager-bundle.js" rel="modulepreload" />
+    <link href="./sb-addons/essentials-docs-3/manager-bundle.js" rel="modulepreload" />
     <link href="./sb-addons/essentials-backgrounds-4/manager-bundle.js" rel="modulepreload" />
@@ -65,8 +65,6 @@
     <link href="./sb-addons/essentials-outline-8/manager-bundle.js" rel="modulepreload" />
     <link href="./sb-addons/interactions-9/manager-bundle.js" rel="modulepreload" />
-    <link href="./sb-addons/chromatic-com-storybook-10/manager-bundle.js" rel="modulepreload" />
     <style>
@@ -150,11 +148,11 @@
         import './sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js';
-        import './sb-addons/links-1/manager-bundle.js';
+        import './sb-addons/essentials-controls-1/manager-bundle.js';
-        import './sb-addons/essentials-controls-2/manager-bundle.js';
+        import './sb-addons/essentials-actions-2/manager-bundle.js';
-        import './sb-addons/essentials-actions-3/manager-bundle.js';
+        import './sb-addons/essentials-docs-3/manager-bundle.js';
         import './sb-addons/essentials-backgrounds-4/manager-bundle.js';
@@ -168,8 +166,6 @@
         import './sb-addons/interactions-9/manager-bundle.js';
-        import './sb-addons/chromatic-com-storybook-10/manager-bundle.js';
       import './sb-manager/runtime.js';
     </script>