npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.21 → 0.0.23 - Mend

@epa-wg/custom-element-dist 0.0.21 → 0.0.23

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

package/.vscode/settings.json DELETED Viewed

@@ -1,24 +0,0 @@
-{
-    "html.customData": [
-        "./src/custom-element/ide/customData-dce.json",
-        "./src/custom-element/ide/customData-xsl.json"
-    ],
-    "terminal.integrated.profiles.windows": {
-        "PowerShell": {
-            "source": "PowerShell",
-            "icon": "terminal-powershell"
-        },
-        "Command Prompt": {
-            "path": [
-                "${env:windir}\\Sysnative\\cmd.exe",
-                "${env:windir}\\System32\\cmd.exe"
-            ],
-            "args": [],
-            "icon": "terminal-cmd"
-        },
-        "Git Bash": {
-            "source": "Git Bash"
-        }
-    },
-    "terminal.integrated.defaultProfile.windows": "Git Bash"
-}

package/coverage/src/stories/local-storage.stories.ts/coverage.svg DELETED Viewed

@@ -1,10 +0,0 @@
-<svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
-    <style>
-        .heavy { font: bold 16px sans-serif; fill:white; }
-        .percent { font: bold 16px monotype; fill: white; }
-    </style>
-    <rect width="140" height="32" fill="#473" rx="4"/>
-    <rect width="88" height="32" fill="#534" rx="4"/>
-    <text x="8" y="21" class="heavy">coverage</text>
-    <text x="94" y="22" class="percent">100%</text>
-</svg>

package/coverage/src/stories/location-element.stories.ts/coverage.svg DELETED Viewed

@@ -1,10 +0,0 @@
-<svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
-    <style>
-        .heavy { font: bold 16px sans-serif; fill:white; }
-        .percent { font: bold 16px monotype; fill: white; }
-    </style>
-    <rect width="140" height="32" fill="#473" rx="4"/>
-    <rect width="88" height="32" fill="#534" rx="4"/>
-    <text x="8" y="21" class="heavy">coverage</text>
-    <text x="94" y="22" class="percent">100%</text>
-</svg>

package/coverage/src/stories/renderPlay.ts/coverage.svg DELETED Viewed

@@ -1,10 +0,0 @@
-<svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
-    <style>
-        .heavy { font: bold 16px sans-serif; fill:white; }
-        .percent { font: bold 16px monotype; fill: white; }
-    </style>
-    <rect width="140" height="32" fill="#473" rx="4"/>
-    <rect width="88" height="32" fill="#534" rx="4"/>
-    <text x="8" y="21" class="heavy">coverage</text>
-    <text x="94" y="22" class="percent">100%</text>
-</svg>

package/coverage/src/stories/slice-events.stories.ts/coverage.svg DELETED Viewed

@@ -1,10 +0,0 @@
-<svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
-    <style>
-        .heavy { font: bold 16px sans-serif; fill:white; }
-        .percent { font: bold 16px monotype; fill: white; }
-    </style>
-    <rect width="140" height="32" fill="#473" rx="4"/>
-    <rect width="88" height="32" fill="#534" rx="4"/>
-    <text x="8" y="21" class="heavy">coverage</text>
-    <text x="94" y="22" class="percent">100%</text>
-</svg>

package/coverage/src/stories/slice-events.stories.ts.html DELETED Viewed

