@verdocs/web-sdk 1.4.2 → 1.5.0

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

@@ -1,5 +1,5 @@
 verdocs-field-textbox {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   width: 150px;
   height: 15px;
   display: block;

package/dist/collection/components/elements/verdocs-quick-functions/verdocs-quick-functions.css

@@ -1,5 +1,5 @@
 verdocs-quick-functions {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
 verdocs-quick-functions .container {
   display: flex;

package/dist/collection/components/elements/verdocs-quick-functions/verdocs-quick-functions.js

@@ -1,4 +1,5 @@
-import { Component, h, Event } from '@stencil/core';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Component, h, Event, Prop } from '@stencil/core';
 import TemplateIcon from './template-icon.svg';
 import DocumentIcon from './document-icon.svg';
 /**
@@ -8,6 +9,12 @@ import DocumentIcon from './document-icon.svg';
  * embed. This Element will reuse the same session produced by logging in via that Embed.
  */
 export class VerdocsQuickFunctions {
+  constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
+  }
   handleCreateTemplate() {
     this.createTemplate.emit();
   }
@@ -27,6 +34,29 @@ export class VerdocsQuickFunctions {
   static get styleUrls() { return {
     "$": ["verdocs-quick-functions.css"]
   }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VerdocsEndpoint",
+        "resolved": "VerdocsEndpoint",
+        "references": {
+          "VerdocsEndpoint": {
+            "location": "import",
+            "path": "@verdocs/js-sdk"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+      },
+      "defaultValue": "VerdocsEndpoint.getDefault()"
+    }
+  }; }
   static get events() { return [{
       "method": "createTemplate",
       "name": "createTemplate",

package/dist/collection/components/elements/verdocs-search-activity/verdocs-search-activity.css

@@ -1,5 +1,5 @@
 verdocs-search-activity {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
 verdocs-search-activity .container {
   display: flex;

package/dist/collection/components/elements/verdocs-search-activity/verdocs-search-activity.js

@@ -1,9 +1,8 @@
-import { loadSession } from '@verdocs/js-sdk/Users/Auth';
 import { getSearchHistory } from '@verdocs/js-sdk/Search/Content';
 import { getTemplates } from '@verdocs/js-sdk/Templates/Templates';
 import { Component, h, Prop, Event, State } from '@stencil/core';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import DocumentIcon from './document-icon.svg';
-const SOURCE = 'verdocs-stage';
 /**
  * Display a list of starred items.
  *
@@ -12,6 +11,10 @@ const SOURCE = 'verdocs-stage';
  */
 export class VerdocsSearchActivity {
   constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.type = 'recent';
     this.emptyMessage = 'You do not have any starred searches.';
     this.authFailure = false;
@@ -21,7 +24,7 @@ export class VerdocsSearchActivity {
     this.starred = [];
   }
   componentWillLoad() {
-    loadSession(SOURCE);
+    this.endpoint.loadSession();
     const errorHandler = e => {
       var _a;
       console.warn('[Verdocs/search-activity] Error getting search data', e);
@@ -33,21 +36,21 @@ export class VerdocsSearchActivity {
       case 'recent':
         this.title = 'Recent Searches';
         this.emptyMessage = 'You do not have any recent searches.';
-        getSearchHistory()
+        getSearchHistory(this.endpoint)
           .then(r => (this.recent = r.recent))
           .catch(errorHandler);
         break;
       case 'saved':
         this.title = 'Saved Searches';
         this.emptyMessage = 'You do not have any saved searches.';
-        getSearchHistory()
+        getSearchHistory(this.endpoint)
           .then(r => (this.saved = r.saved))
           .catch(errorHandler);
         break;
       case 'starred':
         this.title = 'My Starred items';
         this.emptyMessage = 'You do not have any starred templates.';
-        getTemplates({ is_starred: true })
+        getTemplates(this.endpoint, { is_starred: true })
           .then(r => (this.starred = r))
           .catch(errorHandler);
         break;
@@ -100,6 +103,27 @@ export class VerdocsSearchActivity {
     "$": ["verdocs-search-activity.css"]
   }; }
   static get properties() { return {
+    "endpoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VerdocsEndpoint",
+        "resolved": "VerdocsEndpoint",
+        "references": {
+          "VerdocsEndpoint": {
+            "location": "import",
+            "path": "@verdocs/js-sdk"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+      },
+      "defaultValue": "VerdocsEndpoint.getDefault()"
+    },
     "type": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/elements/verdocs-search-box/verdocs-search-box.css

@@ -1,5 +1,5 @@
 verdocs-search-box {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
 verdocs-search-box form {
   display: flex;

package/dist/collection/components/elements/verdocs-search-box/verdocs-search-box.js

@@ -1,3 +1,4 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Component, h, Event, Prop } from '@stencil/core';
 import SearchIcon from './search.svg';
 import CloseIcon from './close.svg';
@@ -9,6 +10,10 @@ import CloseIcon from './close.svg';
  */
 export class VerdocsSearchBox {
   constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * The placeholder to display in the input field.
      */
@@ -57,6 +62,27 @@ export class VerdocsSearchBox {
     "$": ["verdocs-search-box.css"]
   }; }
   static get properties() { return {
+    "endpoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VerdocsEndpoint",
+        "resolved": "VerdocsEndpoint",
+        "references": {
+          "VerdocsEndpoint": {
+            "location": "import",
+            "path": "@verdocs/js-sdk"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+      },
+      "defaultValue": "VerdocsEndpoint.getDefault()"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/elements/verdocs-search-tabs/verdocs-search-tabs.css

@@ -1,4 +1,4 @@
 verdocs-search-tabs {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   display: block;
 }

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

@@ -1,7 +1,5 @@
 verdocs-auth {
-  font-family: "Barlow", sans-serif;
-  background-color: #4c56cb;
-  padding: 40px;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9,10 +7,9 @@ verdocs-auth {
 }
 verdocs-auth .login-form,
 verdocs-auth .signup-form {
-  background: #f5f5fa;
+  background: #ffffff;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
   flex-direction: column;
   display: flex;
   padding: 20px;

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

@@ -1,14 +1,13 @@
 import { Auth } from '@verdocs/js-sdk/Users';
-import { Transport, VerdocsEndpoint } from '@verdocs/js-sdk/HTTP';
-import { loadSession, setSession } from '@verdocs/js-sdk/Users/Auth';
 import { Component, Prop, State, h, Event } from '@stencil/core';
-const BASE_URL = 'https://stage-api.verdocs.com/';
-const SOURCE = 'verdocs-stage';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 /**
  * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
  * occur during the process (especially successful completion). The success callback will be fired immediately if the
- * user is already authenticated with a valid session, so this component may not always display visibly. To simplify
- * some types of authentication flows, a visibility flag can force this component to never display.
+ * user is already authenticated with a valid session, so this component may not always display visibly.
+ *
+ * To simplify some types of authentication flows, a visibility flag can force this component to never display. This
+ * allows you to susbcribe to notifications from the
  *
  * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
  * container to allow sufficient space for the required forms.
@@ -32,6 +31,10 @@ const SOURCE = 'verdocs-stage';
  */
 export class VerdocsAuth {
   constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display
      * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may
@@ -58,18 +61,12 @@ export class VerdocsAuth {
     this.activeSession = null;
     this.loginError = null;
   }
-  componentWillLoad() {
-    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL);
-    Transport.setActiveEndpoint(staging);
-    console.log('Set active endpoint', Transport.getEndpoint());
-  }
   componentDidLoad() {
-    const session = loadSession(SOURCE);
-    console.log('loaded session', session, SOURCE);
-    if (session !== null) {
+    this.endpoint.loadSession();
+    if (this.endpoint.session !== null) {
       this.isAuthenticated = true;
-      this.activeSession = session;
-      this.authenticated.emit({ authenticated: true, session });
+      this.activeSession = this.endpoint.session;
+      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
     }
     else {
       this.authenticated.emit({ authenticated: false, session: null });
@@ -81,19 +78,17 @@ export class VerdocsAuth {
   // }
   handleLogin() {
     this.loggingIn = true;
-    Auth.authenticateUser({ username: this.username, password: this.password })
+    Auth.authenticateUser(this.endpoint, { username: this.username, password: this.password })
       .then(r => {
       this.loggingIn = false;
-      console.log('Login result', r.accessToken);
-      const session = setSession(SOURCE, r.accessToken, true);
-      this.activeSession = session;
+      this.endpoint.setToken(r.accessToken);
+      this.activeSession = this.endpoint.session;
       this.isAuthenticated = true;
-      console.log('set session', session);
-      this.authenticated.emit({ authenticated: true, session });
+      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
     })
       .catch(e => {
       var _a;
-      console.log('Login error', e.response, JSON.stringify(e));
+      console.log('[VERDOCS] Login error', e.response, JSON.stringify(e));
       this.loggingIn = false;
       this.activeSession = null;
       this.authenticated.emit({ authenticated: false, session: null });
@@ -103,7 +98,7 @@ export class VerdocsAuth {
     });
   }
   handleLogout() {
-    // endSession(SOURCE);
+    this.endpoint.clearSession();
     this.isAuthenticated = false;
     this.authenticated.emit({ authenticated: false, session: null });
   }
@@ -154,6 +149,27 @@ export class VerdocsAuth {
     "$": ["verdocs-auth.css"]
   }; }
   static get properties() { return {
+    "endpoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VerdocsEndpoint",
+        "resolved": "VerdocsEndpoint",
+        "references": {
+          "VerdocsEndpoint": {
+            "location": "import",
+            "path": "@verdocs/js-sdk"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+      },
+      "defaultValue": "VerdocsEndpoint.getDefault()"
+    },
     "visible": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/embeds/verdocs-search/verdocs-search.css

@@ -1,5 +1,5 @@
 verdocs-search {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   display: flex;
   background-color: #1e2031;
 }

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

@@ -1,13 +1,20 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 export class VerdocsSearch {
+  constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
+  }
   render() {
     return (h("div", { class: "container" },
-      h("verdocs-search-box", null),
+      h("verdocs-search-box", { endpoint: this.endpoint }),
       h("div", { class: "boxes" },
-        h("verdocs-search-activity", { type: "recent" }),
-        h("verdocs-search-activity", { type: "saved" }),
-        h("verdocs-search-activity", { type: "starred" }),
-        h("search-quick-functions", null))));
+        h("verdocs-search-activity", { type: "recent", endpoint: this.endpoint }),
+        h("verdocs-search-activity", { type: "saved", endpoint: this.endpoint }),
+        h("verdocs-search-activity", { type: "starred", endpoint: this.endpoint }),
+        h("search-quick-functions", { endpoint: this.endpoint }))));
   }
   static get is() { return "verdocs-search"; }
   static get originalStyleUrls() { return {
@@ -16,4 +23,27 @@ export class VerdocsSearch {
   static get styleUrls() { return {
     "$": ["verdocs-search.css"]
   }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VerdocsEndpoint",
+        "resolved": "VerdocsEndpoint",
+        "references": {
+          "VerdocsEndpoint": {
+            "location": "import",
+            "path": "@verdocs/js-sdk"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+      },
+      "defaultValue": "VerdocsEndpoint.getDefault()"
+    }
+  }; }
 }

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

@@ -1,5 +1,5 @@
 verdocs-sign {
-  font-family: "Barlow", sans-serif;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -31,7 +31,7 @@ verdocs-sign .intro {
 verdocs-sign .toolbar {
   width: 100%;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 14px;
   max-width: 1028px;
   position: relative;
 }
@@ -61,17 +61,34 @@ verdocs-sign .document {
   position: relative;
   overflow-y: scroll;
 }
-verdocs-sign .agree-checkbox {
+verdocs-sign .agree {
+  flex: 1;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+verdocs-sign .agree .intro {
+  display: none;
+}
+verdocs-sign .agree .header {
+  flex: 0 0 56px;
+}
+verdocs-sign .agree .agree-checkbox {
+  background: #ccc;
   flex: 0 0 20px;
   display: flex;
   width: 20px;
   height: 20px;
   border-radius: 3px;
-  background: #ffffff;
   position: relative;
-  margin: 0 10px 0 30px;
+  margin: 0 10px 0 14px;
 }
-verdocs-sign .agree-checkbox label {
+verdocs-sign .agree .agree-checkbox input[type=checkbox]:checked + label:after {
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+verdocs-sign .agree .agree-checkbox label {
   left: 2px;
   top: 2px;
   width: 16px;
@@ -81,7 +98,11 @@ verdocs-sign .agree-checkbox label {
   background: #33354c;
   box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8);
 }
-verdocs-sign .agree-checkbox label:after {
+verdocs-sign .agree .agree-checkbox label .agree-checkbox label:hover::after {
+  filter: alpha(opacity=30);
+  opacity: 0.3;
+}
+verdocs-sign .agree .agree-checkbox label:after {
   top: 2px;
   left: 3px;
   width: 8px;
@@ -96,26 +117,6 @@ verdocs-sign .agree-checkbox label:after {
   border-top: none;
   border-right: none;
 }
-verdocs-sign .agree-checkbox label:hover::after {
-  filter: alpha(opacity=30);
-  opacity: 0.3;
-}
-verdocs-sign .agree-checkbox input[type=checkbox]:checked + label:after {
-  filter: alpha(opacity=100);
-  opacity: 1;
-}
-verdocs-sign.agreed .intro {
-  display: none;
-}
-verdocs-sign.agreed .header {
-  flex: 0 0 56px;
-}
-verdocs-sign.agreed .agree-checkbox {
-  background: #ccc;
-}
-verdocs-sign.agreed .agree-checkbox label {
-  cursor: default;
-}
 verdocs-sign .page-controls {
   position: absolute;
   left: 50%;

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

@@ -1,18 +1,20 @@
 import { Host } from '@stencil/core';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Documents } from '@verdocs/js-sdk/Documents';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { rescale } from '@verdocs/js-sdk/Utils/Fields';
-import { VerdocsEndpoint } from '@verdocs/js-sdk/HTTP';
 import { Component, Prop, State, h } from '@stencil/core';
 import { updateRecipientStatus } from '@verdocs/js-sdk/Documents/Recipients';
-import { getEndpoint, setActiveEndpoint } from '@verdocs/js-sdk/HTTP/Transport';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
-import { getSigningSession, getDocument, getDocumentFile, updateDocumentField } from '@verdocs/js-sdk/Documents/Documents';
-const BASE_URL = 'https://stage-api.verdocs.com';
 /**
  * Display a document signing experience.
  */
 export class VerdocsSign {
   constructor() {
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
      * signing session.
@@ -28,7 +30,6 @@ export class VerdocsSign {
      * signing session.
      */
     this.invitecode = null;
-    this.endpoint = null;
     this.recipient = null;
     this.signerToken = null;
     this.pdfUrl = null;
@@ -39,14 +40,10 @@ export class VerdocsSign {
     this.nextButtonLabel = 'Start';
     this.focusedField = '';
   }
-  componentWillLoad() {
-    const endpoint = new VerdocsEndpoint().setBaseURL(BASE_URL);
-    setActiveEndpoint(endpoint);
-  }
   async componentDidLoad() {
     try {
       console.log('[SIGN] Processing invite code', this.documentid, this.roleid, this.invitecode);
-      const { session, recipient, signerToken } = await getSigningSession({
+      const { session, recipient, signerToken } = await Documents.getSigningSession(this.endpoint, {
         documentId: this.documentid,
         roleId: this.roleid,
         inviteCode: this.invitecode,
@@ -55,14 +52,14 @@ export class VerdocsSign {
       console.log('[SIGN] Recipient', recipient);
       this.recipient = recipient;
       this.signerToken = signerToken;
-      getEndpoint().setSigningAuthorization(signerToken);
+      this.endpoint.setToken(signerToken);
       if (this.recipient.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      const document = await getDocument(this.documentid);
+      const document = await Documents.getDocument(this.endpoint, this.documentid);
       this.document = document;
       console.log('[SIGN] Document', document);
-      this.pdfUrl = `${BASE_URL}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;
+      this.pdfUrl = `${this.endpoint.getBaseURL()}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;
       this.recipientIndex = this.document.recipients.findIndex(recipient => recipient.role_name == this.roleid);
       if (this.recipientIndex > -1) {
         console.log('Found recipient', this.document.recipients[this.recipientIndex]);
@@ -79,7 +76,7 @@ export class VerdocsSign {
   }
   handleClickAgree() {
     console.log('agree clicked');
-    updateRecipientStatus(this.documentid, this.roleid, 'update', { agreed: true })
+    updateRecipientStatus(this.endpoint, this.documentid, this.roleid, 'update', { agreed: true })
       .then(r => {
       console.log('update result', r);
       this.nextButtonLabel = 'Next';
@@ -91,7 +88,7 @@ export class VerdocsSign {
   }
   async savePDF() {
     const fileName = `${this.document.name} - ${this.document.updated_at.split('T')[0]}.pdf`;
-    const data = await getDocumentFile(this.documentid, this.document.envelope_document_id);
+    const data = await Documents.getDocumentFile(this.endpoint, this.documentid, this.document.envelope_document_id);
     // This is better in React than doing window.href= or similar to trigger a download. For a description of the technique
     // see https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image
     let xhr = new XMLHttpRequest();
@@ -133,23 +130,23 @@ export class VerdocsSign {
     console.log('fieldChange', field, e.detail);
     switch (field.type) {
       case 'textbox':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: e.detail })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
       case 'checkbox_group':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
       case 'radio_button_group':
         const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: { options } })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: { options } })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
       case 'dropdown':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, { prepared: false, value: e.detail })
           .then(r => console.log('Update result', r))
           .catch(e => console.log('Error updating', e));
         break;
@@ -312,12 +309,12 @@ export class VerdocsSign {
         h("div", { class: "toolbar" },
           h("div", { class: "tools" },
             h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }),
-            !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { style: { flex: '1', flexDirection: 'row', display: 'flex', alignItems: 'center' } },
+            !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { class: "agree" },
               h("div", { class: "agree-checkbox" },
                 h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }),
                 h("label", { htmlFor: "agree-checkbox-element" })),
-              "I agree to use electronic records and signatures.")) : (h("div", { style: { flex: '1' } })),
-            h("verdocs-button", { label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))),
+              h("span", null, "I agree to use electronic records and signatures."))) : (h("div", { style: { flex: '1' } })),
+            h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))),
       !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }),
       h("div", { class: "document" },
         this.pdfUrl ? h("verdocs-view", { source: this.pdfUrl, token: this.signerToken, onDocumentRendered: e => this.handleDocumentRendered(e) }) : h("verdocs-loader", null),
@@ -334,6 +331,27 @@ export class VerdocsSign {
     "$": ["verdocs-sign.css"]
   }; }
   static get properties() { return {
+    "endpoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VerdocsEndpoint",
+        "resolved": "VerdocsEndpoint",
+        "references": {
+          "VerdocsEndpoint": {
+            "location": "import",
+            "path": "@verdocs/js-sdk"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+      },
+      "defaultValue": "VerdocsEndpoint.getDefault()"
+    },
     "documentid": {
       "type": "string",
       "mutable": false,
@@ -390,7 +408,6 @@ export class VerdocsSign {
     }
   }; }
   static get states() { return {
-    "endpoint": {},
     "recipient": {},
     "signerToken": {},
     "pdfUrl": {},