@verdocs/web-sdk 1.9.14 → 1.9.16

package/dist/components/verdocs-sign.js

@@ -1,17 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { g as getSigningSession, a as getEnvelope, b as getEnvelopeFile, u as updateEnvelopeField } from './Envelopes.js';
+import { g as getSigningSession, a as getEnvelopeById, s as state, b as getEnvelopeFile, u as updateEnvelopeField, c as updateEnvelopeFieldSignature, d as updateEnvelopeFieldInitials } from './Envelopes.js';
 import './Types.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
-import { g as getRGBA } from './Colors.js';
-import { s as setControlStyles, r as renderDocumentField, a as getRoleIndex, b as getFieldId, c as rescale } from './utils.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { s as state } from './templateStore.js';
+import { a as getRoleIndex, r as renderDocumentField, f as fullNameToInitials, b as getFieldId } from './utils.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$6 } from './verdocs-button2.js';
+import { d as defineCustomElement$7 } from './verdocs-button2.js';
+import { d as defineCustomElement$6 } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$5 } from './verdocs-document-page2.js';
 import { d as defineCustomElement$4 } from './verdocs-dropdown2.js';
-import { d as defineCustomElement$3 } from './verdocs-field-checkbox2.js';
-import { d as defineCustomElement$2 } from './verdocs-field-radio-button2.js';
+import { d as defineCustomElement$3 } from './verdocs-loader2.js';
+import { d as defineCustomElement$2 } from './verdocs-ok-dialog2.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -71,7 +70,35 @@ var updateRecipientStatus = function (endpoint, envelopeId, roleName, action, pa
     });
 }); };
 
-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{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;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 .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}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;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:10px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree .agree-checkbox{background:#ccc;-ms-flex:0 0 20px;flex:0 0 20px;display:-ms-flexbox;display:flex;width:20px;height:20px;border-radius:3px;position:relative;margin:0 10px 0 14px}verdocs-sign .agree .agree-checkbox input[type=checkbox]:checked+label:after{filter:alpha(opacity=100);opacity:1}verdocs-sign .agree .agree-checkbox label{left:2px;top:2px;width:16px;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}verdocs-sign .agree .agree-checkbox label .agree-checkbox label:hover::after{filter:alpha(opacity=30);opacity:0.3}verdocs-sign .agree .agree-checkbox label:after{top:2px;left:3px;width:8px;opacity:0;height:5px;content:\"\";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;border-top:none;border-right:none}";
+/**
+ * Create a signature block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
+ * a signature block to be used for all signature fields in the document. Thus, this is typically called one time to
+ * create and store a signature block. Thereafter, the ID of the signature block may be re-used for each signature field
+ * to be "stamped" by the user.
+ */
+var createSignature = function (endpoint, name, signature) {
+    var data = new FormData();
+    data.append('signature', signature, name);
+    return endpoint.api //
+        .post("/signatures", data)
+        .then(function (r) { return r.data; });
+};
+
+/**
+ * Create an initials block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
+ * an initials block to be used for all initials fields in the document. Thus, this is typically called one time to
+ * create and store an initials block. Thereafter, the ID of the initials block may be re-used for each initials field
+ * to be "stamped" by the user.
+ */
+var createInitials = function (endpoint, name, initials) {
+    var data = new FormData();
+    data.append('initial', initials, name);
+    return endpoint.api //
+        .post("/initials", data)
+        .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{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;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 .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}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;-ms-flex-pack:center;justify-content:center}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}";
 
 const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -80,17 +107,22 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.sdkError = createEvent(this, "sdkError", 7);
     this.fieldUpdated = createEvent(this, "fieldUpdated", 7);
     this.endpoint = null;
+    this.recipientIndex = -1;
+    this.fields = [];
     this.envelopeId = null;
     this.roleId = null;
     this.inviteCode = null;
     this.recipient = null;
     this.signerToken = null;
-    this.recipientIndex = -1;
-    this.envelope = null;
-    this.fields = [];
     this.hasSignature = false;
     this.nextButtonLabel = 'Start';
+    this.errorMessage = '';
     this.focusedField = '';
