@verdocs/web-sdk 1.12.15 → 1.12.18

package/dist/components/verdocs-search-activity2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { a as getTemplates } from './Templates2.js';
+import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 
 /**

package/dist/components/verdocs-search-box2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 
 const verdocsSearchBoxCss = "verdocs-search-box{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-search-box form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0 0;border-radius:5px;-ms-flex-align:center;align-items:center;background-color:#fff;padding:0 8px;border-width:1px;border-style:solid;border-color:#707ae5}verdocs-search-box form input{-webkit-box-sizing:border-box;box-sizing:border-box;height:43px;width:100%;font-size:18px;border:none}verdocs-search-box form input:focus{outline:none}verdocs-search-box form button.search{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:none;width:100px;height:28px;font-weight:700;font-size:10px;letter-spacing:1px;background-color:#55bc81;text-transform:uppercase;color:#fff}verdocs-search-box form .type{background-color:#707ae5;height:30px;display:-ms-inline-flexbox;display:inline-flex;padding:1px 0 2px 10px;font-size:13px;line-height:16px;border-radius:4px;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#fff;margin-right:10px}verdocs-search-box form .type button{border:none;color:#fff;margin:5px 0 0 8px;background:transparent}verdocs-search-box form svg{width:12px;height:12px;margin-right:6px}verdocs-search-box ::-webkit-input-placeholder{color:#aeb4bf}verdocs-search-box ::-moz-placeholder{color:#aeb4bf}verdocs-search-box :-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::placeholder{color:#aeb4bf}";

package/dist/components/verdocs-search.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as defineCustomElement$4 } from './verdocs-quick-functions2.js';
 import { d as defineCustomElement$3 } from './verdocs-search-activity2.js';

package/dist/components/verdocs-send.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { i as isValidEmail, a as isValidPhone } from './Validators.js';
 import { g as getRGBA } from './Colors.js';

package/dist/components/verdocs-sign.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { g as getSigningSession, u as updateEnvelopeField, a as updateEnvelopeFieldSignature, b as updateEnvelopeFieldInitials } from './Envelopes.js';
+import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials } from './Primitives.js';
@@ -107,7 +108,7 @@ var createInitials = function (endpoint, name, initials) {
         .then(function (r) { return r.data; });
 };
 
-const verdocsSignCss = "verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign .header{color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 15px;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .logo{width:80px;display:none;margin:-6px 0 0 10px}verdocs-sign .header .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-sign .intro{width:100%;display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px;color:#111111;padding:0 15px;font-size:18px;font-weight:500;line-height:28px;-ms-flex-direction:row;flex-direction:row;background:#ffffff;-ms-flex-align:center;align-items:center}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign>.document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 15px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}@media print{verdocs-sign .header{display:none}}";
+const verdocsSignCss = "verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign .header{color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 15px;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .logo{width:80px;display:none;margin:-6px 0 0 10px}verdocs-sign .header .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-sign .intro{width:100%;display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px;color:#111111;padding:0 15px;font-size:18px;font-weight:500;line-height:28px;-ms-flex-direction:row;flex-direction:row;background:#ffffff;-ms-flex-align:center;align-items:center}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign>.document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:70px 15px 15px 15px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 15px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}@media print{verdocs-sign .header{display:none}}";
 
 const inProgressMenuOptions = [
   { id: 'later', label: 'Finish Later' },
@@ -132,6 +133,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.envelopeId = null;
     this.roleId = null;
     this.inviteCode = null;
+    this.headerTargetId = null;
     this.recipient = null;
     this.signerToken = null;
     this.hasSignature = false;
@@ -178,7 +180,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       if (this.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      await getEnvelopeById(this.endpoint, this.envelopeId);
+      await getEnvelopeById(this.endpoint, this.envelopeId, true);
       if (state.envelope.documents.length > 0) {
         this.documentsSingularPlural = 'document(s)';
       }
@@ -202,6 +204,15 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
     }
   }
+  componentDidRender() {
+    const headerTarget = this.headerTargetId ? document.getElementById(this.headerTargetId) : null;
+    const headerEl = document.getElementById('verdocs-sign-header');
+    if (headerTarget && headerEl) {
+      console.log('[SIGN] Moving header');
+      headerEl.remove();
+      headerTarget.append(headerEl);
+    }
+  }
   handleClickAgree() {
     envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
       .then(() => {
@@ -223,7 +234,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.finishLater = true;
         this.showFinishLater = true;
         (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'later' });
-        // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);
         break;
       case 'claim':
         window.alert('This feature will be available in an upcoming release.');
@@ -501,9 +511,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (state.loading || !state.envelope) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, { class: { agreed: this.agreed }, "data-r": state.updateCount }, !this.isDone && !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (h("div", { class: "header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), this.isDone ? (
-    // <div>test</div>
-    h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("div", { class: "document" }, (state.envelope.documents || []).map(envelopeDocument => {
+    if (this.isDone) {
+      return (h(Host, { class: { agreed: this.agreed }, "data-r": state.updateCount }, this.isDone ? (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') })));
+    }
+    return (h(Host, { class: { agreed: this.agreed }, "data-r": state.updateCount }, !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), h("div", { class: "header", id: "verdocs-sign-header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })), !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document" }, (state.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
       return (h(Fragment, null, pages.map(page => {
@@ -520,13 +531,14 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
             { name: 'controls', type: 'div' },
           ] }));
       })));
-    }))), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => (this.showDone = false) }))));
+    })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => (this.showDone = false) }))));
   }
   static get style() { return verdocsSignCss; }
 }, [0, "verdocs-sign", {
     "envelopeId": [1, "envelope-id"],
     "roleId": [1, "role-id"],
     "inviteCode": [1, "invite-code"],
+    "headerTargetId": [1, "header-target-id"],
     "recipient": [32],
     "signerToken": [32],
     "hasSignature": [32],

package/dist/components/verdocs-template-attachments.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';

package/dist/components/verdocs-template-create2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { c as createTemplate, g as getTemplate } from './Templates2.js';
 import { c as createTemplateDocument } from './TemplateDocuments.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';

package/dist/components/verdocs-template-document-page2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { g as getTemplateDocumentPageDisplayUri } from './TemplateDocuments.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { t as throttle } from './utils.js';

package/dist/components/verdocs-template-field-properties2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { u as updateField, d as deleteField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';

package/dist/components/verdocs-template-fields2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as interact } from './interact.min.js';
+import './Types.js';
 import { u as updateField, c as createField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as getRoleIndex, r as renderDocumentField, c as updateCssTransform, d as defaultWidth, e as defaultHeight } from './utils.js';

package/dist/components/verdocs-template-name.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { u as updateTemplate } from './Templates2.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';

package/dist/components/verdocs-template-properties.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { g as getTemplate } from './Templates2.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';

package/dist/components/verdocs-template-reminders.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';

package/dist/components/verdocs-template-role-properties2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { V as VerdocsEndpoint, T as TemplateSenderTypes } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';

package/dist/components/verdocs-template-roles.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { i as interact } from './interact.min.js';
+import './Types.js';
 import { u as updateRole, c as createRole, d as defineCustomElement$4 } from './verdocs-template-role-properties2.js';
 import { V as VerdocsEndpoint, T as TemplateSenderTypes } from './VerdocsEndpoint.js';
 import { g as getRGBA } from './Colors.js';

package/dist/components/verdocs-template-sender2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { u as updateTemplate } from './Templates2.js';
 import { V as VerdocsEndpoint, T as TemplateSenderTypes } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';

package/dist/components/verdocs-template-visibility.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
 import { u as updateTemplate } from './Templates2.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';

package/dist/components/verdocs-view2.js

@@ -1,4 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { d as cancelEnvelope } from './Envelopes.js';
+import { E as EnvelopeStates } from './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { f as saveEnvelopesAsZip, h as saveCertificate, s as saveAttachment } from './utils.js';
 import { g as getEnvelopeById, s as state } from './Envelopes2.js';
@@ -7,7 +9,26 @@ import { d as defineCustomElement$3 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$2 } from './verdocs-envelope-document-page2.js';
 import { d as defineCustomElement$1 } from './verdocs-loader2.js';
 
-const verdocsViewCss = "verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .header{color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 15px;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-view .header .logo{width:80px;display:none;margin:-6px 0 0 10px}verdocs-view .header .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-view .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-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 .document .inner{width:100%;max-width:1028px}";
+/**
+ * Various helpers to identify available operations for an envelope by a user.
+ *
+ * @module
+ */
+/**
+ * Check to see if the user owns the envelope.
+ */
+var userIsEnvelopeOwner = function (session, envelope) { return envelope.profile_id === (session === null || session === void 0 ? void 0 : session.profile_id); };
+/**
+ * Check to see if the user owns the envelope.
+ */
+var userCanCancelEnvelope = function (session, envelope) {
+    return userIsEnvelopeOwner(session, envelope) &&
+        envelope.status !== EnvelopeStates.COMPLETE &&
+        envelope.status !== EnvelopeStates.DECLINED &&
+        envelope.status !== EnvelopeStates.CANCELED;
+};
+
+const verdocsViewCss = "verdocs-view{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .header{width:100%;color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 15px;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-view .header .logo{width:80px;display:none;margin:-6px 0 0 10px}verdocs-view .header .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-view .document{-ms-flex:1;flex:1;width:100%;height:100%;display:-ms-flexbox;display:flex;padding:70px 15px 15px 15px;row-gap:15px;min-height:200px;max-width:1200px;position:relative;overflow-y:scroll;-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 .document .inner{width:100%;max-width:1028px}";
 
 const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -17,6 +38,8 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.envelopeId = '';
