@spectrum-web-components/vrt-compare 1.1.0 → 1.1.1

package/onion-skinner.dev.js

@@ -0,0 +1,4 @@
+"use strict";
+import { OnionSkinner } from "./src/OnionSkinner.dev.js";
+customElements.define("onion-skinner", OnionSkinner);
+//# sourceMappingURL=onion-skinner.dev.js.map

package/onion-skinner.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["onion-skinner.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { OnionSkinner } from './src/OnionSkinner.dev.js'\n\ncustomElements.define('onion-skinner', OnionSkinner);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'onion-skinner': OnionSkinner;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,oBAAoB;AAE7B,eAAe,OAAO,iBAAiB,YAAY;",
+  "names": []
+}

package/onion-skinner.js

@@ -0,0 +1,2 @@
+"use strict";import{OnionSkinner as n}from"./src/OnionSkinner.js";customElements.define("onion-skinner",n);
+//# sourceMappingURL=onion-skinner.js.map

package/onion-skinner.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["onion-skinner.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { OnionSkinner } from './src/OnionSkinner.js';\n\ncustomElements.define('onion-skinner', OnionSkinner);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'onion-skinner': OnionSkinner;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,gBAAAA,MAAoB,wBAE7B,eAAe,OAAO,gBAAiBA,CAAY",
+  "names": ["OnionSkinner"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/vrt-compare",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "publishConfig": {
         "access": "public"
     },
@@ -60,15 +60,15 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/action-bar": "^1.1.0",
-        "@spectrum-web-components/action-button": "^1.1.0",
-        "@spectrum-web-components/action-group": "^1.1.0",
-        "@spectrum-web-components/base": "^1.1.0",
-        "@spectrum-web-components/icons-workflow": "^1.1.0",
-        "@spectrum-web-components/shared": "^1.1.0",
-        "@spectrum-web-components/split-view": "^1.1.0",
-        "@spectrum-web-components/styles": "^1.1.0",
-        "@spectrum-web-components/theme": "^1.1.0"
+        "@spectrum-web-components/action-bar": "^1.1.1",
+        "@spectrum-web-components/action-button": "^1.1.1",
+        "@spectrum-web-components/action-group": "^1.1.1",
+        "@spectrum-web-components/base": "^1.1.1",
+        "@spectrum-web-components/icons-workflow": "^1.1.1",
+        "@spectrum-web-components/shared": "^1.1.1",
+        "@spectrum-web-components/split-view": "^1.1.1",
+        "@spectrum-web-components/styles": "^1.1.1",
+        "@spectrum-web-components/theme": "^1.1.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -78,5 +78,5 @@
         "./vrt-compare.js",
         "./vrt-compare.ts"
     ],
-    "gitHead": "e3c6e52501451acc6fa85b10dd718267b80a01ab"
+    "gitHead": "44870aa95001c1b995456d994ae31bbe7277fac9"
 }

package/src/OnionSkinner.dev.js

@@ -0,0 +1,129 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { css, html, SpectrumElement } from "@spectrum-web-components/base";
+import {
+  property,
+  queryAssignedNodes
+} from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/thumbnail/sp-thumbnail.js";
+import "@spectrum-web-components/overlay/sync/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+export class OnionSkinner extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.onionLevel = 0.5;
+  }
+  handleOnionInput(event) {
+    this.onionLevel = event.target.value;
+  }
+  handleSlotchange() {
+    const images = [...this.assignments].filter(
+      (node) => node.tagName && node.matches("img")
+    );
+    if (images[0]) {
+      this.leftThumbnail = images[0].cloneNode();
+      this.leftThumbnail.removeAttribute("slot");
+    }
+    if (images[1]) {
+      this.rightThumbnail = images[1].cloneNode();
+      this.rightThumbnail.removeAttribute("slot");
+    }
+    if (images.length) {
+      this.requestUpdate();
+    }
+  }
+  allLeft() {
+    this.onionLevel = 0;
+  }
+  allRight() {
+    this.onionLevel = 1;
+  }
+  render() {
+    return html`
+            <slot
+                @slotchange=${this.handleSlotchange}
+                style="--onion-level: ${this.onionLevel}"
+            ></slot>
+            <div class="controls">
+                <overlay-trigger placement="top">
+                    <sp-thumbnail
+                        slot="trigger"
+                        size="xl"
+                        @click=${this.allLeft}
+                    >
+                        ${this.leftThumbnail}
+                    </sp-thumbnail>
+                    <sp-tooltip slot="hover-content">
+                        Baseline screenshot
+                    </sp-tooltip>
+                </overlay-trigger>
+                <sp-slider
+                    min="0"
+                    max="1"
+                    step="0.001"
+                    .value=${this.onionLevel}
+                    .getAriaValueText=${() => ""}
+                    @input=${this.handleOnionInput}
+                ></sp-slider>
+                <overlay-trigger placement="top">
+                    <sp-thumbnail
+                        slot="trigger"
+                        size="xl"
+                        @click=${this.allRight}
+                    >
+                        ${this.rightThumbnail}
+                    </sp-thumbnail>
+                    <sp-tooltip slot="hover-content">
+                        Current screenshot
+                    </sp-tooltip>
+                </overlay-trigger>
+            </div>
+        `;
+  }
+}
+OnionSkinner.styles = [
+  css`
+            :host {
+                display: grid;
+                grid-template-areas: 'main';
+            }
+            ::slotted(*) {
+                grid-area: main;
+            }
+            ::slotted(:first-child) {
+                opacity: calc(1 - var(--onion-level));
+            }
+            ::slotted(:last-child) {
+                opacity: var(--onion-level);
+            }
+            .controls {
+                display: flex;
+                gap: 1em;
+                margin: 0.25em;
+                align-items: center;
+            }
+            sp-slider {
+                flex-grow: 1;
+            }
+        `
+];
+__decorateClass([
+  property({ type: Number })
+], OnionSkinner.prototype, "onionLevel", 2);
+__decorateClass([
+  queryAssignedNodes({
+    slot: "",
+    flatten: true
+  })
+], OnionSkinner.prototype, "assignments", 2);
+//# sourceMappingURL=OnionSkinner.dev.js.map