@@ -1,436 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Code coverage report for src/stories/slice-events.stories.ts</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> slice-events.stories.ts</h1>
-        <div class='clearfix'>
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>50/50</span>
-            </div>
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
-            </div>
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>9/9</span>
-            </div>
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>46/46</span>
-            </div>
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line high'></div>
-    <pre><table class="coverage">
-<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
-<a name='L2'></a><a href='#L2'>2</a>
-<a name='L3'></a><a href='#L3'>3</a>
-<a name='L4'></a><a href='#L4'>4</a>
-<a name='L5'></a><a href='#L5'>5</a>
-<a name='L6'></a><a href='#L6'>6</a>
-<a name='L7'></a><a href='#L7'>7</a>
-<a name='L8'></a><a href='#L8'>8</a>
-<a name='L9'></a><a href='#L9'>9</a>
-<a name='L10'></a><a href='#L10'>10</a>
-<a name='L11'></a><a href='#L11'>11</a>
-<a name='L12'></a><a href='#L12'>12</a>
-<a name='L13'></a><a href='#L13'>13</a>
-<a name='L14'></a><a href='#L14'>14</a>
-<a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a>
-<a name='L17'></a><a href='#L17'>17</a>
-<a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a>
-<a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a>
-<a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a>
-<a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a>
-<a name='L26'></a><a href='#L26'>26</a>
-<a name='L27'></a><a href='#L27'>27</a>
-<a name='L28'></a><a href='#L28'>28</a>
-<a name='L29'></a><a href='#L29'>29</a>
-<a name='L30'></a><a href='#L30'>30</a>
-<a name='L31'></a><a href='#L31'>31</a>
-<a name='L32'></a><a href='#L32'>32</a>
-<a name='L33'></a><a href='#L33'>33</a>
-<a name='L34'></a><a href='#L34'>34</a>
-<a name='L35'></a><a href='#L35'>35</a>
-<a name='L36'></a><a href='#L36'>36</a>
-<a name='L37'></a><a href='#L37'>37</a>
-<a name='L38'></a><a href='#L38'>38</a>
-<a name='L39'></a><a href='#L39'>39</a>
-<a name='L40'></a><a href='#L40'>40</a>
-<a name='L41'></a><a href='#L41'>41</a>
-<a name='L42'></a><a href='#L42'>42</a>
-<a name='L43'></a><a href='#L43'>43</a>
-<a name='L44'></a><a href='#L44'>44</a>
-<a name='L45'></a><a href='#L45'>45</a>
-<a name='L46'></a><a href='#L46'>46</a>
-<a name='L47'></a><a href='#L47'>47</a>
-<a name='L48'></a><a href='#L48'>48</a>
-<a name='L49'></a><a href='#L49'>49</a>
-<a name='L50'></a><a href='#L50'>50</a>
-<a name='L51'></a><a href='#L51'>51</a>
-<a name='L52'></a><a href='#L52'>52</a>
-<a name='L53'></a><a href='#L53'>53</a>
-<a name='L54'></a><a href='#L54'>54</a>
-<a name='L55'></a><a href='#L55'>55</a>
-<a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a>
-<a name='L58'></a><a href='#L58'>58</a>
-<a name='L59'></a><a href='#L59'>59</a>
-<a name='L60'></a><a href='#L60'>60</a>
-<a name='L61'></a><a href='#L61'>61</a>
-<a name='L62'></a><a href='#L62'>62</a>
-<a name='L63'></a><a href='#L63'>63</a>
-<a name='L64'></a><a href='#L64'>64</a>
-<a name='L65'></a><a href='#L65'>65</a>
-<a name='L66'></a><a href='#L66'>66</a>
-<a name='L67'></a><a href='#L67'>67</a>
-<a name='L68'></a><a href='#L68'>68</a>
-<a name='L69'></a><a href='#L69'>69</a>
-<a name='L70'></a><a href='#L70'>70</a>
-<a name='L71'></a><a href='#L71'>71</a>
-<a name='L72'></a><a href='#L72'>72</a>
-<a name='L73'></a><a href='#L73'>73</a>
-<a name='L74'></a><a href='#L74'>74</a>
-<a name='L75'></a><a href='#L75'>75</a>
-<a name='L76'></a><a href='#L76'>76</a>
-<a name='L77'></a><a href='#L77'>77</a>
-<a name='L78'></a><a href='#L78'>78</a>
-<a name='L79'></a><a href='#L79'>79</a>
-<a name='L80'></a><a href='#L80'>80</a>
-<a name='L81'></a><a href='#L81'>81</a>
-<a name='L82'></a><a href='#L82'>82</a>
-<a name='L83'></a><a href='#L83'>83</a>
-<a name='L84'></a><a href='#L84'>84</a>
-<a name='L85'></a><a href='#L85'>85</a>
-<a name='L86'></a><a href='#L86'>86</a>
-<a name='L87'></a><a href='#L87'>87</a>
-<a name='L88'></a><a href='#L88'>88</a>
-<a name='L89'></a><a href='#L89'>89</a>
-<a name='L90'></a><a href='#L90'>90</a>
-<a name='L91'></a><a href='#L91'>91</a>
-<a name='L92'></a><a href='#L92'>92</a>
-<a name='L93'></a><a href='#L93'>93</a>
-<a name='L94'></a><a href='#L94'>94</a>
-<a name='L95'></a><a href='#L95'>95</a>
-<a name='L96'></a><a href='#L96'>96</a>
-<a name='L97'></a><a href='#L97'>97</a>
-<a name='L98'></a><a href='#L98'>98</a>
-<a name='L99'></a><a href='#L99'>99</a>
-<a name='L100'></a><a href='#L100'>100</a>
-<a name='L101'></a><a href='#L101'>101</a>
-<a name='L102'></a><a href='#L102'>102</a>
-<a name='L103'></a><a href='#L103'>103</a>
-<a name='L104'></a><a href='#L104'>104</a>
-<a name='L105'></a><a href='#L105'>105</a>
-<a name='L106'></a><a href='#L106'>106</a>
-<a name='L107'></a><a href='#L107'>107</a>
-<a name='L108'></a><a href='#L108'>108</a>
-<a name='L109'></a><a href='#L109'>109</a>
-<a name='L110'></a><a href='#L110'>110</a>
-<a name='L111'></a><a href='#L111'>111</a>
-<a name='L112'></a><a href='#L112'>112</a>
-<a name='L113'></a><a href='#L113'>113</a>
-<a name='L114'></a><a href='#L114'>114</a>
-<a name='L115'></a><a href='#L115'>115</a>
-<a name='L116'></a><a href='#L116'>116</a>
-<a name='L117'></a><a href='#L117'>117</a>
-<a name='L118'></a><a href='#L118'>118</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
-&nbsp;
-import type { StoryObj }             from '@storybook/web-components';
-import { expect, within } from '@storybook/test';
-&nbsp;
-import '../custom-element/custom-element.js';
-&nbsp;
-type TProps = { title: string; body:string};
-&nbsp;
-type Story = StoryObj&lt;TProps&gt;;
-function sleep(ms: number) {    return new Promise((resolve) =&gt; setTimeout(resolve, ms)); }
-&nbsp;
-function render(args: TProps)
-{
-    const {title,  body} = args;
-    return `
-        &lt;fieldset&gt;
-            &lt;legend&gt;${ title }&lt;/legend&gt;
-            ${ body }
-        &lt;/fieldset&gt;
-  `;
-}
-const meta =
-{   title:      'slice-events'
-,   render
-};
-&nbsp;
-export default meta;
-&nbsp;
-export const SliceInitChangeEvent:Story  =
-{   args : {title: 'Slice initialization, change on event', body:`
-    &lt;p&gt;initial value should be 0; + and - should change the number in input field&lt;/p&gt;
-    &lt;custom-element&gt;
-            &lt;template&gt;
-                &lt;button slice="clickcount" slice-event="click" slice-value="//clickcount + 1"&gt;+&lt;/button&gt;
-                &lt;button slice="clickcount" slice-event="click" slice-value="//clickcount - 1"&gt;-&lt;/button&gt;
-                &lt;input  slice="clickcount" type="number" value="{//clickcount ?? 0}"&gt;
-                &lt;code data-testid="slice-value"&gt;{ //clickcount }&lt;/code&gt;
-            &lt;/template&gt;
-        &lt;/custom-element&gt;
-`}
-,   play: async ({canvasElement}) =&gt;
-    {
-        const titleText = SliceInitChangeEvent.args!.title as string;
-        const canvas = within(canvasElement);
-        await canvas.findByText(titleText);
-        const code = await canvas.findByTestId('slice-value');
-        const input = await canvasElement.querySelector('[type="number"]') as HTMLInputElement;
-        await expect(code).toBeInTheDocument();
-        expect(code.textContent).to.equal('0', 'initial slot value 0');
-        expect(input.value).to.equal('0', 'initial input value 0');
-&nbsp;
-        canvasElement.querySelector('[slice-value="//clickcount + 1"]').click()
-        await sleep(10);
-        expect(code.textContent).to.equal('1', 'increment to 1');
-        expect(input.value).to.equal('1', 'increment input 1');
-&nbsp;
-        canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
-        await sleep(10);
-        canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
-        await sleep(10);
-        expect(code.textContent).to.equal('3', 'double increment to 3');
-        expect(input.value).to.equal('3', 'double increment input to 3');
-&nbsp;
-        canvasElement.querySelector('[slice-value="//clickcount - 1"]').click();
-        await sleep(10);
-        expect(code.textContent).to.equal('2', 'decrement to 2');
-        expect(input.value).to.equal('2', 'decrement input to 2');
-    },
-};
-&nbsp;
-export const RealtimeEventInSlice:Story  =
-{   args : {title: 'Realtime Slice data on event', body:`
-    &lt;p&gt;move the mouse over TEXTAREA and click to see slice and slice event changed&lt;/p&gt;
-    &lt;custom-element&gt;
-        &lt;template&gt;
-            &lt;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;"&gt;&lt;/textarea&gt;&lt;br/&gt;
-            //slice/s                   : &lt;code data-testid="//slice/s"                 &gt;{ //slice/s                }&lt;/code&gt;  &lt;br/&gt;
-            //slice/s/event/@offsetY    : &lt;code data-testid="//slice/s/event/@offsetY"  &gt;{ //slice/s/event/@offsetY }&lt;/code&gt;  &lt;br/&gt;
-            event type                  : &lt;code data-testid="//slice/s/event/@type"     &gt;{ //slice/s/event/@type    }&lt;/code&gt;
-        &lt;/template&gt;
-    &lt;/custom-element&gt;
-`}
-,   play: async ({canvasElement}) =&gt;
-    {
-        const titleText = RealtimeEventInSlice.args!.title as string;
-        const canvas = within(canvasElement);
-        await canvas.findByText(titleText);
-        const sliceText = ()=&gt; canvas.getByTestId('//slice/s').textContent
-        ,       offsetY = ()=&gt; canvas.getByTestId('//slice/s/event/@offsetY').textContent
-        ,     eventType = ()=&gt; canvas.getByTestId('//slice/s/event/@type').textContent;
-&nbsp;
-        const input = await canvasElement.querySelector('textarea');
-        // expect(input).toBeInTheDocument();
-        expect( sliceText() ).to.equal('', 'initial slot value blank');
-        expect( offsetY()   ).to.equal('', 'initial slot offsetY blank');
-        expect( eventType() ).to.equal('', 'initial slot event blank');
-        const emitXy = ( x, y, eventName ) =&gt;
-        {   const ev = new MouseEvent(eventName,
-            {   screenX:  x,
-                screenY:  y,
-                clientX:  x,
-                clientY:  y,
-                offsetX:  x,
-                offsetY:  y,
-            });
-            input.dispatchEvent( ev );
-        };
-&nbsp;
-        emitXy(10,20,'click');
-        await sleep(10);
-        expect( sliceText() ).to.equal('x:10', 'click slot value 10');
-        expect( Number(offsetY())   ).to.be.lessThan(0, 'offsetY click');
-        expect( eventType() ).to.equal('click', 'click event type');
-    },
-};
-&nbsp;</pre></td></tr></table></pre>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
-            </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>