+    this.finishLater = false;
+    this.showFinishLater = false;
+  }
+  componentWillLoad() {
+    this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
   }
   async componentDidLoad() {
     var _a, _b, _c, _d, _e, _f;
@@ -107,7 +139,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return;
     }
     try {
-      this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
       console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
       const { session, recipient, signerToken } = await getSigningSession(this.endpoint, {
         envelopeId: this.envelopeId,
@@ -121,15 +152,15 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       if (this.recipient.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      const envelope = await getEnvelope(this.endpoint, this.envelopeId);
-      this.envelope = envelope;
-      console.log('[SIGN] Loaded envelope', envelope);
-      this.recipientIndex = this.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
+      await getEnvelopeById(this.endpoint, this.envelopeId);
+      // const envelope = await Envelopes.getEnvelope(this.endpoint, this.envelopeId);
+      // this.envelope = envelope;
+      // console.log('[SIGN] Loaded envelope', envelope);
+      this.recipientIndex = state.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
       if (this.recipientIndex > -1) {
-        console.log('Found recipient', this.envelope.recipients[this.recipientIndex]);
+        this.recipient = state.envelope.recipients[this.recipientIndex];
+        this.fields = this.recipient.fields;
       }
-      this.fields = this.envelope.fields.filter(field => field.recipient_role === this.roleId);
-      console.log('Loaded fields', this.fields);
       // TODO: Fix service to allow this?
       // const sigs = await getSignatures();
       // console.log('sigs', sigs);
@@ -140,22 +171,20 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   handleClickAgree() {
-    console.log('agree clicked');
     updateRecipientStatus(this.endpoint, this.envelopeId, this.roleId, 'update', { agreed: true })
       .then(r => {
-      console.log('update result', r);
       this.nextButtonLabel = 'Next';
       this.recipient = r;
     })
       .catch(e => {
       var _a, _b, _c;
-      console.log('update failure', e);
+      console.log('Update failure', 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));
     });
   }
   async savePDF() {
-    const fileName = `${this.envelope.name} - ${this.envelope.updated_at.split('T')[0]}.pdf`;
-    const data = await getEnvelopeFile(this.endpoint, this.envelopeId, this.envelope.envelope_document_id);
+    const fileName = `${state.envelope.name} - ${state.envelope.updated_at.split('T')[0]}.pdf`;
+    const data = await getEnvelopeFile(this.endpoint, this.envelopeId, state.envelope.envelope_document_id);
     // This is better in React than doing window.href= or similar to trigger a download. For a description of the technique
     // see https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image
     let xhr = new XMLHttpRequest();
@@ -169,18 +198,18 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       a.click();
       a.remove();
     };
-    const url = `data:application/pdf;base64,${data}`;
-    console.log('url', url.length, url);
     xhr.open('GET', `data:application/pdf;base64,${data}`);
     xhr.send();
   }
   async handleOptionSelected(e) {
     switch (e.detail.id) {
       case 'later':
+        this.finishLater = true;
+        this.showFinishLater = true;
         // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);
-        if (!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV'])) {
-          window.alert('User intends to sign later.');
-        }
+        // if (!window?.['STORYBOOK_ENV']) {
+        //   window.alert('User intends to sign later.');
+        // }
         break;
       case 'claim':
         break;
@@ -193,83 +222,58 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         break;
     }
   }
+  saveFieldChange(fieldName, fields) {
+    updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
+      .catch(e => {
+      var _a, _b, _c, _d, _e, _f;
+      if (((_a = e.response) === null || _a === void 0 ? void 0 : _a.status) === 401 && ((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === 'jwt expired') {
+        // TODO: Do we want to improve the instructions here?
+        console.log('[SIGN] Signing session expired');
+        this.errorMessage = 'Signing session expired.';
+      }
+      else {
+        console.log('[SIGN] Server error', e);
+      }
+      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+    });
+  }
   async handleFieldChange(field, e, optionId) {
     console.log('fieldChange', field, e);
+    const { value, checked } = e.target;
     switch (field.type) {
       case 'textbox':
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c, _d, _e, _f;
-          (_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));
-          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
-            console.log('jwt expired');
-          }
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value });
       case 'checkbox_group':
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_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.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: { options: [{ id: optionId, checked }] } });
       case 'radio_button_group':
         const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options } })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_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.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: { options } });
       case 'dropdown':
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_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.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
       case 'initial':
-        console.log('Got initial', e.detail);
-        break;
+        const initialsBlob = await (await fetch(e.detail)).blob();
+        return createInitials(this.endpoint, 'initial', initialsBlob) //
+          .then(newInitials => {
+          console.log('New initials', field.name, newInitials);
+          updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
+        });
       case 'signature':