package/src/OnionSkinner.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["OnionSkinner.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css, html, SpectrumElement } from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { Slider } from '@spectrum-web-components/slider';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/thumbnail/sp-thumbnail.js';\nimport '@spectrum-web-components/overlay/sync/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\n\nexport class OnionSkinner extends SpectrumElement {\n    @property({ type: Number }) public onionLevel = 0.5;\n\n    @queryAssignedNodes({\n        slot: '',\n        flatten: true,\n    })\n    private assignments!: NodeListOf<HTMLImageElement>;\n\n    private leftThumbnail?: HTMLImageElement;\n    private rightThumbnail?: HTMLImageElement;\n\n    private handleOnionInput(event: Event & { target: Slider }) {\n        this.onionLevel = event.target.value;\n    }\n\n    private handleSlotchange() {\n        const images = [...this.assignments].filter(\n            (node) => node.tagName && node.matches('img')\n        );\n        if (images[0]) {\n            this.leftThumbnail = images[0].cloneNode() as HTMLImageElement;\n            this.leftThumbnail.removeAttribute('slot');\n        }\n        if (images[1]) {\n            this.rightThumbnail = images[1].cloneNode() as HTMLImageElement;\n            this.rightThumbnail.removeAttribute('slot');\n        }\n        if (images.length) {\n            this.requestUpdate();\n        }\n    }\n\n    private allLeft() {\n        this.onionLevel = 0;\n    }\n\n    private allRight() {\n        this.onionLevel = 1;\n    }\n\n    override render() {\n        return html`\n            <slot\n                @slotchange=${this.handleSlotchange}\n                style=\"--onion-level: ${this.onionLevel}\"\n            ></slot>\n            <div class=\"controls\">\n                <overlay-trigger placement=\"top\">\n                    <sp-thumbnail\n                        slot=\"trigger\"\n                        size=\"xl\"\n                        @click=${this.allLeft}\n                    >\n                        ${this.leftThumbnail}\n                    </sp-thumbnail>\n                    <sp-tooltip slot=\"hover-content\">\n                        Baseline screenshot\n                    </sp-tooltip>\n                </overlay-trigger>\n                <sp-slider\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.001\"\n                    .value=${this.onionLevel}\n                    .getAriaValueText=${() => ''}\n                    @input=${this.handleOnionInput}\n                ></sp-slider>\n                <overlay-trigger placement=\"top\">\n                    <sp-thumbnail\n                        slot=\"trigger\"\n                        size=\"xl\"\n                        @click=${this.allRight}\n                    >\n                        ${this.rightThumbnail}\n                    </sp-thumbnail>\n                    <sp-tooltip slot=\"hover-content\">\n                        Current screenshot\n                    </sp-tooltip>\n                </overlay-trigger>\n            </div>\n        `;\n    }\n\n    static override styles = [\n        css`\n            :host {\n                display: grid;\n                grid-template-areas: 'main';\n            }\n            ::slotted(*) {\n                grid-area: main;\n            }\n            ::slotted(:first-child) {\n                opacity: calc(1 - var(--onion-level));\n            }\n            ::slotted(:last-child) {\n                opacity: var(--onion-level);\n            }\n            .controls {\n                display: flex;\n                gap: 1em;\n                margin: 0.25em;\n                align-items: center;\n            }\n            sp-slider {\n                flex-grow: 1;\n            }\n        `,\n    ];\n}\n"],
+  "mappings": ";;;;;;;;;;;AAWA,SAAS,KAAK,MAAM,uBAAuB;AAC3C;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEA,aAAM,qBAAqB,gBAAgB;AAAA,EAA3C;AAAA;AACyB,SAAO,aAAa;AAAA;AAAA,EAWxC,iBAAiB,OAAmC;AACxD,SAAK,aAAa,MAAM,OAAO;AAAA,EACnC;AAAA,EAEQ,mBAAmB;AACvB,UAAM,SAAS,CAAC,GAAG,KAAK,WAAW,EAAE;AAAA,MACjC,CAAC,SAAS,KAAK,WAAW,KAAK,QAAQ,KAAK;AAAA,IAChD;AACA,QAAI,OAAO,CAAC,GAAG;AACX,WAAK,gBAAgB,OAAO,CAAC,EAAE,UAAU;AACzC,WAAK,cAAc,gBAAgB,MAAM;AAAA,IAC7C;AACA,QAAI,OAAO,CAAC,GAAG;AACX,WAAK,iBAAiB,OAAO,CAAC,EAAE,UAAU;AAC1C,WAAK,eAAe,gBAAgB,MAAM;AAAA,IAC9C;AACA,QAAI,OAAO,QAAQ;AACf,WAAK,cAAc;AAAA,IACvB;AAAA,EACJ;AAAA,EAEQ,UAAU;AACd,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,WAAW;AACf,SAAK,aAAa;AAAA,EACtB;AAAA,EAES,SAAS;AACd,WAAO;AAAA;AAAA,8BAEe,KAAK,gBAAgB;AAAA,wCACX,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAOtB,KAAK,OAAO;AAAA;AAAA,0BAEnB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAUf,KAAK,UAAU;AAAA,wCACJ,MAAM,EAAE;AAAA,6BACnB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMjB,KAAK,QAAQ;AAAA;AAAA,0BAEpB,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQzC;AA4BJ;AA9Ga,aAoFO,SAAS;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBJ;AA5GmC;AAAA,EAAlC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADjB,aAC0B;AAM3B;AAAA,EAJP,mBAAmB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA,EACb,CAAC;AAAA,GANQ,aAOD;",
+  "names": []
+}

package/src/OnionSkinner.js

