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/dist/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/dist/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/dist/local-storage-78EivJ_B.cjs ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";const c=(t,e)=>{if(t==="text")return e;if(t==="json")try{return JSON.parse(e)}catch{return null}const a=document.createElement("input");return a.setAttribute("type",t),t==="number"?(a.value=e,a.valueAsNumber):t==="date"?e?(a.valueAsDate=new Date(e),a.value):null:(a.value=e,a.value)};let o,i,s;function r(t,e){o.call(localStorage,t,e),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:t,value:e}}))}function u(t){i.call(localStorage,t),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:t}}))}function g(){s.call(localStorage),window.dispatchEvent(new CustomEvent("local-storage",{detail:{}}))}function m(){o||(o=localStorage.setItem,localStorage.setItem=r,i=localStorage.removeItem,localStorage.removeItem=u,s=localStorage.clear,localStorage.clear=g)}m();function d(t,e){r(t,e)}class S extends HTMLElement{static observedAttributes=["value","slice","key","type","live"];#e;get value(){return this.#e===null?void 0:this.#e}set value(e){return this.#e=e}async connectedCallback(){const e=l=>this.getAttribute(l),a=()=>{this.#e=c(e("type"),localStorage.getItem(e("key"))),this.dispatchEvent(new Event("change"))};if(this.#e=c(e("type"),localStorage.getItem(e("key"))),this.hasAttribute("value")?d(e("key"),this.#e=e("value")):a(),this.hasAttribute("live")){const l=n=>(n.detail.key===e("key")||!n.detail.key)&&a();window.addEventListener("local-storage",l),m(),this._destroy=()=>window.removeEventListener("local-storage",l)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",S);exports.LocalStorageElement=S;exports.localStorageSetItem=d;exports.localStorage_clear=g;exports.localStorage_removeItem=u;exports.localStorage_setItem=r;

package/dist/local-storage-DzmNKzgN.js ADDED Viewed

@@ -0,0 +1,66 @@
+const n = (t, e) => {
+  if (t === "text")
+    return e;
+  if (t === "json")
+    try {
+      return JSON.parse(e);
+    } catch {
+      return null;
+    }
+  const a = document.createElement("input");
+  return a.setAttribute("type", t), t === "number" ? (a.value = e, a.valueAsNumber) : t === "date" ? e ? (a.valueAsDate = new Date(e), a.value) : null : (a.value = e, a.value);
+};
+let o, s, i;
+function c(t, e) {
+  o.call(localStorage, t, e), window.dispatchEvent(new CustomEvent("local-storage", { detail: { key: t, value: e } }));
+}
+function g(t) {
+  s.call(localStorage, t), window.dispatchEvent(new CustomEvent("local-storage", { detail: { key: t } }));
+}
+function d() {
+  i.call(localStorage), window.dispatchEvent(new CustomEvent("local-storage", { detail: {} }));
+}
+function u() {
+  o || (o = localStorage.setItem, localStorage.setItem = c, s = localStorage.removeItem, localStorage.removeItem = g, i = localStorage.clear, localStorage.clear = d);
+}
+u();
+function m(t, e) {
+  c(t, e);
+}
+class v extends HTMLElement {
+  static observedAttributes = [
+    "value",
+    "slice",
+    "key",
+    "type",
+    "live"
+    // monitors localStorage change
+  ];
+  #e;
+  get value() {
+    return this.#e === null ? void 0 : this.#e;
+  }
+  set value(e) {
+    return this.#e = e;
+  }
+  async connectedCallback() {
+    const e = (l) => this.getAttribute(l), a = () => {
+      this.#e = n(e("type"), localStorage.getItem(e("key"))), this.dispatchEvent(new Event("change"));
+    };
+    if (this.#e = n(e("type"), localStorage.getItem(e("key"))), this.hasAttribute("value") ? m(e("key"), this.#e = e("value")) : a(), this.hasAttribute("live")) {
+      const l = (r) => (r.detail.key === e("key") || !r.detail.key) && a();
+      window.addEventListener("local-storage", l), u(), this._destroy = () => window.removeEventListener("local-storage", l);
+    }
+  }
+  disconnectedCallback() {
+    this._destroy?.();
+  }
+}
+window.customElements.define("local-storage", v);
+export {
+  v as L,
+  g as a,
+  d as b,
+  m as c,
+  c as l
+};

package/dist/mockServiceWorker.js CHANGED Viewed

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
-const PACKAGE_VERSION = '2.3.5'
+const PACKAGE_VERSION = '2.4.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@epa-wg/custom-element-dist",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,37 +11,39 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "node bin/vitest/vitest-browser-importmaps.mjs && vitest --coverage.enabled --coverage.all --no-file-parallelism --watch=false",
+    "test:ff": "yarn test --browser.name=firefox",
     "test:watch": "vitest --inspect-brk --no-file-parallelism --browser.headless=false --test-timeout=0",
     "test:storybook": "test-storybook",
     "sb": "yarn storybook",