+    this.headerTargetId = null;
+    this.isProcessing = false;
   }
   componentWillLoad() {
     this.endpoint.loadSession();
@@ -24,13 +47,30 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // 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) {
       console.error(`[VIEW] Missing required envelopeId`);
       return;
     }
+    return this.reloadEnvelope();
+  }
+  componentDidRender() {
+    const headerTarget = this.headerTargetId ? document.getElementById(this.headerTargetId) : null;
+    const headerEl = document.getElementById('verdocs-view-header');
+    if (headerTarget && headerEl) {
+      console.log('[VIEW] Moving header');
+      headerEl.remove();
+      headerTarget.append(headerEl);
+    }
+  }
+  async reloadEnvelope() {
+    var _a, _b, _c;
+    console.log('[VIEW] Checking for updated envelope');
     try {
-      await getEnvelopeById(this.endpoint, this.envelopeId);
+      await getEnvelopeById(this.endpoint, this.envelopeId, true);
+      this.isProcessing = state.envelope.documents.some(document => document.type === 'attachment' && !document.processed);
+      if (this.isProcessing) {
+        setTimeout(() => this.reloadEnvelope(), 3000);
+      }
     }
     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));
@@ -39,28 +79,20 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[VIEW] Page rendered', pageInfo);
-    // EnvelopeStore.envelope.recipients.forEach((recipient, roleIndex) => {
-    //   console.log('rendering fields for recipient', roleIndex, recipient);
-    //   recipient.fields.forEach(field => {
-    //     const el = renderDocumentField(field, pageInfo, roleIndex, {disabled: true, editable: false, draggable: false, done: true});
-    //     if (!el) {
-    //       return;
-    //     }
-    //
-    //     if (el.setAttribute) {
-    //       el.setAttribute('roleindex', roleIndex);
-    //       el.setAttribute('xScale', pageInfo.xScale);
-    //       el.setAttribute('yScale', pageInfo.yScale);
-    //     }
-    //   });
-    // });
   }
   async handleOptionSelected(e) {
-    var _a;
+    var _a, _b;
     switch (e.detail.id) {
+      case 'cancel':
+        // TODO: Better option for inline-flow confirmation and alert dialogs.
+        if (confirm('Are you sure you wish to cancel this envelope? This action cannot be undone.')) {
+          await cancelEnvelope(this.endpoint, this.envelopeId);
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'canceled' });
+        }
+        break;
       case 'print':
         window.print();