@@ -0,0 +1,64 @@
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(s,l,e,t)=>{for(var i=t>1?void 0:t?m(l,e):l,o=s.length-1,r;o>=0;o--)(r=s[o])&&(i=(t?r(l,e,i):r(i))||i);return t&&i&&n(l,e,i),i};import{css as h,html as p,SpectrumElement as g}from"@spectrum-web-components/base";import{property as v,queryAssignedNodes as c}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-components/thumbnail/sp-thumbnail.js";import"@spectrum-web-components/overlay/sync/overlay-trigger.js";import"@spectrum-web-components/tooltip/sp-tooltip.js";export class OnionSkinner extends g{constructor(){super(...arguments);this.onionLevel=.5}handleOnionInput(e){this.onionLevel=e.target.value}handleSlotchange(){const e=[...this.assignments].filter(t=>t.tagName&&t.matches("img"));e[0]&&(this.leftThumbnail=e[0].cloneNode(),this.leftThumbnail.removeAttribute("slot")),e[1]&&(this.rightThumbnail=e[1].cloneNode(),this.rightThumbnail.removeAttribute("slot")),e.length&&this.requestUpdate()}allLeft(){this.onionLevel=0}allRight(){this.onionLevel=1}render(){return p`
+            <slot
+                @slotchange=${this.handleSlotchange}
+                style="--onion-level: ${this.onionLevel}"
+            ></slot>
+            <div class="controls">
+                <overlay-trigger placement="top">
+                    <sp-thumbnail
+                        slot="trigger"
+                        size="xl"
+                        @click=${this.allLeft}
+                    >
+                        ${this.leftThumbnail}
+                    </sp-thumbnail>
+                    <sp-tooltip slot="hover-content">
+                        Baseline screenshot
+                    </sp-tooltip>
+                </overlay-trigger>
+                <sp-slider
+                    min="0"
+                    max="1"
+                    step="0.001"
+                    .value=${this.onionLevel}
+                    .getAriaValueText=${()=>""}
+                    @input=${this.handleOnionInput}
+                ></sp-slider>
+                <overlay-trigger placement="top">
+                    <sp-thumbnail
+                        slot="trigger"
+                        size="xl"
+                        @click=${this.allRight}
+                    >
+                        ${this.rightThumbnail}
+                    </sp-thumbnail>
+                    <sp-tooltip slot="hover-content">
+                        Current screenshot
+                    </sp-tooltip>
+                </overlay-trigger>
+            </div>
+        `}}OnionSkinner.styles=[h`
+            :host {
+                display: grid;
+                grid-template-areas: 'main';
+            }
+            ::slotted(*) {
+                grid-area: main;
+            }
+            ::slotted(:first-child) {
+                opacity: calc(1 - var(--onion-level));
+            }
+            ::slotted(:last-child) {
+                opacity: var(--onion-level);
+            }
+            .controls {
+                display: flex;
+                gap: 1em;
+                margin: 0.25em;
+                align-items: center;
+            }
+            sp-slider {
+                flex-grow: 1;
+            }
+        `],a([v({type:Number})],OnionSkinner.prototype,"onionLevel",2),a([c({slot:"",flatten:!0})],OnionSkinner.prototype,"assignments",2);
+//# sourceMappingURL=OnionSkinner.js.map

package/src/OnionSkinner.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["OnionSkinner.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css, html, SpectrumElement } from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { Slider } from '@spectrum-web-components/slider';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/thumbnail/sp-thumbnail.js';\nimport '@spectrum-web-components/overlay/sync/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\n\nexport class OnionSkinner extends SpectrumElement {\n    @property({ type: Number }) public onionLevel = 0.5;\n\n    @queryAssignedNodes({\n        slot: '',\n        flatten: true,\n    })\n    private assignments!: NodeListOf<HTMLImageElement>;\n\n    private leftThumbnail?: HTMLImageElement;\n    private rightThumbnail?: HTMLImageElement;\n\n    private handleOnionInput(event: Event & { target: Slider }) {\n        this.onionLevel = event.target.value;\n    }\n\n    private handleSlotchange() {\n        const images = [...this.assignments].filter(\n            (node) => node.tagName && node.matches('img')\n        );\n        if (images[0]) {\n            this.leftThumbnail = images[0].cloneNode() as HTMLImageElement;\n            this.leftThumbnail.removeAttribute('slot');\n        }\n        if (images[1]) {\n            this.rightThumbnail = images[1].cloneNode() as HTMLImageElement;\n            this.rightThumbnail.removeAttribute('slot');\n        }\n        if (images.length) {\n            this.requestUpdate();\n        }\n    }\n\n    private allLeft() {\n        this.onionLevel = 0;\n    }\n\n    private allRight() {\n        this.onionLevel = 1;\n    }\n\n    override render() {\n        return html`\n            <slot\n                @slotchange=${this.handleSlotchange}\n                style=\"--onion-level: ${this.onionLevel}\"\n            ></slot>\n            <div class=\"controls\">\n                <overlay-trigger placement=\"top\">\n                    <sp-thumbnail\n                        slot=\"trigger\"\n                        size=\"xl\"\n                        @click=${this.allLeft}\n                    >\n                        ${this.leftThumbnail}\n                    </sp-thumbnail>\n                    <sp-tooltip slot=\"hover-content\">\n                        Baseline screenshot\n                    </sp-tooltip>\n                </overlay-trigger>\n                <sp-slider\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.001\"\n                    .value=${this.onionLevel}\n                    .getAriaValueText=${() => ''}\n                    @input=${this.handleOnionInput}\n                ></sp-slider>\n                <overlay-trigger placement=\"top\">\n                    <sp-thumbnail\n                        slot=\"trigger\"\n                        size=\"xl\"\n                        @click=${this.allRight}\n                    >\n                        ${this.rightThumbnail}\n                    </sp-thumbnail>\n                    <sp-tooltip slot=\"hover-content\">\n                        Current screenshot\n                    </sp-tooltip>\n                </overlay-trigger>\n            </div>\n        `;\n    }\n\n    static override styles = [\n        css`\n            :host {\n                display: grid;\n                grid-template-areas: 'main';\n            }\n            ::slotted(*) {\n                grid-area: main;\n            }\n            ::slotted(:first-child) {\n                opacity: calc(1 - var(--onion-level));\n            }\n            ::slotted(:last-child) {\n                opacity: var(--onion-level);\n            }\n            .controls {\n                display: flex;\n                gap: 1em;\n                margin: 0.25em;\n                align-items: center;\n            }\n            sp-slider {\n                flex-grow: 1;\n            }\n        `,\n    ];\n}\n"],
+  "mappings": "qNAWA,OAAS,OAAAA,EAAK,QAAAC,EAAM,mBAAAC,MAAuB,gCAC3C,OACI,YAAAC,EACA,sBAAAC,MACG,kDAEP,MAAO,+CACP,MAAO,qDACP,MAAO,2DACP,MAAO,iDAEA,aAAM,qBAAqBF,CAAgB,CAA3C,kCACyB,KAAO,WAAa,GAWxC,iBAAiBG,EAAmC,CACxD,KAAK,WAAaA,EAAM,OAAO,KACnC,CAEQ,kBAAmB,CACvB,MAAMC,EAAS,CAAC,GAAG,KAAK,WAAW,EAAE,OAChCC,GAASA,EAAK,SAAWA,EAAK,QAAQ,KAAK,CAChD,EACID,EAAO,CAAC,IACR,KAAK,cAAgBA,EAAO,CAAC,EAAE,UAAU,EACzC,KAAK,cAAc,gBAAgB,MAAM,GAEzCA,EAAO,CAAC,IACR,KAAK,eAAiBA,EAAO,CAAC,EAAE,UAAU,EAC1C,KAAK,eAAe,gBAAgB,MAAM,GAE1CA,EAAO,QACP,KAAK,cAAc,CAE3B,CAEQ,SAAU,CACd,KAAK,WAAa,CACtB,CAEQ,UAAW,CACf,KAAK,WAAa,CACtB,CAES,QAAS,CACd,OAAOL;AAAA;AAAA,8BAEe,KAAK,gBAAgB;AAAA,wCACX,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAOtB,KAAK,OAAO;AAAA;AAAA,0BAEnB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAUf,KAAK,UAAU;AAAA,wCACJ,IAAM,EAAE;AAAA,6BACnB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMjB,KAAK,QAAQ;AAAA;AAAA,0BAEpB,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAQzC,CA4BJ,CA9Ga,aAoFO,OAAS,CACrBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAwBJ,EA5GmCQ,EAAA,CAAlCL,EAAS,CAAE,KAAM,MAAO,CAAC,GADjB,aAC0B,0BAM3BK,EAAA,CAJPJ,EAAmB,CAChB,KAAM,GACN,QAAS,EACb,CAAC,GANQ,aAOD",
+  "names": ["css", "html", "SpectrumElement", "property", "queryAssignedNodes", "event", "images", "node", "__decorateClass"]
+}

package/src/VrtCompare.dev.js

