@verdocs/web-sdk 1.4.6 → 1.5.1

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -3,8 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-589f3be8.js');
-const Token = require('./Token-1ec62bd3.js');
-const bufferEs6 = require('./buffer-es6-bc8199b1.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-5e6dd8ef.js');
+
+var e164Regex = new RegExp(/\+[1-9]\d{6,14}/g);
+function simpleE164Validator(code) {
+    return (code !== null && code.length < 16 && code.length > 6 && e164Regex.test(code)) || code === '' || code === null;
+}
+
+var EmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+var isValidEmail = function (value) { return EmailRegEx.test(value); };
+var isValidPhone = function (value) { return simpleE164Validator(value); };
 
 /**
  * Given a `rgba(r,g,b,a)` string value, returns the hex equivalent, dropping the alpha channel.
@@ -43,153 +51,15 @@ function rescale(r, n) {
     return r * n;
 }
 
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator$1 = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var updateRecipientStatus = function (documentId, roleName, action, params) { return __awaiter$1(void 0, void 0, void 0, function () {
-    return __generator$1(this, function (_a) {
-        return [2 /*return*/, Token.getEndpoint()
-                .api.put("/documents/".concat(documentId, "/recipients/").concat(roleName), __assign({ role_name: roleName, action: action }, (params || {})))
-                .then(function (r) { return r.data; })];
-    });
-}); };
+const verdocsSignCss = "verdocs-sign{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:600px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}verdocs-sign.storybook{max-height:600px}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0 0 115px;flex:0 0 115px;z-index:1000;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);-webkit-transition:all 0.25s;transition:all 0.25s}verdocs-sign .intro{background-color:#ffffff;width:100%;margin:0 auto;padding:20px;max-width:1028px;color:rgba(0, 0, 0, 0.87)}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;max-width:1028px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;padding:4px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;position:relative;overflow-y:scroll}verdocs-sign .agree{-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:10px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree .agree-checkbox{background:#ccc;-ms-flex:0 0 20px;flex:0 0 20px;display:-ms-flexbox;display:flex;width:20px;height:20px;border-radius:3px;position:relative;margin:0 10px 0 14px}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;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}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;opacity:0;height:5px;content:\"\";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;border-top:none;border-right:none}verdocs-sign .page-controls{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:500}";
 
-var e164Regex = new RegExp(/\+[1-9]\d{6,14}/g);
-function simpleE164Validator(code) {
-    return (code !== null && code.length < 16 && code.length > 6 && e164Regex.test(code)) || code === '' || code === null;
-}
-
-var EmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-var isValidEmail = function (value) { return EmailRegEx.test(value); };
-var isValidPhone = function (value) { return simpleE164Validator(value); };
-
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-/**
- * Get a signing session for a document.
- */
-var getSigningSession = function (params) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, Token.getEndpoint()
-                .api.get("/documents/".concat(params.documentId, "/recipients/").concat(encodeURIComponent(params.roleId), "/invitation/").concat(params.inviteCode))
-                .then(function (r) {
-                var _a, _b;
-                // Avoiding a jsonwebtoken dependency here - we don't actually need the whole library
-                var signerToken = ((_a = r.headers) === null || _a === void 0 ? void 0 : _a.signer_token) || '';
-                var session = Token.decodeAccessTokenBody(signerToken);
-                Token.getEndpoint().setAuthorization((_b = r.headers) === null || _b === void 0 ? void 0 : _b.signer_token);
-                return { recipient: r.data, session: session, signerToken: signerToken };
-            })];
-    });
-}); };
-var getDocument = function (documentId) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, Token.getEndpoint()
-                .api.get("/documents/".concat(documentId))
-                .then(function (r) { return r.data; })];
-    });
-}); };
-var getDocumentFile = function (documentId, envelopeDocumentId) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, Token.getEndpoint()
-                .api.get("/documents/".concat(documentId, "/envelope_documents/").concat(envelopeDocumentId, "?file=true"), {
-                responseType: 'arraybuffer',
-            })
-                .then(function (r) { return bufferEs6.Buffer.from(r.data, 'binary').toString('base64'); })];
-    });
-}); };
-var updateDocumentField = function (documentId, fieldName, value) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, Token.getEndpoint()
-                .api.put("/documents/".concat(documentId, "/fields/").concat(fieldName), value)
-                .then(function (r) { return r.data; })];
-    });
-}); };
-
-const verdocsSignCss = "verdocs-sign{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:600px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}verdocs-sign.storybook{max-height:600px}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0 0 115px;flex:0 0 115px;z-index:1000;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);-webkit-transition:all 0.25s;transition:all 0.25s}verdocs-sign .intro{background-color:#ffffff;width:100%;margin:0 auto;padding:20px;max-width:1028px;color:rgba(0, 0, 0, 0.87)}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 20px;max-width:1028px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;padding:4px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;position:relative;overflow-y:scroll}verdocs-sign .agree-checkbox{-ms-flex:0 0 20px;flex:0 0 20px;display:-ms-flexbox;display:flex;width:20px;height:20px;border-radius:3px;background:#ffffff;position:relative;margin:0 10px 0 30px}verdocs-sign .agree-checkbox label{left:2px;top:2px;width:16px;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}verdocs-sign .agree-checkbox label:after{top:2px;left:3px;width:8px;opacity:0;height:5px;content:\"\";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;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{-ms-flex:0 0 56px;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%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:500}";
-
-const BASE_URL = 'https://stage-api.verdocs.com';
 const VerdocsSign = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     /**
      * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
      * signing session.
@@ -205,7 +75,6 @@ const VerdocsSign = class {
      * signing session.
      */
     this.invitecode = null;
