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

package/package.json

@@ -1,97 +1,97 @@
 {
-    "name": "@epa-wg/custom-element-dist",
-    "version": "0.0.25",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "postinstall": "bash bin/postinstall.sh",
-        "prepublishOnly": "bash bin/build.sh",
-        "preview": "vite preview",
-        "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build",
-        "test": "vitest --coverage.enabled --coverage.all --no-file-parallelism --watch=false",
-        "test:watch": "vitest --inspect-brk --no-file-parallelism --browser.headless=false --test-timeout=0",
-        "test:storybook": "test-storybook",
-        "sb": "yarn storybook",
-        "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/attributes.test.stories.ts"
-    },
-    "dependencies": {
-        "@epa-wg/custom-element": "0.0.25"
-    },
-    "devDependencies": {
-        "@chromatic-com/storybook": "^1.3.3",
-        "@storybook/addon-essentials": "^8.0.10",
-        "@storybook/addon-interactions": "^8.0.10",
-        "@storybook/addon-links": "^8.0.10",
-        "@storybook/addon-mdx-gfm": "8.0.10",
-        "@storybook/blocks": "^8.0.10",
-        "@storybook/test": "^8.0.10",
-        "@storybook/test-runner": "^0.17.0",
-        "@storybook/web-components": "^8.0.10",
-        "@storybook/web-components-vite": "^8.0.10",
-        "@vitest/browser": "^1.6.0",
-        "@vitest/coverage-istanbul": "^1.6.0",
-        "coverage-svg": "^0.0.3",
-        "lit": "^3.1.3",
-        "msw": "^2.2.14",
-        "msw-storybook-addon": "^2.0.0",
-        "playwright": "^1.43.1",
-        "storybook": "^8.0.10",
-        "typescript": "^5.2.2",
-        "vite": "^5.3.1",
-        "vitest": "^1.6.0",
-        "webdriverio": "^8.36.1"
-    },
-    "msw": {
-        "workerDirectory": [
-            "public"
-        ]
-    },
-    "keywords": [
-        "WebComponent",
-        "Declarative Custom Element",
-        "XSLT",
-        "JS",
-        "javascript"
-    ],
-    "author": {
-        "name": "Sasha Firsov",
-        "email": "suns@simulationworks.com",
-        "url": "https://blog.firsov.net/"
-    },
-    "files": [
-        "*",
-        "dist/**/*",
-        "storybook-static/**/*",
-        "coverage/**/*"
-    ],
-    "exports": {
-        ".": {
-            "import": "./dist/assets/custom-element-bundle.js",
-            "require": "./dist/assets/custom-element-bundle.cjs"
-        },
-        "./custom-element": {
-            "import": "./dist/assets/custom-element-bundle.js",
-            "require": "./dist/assets/custom-element-bundle.cjs"
-        },
-        "./package.json": "./package.json"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/EPA-WG/custom-element-dist.git"
-    },
-    "license": "Apache-2.0",
-    "bugs": {
-        "url": "https://github.com/EPA-WG/custom-element/issues"
+  "name": "@epa-wg/custom-element-dist",
+  "version": "0.0.26",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "postinstall": "bash bin/postinstall.sh",
+    "prepublishOnly": "bash bin/build.sh",
+    "preview": "vite preview",
+    "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: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"
+  },
+  "dependencies": {
+    "@epa-wg/custom-element": "0.0.26"
+  },
+  "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"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  },
+  "keywords": [
+    "WebComponent",
+    "Declarative Custom Element",
+    "XSLT",
+    "JS",
+    "javascript"
+  ],
+  "author": {
+    "name": "Sasha Firsov",
+    "email": "suns@simulationworks.com",
+    "url": "https://blog.firsov.net/"
+  },
+  "files": [
+    "*",
+    "dist/**/*",
+    "storybook-static/**/*",
+    "coverage/**/*"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/assets/custom-element-bundle.js",
+      "require": "./dist/assets/custom-element-bundle.cjs"
     },
