@verdocs/web-sdk 1.4.6 → 1.5.1

package/dist/components/verdocs-sign.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getEndpoint, d as decodeAccessTokenBody, V as VerdocsEndpoint, s as setActiveEndpoint } from './Token.js';
-import { B as Buffer } from './buffer-es6.js';
+import { V as VerdocsEndpoint, g as getSigningSession, a as getDocument, u as updateRecipientStatus, b as getDocumentFile, c as updateDocumentField } from './VerdocsEndpoint.js';
 import { d as defineCustomElement$j } from './verdocs-button2.js';
 import { d as defineCustomElement$i } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$h } from './verdocs-field-attachment2.js';
@@ -20,6 +19,15 @@ import { d as defineCustomElement$4 } from './verdocs-text-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-upload-dialog2.js';
 import { d as defineCustomElement$2 } from './verdocs-view2.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.
  */
@@ -57,154 +65,16 @@ 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*/, getEndpoint()
-                .api.put("/documents/".concat(documentId, "/recipients/").concat(roleName), __assign({ role_name: roleName, action: action }, (params || {})))
-                .then(function (r) { return r.data; })];
-    });
-}); };
-
-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*/, 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 = decodeAccessTokenBody(signerToken);
-                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*/, 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*/, getEndpoint()
-                .api.get("/documents/".concat(documentId, "/envelope_documents/").concat(envelopeDocumentId, "?file=true"), {
-                responseType: 'arraybuffer',
-            })
-                .then(function (r) { return 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*/, 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 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}";
 
-const BASE_URL = 'https://stage-api.verdocs.com';
 const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    /**
+     * 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.
@@ -220,7 +90,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * signing session.
      */
     this.invitecode = null;
-    this.endpoint = null;
     this.recipient = null;
     this.signerToken = null;
     this.pdfUrl = null;
@@ -231,14 +100,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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 getSigningSession(this.endpoint, {
         documentId: this.documentid,
         roleId: this.roleid,
         inviteCode: this.invitecode,
@@ -247,14 +112,14 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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 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]);
@@ -271,7 +136,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   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';
@@ -283,7 +148,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   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 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();
@@ -325,23 +190,23 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     console.log('fieldChange', field, e.detail);
     switch (field.type) {
       case 'textbox':
-        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+        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 }] } })
+        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 } })
+        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 })
+        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;
@@ -495,17 +360,17 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       { id: 'print', label: 'Print Without Signing' },
       { id: 'download', label: 'Download' },
     ];
-    return (h(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 } }, h("div", { class: "header" }, h("div", { class: "intro" }, "Please review and act on these documents."), 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' } }, 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() })))), !((_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), (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
+    return (h(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 } }, h("div", { class: "header" }, h("div", { class: "intro" }, "Please review and act on these documents."), 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", { 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" })), 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), (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
       var _a;
       return (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))) : (h("div", { style: { display: 'none' } }, "Waiting for PDF to render..."))));
     }))));
   }
   static get style() { return verdocsSignCss; }
 }, [0, "verdocs-sign", {
+    "endpoint": [16],
     "documentid": [1],
     "roleid": [1],
     "invitecode": [1],
-    "endpoint": [32],
     "recipient": [32],
     "signerToken": [32],
     "pdfUrl": [32],

package/dist/components/verdocs-view2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h } from '@stencil/core/internal/client';
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as getDefaultExportFromCjs, b as commonjsGlobal, B as Buffer, d as commonjsRequire, p as process_1 } from './buffer-es6.js';
+import { d as getAugmentedNamespace, e as createCommonjsModule, f as getDefaultExportFromCjs, h as commonjsGlobal, B as Buffer, i as commonjsRequire, p as process_1, V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as defineCustomElement$1 } from './verdocs-loader2.js';
 
 const _nodeResolve_empty = {};
@@ -15973,6 +15973,10 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
     this.documentRendered = createEvent(this, "documentRendered", 7);
     this.numPages = 1;
     this.fingerprint = null;
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * Rotate the PDF in degrees
      */
@@ -16089,6 +16093,7 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
   }; }
   static get style() { return verdocsViewCss; }
 }, [0, "verdocs-view", {
+    "endpoint": [16],
     "rotation": [2],
     "source": [1],
     "token": [1],

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-07-28T20:29:00",
+  "timestamp": "2022-08-09T16:36:50",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.17.1",
@@ -31,6 +31,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "logo",
           "type": "string",
@@ -2325,7 +2341,24 @@
       "docs": "Display quick-function buttons for creating templates and documents.\n\nAuthentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\nembed. This Element will reuse the same session produced by logging in via that Embed.",
       "docsTags": [],
       "usage": {},
-      "props": [],
+      "props": [
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
       "methods": [],
       "events": [
         {
@@ -2362,7 +2395,24 @@
       "docs": "",
       "docsTags": [],
       "usage": {},
-      "props": [],
+      "props": [
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
       "methods": [],
       "events": [],
       "listeners": [],
@@ -2389,6 +2439,22 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "options",
           "type": "any",
@@ -2466,6 +2532,22 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "placeholder",
           "type": "string",
@@ -2618,6 +2700,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "invitecode",
           "type": "string",
@@ -3326,6 +3424,22 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "rotation",
           "type": "0 | 180 | 270 | 90",