-        console.log('Got signature', e.detail);
+        const signatureBlob = await (await fetch(e.detail)).blob();
+        return createSignature(this.endpoint, 'signature', signatureBlob) //
+          .then(newSignature => {
+          console.log('New sign', field.name, newSignature);
+          updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
+        });
+      case 'date':
+        const iso = e.target.getAttribute('iso');
+        return this.saveFieldChange(field.name, { prepared: false, value: iso });
+      default:
+        console.log('Unhandled field update', { value, checked }, field);
         break;
     }
   }
-  renderCheckboxGroupOption(page, field, option) {
-    const left = rescale(page.xScale, option.x);
-    const bottom = rescale(page.yScale, option.y);
-    const style = {
-      left: `${left}px`,
-      bottom: `${bottom}px`,
-      position: 'absolute',
-      transform: `scale(${page.xScale}, ${page.yScale})`,
-      backgroundColor: getRGBA(this.recipientIndex),
-    };
-    return h("verdocs-field-checkbox", { style: style, field: field, onChange: e => this.handleFieldChange(field, e, option.id) });
-  }
-  renderRadioGroupOption(page, field, option) {
-    const left = rescale(page.xScale, option.x);
-    const bottom = rescale(page.yScale, option.y);
-    const style = {
-      left: `${left}px`,
-      bottom: `${bottom}px`,
-      position: 'absolute',
-      transform: `scale(${page.xScale}, ${page.yScale})`,
-      backgroundColor: getRGBA(this.recipientIndex),
-    };
-    return h("verdocs-field-radio-button", { style: style, field: field, onFieldChange: e => this.handleFieldChange(field, e, option.id) });
-  }
   isFieldValid(field) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     switch (field.type) {
       case 'textbox':
         switch (((_a = field.settings) === null || _a === void 0 ? void 0 : _a.validator) || '') {
@@ -282,18 +286,19 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         }
       case 'signature':
       case 'initial':
+        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.base64);
       case 'textarea':
       case 'date':
       case 'timestamp':
       case 'attachment':
-        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.result);
+        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.result);
       case 'dropdown':
-        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.value);
+        return !!((_g = field.settings) === null || _g === void 0 ? void 0 : _g.value);
       case 'checkbox_group':
-        const checked = (((_h = (_g = field.settings) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.filter(option => option.checked)) || []).length;
-        return checked >= (((_j = field.settings) === null || _j === void 0 ? void 0 : _j.minimum_checked) || 0) && checked <= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.maximum_checked) || 999);
+        const checked = (((_j = (_h = field.settings) === null || _h === void 0 ? void 0 : _h.options) === null || _j === void 0 ? void 0 : _j.filter(option => option.checked)) || []).length;
+        return checked >= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.minimum_checked) || 0) && checked <= (((_l = field.settings) === null || _l === void 0 ? void 0 : _l.maximum_checked) || 999);
       case 'radio_button_group':
-        return (((_m = (_l = field.settings) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.filter(option => option.selected)) || []).length > 0;
+        return (((_o = (_m = field.settings) === null || _m === void 0 ? void 0 : _m.options) === null || _o === void 0 ? void 0 : _o.filter(option => option.selected)) || []).length > 0;
       // TODO
       // case 'checkbox':
       //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
@@ -303,103 +308,58 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return false;
     }
   }
-  // (async () => {
-  //   await customElements.whenDefined('verdocs-field-signature');
-  //   const els = document.getElementById('verdocs-field-signature');
-  //   await els.focusField();
-  // })();
   handleNext() {
+    var _a;
     // Find and focus the next incomplete required field
     const requiredFields = this.fields.filter(field => field.required);
-    console.log('required Fields', requiredFields);
     const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
-    console.log('focused Index', focusedIndex);
     let nextFocusedIndex = focusedIndex + 1;
     if (nextFocusedIndex >= requiredFields.length) {
       nextFocusedIndex = 0;
     }
-    const nextRequiredField = requiredFields[nextFocusedIndex];
-    console.log('next required field', nextRequiredField);
+    let nextRequiredField = requiredFields[nextFocusedIndex];
+    // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
+    let skips = 0;
+    if (skips < requiredFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_a = nextRequiredField.settings) === null || _a === void 0 ? void 0 : _a.result) === 'signed') {
+      skips++;
+      nextFocusedIndex++;
+      if (nextFocusedIndex >= requiredFields.length) {
+        nextFocusedIndex = 0;
+      }
+      nextRequiredField = requiredFields[nextFocusedIndex];
+    }
+    if (skips >= requiredFields.length) {
+      nextRequiredField = null;
+    }
     if (nextRequiredField) {
       const id = getFieldId(nextRequiredField);
       const el = document.getElementById(id);
-      console.log('focusing', id, el);
       el === null || el === void 0 ? void 0 : el.focusField();
       this.focusedField = nextRequiredField.name;
     }
   }