-        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'printed' });
+        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'printed' });
         break;
       case 'download-attachments':
         saveAttachment(this.endpoint, state.envelope, state.envelope.envelope_document_id)
@@ -96,7 +128,6 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     var _a;
-    console.log('[VIEW] Rendering', state.error, state.loading, state.envelope);
     if (state.loading || !state.envelope) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
@@ -104,25 +135,32 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return (h(Host, null, h("div", null, state.error)));
     }
     const menuOptions = [{ id: 'print', label: 'Print' }];
+    if (userCanCancelEnvelope(this.endpoint.session, state.envelope)) {
+      menuOptions.push({ id: 'cancel', label: 'Cancel' });
+    }
+    // Add download options to the menu
     const hasAttachments = state.envelope.documents.length > 0;
     const hasCertificate = !!state.envelope.certificate;
     if (hasAttachments || hasCertificate) {
       menuOptions.push({ label: '' });
+      if (hasAttachments) {
+        menuOptions.push({ id: 'download-attachments', label: 'Download Documents(s)' });
+      }
+      if (hasCertificate) {
+        menuOptions.push({ id: 'download-certificate', label: 'Download Certificate' });
+      }
+      if (hasAttachments && hasCertificate) {
+        menuOptions.push({ id: 'download-all', label: 'Download All Files' });
+      }
     }