@@ -0,0 +1,402 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  css,
+  html,
+  nothing,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ObserveSlotPresence } from "@spectrum-web-components/shared";
+import bodyStyles from "@spectrum-web-components/styles/body.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/split-view/sp-split-view.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js";
+import "@spectrum-web-components/action-bar/sp-action-bar.js";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import "../onion-skinner.dev.js";
+export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
+  '[slot="actual"]',
+  '[slot="baseline"]',
+  '[slot="diff"]'
+]) {
+  constructor() {
+    super(...arguments);
+    this.view = "scrubber";
+    this.zoom = 1;
+    this.imagesLoaded = false;
+    this._loadingImages = false;
+  }
+  get hasActual() {
+    return this.getSlotContentPresence('[slot="actual"]');
+  }
+  get hasBaseline() {
+    return this.getSlotContentPresence('[slot="baseline"]');
+  }
+  get hasDiff() {
+    return this.getSlotContentPresence('[slot="diff"]');
+  }
+  get canCompare() {
+    return this.hasActual && this.hasBaseline;
+  }
+  handleChange(event) {
+    const view = event.target.selected[0];
+    if (view) {
+      this.view = view;
+    }
+  }
+  handleZoomIn() {
+    this.zoom += 0.1;
+  }
+  handleZoomClear() {
+    this.zoom = 1;
+  }
+  handleZoomOut() {
+    this.zoom -= 0.1;
+  }
+  get error() {
+    return html`
+            <sp-icon-alert class="icon" size="xl"></sp-icon-alert>
+            <p class="spectrum-Body spectrum-Body--sizeXL">
+                Please be sure to supply some combination of actual, baseline,
+                and diff screenshots for review.
+            </p>
+        `;
+  }
+  get actual() {
+    return html`
+            <div class="view actual">
+                <slot name="actual"></slot>
+            </div>
+        `;
+  }
+  get baseline() {
+    return html`
+            <div class="view baseline">
+                <slot name="baseline"></slot>
+            </div>
+        `;
+  }
+  get diff() {
+    return html`
+            <div class="view diff">
+                <slot name="diff"></slot>
+            </div>
+        `;
+  }
+  get scrubber() {
+    return html`
+            <sp-split-view resizable primary-size="50%">
+                ${this.baseline} ${this.actual}
+            </sp-split-view>
+        `;
+  }
+  get sidebyside() {
+    return html`
+            ${this.baseline} ${this.actual}
+        `;
+  }
+  get onion() {
+    return html`
+            <onion-skinner>
+                <slot name="baseline"></slot>
+                <slot name="actual"></slot>
+            </onion-skinner>
+        `;
+  }
+  get renderView() {
+    switch (this.view) {
+      case "error":
+        return this.error;
+      case "actual":
+        return this.actual;
+      case "baseline":
+        return this.baseline;
+      case "diff":
+        return this.diff;
+      case "onion":
+        return this.onion;
+      case "sidebyside":
+        return this.sidebyside;
+      case "scrubber":
+      default:
+        return this.scrubber;
+    }
+  }
+  get viewFallback() {
+    if (this.canCompare) {
+      return "scrubber";
+    } else if (this.hasActual) {
+      return "actual";
+    } else if (this.hasBaseline) {
+      return "baseline";
+    } else if (this.hasDiff) {
+      return "diff";
+    } else {
+      return "error";
+    }
+  }
+  async prepImages(event) {
+    const slot = event.target;
+    if (this._loadingImages || !slot.assignedNodes().length) {
+      return;
+    }
+    this._loadingImages = true;
+    this.imagesLoaded = false;
+    const images = [...this.querySelectorAll("img")];
+    if (!images.length) {
+      this.imagesLoaded = true;
+      this._loadingImages = false;
+      return;
+    }
+    const imageLoadPromises = images.map((img) => {
+      if (img.naturalWidth) {
+        this.style.setProperty(
+          "--image-width",
+          `${img.naturalWidth}px`
+        );
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        img.addEventListener("load", () => {
+          this.style.setProperty(
+            "--image-width",
+            `${img.naturalWidth}px`
+          );
+          resolve(true);
+        });
+      });
+    });
+    await Promise.all(imageLoadPromises);
+    this.imagesLoaded = true;
+    this._loadingImages = false;
+  }
+  shouldUpdate() {
+    if (this.view === "error" || this.view === "actual" && !this.hasActual || this.view === "baseline" && !this.hasBaseline || this.view === "diff" && !this.hasDiff || (this.view === "onion" || this.view === "sidebyside" || this.view === "scrubber") && !this.canCompare) {
+      this.view = this.viewFallback;
+    }
+    return true;
+  }
+  render() {
+    if (this._loadingImages) {
+      return html`
+                <sp-progress-circle indeterminate></sp-progress-circle>
+                <slot
+                    name="actual"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot
+                    name="baseline"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot name="diff" @slotchange=${this.prepImages} hidden></slot>
+            `;
+    }
+    if (!this.imagesLoaded) {
+      return html`
+                <p class="spectrum-Body spectrum-Body--sizeXL">
+                    Choose a test to review on the left...
+                </p>
+                <slot
+                    name="actual"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot
+                    name="baseline"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot name="diff" @slotchange=${this.prepImages} hidden></slot>
+            `;
+    }
+    return html`
+            <sp-action-group
+                selects="single"
+                compact
+                emphasized
+                @change=${this.handleChange}
+            >
+                ${this.view !== "error" ? nothing : html`
+                          <sp-action-button value="error" disabled>
+                              Error
+                          </sp-action-button>
+                      `}
+                ${!this.canCompare ? nothing : html`
+                          <sp-action-button
+                              value="scrubber"
+                              ?selected=${this.view === "scrubber"}
+                          >
+                              Scrubber
+                          </sp-action-button>
+                          <sp-action-button
+                              value="onion"
+                              ?selected=${this.view === "onion"}
+                          >
+                              Onion skin
+                          </sp-action-button>
+                          <sp-action-button
+                              value="sidebyside"
+                              ?selected=${this.view === "sidebyside"}
+                          >
+                              Side by side
+                          </sp-action-button>
+                      `}
+                ${!this.hasDiff ? nothing : html`
+                          <sp-action-button
+                              value="diff"
+                              ?selected=${this.view === "diff"}
+                          >
+                              Diff
+                          </sp-action-button>
+                      `}
+                ${!this.hasActual ? nothing : html`
+                          <sp-action-button
+                              value="actual"
+                              ?selected=${this.view === "actual"}
+                          >
+                              Actual
+                          </sp-action-button>
+                      `}
+                ${!this.hasBaseline ? nothing : html`
+                          <sp-action-button
+                              value="baseline"
+                              ?selected=${this.view === "baseline"}
+                          >
+                              Baseline
+                          </sp-action-button>
+                      `}
+            </sp-action-group>
+            <div class="review ${this.view}">${this.renderView}</div>
+            <sp-action-group compact class="zoom-controls">
+                <sp-action-button
+                    @click=${this.handleZoomOut}
+                    ?disabled=${this.zoom <= 0.5}
+                >
+                    <sp-icon-zoom-out slot="icon"></sp-icon-zoom-out>
+                </sp-action-button>
+                <sp-action-button @click=${this.handleZoomClear}>
+                    <sp-icon-refresh slot="icon"></sp-icon-refresh>
+                </sp-action-button>
+                <sp-action-button
+                    @click=${this.handleZoomIn}
+                    ?disabled=${this.zoom >= 2}
+                >
+                    <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
+                </sp-action-button>
+            </sp-action-group>
+        `;
+  }
+  updated(changes) {
+    if (changes.has("zoom")) {
+      let zoom = Math.min(this.zoom, 2);
+      zoom = Math.min(zoom, 0.5);
+      this.style.setProperty("--zoom-level", `${this.zoom}`);
+    }
+  }
+}
+VrtCompare.styles = [
+  css`
+            :host {
+                display: grid;
+                max-width: 100%;
+                overflow: auto;
+                margin: 0 auto;
+                position: relative;
+
+                --image-display-width: calc(
+                    var(--zoom-level, 1) * var(--image-width, 500px)
+                );
+            }
+            sp-progress-circle {
+                margin: auto;
+                place-self: center;
+            }
+            .review {
+                margin: 100px auto 0;
+                display: flex;
+                width: var(--image-display-width);
+                place-self: start;
+            }
+            .error {
+                flex-direction: column;
+            }
+            ::slotted(img) {
+                display: flex;
+                pointer-events: none;
+            }
+            sp-action-group[selects] {
+                margin-bottom: 1em;
+                justify-content: center;
+                position: fixed;
+                top: calc(var(--swc-scale-factor) * 8px);
+                right: calc(var(--swc-scale-factor) * 8px);
+            }
+            .sidebyside {
+                display: flex;
+                gap: 2px;
+            }
+            .sidebyside ::slotted(img) {
+                width: 100%;
+            }
+            .view {
+                overflow: hidden;
+            }
+            .review:is(.baseline, .actual, .diff) .view,
+            .review:is(.baseline, .actual, .diff) ::slotted(img) {
+                width: 100%;
+            }
+            sp-split-view {
+                width: var(--image-display-width);
+            }
+            sp-split-view ::slotted(img) {
+                width: var(--image-display-width);
+                height: auto;
+                flex-shrink: 0;
+            }
+            sp-split-view .actual ::slotted(img) {
+                float: right;
+            }
+            p {
+                text-align: center;
+                margin: 0 3em;
+            }
+            .icon {
+                margin: 0 auto 2em;
+                display: flex;
+                color: var(--spectrum-semantic-negative-color-background);
+            }
+            .zoom-controls {
+                position: fixed;
+                bottom: calc(var(--swc-scale-factor) * 8px);
+                left: calc(var(--swc-scale-factor) * 8px);
+                z-index: 1;
+            }
+        `,
+  bodyStyles
+];
+__decorateClass([
+  property()
+], VrtCompare.prototype, "view", 2);
+__decorateClass([
+  property({ type: Number })
+], VrtCompare.prototype, "zoom", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], VrtCompare.prototype, "imagesLoaded", 2);
+//# sourceMappingURL=VrtCompare.dev.js.map

