npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.26 → 0.0.27 - Mend

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

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 (137) hide show

package/src/custom-element/demo/npm-versions.html CHANGED Viewed

@@ -4,6 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>npm-version template</title>
     <link rel="icon" href="./wc-square.svg"/>
 </head>
 <body>
@@ -11,28 +12,29 @@
 <a href="./npm-versions-demo.html">docs</a>
 <template id="npm-version">
     <attribute name="package-name"></attribute>
-    <attribute name="current-version"></attribute>
+    <attribute name="current-version" aria-description="version to select"></attribute>
+    <attribute name="show-date" aria-description="set to 'true' to append the date to the version"></attribute>
     <attribute name="value" select="//selected-version"></attribute>
     <http-request
-            url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
+            url="https://registry.npmjs.org/{$package-name}"
             method="GET"
             header-accept="application/json"
             slice="versions-ajax"></http-request>
-    <label><slot name="label">{$package-name} version:</slot>
+    <label>
+        <slot name="label"><var>{$package-name}</var> version:</slot>
         <xhtml:select slice="selected-version" autocomplete="off" name="version">
             <for-each select="//versions/*">
                 <option value="{./@version}">
                     <variable name="item-version">{./@version}</variable>
-                    { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                    { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
                 </option>
             </for-each>
             <for-each select="//versions/*">
                 <if test="./@version = $current-version">
                     <option selected value="{./@version}">
                         <variable name="item-version">{./@version}</variable>
-                        { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                        { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
                     </option>
                 </if>
             </for-each>
@@ -41,25 +43,52 @@
 </template>
 <template id="npm-version-to-url">
-            <variable name="url" select="//window-location/value/@href"></variable>
-            <variable name="current-version" >0{
-                substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) - string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
-            }</variable>
-            <location-element slice="window-location" live>
-                <if test=" not(//selected-version = $current-version ) and not(//selected-version = '')  ">
-                    <attribute name="src">{ concat( substring-before($url, $current-version),
-                                                    //selected-version,
-                                                    substring-after($url, $current-version) ) }</attribute>
-                    <attribute name="method">location.href</attribute>
-                </if>
-            </location-element>
-            <http-request
-                url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
-                method="GET"
-                header-accept="application/json"
-                slice="versions-ajax" ></http-request>
+    <attribute name="package-name"></attribute>
+    <attribute name="value" select="//selected-version"></attribute>
+    <variable name="url" select="//window-location/value/@href"></variable>
+    <variable name="url-version">0{
+            substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) -
+            string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
+        }</variable>
-            <custom-element src="#npm-version" slice="selected-version"></custom-element>
-        </template>
+    <location-element slice="window-location" live>
+        <if test="//selected-version">
+            <if test=" not(//url-version = //selected-version ) ">
+                <attribute name="src">{ concat( substring-before($url, $url-version),
+                    //selected-version,
+                    substring-after($url, $url-version) ) }
+                </attribute>
+                <attribute name="method">location.href</attribute>
+            </if>
+        </if>
+    </location-element>
+    <http-request
+            url="https://registry.npmjs.org/{$package-name}"
+            method="GET"
+            header-accept="application/json"
+            slice="versions-ajax"></http-request>
+    <label>
+        <slot name="label">{$package-name} version:</slot>
+        <xhtml:select slice="selected-version" autocomplete="off" name="version">
+            <for-each select="//versions/*">
+                <option value="{./@version}">
+                    <variable name="item-version">{./@version}</variable>
+                    { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                </option>
+            </for-each>
+            <for-each select="//versions/*">
+                <if test="./@version = $url-version">
+                    <option selected value="{./@version}">
+                        <variable name="item-version">{./@version}</variable>
+                        { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                    </option>
+                </if>
+            </for-each>
+        </xhtml:select>
+    </label>
+</template>
 </body>
 </html>

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

@@ -1,28 +1,3 @@
-<?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">
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
-        <npm-version xmlns="http://www.w3.org/1999/xhtml" slice="selected-version" package-name="@epa-wg/custom-element"
-                     slot=""></npm-version>
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
-        <p xmlns="http://www.w3.org/1999/xhtml" slot="">
-            <code>selected-version</code>
-            slice: {//selected-version}
-        </p>
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
-    </payload>
-    <attributes>
-        <tag>dce-bbc8e8b4-575f-40d3-9880-2f1d56d85d80</tag>
-    </attributes>
-    <dataset/>
-    <slice>
-        <selected-version xmlns="" slice="selected-version" package-name="@epa-wg/custom-element" data-dce-id="2"
-                          current-version="" value="0.0.21">
-            <event isTrusted="false" sliceProcessed="1" type="change" eventPhase="2" bubbles="true" cancelable="false"
-                   defaultPrevented="false" composed="false" timeStamp="2225577.4000000954" returnValue="true"
-                   cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
-                <detail package-name="@epa-wg/custom-element"/>
-            </event>
-        </selected-version>
-    </slice>
-</datadom>
+<body xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><h4>embed-1.html</h4>
+<custom-element><template>🖖</template></custom-element>
+</body>

package/src/custom-element/demo/s.xslt CHANGED Viewed

@@ -1,97 +1,56 @@
-<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">
-    <xsl:template match="ignore">
-        <xsl:choose>
-            <xsl:when test="//attr">
-                <xsl:value-of select="//attr"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:value-of select="def"/>
-            </xsl:otherwise>
-        </xsl:choose>
-        <xsl:value-of select="."/>
-    </xsl:template>
-    <xsl:template mode="payload" match="attributes">
-        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="methods">
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href" data-dce-id="2">
-                    location.href
-                </a>
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" data-dce-id="3">
-                    location.hash
-                </a>
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign" data-dce-id="4">
-                    location.assign
-                </a>
-            </xsl:variable>
-            <fieldset xmlns="" data-dce-id="5">
-                <legend data-dce-id="6">
-                    <b data-dce-id="7">set-by</b>
-                </legend>
-                <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$methods">
-                    <p data-dce-id="8">
-                        <label data-dce-id="9">
-                            <input type="radio" name="method" value="{.}" data-dce-id="10"/>
-                            <dce-text data-dce-id="11">
-                                <xsl:value-of select="."/>
-                            </dce-text>
-                        </label>
-                        <a class="infolink" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
-                           data-dce-id="12">mdn
-                        </a>
-                    </p>
-                </xsl:for-each>
-                <label data-dce-id="13">
-                    <input type="radio" name="method" value="location.href" data-dce-id="14"/>
-                    <dce-text data-dce-id="15">location.href</dce-text>
-                </label>
-                <label data-dce-id="16">
-                    <input type="radio" name="method" value="location" data-dce-id="17"/>
-                    <dce-text data-dce-id="18">location</dce-text>
-                </label>
-                <label data-dce-id="19">
-                    <input type="radio" name="method" value="location.replace" data-dce-id="20"/>
-                    <dce-text data-dce-id="21">location.replace</dce-text>
-                </label>
-                <label data-dce-id="22">
-                    <input type="radio" name="method" value="location.assign" data-dce-id="23"/>
-                    <dce-text data-dce-id="24">location.assign</dce-text>
-                </label>
-                <label data-dce-id="25">
-                    <input type="radio" name="method" value="location.hash" data-dce-id="26"/>
-                    <dce-text data-dce-id="27">location.hash</dce-text>
-                </label>
-                <label data-dce-id="28">
-                    <input type="radio" name="method" value="history.pushState" data-dce-id="29"/>
-                    <dce-text data-dce-id="30">history.pushState</dce-text>
-                </label>
-                <label data-dce-id="31">
-                    <input type="radio" name="method" value="history.replaceState" data-dce-id="32"/>
-                    <dce-text data-dce-id="33">history.replaceState</dce-text>
-                </label>
-            </fieldset>
+<?xml version='1.0' encoding='UTF-8'?>
+<xsl:stylesheet version="1.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                >
+    <xsl:output method="xml"/>
+    <xsl:template match="/">
+        <dce-root >
+            <xsl:apply-templates select="*"/>
         </dce-root>
     </xsl:template>
-    <xsl:template match="/">
-        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    <xsl:template match="*[name()='template']">
+        <xsl:apply-templates mode="sanitize" select="*|text()"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <xsl:apply-templates mode="sanitize" select="*|text()"/>
+    </xsl:template>
+    <xsl:template match="*[name()='svg']|*[name()='math']">
+        <xsl:apply-templates mode="sanitize" select="."/>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="@*"/>
+            <xsl:value-of select="text()"></xsl:value-of>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="@*"/>
+            <xsl:value-of select="text()"></xsl:value-of>
+        </xsl:element>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="*|@*">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
+    <xsl:template mode="sanitize" match="text()">
+        <dce-text>
+            <xsl:copy/>
+        </dce-text>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
+        <dce-text>
+            <xsl:copy>
+                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            </xsl:copy>
+        </dce-text>
     </xsl:template>
-    <xsl:template name="slot">
-        <xsl:param name="slotname"/>
-        <xsl:param name="defaultvalue"/>
-        <xsl:choose>
-            <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
-            </xsl:otherwise>
-        </xsl:choose>
+    <xsl:template mode="sanitize" match="xhtml:*">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:element>
     </xsl:template>
-    <xsl:variable name="js-injected-body">
-        <xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template>
-    </xsl:variable>
 </xsl:stylesheet>

package/src/custom-element/demo/z.html CHANGED Viewed

@@ -1,62 +1,33 @@
-<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">
-    <location-element xmlns="" slice="window-url" live="" data-dce-id="2"></location-element>
-    <table xmlns="" data-dce-id="3">
-        <tbody data-dce-id="0-1">
-        <tr data-dce-id="4">
-            <th data-dce-id="5"><h3 data-dce-id="6"> URL properties </h3></th>
-            <td data-dce-id="7">9</td>
-        </tr>
-        <tr data-dce-id="10">
-            <th data-dce-id="11">href</th>
-            <td data-dce-id="12">http://localhost:63342/custom-element/demo/a.html?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="10-1">
-            <th data-dce-id="11">origin</th>
-            <td data-dce-id="12">http://localhost:63342</td>
-        </tr>
-        <tr data-dce-id="10-2">
-            <th data-dce-id="11">protocol</th>
-            <td data-dce-id="12">http:</td>
-        </tr>
-        <tr data-dce-id="10-3">
-            <th data-dce-id="11">host</th>
-            <td data-dce-id="12">localhost:63342</td>
-        </tr>
-        <tr data-dce-id="10-4">
-            <th data-dce-id="11">hostname</th>
-            <td data-dce-id="12">localhost</td>
-        </tr>
-        <tr data-dce-id="10-5">
-            <th data-dce-id="11">port</th>
-            <td data-dce-id="12">63342</td>
-        </tr>
-        <tr data-dce-id="10-6">
-            <th data-dce-id="11">pathname</th>
-            <td data-dce-id="12">/custom-element/demo/a.html</td>
-        </tr>
-        <tr data-dce-id="10-7">
-            <th data-dce-id="11">search</th>
-            <td data-dce-id="12">?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="10-8">
-            <th data-dce-id="11">hash</th>
-            <td data-dce-id="12"></td>
-        </tr>
-        </tbody>
-    </table>
-    <h3 data-dce-id="9"> URL parameters </h3>
-    <table xmlns="" data-dce-id="8">
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>DOM merge - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
-        <tbody data-dce-id="0-1">
-        <tr data-dce-id="10">
-            <th data-dce-id="11">_ijt</th>
-            <td data-dce-id="12">dmv0p4go000q47lg48i5im92f7</td>
-        </tr>
-        <tr data-dce-id="10-1">
-            <th data-dce-id="11">_ij_reload</th>
-            <td data-dce-id="12">RELOAD_ON_SAVE</td>
-        </tr>
-        </tbody>
-    </table>
-</dce-root>
+  <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
+</body>
+</html>

package/src/custom-element/demo/z1.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>DOM merge - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
+<button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
+<custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
+                package-name="@epa-wg/custom-element-dist"
+                ></custom-element>
+</body>
+</html>

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

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

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

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

package/src/custom-element/index.html CHANGED Viewed

@@ -4,7 +4,17 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>custom-element Declarative Custom Element implementation demo</title>
     <link rel="icon" href="demo/wc-square.svg" />
-    <script type="module" src="custom-element.js"></script>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "./",
+            "@epa-wg/custom-element-dist/": "./"
+          }
+        }
+    </script>
+    <script type="module" src="./http-request.js"></script>
+    <script type="module" src="./location-element.js"></script>
+    <script type="module" src="./custom-element.js"></script>
     <style>
         @import "demo/demo.css";
     </style>
@@ -18,6 +28,12 @@
         | <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html">Sandbox</a>
         | <a href="https://chrome.google.com/webstore/detail/epa-wgcustom-element/hiofgpmmkdembdogjpagmbbbmefefhbl"
             >Chrome devtools plugin</a>
+        |   <custom-element src="@epa-wg/custom-element/demo/npm-versions.html#npm-version-to-url"
+                            slice="selected" package-name="@epa-wg/custom-element">
+                <i slot="label">version:</i>
+            </custom-element>
     </div>
     <p>
         This <em>Declarative Custom Element</em> allows to define<br/>
@@ -38,7 +54,8 @@
         <a href="./demo/parameters.html"        >attributes         </a> |
         <a href="./demo/data-slices.html"       >data slices/events </a> |
         <a href="./demo/form.html"              >Form validation    </a> |
-        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
+        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a><br/>
+        <a href="./demo/npm-versions-demo.html">npm version         </a>
     </section>
 </nav>
 <html-demo-element legend="1. simple payload"

package/src/custom-element/local-storage.js CHANGED Viewed

@@ -21,29 +21,34 @@ const     string2value = (type, v) =>
 let originalSetItem,originalRemoveItem,originalClear;
+export function localStorage_setItem( key, value )
+{   originalSetItem.call(localStorage, key, value);
+    window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
+}
+export function localStorage_removeItem( key )
+{   originalRemoveItem.call(localStorage, key);
+    window.dispatchEvent( new CustomEvent('local-storage',{detail:{key}}) );
+}
+export function localStorage_clear()
+{   originalClear.call(localStorage);
+    window.dispatchEvent( new CustomEvent('local-storage',{detail:{}}) );
+}
 function ensureTrackLocalStorage()
 {   if( originalSetItem )
         return;
     originalSetItem = localStorage.setItem;
-    localStorage.setItem = function( key, value, ...rest )
-        {   originalSetItem.apply(this, [ key, value, ...rest ]);
-            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
-        };
+    localStorage.setItem = localStorage_setItem;
     originalRemoveItem = localStorage.removeItem;
-    localStorage.removeItem = function( key, ...rest )
-        {   originalRemoveItem.apply(this, [ key, ...rest ]);
-            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key}}) );
-        };
+    localStorage.removeItem = localStorage_removeItem;
     originalClear = localStorage.clear;