-    this.endpoint = null;
     this.recipient = null;
     this.signerToken = null;
     this.pdfUrl = null;
@@ -216,14 +85,10 @@ const VerdocsSign = class {
     this.nextButtonLabel = 'Start';
     this.focusedField = '';
   }
-  componentWillLoad() {
-    const endpoint = new Token.VerdocsEndpoint().setBaseURL(BASE_URL);
-    Token.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 VerdocsEndpoint.getSigningSession(this.endpoint, {
         documentId: this.documentid,
         roleId: this.roleid,
         inviteCode: this.invitecode,
@@ -232,14 +97,14 @@ const VerdocsSign = class {
       console.log('[SIGN] Recipient', recipient);
       this.recipient = recipient;
       this.signerToken = signerToken;
-      Token.getEndpoint().setSigningAuthorization(signerToken);
+      this.endpoint.setToken(signerToken);
       if (this.recipient.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      const document = await getDocument(this.documentid);
+      const document = await VerdocsEndpoint.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]);
@@ -256,7 +121,7 @@ const VerdocsSign = class {
   }
   handleClickAgree() {
     console.log('agree clicked');
-    updateRecipientStatus(this.documentid, this.roleid, 'update', { agreed: true })
+    VerdocsEndpoint.updateRecipientStatus(this.endpoint, this.documentid, this.roleid, 'update', { agreed: true })
       .then(r => {
       console.log('update result', r);
       this.nextButtonLabel = 'Next';
@@ -268,7 +133,7 @@ const VerdocsSign = class {
   }
   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 VerdocsEndpoint.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();
@@ -310,23 +175,23 @@ const VerdocsSign = class {
     console.log('fieldChange', field, e.detail);
     switch (field.type) {
       case 'textbox':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+        VerdocsEndpoint.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 }] } })
+        VerdocsEndpoint.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 } })
+        VerdocsEndpoint.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 })
+        VerdocsEndpoint.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;
@@ -480,7 +345,7 @@ const VerdocsSign = class {
       { id: 'print', label: 'Print Without Signing' },
       { id: 'download', label: 'Download' },
     ];