package/src/VrtCompare.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["VrtCompare.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    css,\n    html,\n    nothing,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/split-view/sp-split-view.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js';\nimport '@spectrum-web-components/action-bar/sp-action-bar.js';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '../onion-skinner.dev.js'\n\nexport class VrtCompare extends ObserveSlotPresence(SpectrumElement, [\n    '[slot=\"actual\"]',\n    '[slot=\"baseline\"]',\n    '[slot=\"diff\"]',\n]) {\n    @property()\n    public view = 'scrubber';\n\n    @property({ type: Number })\n    public zoom = 1;\n\n    @property({ type: Boolean, attribute: false })\n    public imagesLoaded = false;\n\n    private get hasActual(): boolean {\n        return this.getSlotContentPresence('[slot=\"actual\"]');\n    }\n\n    private get hasBaseline(): boolean {\n        return this.getSlotContentPresence('[slot=\"baseline\"]');\n    }\n\n    private get hasDiff(): boolean {\n        return this.getSlotContentPresence('[slot=\"diff\"]');\n    }\n\n    private get canCompare(): boolean {\n        return this.hasActual && this.hasBaseline;\n    }\n\n    private handleChange(event: Event & { target: ActionGroup }) {\n        const view = event.target.selected[0];\n        if (view) {\n            this.view = view;\n        }\n    }\n\n    private handleZoomIn() {\n        this.zoom += 0.1;\n    }\n\n    private handleZoomClear() {\n        this.zoom = 1;\n    }\n\n    private handleZoomOut() {\n        this.zoom -= 0.1;\n    }\n\n    protected get error() {\n        return html`\n            <sp-icon-alert class=\"icon\" size=\"xl\"></sp-icon-alert>\n            <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n                Please be sure to supply some combination of actual, baseline,\n                and diff screenshots for review.\n            </p>\n        `;\n    }\n\n    protected get actual() {\n        return html`\n            <div class=\"view actual\">\n                <slot name=\"actual\"></slot>\n            </div>\n        `;\n    }\n\n    protected get baseline() {\n        return html`\n            <div class=\"view baseline\">\n                <slot name=\"baseline\"></slot>\n            </div>\n        `;\n    }\n\n    protected get diff() {\n        return html`\n            <div class=\"view diff\">\n                <slot name=\"diff\"></slot>\n            </div>\n        `;\n    }\n\n    protected get scrubber() {\n        return html`\n            <sp-split-view resizable primary-size=\"50%\">\n                ${this.baseline} ${this.actual}\n            </sp-split-view>\n        `;\n    }\n\n    protected get sidebyside() {\n        return html`\n            ${this.baseline} ${this.actual}\n        `;\n    }\n\n    protected get onion() {\n        return html`\n            <onion-skinner>\n                <slot name=\"baseline\"></slot>\n                <slot name=\"actual\"></slot>\n            </onion-skinner>\n        `;\n    }\n\n    protected get renderView() {\n        switch (this.view) {\n            case 'error':\n                return this.error;\n            case 'actual':\n                return this.actual;\n            case 'baseline':\n                return this.baseline;\n            case 'diff':\n                return this.diff;\n            case 'onion':\n                return this.onion;\n            case 'sidebyside':\n                return this.sidebyside;\n            case 'scrubber':\n            default:\n                return this.scrubber;\n        }\n    }\n\n    private get viewFallback() {\n        if (this.canCompare) {\n            return 'scrubber';\n        } else if (this.hasActual) {\n            return 'actual';\n        } else if (this.hasBaseline) {\n            return 'baseline';\n        } else if (this.hasDiff) {\n            return 'diff';\n        } else {\n            return 'error';\n        }\n    }\n\n    _loadingImages = false;\n\n    async prepImages(event: Event) {\n        const slot = event.target as HTMLSlotElement;\n        if (this._loadingImages || !slot.assignedNodes().length) {\n            return;\n        }\n        this._loadingImages = true;\n        this.imagesLoaded = false;\n        const images = [...this.querySelectorAll('img')];\n        if (!images.length) {\n            this.imagesLoaded = true;\n            this._loadingImages = false;\n            return;\n        }\n        const imageLoadPromises = images.map((img) => {\n            if (img.naturalWidth) {\n                this.style.setProperty(\n                    '--image-width',\n                    `${img.naturalWidth}px`\n                );\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                img.addEventListener('load', () => {\n                    this.style.setProperty(\n                        '--image-width',\n                        `${img.naturalWidth}px`\n                    );\n                    resolve(true);\n                });\n            });\n        });\n        await Promise.all(imageLoadPromises);\n        this.imagesLoaded = true;\n        this._loadingImages = false;\n    }\n\n    protected override shouldUpdate() {\n        if (\n            this.view === 'error' ||\n            (this.view === 'actual' && !this.hasActual) ||\n            (this.view === 'baseline' && !this.hasBaseline) ||\n            (this.view === 'diff' && !this.hasDiff) ||\n            ((this.view === 'onion' ||\n                this.view === 'sidebyside' ||\n                this.view === 'scrubber') &&\n                !this.canCompare)\n        ) {\n            this.view = this.viewFallback;\n        }\n        return true;\n    }\n\n    protected override render(): TemplateResult {\n        if (this._loadingImages) {\n            return html`\n                <sp-progress-circle indeterminate></sp-progress-circle>\n                <slot\n                    name=\"actual\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot\n                    name=\"baseline\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n            `;\n        }\n        if (!this.imagesLoaded) {\n            return html`\n                <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n                    Choose a test to review on the left...\n                </p>\n                <slot\n                    name=\"actual\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot\n                    name=\"baseline\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n            `;\n        }\n        return html`\n            <sp-action-group\n                selects=\"single\"\n                compact\n                emphasized\n                @change=${this.handleChange}\n            >\n                ${this.view !== 'error'\n                    ? nothing\n                    : html`\n                          <sp-action-button value=\"error\" disabled>\n                              Error\n                          </sp-action-button>\n                      `}\n                ${!this.canCompare\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"scrubber\"\n                              ?selected=${this.view === 'scrubber'}\n                          >\n                              Scrubber\n                          </sp-action-button>\n                          <sp-action-button\n                              value=\"onion\"\n                              ?selected=${this.view === 'onion'}\n                          >\n                              Onion skin\n                          </sp-action-button>\n                          <sp-action-button\n                              value=\"sidebyside\"\n                              ?selected=${this.view === 'sidebyside'}\n                          >\n                              Side by side\n                          </sp-action-button>\n                      `}\n                ${!this.hasDiff\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"diff\"\n                              ?selected=${this.view === 'diff'}\n                          >\n                              Diff\n                          </sp-action-button>\n                      `}\n                ${!this.hasActual\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"actual\"\n                              ?selected=${this.view === 'actual'}\n                          >\n                              Actual\n                          </sp-action-button>\n                      `}\n                ${!this.hasBaseline\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"baseline\"\n                              ?selected=${this.view === 'baseline'}\n                          >\n                              Baseline\n                          </sp-action-button>\n                      `}\n            </sp-action-group>\n            <div class=\"review ${this.view}\">${this.renderView}</div>\n            <sp-action-group compact class=\"zoom-controls\">\n                <sp-action-button\n                    @click=${this.handleZoomOut}\n                    ?disabled=${this.zoom <= 0.5}\n                >\n                    <sp-icon-zoom-out slot=\"icon\"></sp-icon-zoom-out>\n                </sp-action-button>\n                <sp-action-button @click=${this.handleZoomClear}>\n                    <sp-icon-refresh slot=\"icon\"></sp-icon-refresh>\n                </sp-action-button>\n                <sp-action-button\n                    @click=${this.handleZoomIn}\n                    ?disabled=${this.zoom >= 2}\n                >\n                    <sp-icon-zoom-in slot=\"icon\"></sp-icon-zoom-in>\n                </sp-action-button>\n            </sp-action-group>\n        `;\n    }\n\n    protected override updated(changes: PropertyValues) {\n        if (changes.has('zoom')) {\n            let zoom = Math.min(this.zoom, 2);\n            zoom = Math.min(zoom, 0.5);\n            this.style.setProperty('--zoom-level', `${this.zoom}`);\n        }\n    }\n\n    static override styles = [\n        css`\n            :host {\n                display: grid;\n                max-width: 100%;\n                overflow: auto;\n                margin: 0 auto;\n                position: relative;\n\n                --image-display-width: calc(\n                    var(--zoom-level, 1) * var(--image-width, 500px)\n                );\n            }\n            sp-progress-circle {\n                margin: auto;\n                place-self: center;\n            }\n            .review {\n                margin: 100px auto 0;\n                display: flex;\n                width: var(--image-display-width);\n                place-self: start;\n            }\n            .error {\n                flex-direction: column;\n            }\n            ::slotted(img) {\n                display: flex;\n                pointer-events: none;\n            }\n            sp-action-group[selects] {\n                margin-bottom: 1em;\n                justify-content: center;\n                position: fixed;\n                top: calc(var(--swc-scale-factor) * 8px);\n                right: calc(var(--swc-scale-factor) * 8px);\n            }\n            .sidebyside {\n                display: flex;\n                gap: 2px;\n            }\n            .sidebyside ::slotted(img) {\n                width: 100%;\n            }\n            .view {\n                overflow: hidden;\n            }\n            .review:is(.baseline, .actual, .diff) .view,\n            .review:is(.baseline, .actual, .diff) ::slotted(img) {\n                width: 100%;\n            }\n            sp-split-view {\n                width: var(--image-display-width);\n            }\n            sp-split-view ::slotted(img) {\n                width: var(--image-display-width);\n                height: auto;\n                flex-shrink: 0;\n            }\n            sp-split-view .actual ::slotted(img) {\n                float: right;\n            }\n            p {\n                text-align: center;\n                margin: 0 3em;\n            }\n            .icon {\n                margin: 0 auto 2em;\n                display: flex;\n                color: var(--spectrum-semantic-negative-color-background);\n            }\n            .zoom-controls {\n                position: fixed;\n                bottom: calc(var(--swc-scale-factor) * 8px);\n                left: calc(var(--swc-scale-factor) * 8px);\n                z-index: 1;\n            }\n        `,\n        bodyStyles,\n    ];\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/VrtCompare.js

@@ -0,0 +1,210 @@
+"use strict";var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(c,a,s,t)=>{for(var i=t>1?void 0:t?u(a,s):a,r=c.length-1,o;r>=0;r--)(o=c[r])&&(i=(t?o(a,s,i):o(i))||i);return t&&i&&h(a,s,i),i};import{css as m,html as e,nothing as n,SpectrumElement as g}from"@spectrum-web-components/base";import{property as d}from"@spectrum-web-components/base/src/decorators.js";import{ObserveSlotPresence as f}from"@spectrum-web-components/shared";import b from"@spectrum-web-components/styles/body.js";import"@spectrum-web-components/action-button/sp-action-button.js";import"@spectrum-web-components/action-group/sp-action-group.js";import"@spectrum-web-components/split-view/sp-split-view.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js";import"@spectrum-web-components/action-bar/sp-action-bar.js";import"@spectrum-web-components/progress-circle/sp-progress-circle.js";import"../onion-skinner.js";export class VrtCompare extends f(g,['[slot="actual"]','[slot="baseline"]','[slot="diff"]']){constructor(){super(...arguments);this.view="scrubber";this.zoom=1;this.imagesLoaded=!1;this._loadingImages=!1}get hasActual(){return this.getSlotContentPresence('[slot="actual"]')}get hasBaseline(){return this.getSlotContentPresence('[slot="baseline"]')}get hasDiff(){return this.getSlotContentPresence('[slot="diff"]')}get canCompare(){return this.hasActual&&this.hasBaseline}handleChange(s){const t=s.target.selected[0];t&&(this.view=t)}handleZoomIn(){this.zoom+=.1}handleZoomClear(){this.zoom=1}handleZoomOut(){this.zoom-=.1}get error(){return e`
+            <sp-icon-alert class="icon" size="xl"></sp-icon-alert>
+            <p class="spectrum-Body spectrum-Body--sizeXL">
+                Please be sure to supply some combination of actual, baseline,
+                and diff screenshots for review.
+            </p>
+        `}get actual(){return e`
+            <div class="view actual">
+                <slot name="actual"></slot>
+            </div>
+        `}get baseline(){return e`
+            <div class="view baseline">
+                <slot name="baseline"></slot>
+            </div>
+        `}get diff(){return e`
+            <div class="view diff">
+                <slot name="diff"></slot>
+            </div>
+        `}get scrubber(){return e`
+            <sp-split-view resizable primary-size="50%">
+                ${this.baseline} ${this.actual}
+            </sp-split-view>
+        `}get sidebyside(){return e`
+            ${this.baseline} ${this.actual}
+        `}get onion(){return e`
+            <onion-skinner>
+                <slot name="baseline"></slot>
+                <slot name="actual"></slot>
+            </onion-skinner>
+        `}get renderView(){switch(this.view){case"error":return this.error;case"actual":return this.actual;case"baseline":return this.baseline;case"diff":return this.diff;case"onion":return this.onion;case"sidebyside":return this.sidebyside;case"scrubber":default:return this.scrubber}}get viewFallback(){return this.canCompare?"scrubber":this.hasActual?"actual":this.hasBaseline?"baseline":this.hasDiff?"diff":"error"}async prepImages(s){const t=s.target;if(this._loadingImages||!t.assignedNodes().length)return;this._loadingImages=!0,this.imagesLoaded=!1;const i=[...this.querySelectorAll("img")];if(!i.length){this.imagesLoaded=!0,this._loadingImages=!1;return}const r=i.map(o=>o.naturalWidth?(this.style.setProperty("--image-width",`${o.naturalWidth}px`),Promise.resolve()):new Promise(p=>{o.addEventListener("load",()=>{this.style.setProperty("--image-width",`${o.naturalWidth}px`),p(!0)})}));await Promise.all(r),this.imagesLoaded=!0,this._loadingImages=!1}shouldUpdate(){return(this.view==="error"||this.view==="actual"&&!this.hasActual||this.view==="baseline"&&!this.hasBaseline||this.view==="diff"&&!this.hasDiff||(this.view==="onion"||this.view==="sidebyside"||this.view==="scrubber")&&!this.canCompare)&&(this.view=this.viewFallback),!0}render(){return this._loadingImages?e`
+                <sp-progress-circle indeterminate></sp-progress-circle>
+                <slot
+                    name="actual"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot
+                    name="baseline"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot name="diff" @slotchange=${this.prepImages} hidden></slot>
+            `:this.imagesLoaded?e`
+            <sp-action-group
+                selects="single"
+                compact
+                emphasized
+                @change=${this.handleChange}
+            >
+                ${this.view!=="error"?n:e`
+                          <sp-action-button value="error" disabled>
+                              Error
+                          </sp-action-button>
+                      `}
+                ${this.canCompare?e`
+                          <sp-action-button
+                              value="scrubber"
+                              ?selected=${this.view==="scrubber"}
+                          >
+                              Scrubber
+                          </sp-action-button>
+                          <sp-action-button
+                              value="onion"
+                              ?selected=${this.view==="onion"}
+                          >
+                              Onion skin
+                          </sp-action-button>
+                          <sp-action-button
+                              value="sidebyside"
+                              ?selected=${this.view==="sidebyside"}
+                          >
+                              Side by side
+                          </sp-action-button>
+                      `:n}
+                ${this.hasDiff?e`
+                          <sp-action-button
+                              value="diff"
+                              ?selected=${this.view==="diff"}
+                          >
+                              Diff
+                          </sp-action-button>
+                      `:n}
+                ${this.hasActual?e`
+                          <sp-action-button
+                              value="actual"
+                              ?selected=${this.view==="actual"}
+                          >
+                              Actual
+                          </sp-action-button>
+                      `:n}
+                ${this.hasBaseline?e`
+                          <sp-action-button
+                              value="baseline"
+                              ?selected=${this.view==="baseline"}
+                          >
+                              Baseline
+                          </sp-action-button>
+                      `:n}
+            </sp-action-group>
+            <div class="review ${this.view}">${this.renderView}</div>
+            <sp-action-group compact class="zoom-controls">
+                <sp-action-button
+                    @click=${this.handleZoomOut}
+                    ?disabled=${this.zoom<=.5}
+                >
+                    <sp-icon-zoom-out slot="icon"></sp-icon-zoom-out>
+                </sp-action-button>
+                <sp-action-button @click=${this.handleZoomClear}>
+                    <sp-icon-refresh slot="icon"></sp-icon-refresh>
+                </sp-action-button>
+                <sp-action-button
+                    @click=${this.handleZoomIn}
+                    ?disabled=${this.zoom>=2}
+                >
+                    <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
+                </sp-action-button>
+            </sp-action-group>
+        `:e`
+                <p class="spectrum-Body spectrum-Body--sizeXL">
+                    Choose a test to review on the left...
+                </p>
+                <slot
+                    name="actual"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot
+                    name="baseline"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot name="diff" @slotchange=${this.prepImages} hidden></slot>
+            `}updated(s){if(s.has("zoom")){let t=Math.min(this.zoom,2);t=Math.min(t,.5),this.style.setProperty("--zoom-level",`${this.zoom}`)}}}VrtCompare.styles=[m`
+            :host {
+                display: grid;
+                max-width: 100%;
+                overflow: auto;
+                margin: 0 auto;
+                position: relative;
+
+                --image-display-width: calc(
+                    var(--zoom-level, 1) * var(--image-width, 500px)
+                );
+            }
+            sp-progress-circle {
+                margin: auto;
+                place-self: center;
+            }
+            .review {
+                margin: 100px auto 0;
+                display: flex;
+                width: var(--image-display-width);
+                place-self: start;
+            }
+            .error {
+                flex-direction: column;
+            }
+            ::slotted(img) {
+                display: flex;
+                pointer-events: none;
+            }
+            sp-action-group[selects] {
+                margin-bottom: 1em;
+                justify-content: center;
+                position: fixed;
+                top: calc(var(--swc-scale-factor) * 8px);
+                right: calc(var(--swc-scale-factor) * 8px);
+            }
+            .sidebyside {
+                display: flex;
+                gap: 2px;
+            }
+            .sidebyside ::slotted(img) {
+                width: 100%;
+            }
+            .view {
+                overflow: hidden;
+            }
+            .review:is(.baseline, .actual, .diff) .view,
+            .review:is(.baseline, .actual, .diff) ::slotted(img) {
+                width: 100%;
+            }
+            sp-split-view {
+                width: var(--image-display-width);
+            }
+            sp-split-view ::slotted(img) {
+                width: var(--image-display-width);
+                height: auto;
+                flex-shrink: 0;
+            }
+            sp-split-view .actual ::slotted(img) {
+                float: right;
+            }
+            p {
+                text-align: center;
+                margin: 0 3em;
+            }
+            .icon {
+                margin: 0 auto 2em;
+                display: flex;
+                color: var(--spectrum-semantic-negative-color-background);
+            }
+            .zoom-controls {
+                position: fixed;
+                bottom: calc(var(--swc-scale-factor) * 8px);
+                left: calc(var(--swc-scale-factor) * 8px);
+                z-index: 1;
+            }
+        `,b],l([d()],VrtCompare.prototype,"view",2),l([d({type:Number})],VrtCompare.prototype,"zoom",2),l([d({type:Boolean,attribute:!1})],VrtCompare.prototype,"imagesLoaded",2);
+//# sourceMappingURL=VrtCompare.js.map

package/src/VrtCompare.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["VrtCompare.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    css,\n    html,\n    nothing,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/split-view/sp-split-view.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js';\nimport '@spectrum-web-components/action-bar/sp-action-bar.js';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '../onion-skinner.js';\n\nexport class VrtCompare extends ObserveSlotPresence(SpectrumElement, [\n    '[slot=\"actual\"]',\n    '[slot=\"baseline\"]',\n    '[slot=\"diff\"]',\n]) {\n    @property()\n    public view = 'scrubber';\n\n    @property({ type: Number })\n    public zoom = 1;\n\n    @property({ type: Boolean, attribute: false })\n    public imagesLoaded = false;\n\n    private get hasActual(): boolean {\n        return this.getSlotContentPresence('[slot=\"actual\"]');\n    }\n\n    private get hasBaseline(): boolean {\n        return this.getSlotContentPresence('[slot=\"baseline\"]');\n    }\n\n    private get hasDiff(): boolean {\n        return this.getSlotContentPresence('[slot=\"diff\"]');\n    }\n\n    private get canCompare(): boolean {\n        return this.hasActual && this.hasBaseline;\n    }\n\n    private handleChange(event: Event & { target: ActionGroup }) {\n        const view = event.target.selected[0];\n        if (view) {\n            this.view = view;\n        }\n    }\n\n    private handleZoomIn() {\n        this.zoom += 0.1;\n    }\n\n    private handleZoomClear() {\n        this.zoom = 1;\n    }\n\n    private handleZoomOut() {\n        this.zoom -= 0.1;\n    }\n\n    protected get error() {\n        return html`\n            <sp-icon-alert class=\"icon\" size=\"xl\"></sp-icon-alert>\n            <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n                Please be sure to supply some combination of actual, baseline,\n                and diff screenshots for review.\n            </p>\n        `;\n    }\n\n    protected get actual() {\n        return html`\n            <div class=\"view actual\">\n                <slot name=\"actual\"></slot>\n            </div>\n        `;\n    }\n\n    protected get baseline() {\n        return html`\n            <div class=\"view baseline\">\n                <slot name=\"baseline\"></slot>\n            </div>\n        `;\n    }\n\n    protected get diff() {\n        return html`\n            <div class=\"view diff\">\n                <slot name=\"diff\"></slot>\n            </div>\n        `;\n    }\n\n    protected get scrubber() {\n        return html`\n            <sp-split-view resizable primary-size=\"50%\">\n                ${this.baseline} ${this.actual}\n            </sp-split-view>\n        `;\n    }\n\n    protected get sidebyside() {\n        return html`\n            ${this.baseline} ${this.actual}\n        `;\n    }\n\n    protected get onion() {\n        return html`\n            <onion-skinner>\n                <slot name=\"baseline\"></slot>\n                <slot name=\"actual\"></slot>\n            </onion-skinner>\n        `;\n    }\n\n    protected get renderView() {\n        switch (this.view) {\n            case 'error':\n                return this.error;\n            case 'actual':\n                return this.actual;\n            case 'baseline':\n                return this.baseline;\n            case 'diff':\n                return this.diff;\n            case 'onion':\n                return this.onion;\n            case 'sidebyside':\n                return this.sidebyside;\n            case 'scrubber':\n            default:\n                return this.scrubber;\n        }\n    }\n\n    private get viewFallback() {\n        if (this.canCompare) {\n            return 'scrubber';\n        } else if (this.hasActual) {\n            return 'actual';\n        } else if (this.hasBaseline) {\n            return 'baseline';\n        } else if (this.hasDiff) {\n            return 'diff';\n        } else {\n            return 'error';\n        }\n    }\n\n    _loadingImages = false;\n\n    async prepImages(event: Event) {\n        const slot = event.target as HTMLSlotElement;\n        if (this._loadingImages || !slot.assignedNodes().length) {\n            return;\n        }\n        this._loadingImages = true;\n        this.imagesLoaded = false;\n        const images = [...this.querySelectorAll('img')];\n        if (!images.length) {\n            this.imagesLoaded = true;\n            this._loadingImages = false;\n            return;\n        }\n        const imageLoadPromises = images.map((img) => {\n            if (img.naturalWidth) {\n                this.style.setProperty(\n                    '--image-width',\n                    `${img.naturalWidth}px`\n                );\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                img.addEventListener('load', () => {\n                    this.style.setProperty(\n                        '--image-width',\n                        `${img.naturalWidth}px`\n                    );\n                    resolve(true);\n                });\n            });\n        });\n        await Promise.all(imageLoadPromises);\n        this.imagesLoaded = true;\n        this._loadingImages = false;\n    }\n\n    protected override shouldUpdate() {\n        if (\n            this.view === 'error' ||\n            (this.view === 'actual' && !this.hasActual) ||\n            (this.view === 'baseline' && !this.hasBaseline) ||\n            (this.view === 'diff' && !this.hasDiff) ||\n            ((this.view === 'onion' ||\n                this.view === 'sidebyside' ||\n                this.view === 'scrubber') &&\n                !this.canCompare)\n        ) {\n            this.view = this.viewFallback;\n        }\n        return true;\n    }\n\n    protected override render(): TemplateResult {\n        if (this._loadingImages) {\n            return html`\n                <sp-progress-circle indeterminate></sp-progress-circle>\n                <slot\n                    name=\"actual\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot\n                    name=\"baseline\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n            `;\n        }\n        if (!this.imagesLoaded) {\n            return html`\n                <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n                    Choose a test to review on the left...\n                </p>\n                <slot\n                    name=\"actual\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot\n                    name=\"baseline\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n            `;\n        }\n        return html`\n            <sp-action-group\n                selects=\"single\"\n                compact\n                emphasized\n                @change=${this.handleChange}\n            >\n                ${this.view !== 'error'\n                    ? nothing\n                    : html`\n                          <sp-action-button value=\"error\" disabled>\n                              Error\n                          </sp-action-button>\n                      `}\n                ${!this.canCompare\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"scrubber\"\n                              ?selected=${this.view === 'scrubber'}\n                          >\n                              Scrubber\n                          </sp-action-button>\n                          <sp-action-button\n                              value=\"onion\"\n                              ?selected=${this.view === 'onion'}\n                          >\n                              Onion skin\n                          </sp-action-button>\n                          <sp-action-button\n                              value=\"sidebyside\"\n                              ?selected=${this.view === 'sidebyside'}\n                          >\n                              Side by side\n                          </sp-action-button>\n                      `}\n                ${!this.hasDiff\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"diff\"\n                              ?selected=${this.view === 'diff'}\n                          >\n                              Diff\n                          </sp-action-button>\n                      `}\n                ${!this.hasActual\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"actual\"\n                              ?selected=${this.view === 'actual'}\n                          >\n                              Actual\n                          </sp-action-button>\n                      `}\n                ${!this.hasBaseline\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"baseline\"\n                              ?selected=${this.view === 'baseline'}\n                          >\n                              Baseline\n                          </sp-action-button>\n                      `}\n            </sp-action-group>\n            <div class=\"review ${this.view}\">${this.renderView}</div>\n            <sp-action-group compact class=\"zoom-controls\">\n                <sp-action-button\n                    @click=${this.handleZoomOut}\n                    ?disabled=${this.zoom <= 0.5}\n                >\n                    <sp-icon-zoom-out slot=\"icon\"></sp-icon-zoom-out>\n                </sp-action-button>\n                <sp-action-button @click=${this.handleZoomClear}>\n                    <sp-icon-refresh slot=\"icon\"></sp-icon-refresh>\n                </sp-action-button>\n                <sp-action-button\n                    @click=${this.handleZoomIn}\n                    ?disabled=${this.zoom >= 2}\n                >\n                    <sp-icon-zoom-in slot=\"icon\"></sp-icon-zoom-in>\n                </sp-action-button>\n            </sp-action-group>\n        `;\n    }\n\n    protected override updated(changes: PropertyValues) {\n        if (changes.has('zoom')) {\n            let zoom = Math.min(this.zoom, 2);\n            zoom = Math.min(zoom, 0.5);\n            this.style.setProperty('--zoom-level', `${this.zoom}`);\n        }\n    }\n\n    static override styles = [\n        css`\n            :host {\n                display: grid;\n                max-width: 100%;\n                overflow: auto;\n                margin: 0 auto;\n                position: relative;\n\n                --image-display-width: calc(\n                    var(--zoom-level, 1) * var(--image-width, 500px)\n                );\n            }\n            sp-progress-circle {\n                margin: auto;\n                place-self: center;\n            }\n            .review {\n                margin: 100px auto 0;\n                display: flex;\n                width: var(--image-display-width);\n                place-self: start;\n            }\n            .error {\n                flex-direction: column;\n            }\n            ::slotted(img) {\n                display: flex;\n                pointer-events: none;\n            }\n            sp-action-group[selects] {\n                margin-bottom: 1em;\n                justify-content: center;\n                position: fixed;\n                top: calc(var(--swc-scale-factor) * 8px);\n                right: calc(var(--swc-scale-factor) * 8px);\n            }\n            .sidebyside {\n                display: flex;\n                gap: 2px;\n            }\n            .sidebyside ::slotted(img) {\n                width: 100%;\n            }\n            .view {\n                overflow: hidden;\n            }\n            .review:is(.baseline, .actual, .diff) .view,\n            .review:is(.baseline, .actual, .diff) ::slotted(img) {\n                width: 100%;\n            }\n            sp-split-view {\n                width: var(--image-display-width);\n            }\n            sp-split-view ::slotted(img) {\n                width: var(--image-display-width);\n                height: auto;\n                flex-shrink: 0;\n            }\n            sp-split-view .actual ::slotted(img) {\n                float: right;\n            }\n            p {\n                text-align: center;\n                margin: 0 3em;\n            }\n            .icon {\n                margin: 0 auto 2em;\n                display: flex;\n                color: var(--spectrum-semantic-negative-color-background);\n            }\n            .zoom-controls {\n                position: fixed;\n                bottom: calc(var(--swc-scale-factor) * 8px);\n                left: calc(var(--swc-scale-factor) * 8px);\n                z-index: 1;\n            }\n        `,\n        bodyStyles,\n    ];\n}\n"],
+  "mappings": "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",
+  "names": ["css", "html", "nothing", "SpectrumElement", "property", "ObserveSlotPresence", "bodyStyles", "event", "view", "slot", "images", "imageLoadPromises", "img", "resolve", "changes", "zoom", "__decorateClass"]
+}

