@verdocs/web-sdk 2.3.14 → 2.3.15

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

@@ -1,14 +1,10 @@
 import { Token } from '@verdocs/js-sdk/Utils';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Auth, Profiles } from '@verdocs/js-sdk/Users';
-import { Organizations } from '@verdocs/js-sdk/Organizations';
 import { h } from '@stencil/core';
 import { VerdocsToast } from '../../../utils/Toast';
 import { SDKError } from '../../../utils/errors';
 const RECHECK_INTERVAL = 5000;
-const OkIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="green"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /></svg>`;
-const TakenIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="red"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /></svg>`;
-const InfoIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="#4a4a4a"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /></svg>`;
 const Industries = [
   { value: '', label: '' },
   { value: 'Accounting & Tax', label: 'Accounting & Tax' },
@@ -89,7 +85,6 @@ export class VerdocsAuth {
     this.isAuthenticated = false;
     this.displayMode = 'login';
     this.orgname = '';
-    this.orgAvailable = 'UNKNOWN';
     this.first = '';
     this.last = '';
     this.username = '';
@@ -152,13 +147,10 @@ export class VerdocsAuth {
       firstName: this.first,
       lastName: this.last,
       orgName: this.orgname,
-      industry: this.industry,
-      size: this.companySize,
-      // source?: string;
-      // referral?: string;
-      // coupon?: string;
-      reason: this.reason,
-      hearabout: this.howHear,
+      // industry: this.industry,
+      // size: this.companySize,
+      // reason: this.reason,
+      // hearabout: this.howHear,
     })
       .then(r => {
       console.log('Result', r);
@@ -252,23 +244,6 @@ export class VerdocsAuth {
       this.submitting = false;
     });
   }
-  async checkAvailability(name) {
-    this.checkingOrg = true;
-    try {
-      this.orgname = name;
-      const r = await Organizations.isOrgAvailable(this.endpoint, name);
-      this.orgAvailable = r.result;
-      console.log('response', this.orgAvailable);
-      // Stage: POST - https://2r8pilqa44.execute-api.us-east-1.amazonaws.com/organizations/check-availability
-      // Prod: POST - https://lb1is9fxoc.execute-api.us-east-1.amazonaws.com/organizations/check-availability
-    }
-    catch (e) {
-      // NOP
-      // We need to trap this error because we get a 400 if the org name is invalid.
-      this.orgAvailable = 'UNKNOWN';
-    }
-    this.checkingOrg = false;
-  }
   render() {
     if (!this.visible) {
       return h("div", { style: { display: 'none' } }, "Authenticated");
@@ -277,10 +252,8 @@ export class VerdocsAuth {
       return (h("verdocs-button", { label: "Sign Out", disabled: this.submitting, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
     }
     if (this.displayMode === 'signup') {
-      const step1Invalid = this.submitting || !this.first || !this.last || !this.username || !this.password || !this.orgname || this.orgAvailable !== 'AVAILABLE';
-      return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Sign up for a trial account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), this.signupStep === 1 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", required: true, value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email", autocomplete: "email", required: true, value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Phone #", autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' } }, h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", required: true, value: this.orgname, onInput: (e) => this.checkAvailability(e.target.value), disabled: this.submitting, style: { flex: '1' }, onBlur: () => {
-          console.log('blur');
-        } }), !this.checkingOrg && this.orgAvailable === 'AVAILABLE' && h("verdocs-help-icon", { icon: OkIcon, text: "Organization name is available." }), !this.checkingOrg && this.orgAvailable === 'TAKEN' && h("verdocs-help-icon", { icon: TakenIcon, text: "Organization already registered." }), !this.checkingOrg && this.orgAvailable === 'UNKNOWN' && h("verdocs-help-icon", { icon: InfoIcon, text: "Organization name must be unique." }), this.checkingOrg && h("verdocs-spinner", { mode: "dark", size: 24 })), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: step1Invalid, onClick: () => (this.signupStep = 2), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.signupStep === 2 && (h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "How did you hear about Verdocs?", value: this.howHear, onInput: (e) => (this.howHear = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Your Industry", options: Industries, value: this.industry, onInput: (e) => (this.industry = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Company Size", options: CompanySizes, value: this.companySize, onInput: (e) => (this.companySize = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Purpose", options: Reasons, value: this.reason, onInput: (e) => (this.reason = e.target.value), disabled: this.submitting }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Create Account", disabled: this.submitting, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.signupStep === 3 && (h("form", { onSubmit: () => this.handleSignup() }, h("p", null, "Please check your e-mail inbox for a verification code and follow the instructions provided."), h("p", null, h("em", null, "Verification messages may take up to 1 hour to arrive. If you do not receive the invitation, ", h("a", { href: "#" }, "Click Here"), " to resend it. Be sure to check your spam folder.")), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.submitting, onClick: () => {
+      const step1Invalid = this.submitting || !this.first || !this.last || !this.username || !this.password || !this.orgname;
+      return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Sign up for a trial account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), this.signupStep === 1 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", required: true, value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email", autocomplete: "email", required: true, value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Phone #", autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", required: true, value: this.orgname, onInput: (e) => (this.orgname = e.target.value), disabled: this.submitting, style: { flex: '1' } }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: step1Invalid, onClick: () => (this.signupStep = 2), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.signupStep === 2 && (h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "How did you hear about Verdocs?", value: this.howHear, onInput: (e) => (this.howHear = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Your Industry", options: Industries, value: this.industry, onInput: (e) => (this.industry = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Company Size", options: CompanySizes, value: this.companySize, onInput: (e) => (this.companySize = e.target.value), disabled: this.submitting }), h("verdocs-select-input", { label: "Purpose", options: Reasons, value: this.reason, onInput: (e) => (this.reason = e.target.value), disabled: this.submitting }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Create Account", disabled: this.submitting, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.signupStep === 3 && (h("form", { onSubmit: () => this.handleSignup() }, h("p", null, "Please check your e-mail inbox for a verification code and follow the instructions provided."), h("p", null, h("em", null, "Verification messages may take up to 1 hour to arrive. If you do not receive the invitation, ", h("a", { href: "#" }, "Click Here"), " to resend it. Be sure to check your spam folder.")), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.submitting, onClick: () => {
           this.signupStep = 2;
         }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }), h("verdocs-button", { label: "Go to Dashboard", disabled: true, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))))));
     }
@@ -377,7 +350,6 @@ export class VerdocsAuth {
       "isAuthenticated": {},
       "displayMode": {},
       "orgname": {},
-      "orgAvailable": {},
       "first": {},
       "last": {},
       "username": {},

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

@@ -149,7 +149,8 @@ export class VerdocsSend {
     return (h(Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
-      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))));
+      const elId = `verdocs-send-recipient-${role.name}`;
+      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
     })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
   }
   static get is() { return "verdocs-send"; }

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

@@ -62,6 +62,7 @@ export class VerdocsSign {
     this.submitting = false;
     this.isDone = false;
     this.showDone = false;
+    this.showLoadError = false;
     this.finishLater = false;
     this.showFinishLater = false;
     this.agreed = false;
@@ -127,6 +128,7 @@ export class VerdocsSign {
     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;
     }
   }
   componentDidRender() {
@@ -253,9 +255,7 @@ export class VerdocsSign {
         if (!e.detail) {
           return;
         }
-        console.log('Creating signature blob', e.detail);
         const signatureBlob = await (await fetch(e.detail)).blob();
-        console.log('Created signature blob', signatureBlob);
         return createSignature(this.endpoint, 'signature', signatureBlob) //
           .then(async (newSignature) => {
           console.log('Signature update result', newSignature);
@@ -303,6 +303,7 @@ export class VerdocsSign {
       case 'textarea':
       case 'date':
       case 'attachment':
+        console.log('Date-type field valid', { required, result, output: !required || result !== '' });
         return !required || result !== '';
       case 'dropdown':
         return !required || value !== '';
@@ -377,7 +378,6 @@ export class VerdocsSign {
     if (invalidFields.length < 1) {
       this.nextButtonLabel = 'Finish';
       if (!this.nextSubmits) {
-        // this.showSubmitDialog = true;
         this.nextSubmits = true;
       }
     }
@@ -490,6 +490,9 @@ export class VerdocsSign {
     })), 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"; }
@@ -594,6 +597,7 @@ export class VerdocsSign {
       "submitting": {},
       "isDone": {},
       "showDone": {},
+      "showLoadError": {},
       "finishLater": {},
       "showFinishLater": {},
       "agreed": {},

package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.css

@@ -1,6 +1,9 @@
 verdocs-contact-picker {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: block;
+  border: 1px solid #ebebeb;
   background-color: #ffffff;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
 }
 verdocs-contact-picker form {
   background-color: #f5f5fa;

package/dist/collection/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js

@@ -16,6 +16,7 @@ const ActivityIcons = {
   visibility: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" /><path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" /></svg>`,
   pencil: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z" /></svg>`,
   mail: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
