@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -1,27 +1,22 @@
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { Envelopes } from '@verdocs/js-sdk/Envelopes';
-import { createInitials } from '@verdocs/js-sdk/Envelopes/Initials';
-import { createSignature } from '@verdocs/js-sdk/Envelopes/Signatures';
-import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
-import { fullNameToInitials, integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
-import { Host, Fragment, h } from '@stencil/core';
-import { RecipientStates } from '@verdocs/js-sdk/Envelopes/Types';
-import { envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit } from '@verdocs/js-sdk/Envelopes/Recipients';
-import { getEnvelope, updateEnvelopeFieldInitials, updateEnvelopeFieldSignature, uploadEnvelopeFieldAttachment } from '@verdocs/js-sdk/Envelopes/Envelopes';
-import { getFieldId, renderDocumentField, saveAttachment, updateDocumentFieldValue } from '../../../utils/utils';
-import { createTemplateFieldStoreFromEnvelope } from '../../../utils/TemplateFieldStore';
-import { VerdocsToast } from '../../../utils/Toast';
-import { SDKError } from '../../../utils/errors';
+import { Host, Fragment, h } from "@stencil/core";
+import { updateEnvelopeFieldSignature, uploadEnvelopeFieldAttachment, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { fullNameToInitials, getEnvelope, getSigningSession } from "@verdocs/js-sdk";
+import { integerSequence, isValidEmail, isValidPhone, updateEnvelopeFieldInitials } from "@verdocs/js-sdk";
+import { createInitials, createSignature, envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit, updateEnvelopeField } from "@verdocs/js-sdk";
+import { getFieldId, renderDocumentField, saveAttachment, updateDocumentFieldValue } from "../../../utils/utils";
+import { createTemplateFieldStoreFromEnvelope } from "../../../utils/TemplateFieldStore";
+import { VerdocsToast } from "../../../utils/Toast";
+import { SDKError } from "../../../utils/errors";
 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' },
 ];
 /**
  * Display an envelope signing experience. This will display the envelope's attached
@@ -41,661 +36,690 @@ const doneMenuOptions = [
  * the signed attachments.)
  */
 export class VerdocsSign {
-  constructor() {
-    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 Envelopes.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;
+    constructor() {
+        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);
-    Envelopes.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;
         }
-        if (Array.isArray(el)) {
-          el.map(e => this.attachFieldAttributes(pageInfo, field, e));
+        // 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;
         }
-        else {
-          this.attachFieldAttributes(pageInfo, field, el);
+        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 (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;
         }
-      });
-    });
-    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)))));
+    getRecipientFields() {
+        return this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_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 is() { return "verdocs-sign"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-sign.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-sign.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "envelopeId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The ID of the envelope to sign."
-        },
-        "attribute": "envelope-id",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "roleId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The ID of the role that will be signing e.g. 'Recipient 1'"
-        },
-        "attribute": "role-id",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "inviteCode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The invite code for the signer."
-        },
-        "attribute": "invite-code",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "headerTargetId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the header will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects (e.g. \"fixed\").\n\nThe movement of the header to the target container is not dynamic - it is performed only on the initial\nrender. Host applications should not conditionally render this container. If the header's visibility must\nbe externally controlled, use CSS display options to hide/show it instead."
-        },
-        "attribute": "header-target-id",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "envelope": {},
-      "roleNames": {},
-      "sortedRecipients": {},
-      "recipient": {},
-      "signerToken": {},
-      "hasSignature": {},
-      "nextButtonLabel": {},
-      "nextSubmits": {},
-      "errorMessage": {},
-      "focusedField": {},
-      "submitting": {},
-      "isDone": {},
-      "showDone": {},
-      "showLoadError": {},
-      "finishLater": {},
-      "showFinishLater": {},
-      "agreed": {},
-      "documentsSingularPlural": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sdkError",
-        "name": "sdkError",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
-        },
-        "complexType": {
-          "original": "SDKError",
-          "resolved": "SDKError",
-          "references": {
-            "SDKError": {
-              "location": "import",
-              "path": "../../../utils/errors"
+    // 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;
             }
-          }
         }
-      }, {
-        "method": "envelopeLoaded",
-        "name": "envelopeLoaded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the envelope is updated in any way."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
-          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            },
-            "IEnvelope": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+        else {
+            console.log('[SIGN] Invalid fields remaining', invalidFields);
+            this.nextButtonLabel = 'Next';
+            this.nextSubmits = false;
+        }
+    }
+    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;
+        // 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)));
         }
-      }, {
-        "method": "envelopeUpdated",
-        "name": "envelopeUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the envelope is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}",
-          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
+        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 is() { return "verdocs-sign"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-sign.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-sign.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "envelopeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the envelope to sign."
+                },
+                "attribute": "envelope-id",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "roleId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the role that will be signing e.g. 'Recipient 1'"
+                },
+                "attribute": "role-id",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "inviteCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The invite code for the signer."
+                },
+                "attribute": "invite-code",
+                "reflect": false,
+                "defaultValue": "null"
             },
-            "IEnvelope": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+            "headerTargetId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the header will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects (e.g. \"fixed\").\n\nThe movement of the header to the target container is not dynamic - it is performed only on the initial\nrender. Host applications should not conditionally render this container. If the header's visibility must\nbe externally controlled, use CSS display options to hide/show it instead."
+                },
+                "attribute": "header-target-id",
+                "reflect": false,
+                "defaultValue": "null"
             }
-          }
-        }
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "envelope": {},
+            "roleNames": {},
+            "sortedRecipients": {},
+            "recipient": {},
+            "signerToken": {},
+            "hasSignature": {},
+            "nextButtonLabel": {},
+            "nextSubmits": {},
+            "errorMessage": {},
+            "focusedField": {},
+            "submitting": {},
+            "isDone": {},
+            "showDone": {},
+            "showLoadError": {},
+            "finishLater": {},
+            "showFinishLater": {},
+            "agreed": {},
+            "documentsSingularPlural": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdkError",
+                "name": "sdkError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+                },
+                "complexType": {
+                    "original": "SDKError",
+                    "resolved": "SDKError",
+                    "references": {
+                        "SDKError": {
+                            "location": "import",
+                            "path": "../../../utils/errors",
+                            "id": "src/utils/errors.ts::SDKError"
+                        }
+                    }
+                }
+            }, {
+                "method": "envelopeLoaded",
+                "name": "envelopeLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the envelope is updated in any way."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IEnvelope": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }, {
+                "method": "envelopeUpdated",
+                "name": "envelopeUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the envelope is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IEnvelope": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }];
+    }
 }