-    return (index.h(index.Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, index.h("div", { class: "header" }, index.h("div", { class: "intro" }, "Please review and act on these documents."), index.h("div", { class: "toolbar" }, index.h("div", { class: "tools" }, index.h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (index.h("div", { style: { flex: '1', flexDirection: 'row', display: 'flex', alignItems: 'center' } }, index.h("div", { class: "agree-checkbox" }, index.h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }), index.h("label", { htmlFor: "agree-checkbox-element" })), "I agree to use electronic records and signatures.")) : (index.h("div", { style: { flex: '1' } })), index.h("verdocs-button", { 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) ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "document" }, this.pdfUrl ? index.h("verdocs-view", { source: this.pdfUrl, token: this.signerToken, onDocumentRendered: e => this.handleDocumentRendered(e) }) : index.h("verdocs-loader", null), (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
+    return (index.h(index.Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, index.h("div", { class: "header" }, index.h("div", { class: "intro" }, "Please review and act on these documents."), index.h("div", { class: "toolbar" }, index.h("div", { class: "tools" }, index.h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (index.h("div", { class: "agree" }, index.h("div", { class: "agree-checkbox" }, index.h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }), index.h("label", { htmlFor: "agree-checkbox-element" })), index.h("span", null, "I agree to use electronic records and signatures."))) : (index.h("div", { style: { flex: '1' } })), index.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) ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "document" }, this.pdfUrl ? index.h("verdocs-view", { source: this.pdfUrl, token: this.signerToken, onDocumentRendered: e => this.handleDocumentRendered(e) }) : index.h("verdocs-loader", null), (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
       var _a;
       return (index.h("div", { class: "page-controls", style: { height: `${page.height}px`, width: `${page.width}px`, top: `${page.canvasTop}px`, margin: '0 auto' } }, ((_a = this.pdfPageInfo) === null || _a === void 0 ? void 0 : _a.numRendered) > 0 ? (this.fields.filter(field => field.page === page.pageNumber).map((field, index) => this.renderField(field, index))) : (index.h("div", { style: { display: 'none' } }, "Waiting for PDF to render..."))));
     }))));

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-sign.cjs",[[0,"verdocs-sign",{"documentid":[1],"roleid":[1],"invitecode":[1],"endpoint":[32],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"pdfPageInfo":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search"]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-quick-functions.cjs",[[0,"verdocs-quick-functions"]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"document":[16],"isOpen":[32],"recipientStatusIcons":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]]],["verdocs-button_2.cjs",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}],[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-search-activity_2.cjs",[[0,"verdocs-search-activity",{"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"placeholder":[1],"type":[1],"query":[1]}]]],["verdocs-loader.cjs",[[0,"verdocs-loader"]]],["verdocs-dropdown_12.cjs",[[0,"verdocs-field-initial",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}],[0,"verdocs-field-signature",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}],[0,"verdocs-field-attachment",{"order":[2],"value":[1],"required":[4],"disabled":[4],"focusField":[64]}],[0,"verdocs-view",{"rotation":[2],"source":[1],"token":[1],"loadProgress":[32]}],[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"order":[2],"value":[4],"required":[4],"disabled":[4]}],[0,"verdocs-field-date",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}],[0,"verdocs-field-dropdown",{"options":[16],"required":[4],"order":[2],"disabled":[4],"value":[1],"focused":[32],"focusField":[64]}],[0,"verdocs-field-payment",{"field":[16],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}],[0,"verdocs-field-radio-button",{"order":[2],"checked":[4],"value":[1],"name":[1],"required":[4],"disabled":[4]}],[0,"verdocs-field-textarea",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}],[0,"verdocs-field-textbox",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]]], options);
+  return index.bootstrapLazy([["verdocs-sign.cjs",[[0,"verdocs-sign",{"endpoint":[16],"documentid":[1],"roleid":[1],"invitecode":[1],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"pdfPageInfo":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-quick-functions.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"document":[16],"isOpen":[32],"recipientStatusIcons":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]]],["verdocs-button_2.cjs",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}],[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-search-activity_2.cjs",[[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1]}]]],["verdocs-loader.cjs",[[0,"verdocs-loader"]]],["verdocs-dropdown_12.cjs",[[0,"verdocs-field-initial",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}],[0,"verdocs-field-signature",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}],[0,"verdocs-field-attachment",{"order":[2],"value":[1],"required":[4],"disabled":[4],"focusField":[64]}],[0,"verdocs-view",{"endpoint":[16],"rotation":[2],"source":[1],"token":[1],"loadProgress":[32]}],[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"order":[2],"value":[4],"required":[4],"disabled":[4]}],[0,"verdocs-field-date",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}],[0,"verdocs-field-dropdown",{"options":[16],"required":[4],"order":[2],"disabled":[4],"value":[1],"focused":[32],"focusField":[64]}],[0,"verdocs-field-payment",{"field":[16],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}],[0,"verdocs-field-radio-button",{"order":[2],"checked":[4],"value":[1],"name":[1],"required":[4],"disabled":[4]}],[0,"verdocs-field-textarea",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}],[0,"verdocs-field-textbox",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]]], options);
 });

package/dist/collection/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.css

@@ -70,7 +70,7 @@ verdocs-kba-dialog .choices {
   margin: 0 0 15px 0;
 }
 verdocs-kba-dialog .choice {
-  border: #707ae5;
+  border: 1px solid #707ae5;
   border-radius: 5px;
   display: flex;
   height: 60px;

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

@@ -31,7 +31,7 @@ verdocs-ok-dialog .heading {
   color: #ffffff;
 }
 verdocs-ok-dialog .content {
-  font-size: 14px;
+  font-size: 16px;
   background: #ffffff;
   padding: 20px;
 }

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.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.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/embeds/verdocs-auth/verdocs-auth.css

@@ -1,7 +1,5 @@
 verdocs-auth {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  background-color: #4c56cb;
-  padding: 40px;
   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,9 +1,6 @@
 import { Auth } from '@verdocs/js-sdk/Users';
-import { Transport, VerdocsEndpoint } from '@verdocs/js-sdk/HTTP';
-import { endSession, 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
@@ -34,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
@@ -60,16 +61,12 @@ export class VerdocsAuth {
     this.activeSession = null;
     this.loginError = null;
   }
-  componentWillLoad() {
-    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL);
-    Transport.setActiveEndpoint(staging);
-  }
   componentDidLoad() {
-    const session = loadSession(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,13 +78,13 @@ 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;
-      const session = setSession(SOURCE, r.accessToken, true);
-      this.activeSession = session;
+      this.endpoint.setToken(r.accessToken);
+      this.activeSession = this.endpoint.session;
       this.isAuthenticated = true;
-      this.authenticated.emit({ authenticated: true, session });
+      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
     })
       .catch(e => {
       var _a;
@@ -101,7 +98,7 @@ export class VerdocsAuth {
     });
   }
   handleLogout() {
-    endSession(SOURCE);
+    this.endpoint.clearSession();
     this.isAuthenticated = false;
     this.authenticated.emit({ authenticated: false, session: null });
   }
@@ -152,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,