-    "t": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --watch --browser.headless=false src/stories/module-url.test.stories.ts"
+    "t": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --watch --browser.headless=false src/stories/module-url.test.stories.ts",
+    "tf": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --browser.name=firefox --watch --browser.headless=false  src/stories/module-url.test.stories.ts"
   },
   "dependencies": {
-    "@epa-wg/custom-element": "0.0.26"
+    "@epa-wg/custom-element": "0.0.27"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.7.0",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@storybook/test-runner": "^0.19.1",
-    "@storybook/web-components": "^8.2.9",
-    "@storybook/web-components-vite": "^8.2.9",
-    "@vitest/browser": "^2.0.5",
-    "@vitest/coverage-istanbul": "^2.0.5",
-    "coverage-svg": "^0.0.3",
-    "lit": "^3.2.0",
-    "msw": "^2.3.5",
-    "msw-storybook-addon": "^2.0.3",
-    "playwright": "^1.46.1",
-    "storybook": "^8.2.9",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5",
-    "webdriverio": "^9.0.7"
+    "@chromatic-com/storybook": "2.0.0",
+    "@storybook/addon-essentials": "8.2.9",
+    "@storybook/addon-interactions": "8.2.9",
+    "@storybook/addon-links": "8.2.9",
+    "@storybook/addon-mdx-gfm": "8.2.9",
+    "@storybook/blocks": "8.2.9",
+    "@storybook/test": "8.2.9",
+    "@storybook/test-runner": "0.19.1",
+    "@storybook/web-components": "8.2.9",
+    "@storybook/web-components-vite": "8.2.9",
+    "@vitest/browser": "2.0.5",
+    "@vitest/coverage-istanbul": "2.0.5",
+    "coverage-svg": "0.0.3",
+    "lit": "3.2.0",
+    "msw": "2.4.5",
+    "msw-storybook-addon": "2.0.3",
+    "playwright": "1.47.0",
+    "storybook": "8.2.9",
+    "typescript": "5.6.2",
+    "vite": "5.4.3",
+    "vitest": "2.0.5",
+    "webdriverio": "9.0.9"
   },
   "msw": {
     "workerDirectory": [

package/public/demo/a.svg ADDED Viewed

@@ -0,0 +1,27 @@
+<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <defs>
+    </defs>
+    <polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
+    <path class="cls-2" d="m114.33,56.69l20.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"/>
+    <path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
+    <path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.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.06Z"/>
+    <path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.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.06Z"/>
+    <path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
+    <path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
+    <path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
+    <path class="cls-2" d="m149.18,117.04l20.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"/>
+    <path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <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>

package/public/demo/demo.css CHANGED Viewed

@@ -4,13 +4,12 @@ html
 }
 body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
 body>*{flex: auto;}
-nav{ flex-direction: column;}
-custom-element+*,
-custom-element+*+*,
-custom-element:not([tag]),
-dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
-dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
-{ box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
+nav
+{   flex-direction: column;
+    dce-root{ box-shadow:none; padding: 0;}
+}
+html-demo-element *:has(>dce-root){ box-shadow: 0 0 0.5rem lime; padding: 1rem;  flex:1; display: block; }
 script{ display:none !important; }
 dd{ padding: 1rem;}
 p{ margin: 0;}

package/public/demo/external-template.html CHANGED Viewed

@@ -141,13 +141,13 @@
 <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
     <a href="html-template.html">html-template.html</a>
     <template>
-        <custom-element src="html-template.html#wave">
+        <custom-element src="./html-template.html#wave">
             <template><i>loading HTML from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#dwc-logo">
+        <custom-element src="./html-template.html#dwc-logo">
             <template><i>loading SVG from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#sophomores-dream">
+        <custom-element src="./html-template.html#sophomores-dream">
             <template><i>loading MathML from HTML file ...</i></template>
         </custom-element>
     </template>

package/public/demo/npm-versions-demo.html CHANGED Viewed

@@ -4,8 +4,16 @@
     <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";
@@ -40,16 +48,20 @@
 <html-demo-element legend="1. NPM package version picker"
                    description="defaults, last version should be preselected">
     <template>
-        <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>
-        <npm-version package-name="@epa-wg/custom-element-dist"></npm-version>
+        <custom-element src="./npm-versions.html#npm-version"
+                        package-name="@epa-wg/custom-element-dist"></custom-element>
     </template>
 </html-demo-element>
 <html-demo-element legend="2. preselected NPM package version picker"
-                   description="version 22 should be selected">
+                   description="version 22 should be selected and date shown">
     <template>
         <custom-element tag="custom-element-version" src="./npm-versions.html#npm-version"></custom-element>
-        <custom-element-version current-version="0.0.22" package-name="@epa-wg/custom-element"></custom-element-version>
+        <custom-element-version
+                package-name="@epa-wg/custom-element"
+                current-version="0.0.22"
+                show-date="true"
+        ></custom-element-version>
     </template>
 </html-demo-element>
@@ -90,11 +102,12 @@
 <html-demo-element legend="5. control version in URL"
                    description="">
-    1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html`">set in page URL</button>
-        (can be skipped when run from unpkg.com)<br/>
+    1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.25/storybook-static/index.html`">set in page URL to version 0.0.25</button><br/>
     2. switch the package version in select and observe the URL change.
     <template>
-        <custom-element src="./npm-versions.html#npm-version-to-url" package-name="custom-element-dist" current-version="0.0.26"></custom-element>
+        <custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version-to-url"
+                package-name="@epa-wg/custom-element-dist"
+                ></custom-element>
     </template>
 </html-demo-element>

package/public/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/public/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>