-    localStorage.clear = function( ...rest )
-        {   originalClear.apply(this, [ ...rest ]);
-            window.dispatchEvent( new CustomEvent('local-storage',{detail:{}}) );
-        };
+    localStorage.clear = localStorage_clear;
 }
+ensureTrackLocalStorage();
 export function localStorageSetItem(key, value)
-{   localStorage.setItem(key, value);
-    window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
+{   localStorage_setItem(key, value);
 }
 export class LocalStorageElement extends HTMLElement
 {

package/src/custom-element/module-url.js CHANGED Viewed

@@ -10,9 +10,10 @@ export class ModuleUrl extends HTMLElement
     sliceInit()
     {   let path = attr(this,'src');
         try
         {   const url =  '.' === path.charAt(0)
-                ? new URL(path, this.closest('[base]')?.getAttribute('base') ).href
+                ? new URL(path, this.closest('[base]')?.getAttribute('base') || location.href).href
                 : import.meta.resolve(path);
             this.setAttribute('value',this.value = url );
         }catch( er )
@@ -30,4 +31,4 @@ export class ModuleUrl extends HTMLElement
 }
 window.customElements.define( 'module-url', ModuleUrl );
-export default ModuleUrl;
+export default ModuleUrl;

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.26"
+        "latest": "0.0.27"
     },
     "versions": {
         "0.0.1": {
@@ -617,9 +617,9 @@ export default {
                 "host": "s3://npm-registry-packages"
             }
         },
-        "0.0.26": {
+        "0.0.27": {
             "name": "@epa-wg/custom-element-dist",
-            "version": "0.0.26",
+            "version": "0.0.27",
             "type": "module",
             "scripts": {
                 "dev": "vite",
@@ -636,7 +636,7 @@ export default {
                 "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/attributes.test.stories.ts"
             },
             "dependencies": {
-                "@epa-wg/custom-element": "0.0.26"
+                "@epa-wg/custom-element": "0.0.27"
             },
             "devDependencies": {
                 "@chromatic-com/storybook": "^1.3.3",
@@ -707,7 +707,7 @@ export default {
                 "./src/custom-element/ide/web-types-dce.json",
                 "./src/custom-element/ide/web-types-xsl.json"
             ],
-            "_id": "@epa-wg/custom-element-dist@0.0.26",
+            "_id": "@epa-wg/custom-element-dist@0.0.27",
             "gitHead": "a6a84bdc2cc433acf3d3afa827556c79ecacffb8",
             "description": "Binary distribution for [@epa-wg/custom-element][git-url] with StoryBook and test coverage",
             "_nodeVersion": "20.8.1",
@@ -715,7 +715,7 @@ export default {
             "dist": {
                 "integrity": "sha512-ISVPKkirFGvTTNFanf9WxOTeEBJrAyjuebqQSJiH97QHgG7pxQQAWUC4heBRbJ9kUo5FUmBDph2d9Rep/POCDw==",
                 "shasum": "1a68a8bc37315cbcab0f66247aa54c82d7bc159d",
-                "tarball": "https://registry.npmjs.org/@epa-wg/custom-element-dist/-/custom-element-dist-0.0.26.tgz",
+                "tarball": "https://registry.npmjs.org/@epa-wg/custom-element-dist/-/custom-element-dist-0.0.27.tgz",
                 "fileCount": 299,
                 "unpackedSize": 9437753,
                 "signatures": [
@@ -751,7 +751,7 @@ export default {
         "0.0.22": "2024-06-25T03:55:52.525Z",
         "0.0.23": "2024-06-27T03:25:14.314Z",
         "0.0.24": "2024-07-22T03:10:12.564Z",
-        "0.0.26": "2024-08-06T07:29:39.264Z"
+        "0.0.27": "2024-08-06T07:29:39.264Z"
     },
     "bugs": {
         "url": "https://github.com/EPA-WG/custom-element/issues"
@@ -781,6 +781,6 @@ export default {
             "email": "suns@simulationworks.com"
         }
     ],
-    "readme": "# custom-element-dist\nBinary distribution for [@epa-wg/custom-element][git-url] with StoryBook and test coverage\n\n`custom-element` [![git][github-image] GitHub][git-url]\n| [tests project][git-test-url]\n| [![NPM version][npm-image]][npm-url]\n| [![coverage][coverage-image]][coverage-url]\n| [StoryBook][sb-url]\n\n# Content\n[bin/build.sh] generates binaries to be kept as in Git release as in NPM package.\nIt serves the record of compliance on the moment of build.\n## [dist](dist)\nCan be used as CDN entry with minified bundle: [custom-element-bundle.js][bundle-url]\n\nEach individual component of `custom-element` lib is available as hashed JS.\n\n## [coverage](coverage)\nProvides the unit test coverage for lib and StoryBooks\n\n## [storybook-static][sb-url]\nCDN version of StoryBook.\n\n[git-url]:        https://github.com/EPA-WG/custom-element\n[git-test-url]:   https://github.com/EPA-WG/custom-element-dist\n[github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg\n[npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element-dist.svg\n[npm-url]:        https://npmjs.org/package/@epa-wg/custom-element-dist\n[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/coverage.svg\n[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/index.html\n[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html\n[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/dist/custom-element-bundle.js\n",
+    "readme": "# custom-element-dist\nBinary distribution for [@epa-wg/custom-element][git-url] with StoryBook and test coverage\n\n`custom-element` [![git][github-image] GitHub][git-url]\n| [tests project][git-test-url]\n| [![NPM version][npm-image]][npm-url]\n| [![coverage][coverage-image]][coverage-url]\n| [StoryBook][sb-url]\n\n# Content\n[bin/build.sh] generates binaries to be kept as in Git release as in NPM package.\nIt serves the record of compliance on the moment of build.\n## [dist](dist)\nCan be used as CDN entry with minified bundle: [custom-element-bundle.js][bundle-url]\n\nEach individual component of `custom-element` lib is available as hashed JS.\n\n## [coverage](coverage)\nProvides the unit test coverage for lib and StoryBooks\n\n## [storybook-static][sb-url]\nCDN version of StoryBook.\n\n[git-url]:        https://github.com/EPA-WG/custom-element\n[git-test-url]:   https://github.com/EPA-WG/custom-element-dist\n[github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg\n[npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element-dist.svg\n[npm-url]:        https://npmjs.org/package/@epa-wg/custom-element-dist\n[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/coverage/src/custom-element/coverage.svg\n[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/coverage/src/custom-element/index.html\n[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html\n[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/dist/custom-element-bundle.js\n",
     "readmeFilename": "README.md"
 }

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

Binary file