@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/components/verdocs-sign.js

@@ -1,12 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { a as getSigningSession, b as getEnvelope, u as updateEnvelopeField, d as updateEnvelopeFieldSignature, e as updateEnvelopeFieldInitials, f as uploadEnvelopeFieldAttachment } from './Envelopes.js';
-import { R as RecipientStates } from './Types.js';
-import { e as envelopeRecipientAgree, a as envelopeRecipientDecline, b as envelopeRecipientSubmit } from './Recipients.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { i as isValidPhone, a as isValidEmail } from './Validators.js';
-import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
-import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, b as getFieldId } from './utils.js';
-import { c as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore.js';
+import { VerdocsEndpoint, getSigningSession, getEnvelope, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, envelopeRecipientSubmit, uploadEnvelopeFieldAttachment, fullNameToInitials, integerSequence } from '@verdocs/js-sdk';
+import { j as saveAttachment, k as updateDocumentFieldValue, r as renderDocumentField, b as getFieldId } from './utils.js';
+import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
@@ -17,602 +12,599 @@ import { d as defineCustomElement$4 } from './verdocs-loader2.js';
 import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
 import { d as defineCustomElement$2 } from './verdocs-view2.js';
 
-/**
- * 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 = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}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>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding: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 .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign .agree{-ms-flex:0;flex:0;width:600px;display:-ms-flexbox;display:flex;max-width:90%;padding:30px 15px;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree li{margin:0.5em 0}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-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 .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 20px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}";
+const VerdocsSignStyle0 = verdocsSignCss;
 
 const inProgressMenuOptions = [
-  { 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: 'download', label: 'Download' },
+    { 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: 'download', label: 'Download' },
 ];
 const doneMenuOptions = [
-  { id: 'print', label: 'Print' },
-  { id: 'download', label: 'Download' },
+    { id: 'print', label: 'Print' },
+    { id: 'download', label: 'Download' },
 ];
-const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.envelopeLoaded = createEvent(this, "envelopeLoaded", 7);
-    this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
-    this.endpoint = null;
-    this.recipientIndex = -1;
-    this.envelopeId = null;
-    this.roleId = null;
-    this.inviteCode = null;
-    this.headerTargetId = null;
-    this.envelope = null;
-    this.roleNames = [];
-    this.sortedRecipients = [];
-    this.recipient = null;
-    this.signerToken = null;
-    this.hasSignature = false;
-    this.nextButtonLabel = 'Start';
-    this.nextSubmits = false;
-    this.errorMessage = '';
-    this.focusedField = '';
-    this.submitting = false;
-    this.isDone = false;
-    this.showDone = false;
-    this.showLoadError = false;
-    this.finishLater = false;
-    this.showFinishLater = false;
-    this.agreed = false;
-    this.documentsSingularPlural = 'document';
-  }
-  componentWillLoad() {
-    this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
-  }
-  async componentWillRender() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (!this.envelopeId) {
-      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError('[SIGN] Missing required envelopId', 500, ''));
-      return;
-    }
-    if (!this.roleId) {
-      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError('[SIGN] Missing required roleId', 500, ''));
-      return;
-    }
-    if (!this.inviteCode) {
-      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError('[SIGN] Missing required inviteCode', 500, ''));
-      return;
-    }
-    try {
-      console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
-      const { session, recipient, signerToken } = await getSigningSession(this.endpoint, {
-        envelopeId: this.envelopeId,
-        roleId: this.roleId,
-        inviteCode: this.inviteCode,
-      });
-      console.log(`[SIGN] Loaded signing session ${session.email} / ${session.profile_id}`);
-      this.recipient = recipient;
-      console.log('[SIGN] We are recipient', this.recipient);
-      this.signerToken = signerToken;
-      this.endpoint.setToken(signerToken);
-      if (this.agreed) {
-        this.nextButtonLabel = 'Next';
-      }
-      this.envelope = await getEnvelope(this.endpoint, this.envelopeId);
-      createTemplateFieldStoreFromEnvelope(this.envelope);
-      this.sortedRecipients = [...this.envelope.recipients];
-      this.sortedRecipients.sort((a, b) => {
-        return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
-      });
-      this.roleNames = this.sortedRecipients.map(r => r.role_name);
-      if (this.envelope.documents.length > 0) {
-        this.documentsSingularPlural = 'document(s)';
-      }
-      this.recipientIndex = this.roleNames.findIndex(roleName => roleName == this.roleId);
-      if (this.recipientIndex > -1) {
-        this.recipient = this.sortedRecipients[this.recipientIndex];
-        this.agreed = this.recipient.agreed;
-        console.log('[SIGN] Found our recipient in the envelope', this.recipientIndex, this.recipient);
-      }
-      else {
-        console.log('[SIGN] Could not find our recipient record', this.roleId, this.sortedRecipients);
-      }
-      this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);
-      this.checkRecipientFields();
-      (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
-    }
-    catch (e) {
-      console.log('Error with signing session', e);
-      (_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));
-      this.showLoadError = true;
+const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.envelopeLoaded = createEvent(this, "envelopeLoaded", 7);
+        this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
+        this.endpoint = null;
+        this.recipientIndex = -1;
+        this.envelopeId = null;
+        this.roleId = null;
+        this.inviteCode = null;
+        this.headerTargetId = null;
+        this.envelope = null;
+        this.roleNames = [];
+        this.sortedRecipients = [];
+        this.recipient = null;
+        this.signerToken = null;
+        this.hasSignature = false;
+        this.nextButtonLabel = 'Start';
+        this.nextSubmits = false;
+        this.errorMessage = '';
+        this.focusedField = '';
+        this.submitting = false;
+        this.isDone = false;
+        this.showDone = false;
+        this.showLoadError = false;
+        this.finishLater = false;
+        this.showFinishLater = false;
+        this.agreed = false;
+        this.documentsSingularPlural = 'document';
     }
-  }
-  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);
+    componentWillLoad() {
+        this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
     }
-  }
-  handleClickAgree() {
-    this.submitting = true;
-    envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
-      .then(() => {
-      var _a;
-      this.nextButtonLabel = 'Next';
-      this.recipient.agreed = true;
-      this.submitting = false;
-      this.agreed = true; // The server returns a recipient object but it's not "deep" so we track this locally
-      (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'agreed' });
-    })
-      .catch(e => {
-      var _a, _b, _c;
-      console.log('Update failure', e);
-      this.submitting = false;
-      (_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 handleOptionSelected(e) {
-    var _a, _b, _c, _d, _e;
-    switch (e.detail.id) {
-      case 'later':
-        this.finishLater = true;
-        this.showFinishLater = true;
-        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'later' });
-        break;
-      case 'claim':
-        VerdocsToast('This feature will be available in an upcoming release.');
-        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'claimed' });
-        break;
-      case 'decline':
-        {
-          this.submitting = true;
-          const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
-          console.log('Decline result', declineResult);
-          (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
-          this.submitting = false;
-          this.isDone = true;
+    async componentWillRender() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.envelopeId) {
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError('[SIGN] Missing required envelopId', 500, ''));
+            return;
         }
-        break;
-      case 'print':
-        window.print();
-        (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
-        break;
-      case 'download':
-        saveAttachment(this.endpoint, this.envelope, this.envelope.envelope_document_id).catch(e => {
-          console.log('Error downloading PDF', e);
-        });
-        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
-        break;
-    }
-  }
-  updateRecipientFieldValue(fieldName, updateResult) {
-    console.log('[SIGN] updateRecipientFieldValue', fieldName);
-    this.getRecipientFields().forEach(oldField => {
-      if (oldField.name === fieldName) {
-        oldField.settings = updateResult.settings;
-        // TODO: When we break out other fields like value, update them here too
-        updateDocumentFieldValue(oldField);
-        this.checkRecipientFields();
-      }
-    });
-  }
-  saveFieldChange(fieldName, fields) {
-    console.log('[SIGN] updateRecipientFieldValue', fieldName);
-    updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
-      .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
-      .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. Please reload your browser to continue.';
-      }
-      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) {
-    const { value, checked } = e.target;
-    switch (field.type) {
-      case 'textbox':
-        return this.saveFieldChange(field.name, { prepared: false, value });
-      case 'checkbox_group': {
-        const options = field.settings.options.map(option => ({ id: option.id, checked: e.target.checked }));
-        return this.saveFieldChange(field.name, { prepared: false, value: { options } });
-      }
-      case 'radio_button_group': {
-        const options = field.settings.options.map(option => ({ id: option.id, selected: e.target.value === option.id }));
-        return this.saveFieldChange(field.name, { prepared: false, value: { options } });
-      }
-      case 'dropdown':
-        return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
-      case 'initial':
-        // This can be caused by a focus-out event if the user clicks the field
-        // after it's already filled in, then clicks something else like a textbox.
-        // We don't visually indicate the focus, but it's still there.
-        if (!e.detail) {
-          return;
+        if (!this.roleId) {
+            (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError('[SIGN] Missing required roleId', 500, ''));
+            return;
         }
-        const initialsBlob = await (await fetch(e.detail)).blob();
-        return createInitials(this.endpoint, 'initial', initialsBlob) //
-          .then(async (newInitials) => {
-          const updateResult = await updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
-          this.updateRecipientFieldValue(field.name, updateResult);
-        });
-      case 'signature':
-        // This can be caused by a focus-out event if the user clicks the field
-        // after it's already filled in, then clicks something else like a textbox.
-        // We don't visually indicate the focus, but it's still there.
-        if (!e.detail) {
-          return;
+        if (!this.inviteCode) {
+            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError('[SIGN] Missing required inviteCode', 500, ''));
+            return;
         }
-        const signatureBlob = await (await fetch(e.detail)).blob();
-        return createSignature(this.endpoint, 'signature', signatureBlob) //
-          .then(async (newSignature) => {
-          console.log('Signature update result', newSignature);
-          const updateResult = await updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
-          this.updateRecipientFieldValue(field.name, updateResult);
-        })
-          .catch(e => {
-          console.warn('Error updating signature', e);
-        });
-      case 'date':
-        const { date, formattedDate } = e.detail;
-        if (formattedDate) {
-          console.log('dt', { date, formattedDate });
-          return this.saveFieldChange(field.name, { prepared: false, value: formattedDate });
+        try {
+            console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
+            const { session, recipient, signerToken } = await getSigningSession(this.endpoint, {
+                envelopeId: this.envelopeId,
+                roleId: this.roleId,
+                inviteCode: this.inviteCode,
+            });
+            console.log(`[SIGN] Loaded signing session ${session.email} / ${session.profile_id}`);
+            this.recipient = recipient;
+            console.log('[SIGN] We are recipient', this.recipient);
+            this.signerToken = signerToken;
+            this.endpoint.setToken(signerToken);
+            if (this.agreed) {
+                this.nextButtonLabel = 'Next';
+            }
+            this.envelope = await getEnvelope(this.endpoint, this.envelopeId);
+            createTemplateFieldStoreFromEnvelope(this.envelope);
+            this.sortedRecipients = [...this.envelope.recipients];
+            this.sortedRecipients.sort((a, b) => {
+                return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
+            });
+            this.roleNames = this.sortedRecipients.map(r => r.role_name);
+            if (this.envelope.documents.length > 0) {
+                this.documentsSingularPlural = 'document(s)';
+            }
+            this.recipientIndex = this.roleNames.findIndex(roleName => roleName == this.roleId);
+            if (this.recipientIndex > -1) {
+                this.recipient = this.sortedRecipients[this.recipientIndex];
+                this.agreed = this.recipient.agreed;
+                console.log('[SIGN] Found our recipient in the envelope', this.recipientIndex, this.recipient);
+            }
+            else {
+                console.log('[SIGN] Could not find our recipient record', this.roleId, this.sortedRecipients);
+            }
+            this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);
+            this.checkRecipientFields();
+            (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
+        }
+        catch (e) {
+            console.log('Error with signing session', e);
+            (_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));
+            this.showLoadError = true;
         }
-        break;
-      case 'timestamp':
-        console.log('Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
-        break;
-      default:
-        console.log('Unhandled field update', { value, checked }, field);
-        break;
     }
-  }
-  isFieldFilled(field) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { result = '', value = '', base64 = '' } = field.settings || {};
-    switch (field.type) {
-      case 'textbox':
-        switch (((_a = field.settings) === null || _a === void 0 ? void 0 : _a.validator) || '') {
-          case 'email':
-            return isValidEmail(result);
-          case 'phone':
-            return isValidPhone(result);
-          default:
-            return result !== '';
+    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);
         }
-      case 'signature':
-      case 'initial':
-        return base64 !== '';
-      // Timestamp fields get automatically filled when the envelope is submitted.
-      case 'timestamp':
-        return true;
-      case 'textarea':
-      case 'date':
-      case 'attachment':
-        return result !== '';
-      case 'dropdown':
-        return value !== '';
-      case 'checkbox_group':
-        const checkedCount = (((_c = (_b = field.settings) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.filter(option => option.checked)) || []).length;
-        return checkedCount >= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.minimum_checked) || 0) && checkedCount <= (((_e = field.settings) === null || _e === void 0 ? void 0 : _e.maximum_checked) || 999);
-      case 'radio_button_group':
-        return (((_g = (_f = field.settings) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.filter(option => option.selected)) || []).length > 0;
-      // TODO
-      // case 'checkbox':
-      //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
-      // case 'payment':
-      //   return <verdocs-field-payment style={style} field={field} id={id} />;
-      default:
-        return false;
     }
-  }
-  isFieldValid(field) {
-    const { required = false } = field;
-    return !required || this.isFieldFilled(field);
-  }
-  async handleNext() {
-    var _a, _b;
-    if (this.nextSubmits) {
-      try {
-        // Patches the date picker to be forcibly removed if still showing during submission
-        (_a = document.getElementById('air-datepicker-global-container')) === null || _a === void 0 ? void 0 : _a.remove();
+    handleClickAgree() {
         this.submitting = true;
-        const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
-        console.log('[SIGN] Submitted successfully', result);
-        this.recipient.status = 'submitted';
-        this.showDone = true;
-        this.isDone = true;
-        // TODO: This is a temporary hack. After submitting, if we immediately show the View component it won't have re-renedered the
-        //  pages yet with our submitted data.
-        // setTimeout(() => {
-        //   console.log('[SIGN] Reloading');
-        //   window.location.reload();
-        // }, 250);
-      }
-      catch (e) {
-        console.log('[SIGN] Error submitting', e);
-      }
-      this.submitting = false;
-      return;
+        envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
+            .then(() => {
+            var _a;
+            this.nextButtonLabel = 'Next';
+            this.recipient.agreed = true;
+            this.submitting = false;
+            this.agreed = true; // The server returns a recipient object but it's not "deep" so we track this locally
+            (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'agreed' });
+        })
+            .catch(e => {
+            var _a, _b, _c;
+            console.log('Update failure', e);
+            this.submitting = false;
+            (_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));
+        });
     }
-    // Find and focus the next incomplete field (that is fillable)
-    const emptyFields = this.getRecipientFields()
-      .filter(field => !this.isFieldFilled(field)) // field.required)
-      .filter(field => field.type !== 'timestamp');
-    emptyFields.sort((a, b) => {
-      var _a, _b, _c, _d;
-      const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
-      const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
-      const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
-      const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
-      return bY !== aY ? bY - aY : bX - aX;
-    });
-    const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
-    let nextFocusedIndex = focusedIndex + 1;
-    if (nextFocusedIndex >= emptyFields.length) {
-      nextFocusedIndex = 0;
+    async handleOptionSelected(e) {
+        var _a, _b, _c, _d, _e;
+        switch (e.detail.id) {
+            case 'later':
+                this.finishLater = true;
+                this.showFinishLater = true;
+                (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'later' });
+                break;
+            case 'claim':
+                VerdocsToast('This feature will be available in an upcoming release.');
+                (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'claimed' });
+                break;
+            case 'decline':
+                {
+                    this.submitting = true;
+                    const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
+                    console.log('Decline result', declineResult);
+                    (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
+                    this.submitting = false;
+                    this.isDone = true;
+                }
+                break;
+            case 'print':
+                window.print();
+                (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
+                break;
+            case 'download':
+                {
+                    const firstDoc = this.envelope.documents.find(doc => doc.type === 'attachment');
+                    if (firstDoc) {
+                        saveAttachment(this.endpoint, this.envelope, firstDoc.id).catch(e => {
+                            console.log('Error downloading PDF', e);
+                        });
+                        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
+                    }
+                }
+                break;
+        }
     }
-    let nextRequiredField = emptyFields[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 < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
-      skips++;
-      nextFocusedIndex++;
-      if (nextFocusedIndex >= emptyFields.length) {
-        nextFocusedIndex = 0;
-      }
-      nextRequiredField = emptyFields[nextFocusedIndex];
+    updateRecipientFieldValue(fieldName, updateResult) {
+        console.log('[SIGN] updateRecipientFieldValue', fieldName);
+        this.getRecipientFields().forEach(oldField => {
+            if (oldField.name === fieldName) {
+                oldField.settings = updateResult.settings;
+                // TODO: When we break out other fields like value, update them here too
+                updateDocumentFieldValue(oldField);
+                this.checkRecipientFields();
+            }
+        });
     }
-    if (skips >= emptyFields.length) {
-      nextRequiredField = null;
+    saveFieldChange(fieldName, fields) {
+        console.log('[SIGN] updateRecipientFieldValue', fieldName);
+        updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
+            .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
+            .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. Please reload your browser to continue.';
+            }
+            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));
+        });
     }
-    if (nextRequiredField) {
-      const id = getFieldId(nextRequiredField);
-      const el = document.getElementById(id);
-      console.log('Jumping to next field', nextRequiredField);
-      el === null || el === void 0 ? void 0 : el.focusField();
-      el === null || el === void 0 ? void 0 : el.scrollTo({ behavior: 'smooth', top: 0 });
-      this.focusedField = nextRequiredField.name;
+    async handleFieldChange(field, e) {
+        const { value, checked } = e.target;
+        switch (field.type) {
+            case 'textbox':
+                return this.saveFieldChange(field.name, { prepared: false, value });
+            case 'checkbox_group': {
+                const options = field.settings.options.map(option => ({ id: option.id, checked: e.target.checked }));
+                return this.saveFieldChange(field.name, { prepared: false, value: { options } });
+            }
+            case 'radio_button_group': {
+                const options = field.settings.options.map(option => ({ id: option.id, selected: e.target.value === option.id }));
+                return this.saveFieldChange(field.name, { prepared: false, value: { options } });
+            }
+            case 'dropdown':
+                return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
+            case 'initial':
+                // This can be caused by a focus-out event if the user clicks the field
+                // after it's already filled in, then clicks something else like a textbox.
+                // We don't visually indicate the focus, but it's still there.
+                if (!e.detail) {
+                    return;
+                }
+                const initialsBlob = await (await fetch(e.detail)).blob();
+                return createInitials(this.endpoint, 'initial', initialsBlob) //
+                    .then(async (newInitials) => {
+                    const updateResult = await updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
+                    this.updateRecipientFieldValue(field.name, updateResult);
+                });
+            case 'signature':
+                // This can be caused by a focus-out event if the user clicks the field
+                // after it's already filled in, then clicks something else like a textbox.
+                // We don't visually indicate the focus, but it's still there.
+                if (!e.detail) {
+                    return;
+                }
+                const signatureBlob = await (await fetch(e.detail)).blob();
+                return createSignature(this.endpoint, 'signature', signatureBlob) //
+                    .then(async (newSignature) => {
+                    console.log('Signature update result', newSignature);
+                    const updateResult = await updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
+                    this.updateRecipientFieldValue(field.name, updateResult);
+                })
+                    .catch(e => {
+                    console.warn('Error updating signature', e);
+                });
+            case 'date':
+                const { date, formattedDate } = e.detail;
+                if (formattedDate) {
+                    console.log('dt', { date, formattedDate });
+                    return this.saveFieldChange(field.name, { prepared: false, value: formattedDate });
+                }
+                break;
+            case 'timestamp':
+                console.log('Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
+                break;
+            default:
+                console.log('Unhandled field update', { value, checked }, field);
+                break;
+        }
     }
-  }
-  getRecipientFields() {
-    return this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name);
-  }
-  // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
-  checkRecipientFields() {
-    const invalidFields = this.getRecipientFields().filter(field => !this.isFieldValid(field));
-    if (invalidFields.length < 1) {
-      this.nextButtonLabel = 'Finish';
-      if (!this.nextSubmits) {
-        this.nextSubmits = true;
-      }
+    isFieldFilled(field) {
+        var _a, _b, _c, _d, _e, _f;
+        const { result = '', value = '', base64 = '' } = field.settings || {};
+        switch (field.type) {
+            case 'textbox':
+                switch (field.validator || '') {
+                    case 'email':
+                        return isValidEmail(result);
+                    case 'phone':
+                        return isValidPhone(result);
+                    default:
+                        return result !== '';
+                }
+            case 'signature':
+            case 'initial':
+                return base64 !== '';
+            // Timestamp fields get automatically filled when the envelope is submitted.
+            case 'timestamp':
+                return true;
+            case 'textarea':
+            case 'date':
+            case 'attachment':
+                return result !== '';
+            case 'dropdown':
+                return value !== '';
+            case 'checkbox_group':
+                const checkedCount = (((_b = (_a = field.settings) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.filter(option => option.checked)) || []).length;
+                return checkedCount >= (((_c = field.settings) === null || _c === void 0 ? void 0 : _c.minimum_checked) || 0) && checkedCount <= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.maximum_checked) || 999);
+            case 'radio_button_group':
+                return (((_f = (_e = field.settings) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.filter(option => option.selected)) || []).length > 0;
+            // TODO
+            // case 'checkbox':
+            //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
+            // case 'payment':
+            //   return <verdocs-field-payment style={style} field={field} id={id} />;
+            default:
+                return false;
+        }
     }
-    else {
-      console.log('[SIGN] Invalid fields remaining', invalidFields);
-      this.nextButtonLabel = 'Next';
-      this.nextSubmits = false;
+    isFieldValid(field) {
+        const { required = false } = field;
+        return !required || this.isFieldFilled(field);
     }
-  }
-  attachFieldAttributes(pageInfo, field, el) {
-    var _a;
-    el.addEventListener('input', (e) => {
-      // console.log('[SIGN] onfieldInput', e.detail, e.target.value);
-      // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
-      // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
-      if (e.target.name.includes('date') || e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
-        this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
-      }
-      else {
-        this.checkRecipientFields();
-      }
-    });
-    el.addEventListener('attached', async (e) => {
-      console.log('[SIGN] onAttached', e.detail, e.target.value);
-      const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail);
-      console.log('upload result', r);
-      this.checkRecipientFields();
-    });
-    el.addEventListener('removed', (e) => {
-      console.log('[SIGN] onRemoved', e.detail, e.target.value);
-    });
-    el.addEventListener('focusout', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
-    el.addEventListener('fieldChange', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
-    el.setAttribute('templateid', this.envelope.template_id);
-    el.setAttribute('fieldname', field.name);
-    el.setAttribute('page', pageInfo.pageNumber);
-    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) || '');
-  }
-  handlePageRendered(e) {
-    const pageInfo = e.detail;
-    // const roleIndex = getRoleIndex(this.roleStore, this.recipient.role_name);
-    // console.log(
-    //   'hpr',
-    //   this.recipient,
-    //   this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name),
-    // );
-    const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
-    // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
-    // First render the fields for the signer
-    // Also show field placeholders for other signers who have yet to act
-    // In template list in Beta, show second date being sorted on
-    // Sign top to bottom left to right
-    recipientFields
-      .filter(field => field.page === pageInfo.pageNumber)
-      .forEach(field => {
-      const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
-      if (!el) {
-        return;
-      }
-      if (Array.isArray(el)) {
-        el.map(e => this.attachFieldAttributes(pageInfo, field, e));
-      }
-      else {
-        this.attachFieldAttributes(pageInfo, field, el);
-      }
-    });
-    // Now render the fields for other signers who have yet to act
-    this.sortedRecipients
-      .filter(r => r.role_name !== this.recipient.role_name && (r.status === RecipientStates.INVITED || r.status === RecipientStates.OPENED || r.status === RecipientStates.PENDING))
-      .forEach(() => {
-      this.getRecipientFields()
-        .filter(field => field.page === pageInfo.pageNumber)
-        .forEach(field => {
-        const el = renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
-        if (!el) {
-          return;
+    getSortedFillableFields() {
+        const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
+        recipientFields.sort((a, b) => {
+            var _a, _b, _c, _d;
+            const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
+            const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
+            const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
+            const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
+            // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
+            // left to right. But Y coordinates are inverted in PDFs. The reason for
+            // the division is because no human makes perfect templates and frequently
+            // two fields on the "same line" will be slightly offset vertically.
+            const divaY = Math.floor(aY / 5);
+            const divbY = Math.floor(bY / 5);
+            return divbY !== divaY ? divbY - divaY : aX - bX;
+        });
+        return recipientFields;
+    }
+    async handleNext() {
+        var _a, _b;
+        if (this.nextSubmits) {
+            try {
+                // Patches the date picker to be forcibly removed if still showing during submission
+                (_a = document.getElementById('air-datepicker-global-container')) === null || _a === void 0 ? void 0 : _a.remove();
+                this.submitting = true;
+                const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
+                console.log('[SIGN] Submitted successfully', result);
+                this.recipient.status = 'submitted';
+                this.showDone = true;
+                this.isDone = true;
+                // TODO: This is a temporary hack. After submitting, if we immediately show the View component it won't have re-renedered the
+                //  pages yet with our submitted data.
+                // setTimeout(() => {
+                //   console.log('[SIGN] Reloading');
+                //   window.location.reload();
+                // }, 250);
+            }
+            catch (e) {
+                console.log('[SIGN] Error submitting', e);
+            }
+            this.submitting = false;
+            return;
+        }
+        // Find and focus the next incomplete` field (that is fillable)
+        const emptyFields = this.getSortedFillableFields().filter(field => !this.isFieldFilled(field));
+        emptyFields.sort((a, b) => {
+            var _a, _b, _c, _d;
+            const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
+            const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
+            const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
+            const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
+            // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
+            // left to right. But Y coordinates are inverted in PDFs. The reason for
+            // the division is because no human makes perfect templates and frequently
+            // two fields on the "same line" will be slightly offset vertically.
+            const divaY = Math.floor(aY / 5);
+            const divbY = Math.floor(bY / 5);
+            return divbY !== divaY ? divbY - divaY : aX - bX;
+        });
+        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
+        let nextFocusedIndex = focusedIndex + 1;
+        if (nextFocusedIndex >= emptyFields.length) {
+            nextFocusedIndex = 0;
+        }
+        let nextRequiredField = emptyFields[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 < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
+            skips++;
+            nextFocusedIndex++;
+            if (nextFocusedIndex >= emptyFields.length) {
+                nextFocusedIndex = 0;
+            }
+            nextRequiredField = emptyFields[nextFocusedIndex];
+        }
+        if (skips >= emptyFields.length) {
+            nextRequiredField = null;
         }
-        if (Array.isArray(el)) {
-          el.map(e => this.attachFieldAttributes(pageInfo, field, e));
+        if (nextRequiredField) {
+            const id = getFieldId(nextRequiredField);
+            const el = document.getElementById(id);
+            console.log('Jumping to next field', nextRequiredField);
+            el === null || el === void 0 ? void 0 : el.focusField();
+            el === null || el === void 0 ? void 0 : el.scrollTo({ behavior: 'smooth', top: 0 });
+            this.focusedField = nextRequiredField.name;
+        }
+    }
+    getRecipientFields() {
+        return this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name);
+    }
+    // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
+    checkRecipientFields() {
+        const invalidFields = this.getRecipientFields().filter(field => !this.isFieldValid(field));
+        if (invalidFields.length < 1) {
+            this.nextButtonLabel = 'Finish';
+            if (!this.nextSubmits) {
+                this.nextSubmits = true;
+            }
         }
         else {
-          this.attachFieldAttributes(pageInfo, field, el);
+            console.log('[SIGN] Invalid fields remaining', invalidFields);
+            this.nextButtonLabel = 'Next';
+            this.nextSubmits = false;
         }
-      });
-    });
-    this.checkRecipientFields();
-  }
-  render() {
-    if (!this.envelope) {
-      return (h(Host, null, h("verdocs-loader", null)));
     }
-    if (this.isDone) {
-      return (h(Host, { class: { agreed: this.agreed } }, 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 = '') }), 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.isDone = true;
-        } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
+    attachFieldAttributes(pageInfo, field, el) {
+        var _a;
+        el.addEventListener('input', (e) => {
+            // console.log('[SIGN] onfieldInput', e.detail, e.target.value);
+            // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
+            // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
+            if (e.target.name.includes('date') || e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
+                this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
+            }
+            else {
+                this.checkRecipientFields();
+            }
+        });
+        el.addEventListener('attached', async (e) => {
+            console.log('[SIGN] onAttached', e.detail, e.target.value);
+            const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail);
+            console.log('upload result', r);
+            this.checkRecipientFields();
+        });
+        el.addEventListener('removed', (e) => {
+            console.log('[SIGN] onRemoved', e.detail, e.target.value);
+        });
+        el.addEventListener('focusout', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
+        el.addEventListener('fieldChange', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
+        el.setAttribute('templateid', this.envelope.template_id);
+        el.setAttribute('fieldname', field.name);
+        el.setAttribute('page', pageInfo.pageNumber);
+        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) || '');
     }
-    return (h(Host, { class: { agreed: this.agreed } }, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), this.agreed && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), this.agreed && (h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
-      const pageNumbers = integerSequence(1, envelopeDocument.page_numbers);
-      return (h(Fragment, null, pageNumbers.map(pageNumber => {
-        // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
-        // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
-        // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
-        // field vales (so far) stamped into them.
-        // const templatePage = EnvelopeStore.template?.pages.find(p => p.sequence === page.sequence);
-        // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
-        //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
-        // console.log('tp', templatePage, page);
-        return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: 612, virtualHeight: 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", 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 ${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.isDone = true;
-      } })), this.showLoadError && (h("verdocs-ok-dialog", { heading: "Error Loading Document", message: `Please check with the sender to ensure it has not been canceled, and try again later.`, buttonLabel: "Retry", onNext: () => {
-        this.showLoadError = false;
-        window.location.reload();
-      } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), !this.agreed && (h("div", { class: "cover" }, h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "By checking this box, you:", onInput: () => this.handleClickAgree() }), h("ul", null, h("li", null, "Agree to use electronic records and signatures, and confirm you have read the", ' ', h("a", { href: "https://verdocs.com/en/electronic-record-signature-disclosure/", target: "_blank" }, "Electronic Record and Signatures Disclosure"), "."), h("li", null, "Agree to Verdocs", ' ', h("a", { href: "https://verdocs.com/en/eula", target: "_blank" }, "End User License Agreement"), ' ', "and confirm you have read Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/privacy-policy/", target: "_blank" }, "Privacy Policy"), ".")))))));
-  }
-  static get style() { return verdocsSignCss; }
+    handlePageRendered(e) {
+        const pageInfo = e.detail;
+        // NOTE: We don't filter on pageNumber here because we need the position in the
+        // entire list to set the tabIndex.
+        const recipientFields = this.getSortedFillableFields();
+        // this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
+        // First render the fields for the signer
+        // Also show field placeholders for other signers who have yet to act
+        // In template list in Beta, show second date being sorted on
+        // Sign top to bottom left to right
+        recipientFields.forEach((field, tabIndex) => {
+            if (field.page !== pageInfo.pageNumber) {
+                return;
+            }
+            const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
+            if (!el) {
+                return;
+            }
+            if (Array.isArray(el)) {
+                el.map(e => this.attachFieldAttributes(pageInfo, field, e));
+            }
+            else {
+                this.attachFieldAttributes(pageInfo, field, el);
+            }
+        });
+        // Now render the fields for other signers who have yet to act
+        this.sortedRecipients
+            .filter(r => r.role_name !== this.recipient.role_name && (r.status === 'invited' || r.status === 'opened' || r.status === 'pending'))
+            .forEach(() => {
+            this.getRecipientFields()
+                .filter(field => field.page === pageInfo.pageNumber)
+                .forEach(field => {
+                const el = renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
+                if (!el) {
+                    return;
+                }
+                if (Array.isArray(el)) {
+                    el.map(e => this.attachFieldAttributes(pageInfo, field, e));
+                }
+                else {
+                    this.attachFieldAttributes(pageInfo, field, el);
+                }
+            });
+        });
+        this.checkRecipientFields();
+    }
+    render() {
+        if (!this.envelope) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
+        if (this.isDone) {
+            return (h(Host, { class: { agreed: this.agreed } }, 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 = '') }), 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.isDone = true;
+                } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
+        }
+        return (h(Host, { class: { agreed: this.agreed } }, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), this.agreed && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), this.agreed && (h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+            const pageNumbers = integerSequence(1, envelopeDocument.pages);
+            return (h(Fragment, null, pageNumbers.map(pageNumber => {
+                // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
+                // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
+                // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
+                // field vales (so far) stamped into them.
+                // const templatePage = EnvelopeStore.template?.pages.find(p => p.sequence === page.sequence);
+                // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
+                //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
+                // console.log('tp', templatePage, page);
+                return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: 612, virtualHeight: 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", 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 ${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.isDone = true;
+            } })), this.showLoadError && (h("verdocs-ok-dialog", { heading: "Error Loading Document", message: `Please check with the sender to ensure it has not been canceled, and try again later.`, buttonLabel: "Retry", onNext: () => {
+                this.showLoadError = false;
+                window.location.reload();
+            } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), !this.agreed && (h("div", { class: "cover" }, h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "By checking this box, you:", onInput: () => this.handleClickAgree() }), h("ul", null, h("li", null, "Agree to use electronic records and signatures, and confirm you have read the", ' ', h("a", { href: "https://verdocs.com/en/electronic-record-signature-disclosure/", target: "_blank" }, "Electronic Record and Signatures Disclosure"), "."), h("li", null, "Agree to Verdocs", ' ', h("a", { href: "https://verdocs.com/en/eula", target: "_blank" }, "End User License Agreement"), ' ', "and confirm you have read Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/privacy-policy/", target: "_blank" }, "Privacy Policy"), ".")))))));
+    }
+    static get style() { return VerdocsSignStyle0; }
 }, [0, "verdocs-sign", {
-    "envelopeId": [1, "envelope-id"],
-    "roleId": [1, "role-id"],
-    "inviteCode": [1, "invite-code"],
-    "headerTargetId": [1, "header-target-id"],
-    "envelope": [32],
-    "roleNames": [32],
-    "sortedRecipients": [32],
-    "recipient": [32],
-    "signerToken": [32],
-    "hasSignature": [32],
-    "nextButtonLabel": [32],
-    "nextSubmits": [32],
-    "errorMessage": [32],
-    "focusedField": [32],
-    "submitting": [32],
-    "isDone": [32],
-    "showDone": [32],
-    "showLoadError": [32],
-    "finishLater": [32],
-    "showFinishLater": [32],
-    "agreed": [32],
-    "documentsSingularPlural": [32]
-  }]);
+        "envelopeId": [1, "envelope-id"],
+        "roleId": [1, "role-id"],
+        "inviteCode": [1, "invite-code"],
+        "headerTargetId": [1, "header-target-id"],
+        "envelope": [32],
+        "roleNames": [32],
+        "sortedRecipients": [32],
+        "recipient": [32],
+        "signerToken": [32],
+        "hasSignature": [32],
+        "nextButtonLabel": [32],
+        "nextSubmits": [32],
+        "errorMessage": [32],
+        "focusedField": [32],
+        "submitting": [32],
+        "isDone": [32],
+        "showDone": [32],
+        "showLoadError": [32],
+        "finishLater": [32],
+        "showFinishLater": [32],
+        "agreed": [32],
+        "documentsSingularPlural": [32]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-sign", "verdocs-button", "verdocs-checkbox", "verdocs-dropdown", "verdocs-envelope-document-page", "verdocs-loader", "verdocs-ok-dialog", "verdocs-view"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-sign":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsSign$1);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "verdocs-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "verdocs-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-envelope-document-page":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-ok-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-view":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-sign", "verdocs-button", "verdocs-checkbox", "verdocs-dropdown", "verdocs-envelope-document-page", "verdocs-loader", "verdocs-ok-dialog", "verdocs-view"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-sign":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsSign$1);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-envelope-document-page":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-ok-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();