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

package/dist/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.5'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.7.0'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,26 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epa-wg/custom-element-dist",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,40 +10,39 @@
     "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": "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",
-    "tf": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --browser.name=firefox --watch --browser.headless=false  src/stories/module-url.test.stories.ts"
+    "tt": "vitest --coverage.enabled --coverage.all --no-file-parallelism --watch --browser.headless=false src/stories/external-template.test.stories.ts "
   },
   "dependencies": {
-    "@epa-wg/custom-element": "0.0.32"
+    "@epa-wg/custom-element": "0.0.33"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-mdx-gfm": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/test": "^8.4.2",
-    "@storybook/test-runner": "0.19.1",
-    "@storybook/web-components": "^8.4.2",
-    "@storybook/web-components-vite": "^8.4.2",
-    "@vitest/browser": "2.0.5",
-    "@vitest/coverage-istanbul": "2.0.5",
+    "@storybook/addon-essentials": "8.5.3",
+    "@storybook/addon-interactions": "8.5.3",
+    "@storybook/addon-links": "8.5.3",
+    "@storybook/addon-mdx-gfm": "8.5.3",
+    "@storybook/blocks": "8.5.3",
+    "@storybook/test": "8.5.3",
+    "@storybook/test-runner": "0.21.0",
+    "@storybook/web-components": "8.5.3",
+    "@storybook/web-components-vite": "8.5.3",
+    "@vitest/browser": "3.0.5",
+    "@vitest/coverage-istanbul": "3.0.5",
     "coverage-svg": "0.0.3",
-    "lit": "3.2.0",
-    "msw": "2.4.5",
-    "msw-storybook-addon": "^2.0.4",
-    "playwright": "1.47.0",
-    "storybook": "^8.4.2",
-    "typescript": "5.6.2",
-    "vite": "5.4.8",
-    "vitest": "2.0.5",
-    "webdriverio": "9.0.9"
+    "lit": "3.2.1",
+    "msw": "2.7.0",
+    "msw-storybook-addon": "2.0.4",
+    "playwright": "1.50.1",
+    "storybook": "8.5.3",
+    "typescript": "5.7.3",
+    "vite": "6.1.0",
+    "vitest": "3.0.5",
+    "webdriverio": "9.9.0"
   },
   "msw": {
     "workerDirectory": [
@@ -96,4 +95,4 @@
     "./src/custom-element/ide/web-types-dce.json",
     "./src/custom-element/ide/web-types-xsl.json"
   ]
-}
+}

package/public/demo/attributes.html

@@ -0,0 +1,153 @@
+<!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>parameters - custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg" />
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        button{ background: forestgreen; }
+        table{ min-width: 16rem; }
+        td{ border-bottom: 1px solid silver; }
+        tfoot td{ border-bottom: none; }
+        td,th{text-align: right; }
+        caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
+    </style>
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<main>
+    <p><code>attribute</code> is used for DCE attributes declaration and track the attributes changes. It also be used by IDE and validation.</p>
+    <p>The attribute can be changed by component itself and used as output to the container.
+        Usual case is when <code>value</code> attribute is updated from inside.</p>
+    <p>Initial value of attribute is available on the <code>attributes</code> node attribute as in <code>/datadom/attributes/@attr1</code></p>
+    <p>The current, i.e. including the changes by component itself, attribute value is a child node of <code>attributes</code> as in <code>/datadom/attributes/attr1</code>.</p>
+    <p>To define the attribute which is modified from within,  the 3 parts are usually used as in <code>//s[//s/event] ?? //attributes/@v ?? 'def' </code>
+    <ol>
+    <li><code>//s[//s/event]</code> the slice <code>s</code> with event gives the slice value which was modified by user event like input</li>
+    <li><code>//attributes/@v</code> the attribute passed by container</li>
+    <li><code>'def' </code> the default value which used when no user input or attribute set by container</li>
+</ol>
+    </p>
+</main>
+<html-demo-element legend="attributes definition" >
+    <p slot="description">
+    <code>attribute</code> is used for DCE attributes declaration and track the attributes changes. It also be used by IDE and validation.
+
+</p>
+    <template>
+        <custom-element tag="dce-link" hidden>
+            <attribute name="p1" >default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"       ></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' " ></attribute>
+            p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+        </custom-element>
+        <dce-link id="dce1" ></dce-link>
+        <section>
+            <dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> <br/>
+            <div><input id="i1" value="p1" />  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+            <div><input id="i2" value="p2" />  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+            <div><input id="i3" value="p3" />  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+        </section>
+        <dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
+
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="attribute from slice">
+    <p slot="description">
+When slice value points to attribute, it would be populated on slice change.<br/>
+    Type in the input field to see the variable $title change. <br/>
+    Hover the mouse to see the title attribute text popup.<br/>
+    Inspect DCE node in dev tools to see `title` attribute updated while typing.
+
+</p>
+
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="title" select="//title ?? '😃'" ></attribute>
+                <input slice="/datadom/attributes/title" slice-event="keyup"/>
+                title attribute: {$title}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="V attribute matches input value" description="
+    Type in the input field and observe in DevTools the V attribute changed.
+">
+    <template>
+<custom-element tag="x-input" >
+    <template>
+        <attribute name="is-changed" select="count(//s/event) &gt; 0"></attribute>
+        <attribute name="v" select="//s[//s/event] ?? //attributes/@v ?? 'def' "></attribute>
+        /datadom/attributes/v='{/datadom/attributes/v}'<br/>
+        same as v='{v}'<br/>
+        same as $v='{$v}'<br/>
+        //attributes/@v='{//attributes/@v}'<br/>
+        //s='{//s}'<br/>
+        is-changed ={ is-changed }<br/>
+        <input slice="s" slice-event="input" value="{//attributes/v}"/>
+    </template>
+</custom-element>
+<x-input></x-input>
+<x-input v="V1"></x-input>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="attribute defaults, from container, and from slice" description="
+    Type in the input field and observe in DevTools the V attribute changed.
+">
+    <template>
+<custom-element tag="attr-demo">
+    <template>
+        <variable name="has-input" select="count(//s/*) &gt; 0"></variable>
+        <attribute name="v" select="//s[//s/event] ?? //attributes/@v ?? 'def' "></attribute>
+        //attributes/v='{//attributes/v}'<br/>
+        //attributes/@v='{//attributes/@v}'<br/>
+        $v='{$v}'<br/>
+        //s='{//s}'<br/>
+        A='{//s[//s/event] | //attributes/v[not(//s/event)]}'<br/>
+        has-input ={ $has-input }<br/>
+        <input slice="s" slice-event="input" />
+    </template>
+</custom-element>
+
+<attr-demo></attr-demo>
+<attr-demo v="From Container"></attr-demo>
+    </template>
+</html-demo-element>
+
+<details>
+    <summary>Attributes processing</summary>
+    To be available in template, <code>custom-element</code> attributes should be
+    defined by <code>attribute</code> markup as shown above.
+    The value is taken from attribute text content or from <code>select</code> XPath expression<br/>
+
+    Declared in such way, attributes are exposed via <code><a
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes"
+        >observedAttributes</a></code>. <br/>
+    The template exposes those attributes as <code>xsl:param</code> which makes the attribute value available as
+    xsl variable (as attribute name prefixed with $). <br/>
+    After transformation the attributes values are read from CE root and copied into DCE component. <br/>
+    The DCE attribute change from outside invokes <code>attributeChangedCallback</code> which triggers DCE re-render.
+    <p>
+        The <code>value</code> attribute is usual case to be propagated from within of <code>custom-element</code>.
+        See the <a href="./form.html#sample-5">using custom-element as form input</a> example.
+    </p>
+    &bull; <a href="https://github.com/EPA-WG/custom-element/blob/main/docs/attributes.md">Design docs</a>
+</details>
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/public/demo/external-templates-sb-6.html

@@ -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/public/demo/external-templates-sb-7.html

@@ -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/public/demo/html-template.html

@@ -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/public/demo/module-url-sb-2.html

@@ -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/public/demo/module-url-sb-4.html

@@ -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/public/demo/module-url-sb-5.html

@@ -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/public/demo/s.xml

@@ -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>