-    if (hasAttachments) {
-      menuOptions.push({ id: 'download-attachments', label: 'Download Documents(s)' });
-    }
-    if (hasCertificate) {
-      menuOptions.push({ id: 'download-certificate', label: 'Download Certificate' });
-    }
-    if (hasAttachments && hasCertificate) {
-      menuOptions.push({ id: 'download-all', label: 'Download All Files' });
-    }
-    return (h(Host, { "data-r": state.updateCount }, h("div", { class: "header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document" }, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
+    return (h(Host, { "data-r": state.updateCount }, h("div", { class: "header", id: "verdocs-view-header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document" }, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
       .filter(document => document.type !== 'certificate')
       .map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
+      if (!envelopeDocument.processed) {
+        return h("verdocs-loader", null);
+      }
       return (h(Fragment, null, pages.map(page => (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
@@ -133,7 +171,9 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return verdocsViewCss; }
 }, [0, "verdocs-view", {
     "endpoint": [16],
-    "envelopeId": [1, "envelope-id"]
+    "envelopeId": [1, "envelope-id"],
+    "headerTargetId": [1, "header-target-id"],
+    "isProcessing": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-14T15:28:31",
+  "timestamp": "2023-03-15T14:40:46",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -5023,6 +5023,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "headerTargetId",
+          "type": "string",
+          "mutable": false,
+          "attr": "header-target-id",
+          "reflectToAttr": false,
+          "docs": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the header will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects (e.g. \"fixed\").\n\nThe movement of the header to the target container is not dynamic - it is performed only on the initial\nrender. Host applications should not conditionally render this container. If the header's visibility must\nbe externally controlled, use CSS display options to hide/show it instead.",
+          "docsTags": [],
+          "default": "null",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "inviteCode",
           "type": "string",
@@ -5095,22 +5112,22 @@
       "dependents": [],
       "dependencies": [
         "verdocs-loader",
+        "verdocs-view",
+        "verdocs-ok-dialog",
         "verdocs-checkbox",
         "verdocs-button",
         "verdocs-dropdown",
-        "verdocs-view",
-        "verdocs-envelope-document-page",
-        "verdocs-ok-dialog"
+        "verdocs-envelope-document-page"
       ],
       "dependencyGraph": {
         "verdocs-sign": [
           "verdocs-loader",
+          "verdocs-view",
+          "verdocs-ok-dialog",
           "verdocs-checkbox",
           "verdocs-button",
           "verdocs-dropdown",
-          "verdocs-view",
-          "verdocs-envelope-document-page",
-          "verdocs-ok-dialog"
+          "verdocs-envelope-document-page"
         ],
         "verdocs-view": [
           "verdocs-loader",
@@ -5878,7 +5895,7 @@
           "mutable": false,
           "attr": "toolbar-target-id",
           "reflectToAttr": false,
-          "docs": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the toolbar will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects.",
+          "docs": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the toolbar will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects.\n\nThe movement of the toolbar to the target container is not dynamic - it is performed only on the initial\nrender. Host applications should not conditionally render this container. If the toolbar's visibility must\nbe externally controlled, use CSS display options to hide/show it instead.",
           "docsTags": [],
           "default": "null",
           "values": [
@@ -7313,6 +7330,23 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "headerTargetId",
+          "type": "string",
+          "mutable": false,
+          "attr": "header-target-id",
+          "reflectToAttr": false,
+          "docs": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the header will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects (e.g. \"fixed\").\n\nThe movement of the header to the target container is not dynamic - it is performed only on the initial\nrender. Host applications should not conditionally render this container. If the header's visibility must\nbe externally controlled, use CSS display options to hide/show it instead.",
+          "docsTags": [],
+          "default": "null",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],

package/dist/esm/{Envelopes-3a9b4cff.js → Envelopes-16f09341.js}

@@ -1,4 +1,4 @@
-import { d as decodeAccessTokenBody } from './Token-54690789.js';
+import { d as decodeAccessTokenBody } from './Types-6dc82c14.js';
 
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -63,6 +63,16 @@ var getEnvelope = function (endpoint, envelopeId, ssr) { return __awaiter(void 0
                 .then(function (r) { return r.data; })];
     });
 }); };
+/**
+ * Cancel an Envelope.
+ */
+var cancelEnvelope = function (endpoint, envelopeId) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .put("/envelopes/".concat(envelopeId), { action: 'cancel' })
+                .then(function (r) { return r.data; })];
+    });
+}); };
 /**
  * Get (binary download) a file attached to an Envelope. It is important to use this method
  * rather than a direct A HREF or similar link to set the authorization headers for the
@@ -126,4 +136,4 @@ var getEnvelopeDocumentPageDisplayUri = function (endpoint, envelopeId, document
     return [2 /*return*/, endpoint.api.get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image")).then(function (r) { return r.data; })];
 }); }); };
 