+  contact_mail: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
   done: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z" clip-rule="evenodd" /></svg>`,
   send: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>`,
   gesture: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"/></svg>`,

package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.css

@@ -823,6 +823,7 @@ verdocs-field-date.disabled {
   opacity: 0.5;
 }
 verdocs-field-date input {
+  position: absolute;
   cursor: inherit;
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.87);

package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js

@@ -25,7 +25,6 @@ export class VerdocsFieldDropdown {
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
-    console.log('will hide', settingsPanel);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }

package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js

@@ -87,11 +87,12 @@ export class VerdocsFieldTextarea {
     var _a, _b, _c, _d;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
+    const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, disabled: disabled, name: this.field.name, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }, value), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.css

@@ -5,7 +5,6 @@ verdocs-field-textbox {
   height: 15px;
   display: block;
   font-size: 11px;
-  position: relative;
   letter-spacing: -0.2px;
   background-color: transparent;
   transform-origin: bottom left;
@@ -24,6 +23,7 @@ verdocs-field-textbox input {
   font-size: 11px;
   background: none;
   font-weight: 500;
+  position: absolute;
   transform-origin: 0 0;
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.87);

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.css

@@ -13,6 +13,7 @@ verdocs-field-timestamp.done {
   opacity: 1;
 }
 verdocs-field-timestamp input {
+  position: absolute;
   cursor: inherit;
   width: 100%;
   height: 100%;

package/dist/collection/components/templates/verdocs-template-create/verdocs-template-create.js

@@ -1,5 +1,5 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { createTemplate } from '@verdocs/js-sdk/Templates/Templates';
+import { createTemplatev2 } from '@verdocs/js-sdk/Templates/Templates';
 import { h, Host } from '@stencil/core';
 import { SDKError } from '../../../utils/errors';
 const unicodeNBSP = ' ';
@@ -46,7 +46,7 @@ export class VerdocsTemplateCreate {
     this.creating = true;
     this.progressLabel = 'Uploading...';
     try {
-      const template = await createTemplate(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
+      const template = await createTemplatev2(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
         if (percent >= 99) {
           this.progressLabel = 'Processing...';
           this.progressPercent = 100;

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -21,6 +21,7 @@ export class VerdocsTemplateFieldProperties {
     this.loading = true;
     this.type = 'signature';
     this.setting = null;
+    this.label = '';
     this.name = '';
     this.roleName = '';
     this.group = '';
@@ -55,6 +56,7 @@ export class VerdocsTemplateFieldProperties {
       }
       this.type = field.type;
       this.name = field.name;
+      this.label = field.label;
       this.group = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
@@ -80,6 +82,7 @@ export class VerdocsTemplateFieldProperties {
     const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
     if (field) {
       this.name = field.name;
+      this.label = field.label;
       this.roleName = field.role_name;
       this.required = field.required;
       // TODO: Talk about how we want to handle labels/placeholders
@@ -94,6 +97,7 @@ export class VerdocsTemplateFieldProperties {
     e.stopPropagation();
     const newProperties = {
       name: this.name,
+      label: this.label || null,
       required: this.required,
       role_name: this.roleName,
       // TODO: Default value in setting?
@@ -214,6 +218,11 @@ export class VerdocsTemplateFieldProperties {
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = true;
+      } })), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Optional Label", value: this.label, autocomplete: "off",
+      //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
+      placeholder: "Optional Label...", onInput: (e) => {
+        this.label = e.target.value;
+        this.dirty = true;
       } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
@@ -348,6 +357,7 @@ export class VerdocsTemplateFieldProperties {
       "loading": {},
       "type": {},
       "setting": {},
+      "label": {},
       "name": {},
       "roleName": {},
       "group": {},

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -182,52 +182,59 @@ export class VerdocsTemplateFields {
   }
   async handleMoveEnd(event) {
     var _a;
+    const name = event.target.getAttribute('name');
+    const option = +(event.target.getAttribute('option') || '0');
+    const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
+    console.log('Dropped field', name, field);
+    if (!field) {
+      console.log('[FIELDS] Unable to find field', name);
+      return;
+    }
     const pageNumber = event.target.getAttribute('pageNumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const clientRect = event.target.getBoundingClientRect();
     const parent = event.target.parentElement;
     const parentRect = parent.getBoundingClientRect();
+    const width = field.setting.width || defaultWidth(field.type);
+    const height = field.setting.height || defaultHeight(field.type);
     // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
     // "up" from the bottom (negative displacement).
     const newX = Math.max(clientRect.left - parentRect.left, 0);
     const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
-    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - event.rect.width, naturalHeight - event.rect.height);
-    const name = event.target.getAttribute('name');
-    const option = +(event.target.getAttribute('option') || '0');
-    const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
-    if (field) {
-      switch (field.type) {
-        case 'attachment':
-        case 'payment':
-        case 'initial':
-        case 'signature':
-        case 'date':
-        case 'dropdown':
-        case 'textarea':
-        case 'textbox':
-        case 'timestamp':
-          field.setting.x = x;
-          field.setting.y = y;
-          break;
-        case 'checkbox_group':
-        case 'radio_button_group':
-          {
-            const opt = field.setting.options[option];
-            if (opt) {
-              opt.x = x;
-              opt.y = y;
-            }
+    // console.log('Computing coordinates', {naturalWidth, width: event.rect.width, naturalHeight, height: event.rect.height, newX, newY});
+    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
+    // console.log('Drop End', {x, y, newX, newY});
+    switch (field.type) {
+      case 'attachment':
+      case 'payment':
+      case 'initial':
+      case 'signature':
+      case 'date':
+      case 'dropdown':
+      case 'textarea':
+      case 'textbox':
+      case 'timestamp':
+        field.setting.x = x;
+        field.setting.y = y;
+        break;
+      case 'checkbox_group':
+      case 'radio_button_group':
+        {
+          const opt = field.setting.options[option];
+          if (opt) {
+            opt.x = x;
+            opt.y = y;
           }
-          break;
-      }
-      console.log('[FIELDS] Will update', name, option, field);
-      const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
-      const pageInfo = this.cachedPageInfo[pageNumber];
-      const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
-      this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
-      event.target.removeAttribute('posX');
-      event.target.removeAttribute('posY');
+        }
+        break;
     }
+    console.log('[FIELDS] Will update', name, option, field);
+    const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
+    const pageInfo = this.cachedPageInfo[pageNumber];
+    const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
+    this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
+    event.target.removeAttribute('posX');
+    event.target.removeAttribute('posY');
   }
   generateFieldName(type, pageNumber) {
     var _a;
@@ -244,6 +251,7 @@ export class VerdocsTemplateFields {
     const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const x = Math.floor(Math.min(viewX / xScale, xMax));
     const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
+    console.log('Computed coordinates', { x, y, viewX, viewY, xMax, yMax });
     return { x, y };
   }
   async handleClickPage(e, pageNumber) {

package/dist/collection/utils/Types.js

@@ -1,2 +1,3 @@
-export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
+export const FORMAT_TIMESTAMP = 'P';
+// export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
 export const FORMAT_DATE = 'Y-MM-dd';

package/dist/components/Envelopes.js

@@ -96,6 +96,7 @@ var getSummary = function (endpoint, page) { return __awaiter(void 0, void 0, vo
  */
 var getSigningSession = function (endpoint, params) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
+        window.console.log('[JS_SDK] getSigningSession', params, endpoint.api);
         return [2 /*return*/, endpoint.api //
                 .get("/envelopes/".concat(params.envelopeId, "/recipients/").concat(encodeURIComponent(params.roleId), "/invitation/").concat(params.inviteCode))
                 .then(function (r) {
@@ -223,12 +224,7 @@ var getEnvelopeDocumentPageDisplayUri = function (endpoint, envelopeId, document
     return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, endpoint.api
-                    .get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image?type=").concat(type), {
-                    timeout: 20000,
-                    'axios-retry': {
-                        retries: 5,
-                    },
-                })
+                    .get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image?type=").concat(type), { timeout: 20000 })
                     .then(function (r) { return r.data; })];
         });
     });

package/dist/components/TemplateStore.js

@@ -1,5 +1,5 @@
 import { c as createStore } from './index4.js';
-import { e as getTemplate, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
+import { g as getTemplate, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();

package/dist/components/Types2.js

@@ -1,4 +1,5 @@
-const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
+const FORMAT_TIMESTAMP = 'P';
+// export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
 const FORMAT_DATE = 'Y-MM-dd';
 
 export { FORMAT_TIMESTAMP as F, FORMAT_DATE as a };