@verdocs/web-sdk 2.3.14 → 2.3.16

package/dist/collection/components/controls/verdocs-portal/verdocs-portal.js

@@ -0,0 +1,181 @@
+import { h, Host } from '@stencil/core';
+const Z_INDEX = '10001';
+/**
+ * Display a child component in a "portal", popping it out of the main DOM tree
+ * to allow it to escape the bounds set by its parent.
+ * @credit https://github.com/tomas-teston/stencil-portal for the basic
+ * technique. This has been altered in a few ways to make it more friendly
+ * to cases where there may be multiple portals on the page and provide more
+ * alignment options for the child to be displayed.
+ */
+export class VerdocsPortal {
+  constructor() {
+    this.moved = false;
+    this.anchor = undefined;
+    this.voffset = 0;
+    this.align = 'left';
+  }
+  handleScroll() {
+    this.calculatePosition();
+  }
+  handleResize() {
+    this.calculatePosition();
+  }
+  handleClick(e) {
+    var _a;
+    if (!this.element.contains(e.target)) {
+      (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+  }
+  calculateLeft() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    if (this.align === 'left') {
+      return Math.max(anchorRect.left, 0);
+    }
+    if (this.align === 'right') {
+      return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
+    }
+    return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+  }
+  calculateTop() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    return anchorRect.bottom + this.voffset;
+  }
+  calculatePosition() {
+    this.portal.style.top = `${this.calculateTop()}px`;
+    this.portal.style.left = `${this.calculateLeft()}px`;
+  }
+  componentWillLoad() {
+    var _a;
+    const id = `${this.anchor}-portal`;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
+    this.portal = document.createElement('div');
+    this.portal.setAttribute('id', id);
+    this.portal.style.zIndex = Z_INDEX;
+    this.portal.style.position = 'absolute';
+    document.body.append(this.portal);
+  }
+  componentDidLoad() {
+    this.portal.appendChild(this.element);
+    this.calculatePosition();
+  }
+  disconnectedCallback() {
+    this.moved ? this.portal.remove() : (this.moved = true);
+  }
+  render() {
+    return (h(Host, { ref: el => (this.element = el) }, h("slot", null)));
+  }
+  static get is() { return "verdocs-portal"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-portal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-portal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "anchor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unique ID of the parent element to anchor to."
+        },
+        "attribute": "anchor",
+        "reflect": false
+      },
+      "voffset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Vertical offset from the parent."
+        },
+        "attribute": "voffset",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "align": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'center' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Horizontal alignment."
+        },
+        "attribute": "align",
+        "reflect": false,
+        "defaultValue": "'left'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickAway",
+        "name": "clickAway",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "handleScroll",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }, {
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": "window",
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/controls/verdocs-portal/verdocs-portal.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Portal',
+  component: 'verdocs-portal',
+  args: {
+    align: 'left',
+    voffset: 0,
+  },
+  argTypes: {},
+};
+export const Portal = ({ align, voffset }) => html `
+  <div style="padding: 40px">
+    <div id="sample-tooltip" style="border: 1px solid green; padding: 3px 10px;">
+      Tooltip Anchor
+      <verdocs-portal anchor="sample-tooltip" .align=${align} .voffset=${voffset}>
+        <div style="border: 1px solid red; padding: 3px 10px;">Tooltip</div>
+      </verdocs-portal>
+    </div>
+  </div>
+`;

package/dist/collection/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.js

@@ -8,6 +8,7 @@ export class VerdocsOkDialog {
   constructor() {
     this.heading = '';
     this.message = '';
+    this.buttonLabel = 'OK';
     this.showCancel = false;
     this.closed = false;
   }
@@ -26,7 +27,7 @@ export class VerdocsOkDialog {
     }
   }
   render() {
-    return (h(Host, { class: this.closed ? 'closed' : '' }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, this.heading), h("div", { class: "content" }, h("div", { class: "message", innerHTML: this.message }), h("div", { class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { label: "OK", onClick: () => this.handleOk() })))))));
+    return (h(Host, { class: this.closed ? 'closed' : '' }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, this.heading), h("div", { class: "content" }, h("div", { class: "message", innerHTML: this.message }), h("div", { class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { label: this.buttonLabel, onClick: () => this.handleOk() })))))));
   }
   static get is() { return "verdocs-ok-dialog"; }
   static get originalStyleUrls() {
@@ -77,6 +78,24 @@ export class VerdocsOkDialog {
         "reflect": false,
         "defaultValue": "''"
       },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Override the \"OK\" button's label"
+        },
+        "attribute": "button-label",
+        "reflect": false,
+        "defaultValue": "'OK'"
+      },
       "showCancel": {
         "type": "boolean",
         "mutable": false,

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;
       }
     }
@@ -393,7 +393,7 @@ export class VerdocsSign {
       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')) {
+      if (e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
         console.log('CB', e.target);
         this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
       }
@@ -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-textbox/verdocs-field-textbox.js

@@ -4,15 +4,18 @@ import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
+import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Display a text input field.
  */
 export class VerdocsFieldTextbox {
   constructor() {
+    this.fieldStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
@@ -37,6 +40,10 @@ export class VerdocsFieldTextbox {
       settingsPanel.hidePanel();
     }
   }
+  async componentWillLoad() {
+    console.log('Loading field', this.field);
+    this.fieldStore = getTemplateFieldStore(this.templateid);
+  }
   componentDidRender() {
     interact.dynamicDrop(true);
     if (this.editable) {
@@ -85,6 +92,8 @@ export class VerdocsFieldTextbox {
   }
   render() {
     var _a, _b, _c, _d;
+    const f = this.fieldStore.get(this.fieldname);
+    console.log('rendering field', f);
     const settings = getFieldSettings(this.field);
     let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
@@ -101,7 +110,6 @@ export class VerdocsFieldTextbox {
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;
-        console.log('here');
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
       }, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))));
@@ -183,6 +191,24 @@ export class VerdocsFieldTextbox {
         },
         "defaultValue": "null"
       },
+      "fieldname": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the field to display."
+        },
+        "attribute": "fieldname",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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;