-  renderField(field, docPage /*, index: number*/) {
-    const controlsDiv = document.getElementById(docPage.containerId + '-controls');
-    if (!controlsDiv) {
-      return;
-    }
-    const id = getFieldId(field);
-    const existingField = document.getElementById(id);
-    console.log('field', id, existingField);
-    if (existingField) {
-      setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
-      return;
-    }
-    let el;
-    switch (field.type) {
-      case 'attachment':
-      case 'checkbox_group':
-      case 'date':
-      case 'dropdown':
-      case 'initial':
-      case 'payment':
-      case 'signature':
-      case 'timestamp':
-      case 'textarea':
-      case 'textbox':
-        el = document.createElement(`verdocs-field-${field.type}`);
-        break;
-      //   return field.settings.options.map((option: any, index) => this.renderCheckboxGroupOption(renderOnPage, field, option, index));
-      case 'radio_button_group':
-        //   el = document.createElement('verdocs-field-signature');
-        //   el.setAttribute('value', base64);
-        break;
-      //   return field.settings.options.map((option: any, index) => this.renderRadioGroupOption(renderOnPage, field, option, index));
-      // case 'attachment':
-      //   el = document.createElement('verdocs-field-attachment');
-      //   el.setAttribute('value', result || '');
-      //   break;
-      // case 'payment':
-      //   el = document.createElement('verdocs-field-payment');
-      //   break;
-      default:
-        console.log('[SIGN] Skipping unsupported field type', field);
-    }
-    console.log('created field', el);
-    if (el) {
-      el.field = field;
-      el.recipient = this.recipient;
-      el.setAttribute('id', id);
-      el.setAttribute('roleindex', this.recipientIndex);
-      el.addEventListener('fieldChange', e => this.handleFieldChange(field, e));
-      setControlStyles(el, field, docPage.xScale, docPage.yScale);
-      controlsDiv.appendChild(el);
-    }
-  }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[SIGN] Page rendered', pageInfo);
-    const fields = state.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    console.log('[SIGN] Fields on page', fields);
-    fields.forEach(field => {
-      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
-      console.log('rendered element', el);
-      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
+    console.log('[SIGN] Page rendered, adding fields', pageInfo);
+    const roleIndex = getRoleIndex(state.roleNames, this.recipient.role_name);
+    const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
+    recipientFields.forEach(field => {
+      var _a;
+      const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false });
       if (!el) {
         return;
       }
-      el.addEventListener('recipientChanged', e => {
-        el.setAttribute('roleindex', getRoleIndex(state.roleNames, e.detail));
-        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));
+      el.addEventListener('input', e => {
+        this.handleFieldChange(field, e).catch(() => { });
+      });
+      el.addEventListener('fieldChange', e => {
+        this.handleFieldChange(field, e).catch(() => { });
       });
-      el.setAttribute('xScale', pageInfo.renderedPage.xScale);
-      el.setAttribute('yScale', pageInfo.renderedPage.yScale);
+      el.setAttribute('roleindex', roleIndex);
+      el.setAttribute('xScale', pageInfo.xScale);
+      el.setAttribute('yScale', pageInfo.yScale);
+      el.setAttribute('initials', this.recipient ? fullNameToInitials(this.recipient.full_name) : '');
+      el.setAttribute('name', ((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.full_name) || '');
       // interact(el).draggable({
       //   listeners: {
       //     start(event) {
@@ -425,37 +385,46 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       //   },
       // });
     });
+    state.envelope.recipients
+      .filter(recipient => recipient.role_name !== this.recipient.role_name)
+      .map(otherRecipient => {
+      const otherRoleIndex = getRoleIndex(state.roleNames, otherRecipient.role_name);
+      console.log('Rendering fields for other recipient', otherRoleIndex, otherRecipient);
+      const recipientFields = otherRecipient.fields.filter(field => field.page === pageInfo.pageNumber);
+      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+      console.log('[SIGN] Fields on page', recipientFields);
+      recipientFields.forEach(field => {
+        const el = renderDocumentField(field, pageInfo, otherRoleIndex, { disabled: true, editable: false, draggable: false });
+        if (!el) {
+          return;
+        }
+        el.setAttribute('roleindex', otherRoleIndex);
+        el.setAttribute('xScale', pageInfo.xScale);
+        el.setAttribute('yScale', pageInfo.yScale);
+      });
+    });
   }