package/src/index.dev.js

@@ -0,0 +1,3 @@
+"use strict";
+export * from "./VrtCompare.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './VrtCompare.dev.js'\n"],
+  "mappings": ";AAYA,cAAc;",
+  "names": []
+}

package/src/index.js

@@ -0,0 +1,2 @@
+"use strict";export*from"./VrtCompare.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './VrtCompare.js';\n"],
+  "mappings": "aAYA,WAAc",
+  "names": []
+}

package/vrt-compare.dev.js

@@ -0,0 +1,4 @@
+"use strict";
+import { VrtCompare } from "./src/VrtCompare.dev.js";
+customElements.define("vrt-compare", VrtCompare);
+//# sourceMappingURL=vrt-compare.dev.js.map

package/vrt-compare.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["vrt-compare.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { VrtCompare } from './src/VrtCompare.dev.js'\n\ncustomElements.define('vrt-compare', VrtCompare);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'vrt-compare': VrtCompare;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,kBAAkB;AAE3B,eAAe,OAAO,eAAe,UAAU;",
+  "names": []
+}

package/vrt-compare.js

@@ -0,0 +1,2 @@
+"use strict";import{VrtCompare as e}from"./src/VrtCompare.js";customElements.define("vrt-compare",e);
+//# sourceMappingURL=vrt-compare.js.map

package/vrt-compare.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["vrt-compare.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { VrtCompare } from './src/VrtCompare.js';\n\ncustomElements.define('vrt-compare', VrtCompare);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'vrt-compare': VrtCompare;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,cAAAA,MAAkB,sBAE3B,eAAe,OAAO,cAAeA,CAAU",
+  "names": ["VrtCompare"]
+}