-export { getEnvelopeFile as a, getFieldAttachment as b, getSigningSession as c, updateEnvelopeFieldSignature as d, updateEnvelopeFieldInitials as e, getEnvelopeDocumentPageDisplayUri as f, getEnvelope as g, updateEnvelopeField as u };
+export { getEnvelopeFile as a, getFieldAttachment as b, getSigningSession as c, updateEnvelopeFieldSignature as d, updateEnvelopeFieldInitials as e, cancelEnvelope as f, getEnvelope as g, getEnvelopeDocumentPageDisplayUri as h, updateEnvelopeField as u };

package/dist/esm/{Envelopes-bbce70db.js → Envelopes-8c27f3c6.js}

@@ -1,4 +1,4 @@
-import { g as getEnvelope } from './Envelopes-3a9b4cff.js';
+import { g as getEnvelope } from './Envelopes-16f09341.js';
 import { c as createStore } from './index-24fd1580.js';
 
 // NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to
@@ -30,13 +30,13 @@ onChange('envelope', async (newEnvelope) => {
 
 // Allows envelope data to be cached for reuse between components, without parent components having to prop-drill entire envelopes into
 // child elements.
-const getEnvelopeById = async (endpoint, envelopeId) => {
+const getEnvelopeById = async (endpoint, envelopeId, forceReload = false) => {
   var _a, _b;
   if (!envelopeId) {
     console.log(`[ENVELOPES] Missing required envelope ID`);
     return;
   }
-  if (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.id) === envelopeId) {
+  if (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.id) === envelopeId && !forceReload) {
     console.log(`[ENVELOPES] Skipping load for already-loaded envelope ID`);
     return;
   }

package/dist/{components/Token.js → esm/Types-6dc82c14.js}

@@ -66,4 +66,50 @@ var decodeAccessTokenBody = function (token) {
     return decoded;
 };
 
-export { decodeAccessTokenBody as d };
+var RecipientActions;
+(function (RecipientActions) {
+    RecipientActions["SUBMIT"] = "submit";
+    RecipientActions["DECLINE"] = "decline";
+    RecipientActions["PREPARE"] = "prepare";
+    RecipientActions["UPDATE"] = "update";
+})(RecipientActions || (RecipientActions = {}));
+var EnvelopeStates;
+(function (EnvelopeStates) {
+    EnvelopeStates["COMPLETE"] = "complete";
+    EnvelopeStates["PENDING"] = "pending";
+    EnvelopeStates["IN_PROGRESS"] = "in progress";
+    EnvelopeStates["DECLINED"] = "declined";
+    EnvelopeStates["CANCELED"] = "canceled";
+})(EnvelopeStates || (EnvelopeStates = {}));
+var RecipientStates;
+(function (RecipientStates) {
+    RecipientStates["INVITED"] = "invited";
+    RecipientStates["OPENED"] = "opened";
+    RecipientStates["SIGNED"] = "signed";
+    RecipientStates["SUBMITTED"] = "submitted";
+    RecipientStates["CANCELED"] = "canceled";
+    RecipientStates["PENDING"] = "pending";
+    RecipientStates["DECLINED"] = "declined";
+})(RecipientStates || (RecipientStates = {}));
+var RecipientTypes;
+(function (RecipientTypes) {
+    RecipientTypes["SIGNER"] = "signer";
+    RecipientTypes["CC"] = "cc";
+    RecipientTypes["APPROVER"] = "approver";
+})(RecipientTypes || (RecipientTypes = {}));
+var DocumentFieldTypes;
+(function (DocumentFieldTypes) {
+    DocumentFieldTypes["SIGNATURE"] = "signature";
+    DocumentFieldTypes["INITIAL"] = "initial";
+    DocumentFieldTypes["CHECKBOX_GROUP"] = "checkbox_group";
+    DocumentFieldTypes["RADIO_BUTTON_GROUP"] = "radio_button_group";
+    DocumentFieldTypes["TEXTBOX"] = "textbox";
+    DocumentFieldTypes["TIMESTAMP"] = "timestamp";
+    DocumentFieldTypes["DATE"] = "date";
+    DocumentFieldTypes["DROPDOWN"] = "dropdown";
+    DocumentFieldTypes["TEXTAREA"] = "textarea";
+    DocumentFieldTypes["ATTACHMENT"] = "attachment";
+    DocumentFieldTypes["PAYMENT"] = "payment";
+})(DocumentFieldTypes || (DocumentFieldTypes = {}));
+
+export { EnvelopeStates as E, decodeAccessTokenBody as d };