-    "homepage": "https://github.com/EPA-WG/custom-element#readme",
-    "funding": {
-        "type": "patreon",
-        "url": "https://www.patreon.com/sashafirsov"
+    "./custom-element": {
+      "import": "./dist/assets/custom-element-bundle.js",
+      "require": "./dist/assets/custom-element-bundle.cjs"
     },
-    "web-types": [
-        "./src/custom-element/ide/web-types-dce.json",
-        "./src/custom-element/ide/web-types-xsl.json"
-    ]
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/EPA-WG/custom-element-dist.git"
+  },
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/EPA-WG/custom-element/issues"
+  },
+  "homepage": "https://github.com/EPA-WG/custom-element#readme",
+  "funding": {
+    "type": "patreon",
+    "url": "https://www.patreon.com/sashafirsov"
+  },
+  "web-types": [
+    "./src/custom-element/ide/web-types-dce.json",
+    "./src/custom-element/ide/web-types-xsl.json"
+  ]
 }

package/public/confused.svg

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <title>Confused</title>
   <defs>
     <linearGradient id="d">
       <stop offset="0"/>

package/public/demo/a.html

@@ -0,0 +1,60 @@
+<!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>Data slices - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        label {
+            display: flex;
+        }
+
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+
+        nav {
+            max-width: 32em;
+        }
+    </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+
+</head>
+<body>
+
+<fieldset>
+    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
+            style="color:red">red</i> in 1st instance
+    </legend>
+    <custom-element tag="dce-3">
+        <template>
+            <u>
+                <slot>is green</slot>
+            </u>
+        </template>
+        <style>dce-3 {
+            color: green
+        }</style>
+    </custom-element>
+   <u>should be</u> <i style="color:red">red</i>:
+    <dce-3 id="dce32">
+        <template>
+            <style> color:red; </style>
+            <u>red</u>
+        </template>
+    </dce-3> <br/>
+    should be GREEN:
+    <dce-3 id="dce31">green</dce-3>
+</fieldset>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/public/demo/b.html

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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"><u data-dce-id="2" xmlns="">
+    <dce-text data-dce-id="3">
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
+            dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
+        </xhtml:style>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+    </dce-text>
+</u></dce-root>

package/public/demo/confused.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <title>Confused</title>
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0"/>
+      <stop offset=".5"/>
+      <stop offset=".80000001" stop-opacity=".46666667"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#fb0"/>
+      <stop offset=".5" stop-color="#e29d00"/>
+      <stop offset="1" stop-color="#fb0"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#ffc"/>
+      <stop offset=".5" stop-color="#fff965"/>
+      <stop offset="1" stop-color="#fc3"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
+    <radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
+  <path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
+  <path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
+  <path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
+  <use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
+  <path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
+  <path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
+  <use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
+</svg>

package/public/demo/data-slices.html