package/dist/custom-element-B4v-KaIh.cjs DELETED Viewed

@@ -1,53 +0,0 @@
-"use strict";const P="http://www.w3.org/1999/XSL/Transform",I="http://www.w3.org/1999/xhtml",ne="http://exslt.org/common",h=(e,l)=>e.getAttribute?.(l),X=e=>e.nodeType===3,ae=e=>typeof e=="string",re=e=>e&&typeof e.nodeType=="number",N=(e,l="",t=document)=>(s=>(l&&s.append(w(t.ownerDocument||t,l)),s))((t.ownerDocument||t).createElement(e)),w=(e,l)=>(e.ownerDocument||e).createTextNode(l),F=e=>{for(;e.firstChild;)e.firstChild.remove();return e},R=e=>(e.getAttributeNames().map(l=>e.removeAttribute(l)),F(e)),oe=e=>(e?.setAttribute("xmlns:xsl",P),e),ie=e=>(e?.setAttribute("xmlns:xhtml",I),oe(e)),_=(e,l)=>{const t=e.ownerDocument.createElementNS(e.namespaceURI,l);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(;e.firstChild;)t.append(e.firstChild);return t};function S(e){return new DOMParser().parseFromString(e,"application/xml")}function $(e){return new XMLSerializer().serializeToString(e)}function j(e,l,t,s){const n=p=>e.ownerDocument.createElement(p),f=((p,b,u)=>(b.append(u=n(p)),u))(l,e);return[...t].forEach(p=>f.append(s(p))),f}function ce(e){return e.slot||(e.setAttribute||(e=N("span",e.textContent.replaceAll(`
-`,""))),e.setAttribute("slot","")),e}function D(e,l,t){const s=typeof e;if(s==="function")debugger;if(s==="string")return N(l,e,t);if(s==="number")return N(l,""+e,t);if(e instanceof Array){const r=N("array");return e.map(f=>r.append(D(f,l,t))),r}const n=N(l,"",t);for(let r in e)re(e[r])||typeof e[r]=="function"||e[r]instanceof Window||(typeof e[r]!="object"?n.setAttribute(r,e[r]):n.append(D(e[r],r,t)));return n}function U(e){if(C(e,"*",l=>[...l.childNodes].filter(t=>t.nodeType===3).forEach(t=>{if(t.parentNode.localName==="style")return;const s=t.data.matchAll(/{([^}]*)}/g);if(s){let n=0,r=p=>w(t,p||""),f=[];if([...s].forEach(p=>{p.index>n&&f.push(r(p.input.substring(n,p.index)));const b=e.querySelector("value-of").cloneNode();b.setAttribute("select",p[1]),f.push(b),n=p.index+p[0].length}),n<t.data.length&&f.push(r(t.data.substring(n,t.data.length))),f.length){for(let p of f)l.insertBefore(p,t);l.removeChild(t)}}})),"all"in e){let l=1;for(let t of e.all)t.setAttribute&&!t.tagName.startsWith("xsl:")&&t.setAttribute("data-dce-id",""+l++)}return e}function B(e,l="xsl:stylesheet"){if(e.tagName===l||e.documentElement?.tagName===l)return U(e);const t=S(`<xsl:stylesheet version="1.0" xmlns:xsl="${P}" xmlns:xhtml="${I}" xmlns:exsl="${ne}" exclude-result-prefixes="exsl" >
-        <xsl:output method="xml" />
-        <xsl:template match="/"><dce-root xmlns="${I}"><xsl:apply-templates select="*"/></dce-root></xsl:template>
-        <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
-        <xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
-        <xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
-        <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"><xsl:copy><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:copy></xsl:template>
-        <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:element></xsl:template>
-        <xsl:template mode="sanitize" match="*|@*"><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></xsl:template>
-        <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
-        <xsl:template mode="sanitize" match="text()"><dce-text><xsl:copy/></dce-text></xsl:template>
-        <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></xsl:template>
-        <xsl:template mode="sanitize" match="xhtml:*"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:element></xsl:template>
-    </xsl:stylesheet>`),s=new XSLTProcessor,n=(a=>{C(a,"script",g=>g.remove());const i=a.content??a.firstElementChild?.content??a.body??a;te.forEach(g=>C(i,g,x=>se(x,i)));const E=a.firstElementChild?.content||a.content,v=g=>{const x=S("<xhtml/>"),T=x.importNode(g,!0);return x.replaceChild(T,x.documentElement),ie(T)};if(E){const g=N("div");return[...E.childNodes].map(x=>g.append(x.cloneNode(!0))),v(g)}return v(a.documentElement||a.body||a)})(e),r=S(`<xsl:stylesheet version="1.0"
-        xmlns:xsl="${P}"
-        xmlns:xhtml="${I}"
-        xmlns:dce="urn:schemas-epa-wg:dce"
-        xmlns:exsl="http://exslt.org/common"
-        exclude-result-prefixes="exsl"
-    >
-    <xsl:template match="ignore">
-        <xsl:choose>
-            <xsl:when test="//attr">{//attr}</xsl:when>
-            <xsl:otherwise>{def}</xsl:otherwise>
-        </xsl:choose><xsl:value-of select="."></xsl:value-of></xsl:template>
-    <xsl:template mode="payload"  match="attributes"></xsl:template>
-    <xsl:template match="/">
-        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
-    </xsl:template>
-    <xsl:template name="slot" >
-        <xsl:param name="slotname" />
-        <xsl:param name="defaultvalue" />
-        <xsl:choose>
-            <xsl:when test="//payload/*[@slot=$slotname]">
-               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
-            </xsl:otherwise>
-        </xsl:choose>
-    </xsl:template>
-    <xsl:variable name="js-injected-body">
-        <xsl:call-template name="slot" >
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template>
-    </xsl:variable>
-</xsl:stylesheet>`);s.importStylesheet(t);const f=s.transformToFragment(n,document),p=(a,i)=>a.querySelector(i),b=p(r,'template[mode="payload"]');if(!f)return console.error("transformation error",{xml:n.outerHTML,xsl:$(t)});const u=[];[...f.querySelectorAll("dce-root>attribute")].forEach(a=>{const i=_(a,"xsl:param"),E=h(a,"name");b.append(i);let v=h(i,"select")?.split("??");v||(v=["//"+E,`'${i.textContent}'`],R(i),i.setAttribute("name",E));let g;if(v?.length>1){i.removeAttribute("select");const x=p(r,'template[match="ignore"]>choose').cloneNode(!0);R(x.firstElementChild).append(w(x,"{"+v[0]+"}")),R(x.lastElementChild).append(w(x,"{"+v[1]+"}")),x.firstElementChild.setAttribute("test",v[0]),i.append(x),g=x.cloneNode(!0)}else g=_(a,"xsl:value-of");g.removeAttribute("name"),a.append(g),a.removeAttribute("select"),u.push(i)}),[...f.querySelectorAll("[value]")].filter(a=>a.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(a=>{const i=h(a,"value");i&&a.setAttribute("value",ee(i))});for(const a of f.childNodes)b.append(r.importNode(a,!0));[...b.querySelectorAll("template")].forEach(a=>b.ownerDocument.documentElement.append(a));const L=p(r,'call-template[name="slot"]'),d=a=>{const i=L.cloneNode(!0),E=h(a,"name")||"";E&&i.firstElementChild.setAttribute("select",`'${E}'`);for(let v of a.childNodes)i.lastElementChild.append(v);return i};C(b,"slot",a=>a.parentNode.replaceChild(d(a),a));const c=U(r);return c.params=u,c}async function W(e){return await new Promise((t,s)=>{const n=new XMLHttpRequest;n.open("GET",e),n.responseType="document",n.onload=()=>{n.readyState===n.DONE&&n.status===200&&t(n.responseXML||N("div",n.responseText)),s(n.statusText)},n.addEventListener("error",r=>s(r)),n.send()})}function G(e,l,t=!1){if(e===l)return!0;if(typeof e!="object"||e===null||typeof l!="object"||l===null||Object.keys(e).length!==Object.keys(l).length)return t;for(let s in e)if(!(s in l)||!G(e[s],l[s]))return t;return!0}const Y=(e,l)=>l.split("|").map(t=>t.trim()).map(t=>{if(t.includes("/")){const s=[],n=e.ownerDocument.evaluate(t,e);for(let r;r=n.iterateNext();)s.push(r);return s}return[...e.childNodes].find(s=>s.localName===t)||N(t)}).flat();function J(e,l,t,s){Y(e,l).map(n=>{const r=e.ownerDocument,f=t.sliceEventSource,p=t.sliceElement,b=()=>[...n.childNodes].filter(u=>u.nodeType===3||u.localName==="value").map(u=>u.remove());if(f.getAttributeNames().map(u=>n.setAttribute(u,h(f,u))),[...n.childNodes].filter(u=>u.localName==="event").map(u=>u.remove()),t.type==="init"&&b(),n.append(D(t,"event",r)),p.hasAttribute("slice-value")){f.value===void 0?n.removeAttribute("value"):n.setAttribute("value",f.value);const u=k(h(p,"slice-value"),n);b(),n.append(w(r,u))}else{const u=f.value??h(p,"value");b(),u==null?[...n.childNodes].filter(A=>A.localName!=="event").map(A=>A.remove()):ae(u)?n.append(w(r,u)):n.append(D(u,"value",n.ownerDocument))}})}function C(e,l,t){e.querySelectorAll&&[...e.querySelectorAll(l)].forEach(t)}const K=(e,l)=>(t=>e===t?null:t&&(t.querySelector(l)||K(t,l)))(e.getRootNode()),me=async(e,l)=>{if(!e||!e.trim())return[l];if(e.startsWith("#"))return(t=>{if(!t)return[];const s=t.querySelectorAll(e);if(s.length)return[...s];const n=t.getRootNode();return n===t?[]:K(n)})(l.parentElement);try{const t=await W(e),s=new URL(e,location).hash;if(s){const n=t.querySelectorAll(s);return n.length?[...n]:[l]}return[t]}catch{return[l]}};function Q(e,l){if(X(e)){if(!X(l))debugger;return}for(let t of e.attributes)t.namespaceURI?l.setAttributeNS(t.namespaceURI,t.name,t.value):l.setAttribute(t.name,t.value),t.name==="value"&&(l.value=t.value)}function M(e,l=0){const t={};for(const s of e.childNodes){const n=h(s,"data-dce-id")||s.dceId||0;if(!t[n])n?t[n]=1:(t[n]=s.dceId=++l,s.setAttribute&&s.setAttribute("data-dce-id",s.dceId));else{const r=s.dceId=n+"-"+t[n]++;s.setAttribute&&s.setAttribute("data-dce-id",r)}s.childNodes.length&&M(s)}}function H(e,l){if(!l.length)return F(e);const t={};for(let s of e.childNodes)t[s.dceId],X(s)?(s.data.trim(),t[s.dceId||0]=s):t[h(s,"data-dce-id")||0]=s;for(let s of[...l]){const n=h(s,"data-dce-id")||s.dceId,r=t[n];r?(X(s)?r.nodeValue!==s.nodeValue&&(r.nodeValue=s.nodeValue):(Q(s,r),(r.childNodes.length||s.childNodes.length)&&H(r,s.childNodes)),delete t[n]):e.append(s)}for(let s of Object.values(t))s.remove()}function Z(e,l){return e.hasAttribute(l)||e.setAttribute(l,crypto.randomUUID()),e.getAttribute(l)}const ee=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${q(t[3])}}${t[4]}`).join(""),q=e=>{if(!e.trim())return e;const l=e.split("??"),t=l.shift(),s=q(l.join("??"));return l.length?`concat( ${t} , substring( ${s} , (1+string-length( ${s} )) * string-length( ${t} ) ) )`:e},k=(e,l)=>{e=q(e);const t=l.ownerDocument.evaluate(e,l);switch(t.resultType){case XPathResult.NUMBER_TYPE:return t.numberValue;case XPathResult.STRING_TYPE:return t.stringValue}let s="";for(let n;n=t.iterateNext();)s+=n.textContent;return s},te="stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback".split(","),se=(e,l)=>{const t=N("xsl:"+e.localName);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(;e.firstChild;)t.append(e.firstChild);if(e.parentElement)e.parentElement.replaceChild(t,e);else{const s=e.parentElement||l,n=[...s.childNodes];n.forEach((r,f)=>{r===e&&(n[f]=t)}),s.replaceChildren(...n)}};class le extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){const l=await me(h(this,"src"),this),t=h(this,"tag"),s=t||"dce-"+crypto.randomUUID();for(const d of l)C(d.templateNode||d.content||d,"style",c=>{const a=c.closest("slot"),i=a?`slot[name="${a.name}"]`:"";c.innerHTML=`${s} ${i}{${c.innerHTML}}`,this.append(c)});const n=l.map(d=>B(d)),r=n.map((d,c)=>(c=new XSLTProcessor,c.importStylesheet(d),c));Object.defineProperty(this,"xsltString",{get:()=>n.map(d=>$(d)).join(`
-`)});const f=this,p=[...this.templateNode.querySelectorAll("[slice]")],b=p.map(d=>h(d,"slice")).filter(d=>!d.includes("/")).filter((d,c,a)=>a.indexOf(d)===c),u=n.reduce((d,c)=>(c.params&&d.push(...c.params),d),[]);class A extends HTMLElement{static get observedAttributes(){return u.map(c=>h(c,"name"))}#e=0;connectedCallback(){let c=this.childNodes;if(this.firstElementChild?.tagName==="TEMPLATE"){const m=this.firstElementChild;m.remove(),c=m.content.childNodes;for(const o of[...m.content.childNodes])if(o.localName==="style"){const y=Z(this,"data-dce-style");o.innerHTML=`${s}[data-dce-style="${y}"]{${o.innerHTML}}`,m.insertAdjacentElement("beforebegin",o)}else o.nodeType===1?m.insertAdjacentElement("beforebegin",o):o.nodeType===3&&m.insertAdjacentText("beforebegin",o.data)}const a=S("<datadom/>").documentElement,i=(m,o="")=>(y=>(o&&y.append(w(a,o)),y))(a.ownerDocument.createElement(m));j(a,"payload",c,ce),this.innerHTML="",j(a,"attributes",this.attributes,m=>i(m.nodeName,m.value)),j(a,"dataset",Object.keys(this.dataset),m=>i(m,this.dataset[m]));const E=j(a,"slice",b,m=>i(m,"")),v=m=>k(m,E);this.xml=a;const g=[],x=()=>{const m={};for(let o;o=g.pop();){const y=h(o.sliceElement,"slice");m[y]||(J(E,y,o),m[y]=o)}Object.keys(m).length!==0&&O()};let T;this.onSlice=m=>{m.stopPropagation?.(),m.sliceEventSource=m.currentTarget||m.target,g.push(m),T||(T=setTimeout(()=>{x(),T=0},10))};const O=this.transform=()=>{if(this.#e)debugger;this.#e=1,r.map((o,y)=>{const z=o.transformToFragment(a.ownerDocument,document);return z||console.error(`XSLT transformation error. xsl:
-`,$(n[y]),`
-xml:
-`,$(a)),z}).map(o=>{o&&(M(o),H(this,o.childNodes))}),A.observedAttributes.map(o=>{let y=h(this.firstElementChild,o);y!==h(this,o)&&(this.setAttribute(o,y),this.#t(o,y))}),C(this,"[slice]",o=>{if(!o.dceInitialized){o.dceInitialized=1;const y=h(o,"slice-event");(y||"change").split(" ").forEach(z=>(o.localName==="slice"?o.parentElement:o).addEventListener(z,V=>{V.sliceElement=o,this.onSlice(V)})),(!y||y.includes("init"))&&(o.hasAttribute("slice-value")||o.hasAttribute("value")||o.value?this.onSlice({type:"init",target:o,sliceElement:o}):o.value=v(h(o,"slice")))}}),this.#e=0};O(),x()}#t(c,a){let i=this.xml.querySelector(`attributes>${c}`);i?R(i).append(w(i,a)):(i=N(c,a,this.xml),this.xml.querySelector("attributes").append(i))}attributeChangedCallback(c,a,i){!this.xml||this.#e||(this.#t(c,i),this.transform())}get dce(){return f}}const L=d=>{window.customElements.get(d)!==A&&window.customElements.define(d,A)};if(t)L(t);else{const d=s;this.setAttribute("tag",d),L(d);const c=document.createElement(d);this.getAttributeNames().forEach(a=>c.setAttribute(a,this.getAttribute(a))),c.append(...[...this.childNodes].filter(a=>a.localName!=="style")),this.append(c)}}get templateNode(){return this.firstElementChild?.tagName==="TEMPLATE"?this.firstElementChild.content:this}get dce(){return this}get xslt(){return S(this.xsltString)}}window.customElements.define("custom-element",le);exports.CustomElement=le;exports.assureSlices=Y;exports.assureUID=Z;exports.assureUnique=M;exports.createXsltFromDom=B;exports.deepEqual=G;exports.evalCurly=ee;exports.event2slice=J;exports.merge=H;exports.mergeAttr=Q;exports.obj2node=D;exports.tagUid=U;exports.toXsl=se;exports.xPath=k;exports.xPathDefaults=q;exports.xhrTemplate=W;exports.xml2dom=S;exports.xmlString=$;exports.xslTags=te;