-  // handlePageRendered(e) {
-  //   const pageInfo = e.detail as IPageRenderEvent;
-  //   console.log('[SIGN] Page rendered', pageInfo);
-  //
-  //   const fields = this.fields.filter(field => field.page === pageInfo.renderedPage.pageNumber);
-  //   console.log('[SIGN] Fields on page', fields);
-  //   fields.forEach(field => this.renderField(field, pageInfo.renderedPage));
-  //   // .map((field, index) => this.renderField(field, index));
-  //   // this.pdfPageInfo = e.detail;
-  // }
   render() {
-    var _a, _b, _c, _d, _e;
-    if (!this.envelope) {
-      return h(Host, null);
+    var _a, _b, _c, _d;
+    if (state.loading || !state.envelope) {
+      return (h(Host, null, h("verdocs-loader", null)));
     }
     const menuOptions = [
       { id: 'later', label: 'Finish Later' },
       { id: 'claim', label: 'Claim the Document', disabled: true },
       { id: 'decline', label: 'Decline to Sign' },
-      { id: 'print', label: 'Print Without Signing' },
+      { id: 'print', label: 'Print Without Signing', disabled: true },
       { id: 'download', label: 'Download' },
     ];
-    return (h(Host, { class: { agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents.")), h("div", { class: "header" }, h("div", { class: "inner" }, h("div", { class: "toolbar" }, h("div", { class: "tools" }, h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { class: "agree" }, h("div", { class: "agree-checkbox" }, h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }), h("label", { htmlFor: "agree-checkbox-element" })), h("span", null, "I agree to use electronic records and signatures."))) : (h("div", { style: { flex: '1' } })), h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() }))))), !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document" }, h("div", { class: "inner" }, (((_e = this.envelope) === null || _e === void 0 ? void 0 : _e.documents) || []).map(envelopeDocument => {
+    return (h(Host, { class: { agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, !this.finishLater && (h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents."))), h("div", { class: "header" }, h("div", { class: "inner" }, !this.finishLater && (h("div", { class: "toolbar" }, h("div", { class: "tools" }, h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h("div", { style: { flex: '1' } })), h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))))), !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.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);
+      console.log('p', envelopeDocument, pages);
       return (h(Fragment, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] })))));
-    })))));
+    })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: "To complete the document, 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 = '') })));
   }
   static get style() { return verdocsSignCss; }
 }, [0, "verdocs-sign", {
@@ -464,18 +433,18 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "inviteCode": [1, "invite-code"],
     "recipient": [32],
     "signerToken": [32],
-    "recipientIndex": [32],
-    "envelope": [32],
-    "fields": [32],
     "hasSignature": [32],
     "nextButtonLabel": [32],
-    "focusedField": [32]
+    "errorMessage": [32],
+    "focusedField": [32],
+    "finishLater": [32],
+    "showFinishLater": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-sign", "verdocs-button", "verdocs-document-page", "verdocs-dropdown", "verdocs-field-checkbox", "verdocs-field-radio-button"];
+  const components = ["verdocs-sign", "verdocs-button", "verdocs-checkbox", "verdocs-document-page", "verdocs-dropdown", "verdocs-loader", "verdocs-ok-dialog"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-sign":
       if (!customElements.get(tagName)) {
@@ -483,6 +452,11 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
@@ -497,12 +471,12 @@ function defineCustomElement$1() {
         defineCustomElement$4();
       }
       break;
-    case "verdocs-field-checkbox":
+    case "verdocs-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "verdocs-field-radio-button":
+    case "verdocs-ok-dialog":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }