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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/storybook-static/demo/attributes.html ADDED Viewed

@@ -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/storybook-static/demo/data-slices.html CHANGED Viewed

@@ -233,8 +233,8 @@
     </template>
 </html-demo-element>
-<html-demo-element legend="13. Radio buttons use"
-                   description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
+<html-demo-element legend="13. Radio group"
+                   description="The value propagated into slice from the last checked radiobutton.">
     <p>Check the radiobutton to see the value in slice</p>
     <template>
         <custom-element>

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

@@ -57,6 +57,7 @@
         svg {
             max-height: 3rem;
+            min-height: 2rem;
         }
     </style>
 </head>

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

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

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

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

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

@@ -233,6 +233,48 @@
     </template>
 </html-demo-element>
+<html-demo-element legend="5. using custom-element as form input"
+                   description="bypass value to container form "
+                   id="sample-5"
+    >
+    <ol>
+        <li> select radio in top group</li>
+        <li> observe the fruit selected on the left</li>
+        <li> observe the warning message bellow button</li>
+        <li> next button does not submit the form</li>
+        <li> select radio in bottom group</li>
+        <li> observe the fruit selected on the right</li>
+        <li> same fruit selection would eliminate the warning and
+            allow the form submission</li>
+        <li> after submit, observe the URL parameters 'inp-1=🍏&inp-2=🍏'  </li>
+    </ol>
+    <template>
+        <custom-element tag="sample-input">
+            <template>
+                <attribute name="name" ></attribute>
+                <attribute name="value" select="//val"></attribute>
+                {$name}
+                <label><input type="radio" name="{$name}" slice="val" value="🍏">Apple</label>
+                <label><input type="radio" name="{$name}" slice="val" value="🍌">Banana</label>
+            </template>
+        </custom-element>
+        <custom-element>
+            <template>
+                <form slice="cart-form" action="#sample-5"
+                    custom-validity="(//inp1 = //inp2) ?? 'pick same fruit'"
+                    >
+                    <sample-input slice="inp1" name="inp-1"></sample-input>
+                    <sample-input slice="inp2" name="inp-2"></sample-input>
+                    <button>Next</button>
+                    Picked :{//inp1} and {//inp2}
+                    <p>{//cart-form/@validation-message}</p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 </body>

package/storybook-static/demo/hex-grid-dce.html CHANGED Viewed

@@ -107,7 +107,7 @@
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
     <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
     <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
-    <img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
+    <img src="https://threejs.org/files/favicon.ico" alt="ThreeJS" href="https://threejs.org/"/>
     <img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>

package/storybook-static/demo/hex-grid.html CHANGED Viewed

@@ -52,7 +52,7 @@
         <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
         <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
         <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
-        <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
+        <img src="https://refine.dev/img/favicon.ico" alt="Refine" href="https://refine.dev/"/>
         <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
         <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
         <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>

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

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

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

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

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

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

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

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

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

@@ -44,7 +44,7 @@ params needed to declare DCE attributes and track the attributes changes. It als
     </template>
 </html-demo-element>
-<html-demo-element legend="slice propagates attribute" description="
+<html-demo-element legend="attribute from slice" description="
 when slice value points to attribute, it would be populated on slice change
 ">
     Type in the input field to see the variable $title change. <br/>
@@ -62,6 +62,25 @@ when slice value points to attribute, it would be populated on slice change
     </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>

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

@@ -1,18 +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">
-        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="4" slot="">link 1</a>
-        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="5" slot="">link 2</a>
-        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="6" slot="">link 3</a>
+        <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>
+    <attributes xmlns="" label="password sample" value="secret word" slice="password" data-dce-id="3" type="">
         <xmlns/>
-        <justify>end</justify>
-        <data-dce-id>2</data-dce-id>
-        <direction>row</direction>
+        <label>password sample</label>
+        <value>secret word</value>
+        <slice>password</slice>
+        <data-dce-id>3</data-dce-id>
+        <type></type>
     </attributes>
     <dataset>
-        <dceId>2</dceId>
+        <dceId>3</dceId>
     </dataset>
-    <slice/>
+    <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>