@@ -0,0 +1,216 @@
+<!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>Data slices - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+    </style>
+</head>
+<body>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>Data slices propagation by events.</h3>
+</nav>
+
+<html-demo-element legend="A. slice initialization, change on event"
+                   description="initial value should be 0; + and - should change the number in input field">
+    <template>
+        <custom-element>
+            <template>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount + 1"   >
+                    +
+                </button>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount - 1"   >
+                    -
+                </button>
+                <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
+                {//clickcount}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="B. slice event data."
+                   description="move the mouse over TEXTAREA and click to see slice and slice event changed">
+    <template>
+        <custom-element>
+            <template>
+                <textarea slice="s" slice-value="concat('x:', //@pageX)"
+                          slice-event="mousemove click"
+                          style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;" ></textarea><br/>
+                //slice/s : {//slice/s}   <br/>
+                //slice/s/event/@offsetY: {//slice/s/event/@offsetY}  <br/>
+                event type:{//slice/s/event/@type}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="1. slice change on event. 1:1 slice⮂value"
+                   description="initial value blank; type and unfocus to see slice changed">
+    <template>
+
+        <custom-element>
+            <input slice="typed" /> //slice/typed : {//slice/typed}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="2. initial slice value, slice change on event. slice⮂value, w/ initial"
+                   description="initial value from input; type and unfocus to see slice changed">
+    <template>
+        <custom-element>
+            <input slice="s" value="{//s ?? 'B'}" /> //slice/s : {//slice/s}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. initial slice value, slice change on event. slice⮂value, w/ initial"
+                   description="initial value from input; type to see slice changed">
+    <template>
+        <custom-element>
+            <input slice="s" value="{//s ?? 'B'}" slice-event="input"/> //slice/s : {//slice/s}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. initial slice value from attribute, slice change on event."
+                   description="initial value from input; type to see slice changed">
+    <template>
+        <custom-element tag="dce-1">
+            <template>
+                <attribute name="a" >😁</attribute>
+                <input slice="s" value="{//s ?? $a}" slice-event="keyup" />
+                attribute 'a' : {$a}
+                //slice/s : {//slice/s}
+            </template>
+        </custom-element>
+        <dce-1></dce-1>
+        <dce-1 a="🤗"></dce-1>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="5. initial slice value from attribute, slice change on event."
+                   description="initial value from input as 'xB'; type and unfocus to see slice changed">
+    <template>
+        <custom-element>
+            <template>
+                <input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )" />
+                //slice/s : {//slice/s}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="6. initial slice value from input, button ignored till change on click."
+                   description="initial value from input as 'anonymous'; on button click change to 'broccoli'">
+    <template>
+        <custom-element>
+            <template>
+            <input slice="nickname" value="anonymous" />
+            <button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
+            {//nickname}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="7. initial slice value from SLICE element, button ignored till change on click."
+                   description="synthetic SLICE element serves as initial value holder">
+    <template>
+        <custom-element>
+            <template>
+                <button slice="clickcount" slice-event="click tap" slice-value="//clickcount + 1">
+                    <slice slice="clickcount" value="0" ></slice>
+                     click/tap
+                </button>
+                //clickcount : {//clickcount}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="8. multiple slices by SLICE element, button ignored till change on click."
+                   description="synthetic SLICE elements serve as initial value holder">
+    <template>
+        <custom-element>
+            <template>
+                <button>
+                    <slice slice="clicked" value="{0}" ></slice>
+                    <slice slice="focused" value="{0}" ></slice>
+                    <slice slice-event="click tap" slice="clicked" slice-value="//clicked+1" ></slice>
+                    <slice slice-event="focus"     slice="focused" slice-value="1" ></slice>
+                    <slice slice-event="blur"      slice="focused" slice-value="0" ></slice>
+                     click/tap, focus/blur
+                </button> <br/>
+                //clicked : {//clicked} <br/>
+                //focused : {//focused}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="9. slice in attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element tag="emotional-element">
+            <template>
+                <attribute name="emotion" select="//emotion ?? '😃'"></attribute>
+                <input slice="/datadom/attributes/emotion"/>
+                Type and unfocus to update emotion attribute: {emotion}
+            </template>
+        </custom-element>
+        <emotional-element emotion=":)"></emotional-element>
+        <emotional-element></emotional-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="10. multiple slices by same field"
+                   description="same element value sets s1 and s2 slice">
+    <template>
+        <custom-element>
+        <template>
+            <input  slice="s1|s2"
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="11. slices and attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="emotion">😃</attribute>
+                <input slice="/datadom/attributes/emotion | s1"/>
+                Type and unfocus to update emotion attribute: {emotion}
+                and slice: {//slice/s1}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/public/demo/demo.css

@@ -0,0 +1,26 @@
+html
+{   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
+}
+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; }
+script{ display:none !important; }
+dd{ padding: 1rem;}
+p{ margin: 0;}
+code{ font-weight: bold; color: green; text-wrap: nowrap; }
+*{
+    gap: 1rem;
+}
+
+html-demo-element h3
+{   text-shadow: 0 0 0.25em white;
+    letter-spacing: 0.1rem;
+}
+*[slot="demo"]{ display: flex; gap: 1rem; flex-wrap: wrap; }