@verdocs/web-sdk 1.9.6 → 1.9.9

package/dist/esm/verdocs-loader_4.entry.js

@@ -0,0 +1,570 @@
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-f78d163d.js';
+import { a as getEnvelope, c as getEnvelopeDocument } from './Envelopes-df05b3c7.js';
+import { g as getTemplate } from './Templates-f7c590c0.js';
+import './Types-ab9f6af8.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-82f4600d.js';
+import { S as SDKError } from './errors-9b5498c8.js';
+import { g as getTemplateDocument } from './TemplateDocuments-89ba2276.js';
+
+const verdocsLoaderCss = "verdocs-loader{display:block;position:absolute;top:50%;left:50%;margin-left:-20px;margin-top:-20px;font-size:24px;width:24px;height:24px;border-radius:50%;text-indent:-9999em;-webkit-animation:load5 1.1s infinite ease;animation:verdocs-loader-kf 1.1s infinite ease;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes verdocs-loader-kf{0%,100%{-webkit-box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4)}12.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3)}25%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}37.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}50%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}62.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}75%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}87.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa;box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa}}@keyframes verdocs-loader-kf{0%,100%{-webkit-box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4)}12.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3)}25%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}37.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}50%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}62.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}75%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}87.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa;box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa}}";
+
+const VerdocsLoader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h(Host, null);
+  }
+};
+VerdocsLoader.style = verdocsLoaderCss;
+
+const verdocsViewCss = "verdocs-view{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
+
+const VerdocsView = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageRendered = createEvent(this, "pageRendered", 7);
+    this.pageLoaded = createEvent(this, "pageLoaded", 7);
+    this.pageChange = createEvent(this, "pageChange", 7);
+    this.pageInit = createEvent(this, "pageInit", 7);
+    this.scaleChange = createEvent(this, "scaleChange", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.envelopeId = '';
+    this.rotation = 0;
+    this.pageLayers = [
+      { name: 'page', type: 'canvas' },
+      { name: 'controls', type: 'div' },
+    ];
+    this.template = null;
+    this.envelope = null;
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.templateId && !this.envelopeId) {
+      console.error(`[VIEW] Must specify one of templateId or envelopeId`);
+      return;
+    }
+    if (this.templateId && this.envelopeId) {
+      console.warn(`[VIEW] Both templateId and envelopeId specified, using templateId`);
+    }
+    try {
+      if (this.templateId) {
+        console.log('[VIEW] Loading template', this.templateId);
+        this.template = await getTemplate(this.endpoint, this.templateId);
+        console.log('[VIEW] Loaded template', this.template);
+      }
+      else if (this.envelopeId) {
+        console.log('[VIEW] Loading envelope', this.envelopeId);
+        this.envelope = await getEnvelope(this.endpoint, this.envelopeId);
+        console.log('[VIEW] Loaded envelope', this.envelope);
+      }
+      // console.log(`[VIEW] Loading template ${this.templateId}`);
+      // const template = await getTemplate(this.endpoint, this.templateId);
+      //
+      // console.log('[VIEW] Got template', this.template);
+      // this.template = template;
+      // this.pageNumbers = integerSequence(1, template.pages.length);
+      //
+      // const pageUris: Record<number, string> = {};
+      // for await (let page of template.pages) {
+      //   console.log('[VIEW] Loading page', page);
+      //   // TODO: Make an endpoint to get all of the pages for a template
+      //   // TODO: When uploading a new template, pre-process its pages into images and comment that the individual page-loader is a utility,
+      //   //  not the primary mechanism.
+      //   const image = await getPageImage(this.endpoint, this.templateId, page.sequence);
+      //   // TODO: Make this uri to match the rest of the terminology?
+      //   pageUris[page.sequence] = image.url;
+      //   console.log('[VIEW] Got image Uri', image.url);
+      //   this.loadProgress = page.sequence / template.pages.length;
+      // }
+      //
+      // this.pageUris = pageUris;
+      // this.loadProgress = 100;
+      //
+      // // this.pdfUrl = `${this.endpoint.getBaseURL()}/templates/${this.templateId}/documents/${template.template_document?.id}?file=true`;
+    }
+    catch (e) {
+      console.log('[VIEW] Error loading data', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  // Determine whether a page is "rotated" (in either direction)
+  // isRotated(rotation) {
+  //   return rotation !== 0 && rotation % 180 !== 0;
+  // }
+  // Render one document page. Note that pageNumber is 1-based.
+  // async renderPage(pageNumber: number): Promise<void> {
+  //   const domPage = this.domPages[pageNumber];
+  //
+  //   // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.
+  //   if (!domPage) {
+  //     console.log('[VIEW] Skipping rendering page not yet in DOM', {pageNumber});
+  //     return;
+  //   }
+  //
+  //   const pageMetrics = this.sourcePageMetrics[pageNumber];
+  //
+  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});
+  //   try {
+  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);
+  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});
+  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);
+  //
+  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
+  //     // if (!canvas) {
+  //     //   console.log('[VIEW] Unable to find canvas element');
+  //     //   return;
+  //     // }
+  //     //
+  //     // canvas.width = domPage.renderedWidth;
+  //     // canvas.height = domPage.renderedHeight;
+  //     // const canvasContext = canvas.getContext('2d');
+  //     // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);
+  //     // await pdfPage.render({canvasContext, viewport});
+  //
+  //     this.pageRendered.emit({
+  //       renderedPage: domPage,
+  //       sourcePageMetrics: pageMetrics,
+  //       pages: this.domPages,
+  //     });
+  //   } catch (e) {
+  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //     console.warn('[VIEW] Error rendering page', e);
+  //   }
+  // }
+  // async renderPages(): Promise<void> {
+  //   const pageNumbersToRender = integerSequence(1, this.numPages);
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     try {
+  //       await this.renderPage(pageNumber);
+  //     } catch (e) {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.warn('[VIEW] Error rendering pages', e);
+  //     }
+  //   }
+  // }
+  // onProgress(progress: OnProgressParameters) {
+  //   console.log(`[VIEW] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);
+  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  // }
+  // After a document is done loading, go through its pages to get their dimensions
+  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {
+  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);
+  //
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     const pdfPage = await pdfDocument.getPage(1);
+  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;
+  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};
+  //   }
+  //
+  //   console.log('[VIEW] Parsed page metrics', this.sourcePageMetrics);
+  // }
+  // loadAndRender(src: string): void {
+  //   console.log('[VIEW] Loading', src);
+  //
+  //   const token = this.endpoint.getToken();
+  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};
+  //
+  //   const source = {
+  //     url: src,
+  //     cMapUrl: CMAPS_URL,
+  //     cMapPacked: true,
+  //     httpHeaders,
+  //     withCredentials: true,
+  //     stopAtErrors: true,
+  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,
+  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,
+  //   } as DocumentInitParameters;
+  //
+  //   // @ts-ignore
+  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+  //   loadingTask.onProgress = this.onProgress;
+  //   loadingTask.promise
+  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {
+  //       await this.parsePageMetrics(pdfDocument);
+  //
+  //       this.pdfDocument = pdfDocument;
+  //       this.numPages = pdfDocument.numPages;
+  //       this.fingerprints = pdfDocument.fingerprints;
+  //       console.log(`[VIEW] Got PDF document fingerprints "${this.fingerprints.join(', ')}", ${this.numPages} page(s)`);
+  //
+  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in
+  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.
+  //       this.loadProgress = 100;
+  //     })
+  //     .catch(e => {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.log('[VIEW] Loading error', e);
+  //     });
+  // }
+  // async handlePageRendered(e: any) {
+  //   e.stopPropagation();
+  //
+  //   const domPage = e.detail as IDocumentPageInfo;
+  //   this.domPages[domPage.pageNumber] = domPage;
+  //   await this.renderPage(domPage.pageNumber);
+  // }
+  render() {
+    var _a;
+    console.log('[VIEW] Rendering', this.templateId, this.envelopeId);
+    // TODO: Error handling for missing pages. Is it better to skip the page or show a placeholder?
+    return (h(Host, null, this.template && (h("verdocs-view-template-document", { endpoint: this.endpoint, templateId: this.templateId, documentId: (_a = this.template.template_document) === null || _a === void 0 ? void 0 : _a.id, onPageRendered: p => { var _a; return (_a = this.pageRendered) === null || _a === void 0 ? void 0 : _a.emit(p.detail); } })), this.envelope && (h("verdocs-view-envelope-document", { endpoint: this.endpoint, envelopeId: this.envelopeId, documentId: this.envelope.envelope_document_id, onPageRendered: p => { var _a; return (_a = this.pageRendered) === null || _a === void 0 ? void 0 : _a.emit(p.detail); } }))));
+  }
+  get component() { return getElement(this); }
+};
+VerdocsView.style = verdocsViewCss;
+
+const verdocsViewEnvelopeDocumentCss = "verdocs-view-envelope-document{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;width:100%}verdocs-view-envelope-document div,verdocs-view-envelope-document canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
+
+const VerdocsViewEnvelopeDocument = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageRendered = createEvent(this, "pageRendered", 7);
+    this.pageLoaded = createEvent(this, "pageLoaded", 7);
+    this.pageChange = createEvent(this, "pageChange", 7);
+    this.pageInit = createEvent(this, "pageInit", 7);
+    this.scaleChange = createEvent(this, "scaleChange", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.domPages = {};
+    this.sourcePageMetrics = {};
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+    this.documentId = '';
+    this.rotation = 0;
+    this.pageLayers = [
+      { name: 'page', type: 'canvas' },
+      { name: 'controls', type: 'div' },
+    ];
+    this.envelopeDocument = null;
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.envelopeId || !this.documentId) {
+      console.log(`[VIEW-ENVELOPE] Missing required envelope ID ${this.envelopeId}`);
+      return;
+    }
+    try {
+      console.log(`[VIEW-ENVELOPE] Loading envelope ${this.envelopeId}`);
+      this.envelopeDocument = await getEnvelopeDocument(this.endpoint, this.envelopeId, this.documentId);
+      if (!this.envelopeDocument) {
+        console.error('[VIEW-ENVELOPE] Unable to load envelope document', this.envelopeId, this.documentId);
+      }
+      console.log('[VIEW-ENVELOPE] Got envelope document', this.envelopeDocument);
+    }
+    catch (e) {
+      console.log('[VIEW-ENVELOPE] Error loading envelope', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  // Render one document page. Note that pageNumber is 1-based.
+  async renderPage(pageNumber) {
+    var _a, _b, _c;
+    const domPage = this.domPages[pageNumber];
+    // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.
+    if (!domPage) {
+      console.log('[VIEW-ENVELOPE] Skipping rendering page not yet in DOM', { pageNumber });
+      return;
+    }
+    const pageMetrics = this.sourcePageMetrics[pageNumber];
+    console.log('[VIEW-ENVELOPE] Rendering page', { pageNumber, pageMetrics, domPage });
+    try {
+      // const pdfPage = await this.pdfDocument.getPage(pageNumber);
+      // const viewport = pdfPage.getViewport({scale: domPage.xScale});
+      // console.log('[VIEW-TEMPLATE] Page viewport', domPage.xScale, viewport);
+      // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
+      // if (!canvas) {
+      //   console.log('[VIEW-TEMPLATE] Unable to find canvas element');
+      //   return;
+      // }
+      //
+      // canvas.width = domPage.renderedWidth;
+      // canvas.height = domPage.renderedHeight;
+      // const canvasContext = canvas.getContext('2d');
+      // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);
+      // await pdfPage.render({canvasContext, viewport});
+      this.pageRendered.emit({
+        renderedPage: domPage,
+        sourcePageMetrics: pageMetrics,
+        pages: this.domPages,
+      });
+    }
+    catch (e) {
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+      console.warn('[VIEW-ENVELOPE] Error rendering page', e);
+    }
+  }
+  // async renderPages(): Promise<void> {
+  //   const pageNumbersToRender = integerSequence(1, this.numPages);
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     try {
+  //       await this.renderPage(pageNumber);
+  //     } catch (e) {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.warn('[VIEW-TEMPLATE] Error rendering pages', e);
+  //     }
+  //   }
+  // }
+  // onProgress(progress: OnProgressParameters) {
+  //   console.log(`[VIEW-TEMPLATE] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);
+  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  // }
+  // After a document is done loading, go through its pages to get their dimensions
+  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {
+  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);
+  //
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     const pdfPage = await pdfDocument.getPage(1);
+  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;
+  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};
+  //   }
+  //
+  //   console.log('[VIEW-TEMPLATE] Parsed page metrics', this.sourcePageMetrics);
+  // }
+  // loadAndRender(src: string): void {
+  //   console.log('[VIEW-TEMPLATE] Loading', src);
+  //
+  //   const token = this.endpoint.getToken();
+  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};
+  //
+  //   const source = {
+  //     url: src,
+  //     cMapUrl: CMAPS_URL,
+  //     cMapPacked: true,
+  //     httpHeaders,
+  //     withCredentials: true,
+  //     stopAtErrors: true,
+  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,
+  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,
+  //   } as DocumentInitParameters;
+  //
+  //   // @ts-ignore
+  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+  //   loadingTask.onProgress = this.onProgress;
+  //   loadingTask.promise
+  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {
+  //       await this.parsePageMetrics(pdfDocument);
+  //
+  //       this.pdfDocument = pdfDocument;
+  //       this.numPages = pdfDocument.numPages;
+  //       this.fingerprints = pdfDocument.fingerprints;
+  //       console.log(`[VIEW-TEMPLATE] Got PDF document fingerprints "${this.fingerprints.join(', ')}", ${this.numPages} page(s)`);
+  //
+  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in
+  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.
+  //       this.loadProgress = 100;
+  //     })
+  //     .catch(e => {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.log('[VIEW-TEMPLATE] Loading error', e);
+  //     });
+  // }
+  async handlePageRendered(e) {
+    e.stopPropagation();
+    const domPage = e.detail;
+    this.domPages[domPage.pageNumber] = domPage;
+    await this.renderPage(domPage.pageNumber);
+  }
+  render() {
+    var _a, _b;
+    console.log('[VIEW-ENVELOPE] Rendering pages', (_a = this.envelopeDocument) === null || _a === void 0 ? void 0 : _a.pages);
+    // TODO: The API is supposed to always return these sorted...
+    const pages = [...(((_b = this.envelopeDocument) === null || _b === void 0 ? void 0 : _b.pages) || [])];
+    pages.sort((a, b) => a.sequence - b.sequence);
+    // TODO: Error handling for missing pages. Is it better to skip the page or show a placeholder?
+    return (h(Host, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792,
+      // TODO: Store image dimensions in the DB rows and pass them to clients with the page data
+      // virtualWidth={this.sourcePageMetrics[pageNumber]?.width || 612}
+      // virtualHeight={this.sourcePageMetrics[pageNumber]?.height || 792}
+      pageNumber: page.sequence, layers: this.pageLayers, onPageRendered: p => this.handlePageRendered(p) })))));
+  }
+  get component() { return getElement(this); }
+};
+VerdocsViewEnvelopeDocument.style = verdocsViewEnvelopeDocumentCss;
+
+const verdocsViewTemplateDocumentCss = "verdocs-view-template-document{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;width:100%}verdocs-view-template-document div,verdocs-view-template-document canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
+
+const VerdocsViewTemplateDocument = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageRendered = createEvent(this, "pageRendered", 7);
+    this.pageLoaded = createEvent(this, "pageLoaded", 7);
+    this.pageChange = createEvent(this, "pageChange", 7);
+    this.pageInit = createEvent(this, "pageInit", 7);
+    this.scaleChange = createEvent(this, "scaleChange", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.domPages = {};
+    this.sourcePageMetrics = {};
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.documentId = '';
+    this.rotation = 0;
+    this.pageLayers = [
+      { name: 'page', type: 'canvas' },
+      { name: 'controls', type: 'div' },
+    ];
+    this.templateDocument = null;
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.templateId || !this.documentId) {
+      console.log(`[VIEW-TEMPLATE] Missing required template ID ${this.templateId}`);
+      return;
+    }
+    try {
+      console.log(`[VIEW-TEMPLATE] Loading template ${this.templateId}`);
+      this.templateDocument = await getTemplateDocument(this.endpoint, this.templateId, this.documentId);
+      if (!this.templateDocument) {
+        console.error('[VIEW-TEMPLATE] Unable to load template document', this.templateId, this.documentId);
+      }
+      console.log('[VIEW-TEMPLATE] Got template', this.templateDocument);
+    }
+    catch (e) {
+      console.log('[VIEW-TEMPLATE] Error loading template', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  // Render one document page. Note that pageNumber is 1-based.
+  async renderPage(pageNumber) {
+    var _a, _b, _c;
+    const domPage = this.domPages[pageNumber];
+    // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.
+    if (!domPage) {
+      console.log('[VIEW-TEMPLATE] Skipping rendering page not yet in DOM', { pageNumber });
+      return;
+    }
+    const pageMetrics = this.sourcePageMetrics[pageNumber];
+    // console.log('[VIEW-TEMPLATE] Rendering page', {pageNumber, pageMetrics, domPage});
+    try {
+      // const pdfPage = await this.pdfDocument.getPage(pageNumber);
+      // const viewport = pdfPage.getViewport({scale: domPage.xScale});
+      // console.log('[VIEW-TEMPLATE] Page viewport', domPage.xScale, viewport);
+      // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
+      // if (!canvas) {
+      //   console.log('[VIEW-TEMPLATE] Unable to find canvas element');
+      //   return;
+      // }
+      //
+      // canvas.width = domPage.renderedWidth;
+      // canvas.height = domPage.renderedHeight;
+      // const canvasContext = canvas.getContext('2d');
+      // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);
+      // await pdfPage.render({canvasContext, viewport});
+      this.pageRendered.emit({
+        renderedPage: domPage,
+        sourcePageMetrics: pageMetrics,
+        pages: this.domPages,
+      });
+    }
+    catch (e) {
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+      console.warn('[VIEW-TEMPLATE] Error rendering page', e);
+    }
+  }
+  // async renderPages(): Promise<void> {
+  //   const pageNumbersToRender = integerSequence(1, this.numPages);
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     try {
+  //       await this.renderPage(pageNumber);
+  //     } catch (e) {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.warn('[VIEW-TEMPLATE] Error rendering pages', e);
+  //     }
+  //   }
+  // }
+  // onProgress(progress: OnProgressParameters) {
+  //   console.log(`[VIEW-TEMPLATE] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);
+  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  // }
+  // After a document is done loading, go through its pages to get their dimensions
+  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {
+  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);
+  //
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     const pdfPage = await pdfDocument.getPage(1);
+  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;
+  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};
+  //   }
+  //
+  //   console.log('[VIEW-TEMPLATE] Parsed page metrics', this.sourcePageMetrics);
+  // }
+  // loadAndRender(src: string): void {
+  //   console.log('[VIEW-TEMPLATE] Loading', src);
+  //
+  //   const token = this.endpoint.getToken();
+  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};
+  //
+  //   const source = {
+  //     url: src,
+  //     cMapUrl: CMAPS_URL,
+  //     cMapPacked: true,
+  //     httpHeaders,
+  //     withCredentials: true,
+  //     stopAtErrors: true,
+  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,
+  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,
+  //   } as DocumentInitParameters;
+  //
+  //   // @ts-ignore
+  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+  //   loadingTask.onProgress = this.onProgress;
+  //   loadingTask.promise
+  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {
+  //       await this.parsePageMetrics(pdfDocument);
+  //
+  //       this.pdfDocument = pdfDocument;
+  //       this.numPages = pdfDocument.numPages;
+  //       this.fingerprints = pdfDocument.fingerprints;
+  //       console.log(`[VIEW-TEMPLATE] Got PDF document fingerprints "${this.fingerprints.join(', ')}", ${this.numPages} page(s)`);
+  //
+  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in
+  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.
+  //       this.loadProgress = 100;
+  //     })
+  //     .catch(e => {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.log('[VIEW-TEMPLATE] Loading error', e);
+  //     });
+  // }
+  async handlePageRendered(e) {
+    e.stopPropagation();
+    const domPage = e.detail;
+    this.domPages[domPage.pageNumber] = domPage;
+    await this.renderPage(domPage.pageNumber);
+  }
+  render() {
+    var _a, _b;
+    console.log('[VIEW-TEMPLATE] Rendering pages', (_a = this.templateDocument) === null || _a === void 0 ? void 0 : _a.pages);
+    // TODO: The API is supposed to always return these sorted...
+    const pages = [...(((_b = this.templateDocument) === null || _b === void 0 ? void 0 : _b.pages) || [])];
+    pages.sort((a, b) => a.sequence - b.sequence);
+    // TODO: Error handling for missing pages. Is it better to skip the page or show a placeholder?
+    return (h(Host, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792,
+      // TODO: Store image dimensions in the DB rows and pass them to clients with the page data
+      // virtualWidth={this.sourcePageMetrics[pageNumber]?.width || 612}
+      // virtualHeight={this.sourcePageMetrics[pageNumber]?.height || 792}
+      pageNumber: page.sequence, layers: this.pageLayers, onPageRendered: p => this.handlePageRendered(p) })))));
+  }
+  get component() { return getElement(this); }
+};
+VerdocsViewTemplateDocument.style = verdocsViewTemplateDocumentCss;
+
+export { VerdocsLoader as verdocs_loader, VerdocsView as verdocs_view, VerdocsViewEnvelopeDocument as verdocs_view_envelope_document, VerdocsViewTemplateDocument as verdocs_view_template_document };
+
+//# sourceMappingURL=verdocs-loader_4.entry.js.map