@verdocs/web-sdk 4.0.9 → 4.1.3

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

@@ -4,51 +4,61 @@ import { getTemplateStore } from "../../../utils/TemplateStore";
 import { SDKError } from "../../../utils/errors";
 /**
  * Display a template building experience.
+ *
+ * ```ts
+ * <verdocs-build templateId={templateId} />
+ * ```
  */
 export class VerdocsBuild {
     constructor() {
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.step = 'preview';
-        this.store = null;
+        this.templateStore = null;
     }
-    onTemplateIdChanged(newTemplateId) {
-        console.log('Template ID changed', newTemplateId);
+    onTemplateIdChanged(newTemplateId, oldTemplateId) {
+        if (!oldTemplateId && newTemplateId && this.step === 'attachments') {
+            this.step = 'preview';
+        }
         this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
     }
-    onStepChanged(newStep) {
-        console.log('Step changed', newStep);
+    onStepChanged() {
+        // We reload the template here even if only the step changed in case
+        // we were out of sync before
         this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
     }
     async componentWillLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             this.endpoint.loadSession();
+            if (!this.endpoint.session) {
+                console.log('[BUILD] Unable to start builder session, must be authenticated');
+                return;
+            }
             if (!this.templateId) {
                 console.log(`[BUILD] No template ID, activating upload mode`);
                 this.step = 'attachments';
                 return;
             }
-            if (!this.endpoint.session) {
-                console.log('[BUILD] Unable to start builder session, must be authenticated');
-                return;
+            try {
+                this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
+            }
+            catch (e) {
+                console.log('[BUILD] Error loading template', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
             }
-            this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
         }
         catch (e) {
-            console.log('[BUILD] Error loading template', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            console.log('[BUILD] Error with builder session', e);
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
     async loadTemplate(templateId) {
         if (templateId) {
-            console.log('Loading store', templateId);
-            this.store = await getTemplateStore(this.endpoint, templateId, false);
-            // forceUpdate(this.el);
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
         }
     }
-    handleCancel(e) {
-        console.log('Cancel', e.detail);
+    handleCancel() {
         this.step = 'preview';
     }
     async handleTemplateCreated(templateId) {
@@ -78,7 +88,6 @@ export class VerdocsBuild {
     }
     handleStepChanged(step) {
         var _a;
-        console.log('osc', step);
         this.step = step;
         (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(step);
     }
@@ -86,12 +95,12 @@ export class VerdocsBuild {
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        if (!this.store) {
+        if (!this.templateStore) {
             console.log('[BUILD] No template ID, rendering created view');
-            return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
+            return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
         }
         console.log('[BUILD] Rendering build view', this.templateId, this.step, ['attachments', 'roles', 'settings', 'fields', 'preview'].indexOf(this.step));
-        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
+        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
     }
     static get is() { return "verdocs-build"; }
     static get originalStyleUrls() {
@@ -174,7 +183,7 @@ export class VerdocsBuild {
     }
     static get states() {
         return {
-            "store": {}
+            "templateStore": {}
         };
     }
     static get events() {

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

@@ -10,6 +10,10 @@ import { SDKError } from "../../../utils/errors";
  * Display a template preview experience. This will display the template's attached
  * documents with signing fields overlaid on each page. Fields will be color-coded
  * by recipient, and will be read-only (cannot be filled, moved, or altered).
+ *
+ * ```ts
+ * <verdocs-preview templateId={templateId} />
+ * ```
  */
 export class VerdocsPreview {
     constructor() {
@@ -20,41 +24,54 @@ export class VerdocsPreview {
         this.templateId = null;
         this.loading = true;
     }
+    onTemplateIdChanged(newTemplateId) {
+        console.log('[PREVIEW] Template ID changed', newTemplateId);
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    }
     async componentWillLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             this.endpoint.loadSession();
+            if (!this.endpoint.session) {
+                console.log('[PREVIEW] Unable to start builder session, must be authenticated');
+                return;
+            }
             if (!this.templateId) {
                 console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
                 return;
             }
-            if (!this.endpoint.session) {
-                console.log('[PREVIEW] Unable to start builder session, must be authenticated');
-                return;
+            try {
+                getTemplateStore(this.endpoint, this.templateId, true)
+                    .then(ts => {
+                    this.templateStore = ts;
+                    this.fieldStore = getTemplateFieldStore(this.templateId);
+                    this.roleStore = getTemplateRoleStore(this.templateId);
+                    this.loading = false;
+                })
+                    .catch(e => {
+                    console.log(e);
+                });
+            }
+            catch (e) {
+                console.log('[PREVIEW] Error with preview session', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
             }
-            getTemplateStore(this.endpoint, this.templateId, true)
-                .then(ts => {
-                this.templateStore = ts;
-                console.log('[PREVIEW] Loaded Template Store', ts.state);
-                this.fieldStore = getTemplateFieldStore(this.templateId);
-                this.roleStore = getTemplateRoleStore(this.templateId);
-                console.log('[PREVIEW] Loaded template', this.templateStore.state, this.roleStore.get('roles'), this.fieldStore.get('fields'));
-                this.loading = false;
-            })
-                .catch(e => {
-                console.log(e);
-            });
         }
         catch (e) {
             console.log('[PREVIEW] Error with preview session', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+        }
+    }
+    async loadTemplate(templateId) {
+        if (templateId) {
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
         }
     }
     handlePageRendered(e) {
         var _a, _b;
         const pageInfo = e.detail;
         const fields = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page === pageInfo.pageNumber);
-        console.log('[PREVIEW] Page rendered', pageInfo, fields);
+        // console.log('[PREVIEW] Page rendered', pageInfo, fields);
         fields.forEach(field => renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false }));
     }
     render() {
@@ -64,7 +81,7 @@ export class VerdocsPreview {
         }
         return (h(Host, null, (((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) || []).map(document => {
             const pageNumbers = integerSequence(1, document.pages);
-            return (h(Fragment, null, pageNumbers.map(pageNumber => (h("verdocs-template-document-page", { templateId: document.template_id, documentId: document.id, pageNumber: pageNumber, disabled: true, editable: true, done: false, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
+            return (h(Fragment, null, pageNumbers.map(pageNumber => (h("verdocs-template-document-page", { templateId: document.template_id, documentId: document.id, pageNumber: pageNumber, disabled: true, editable: false, done: false, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
                     { name: 'page', type: 'canvas' },
                     { name: 'controls', type: 'div' },
                 ] })))));
@@ -154,4 +171,10 @@ export class VerdocsPreview {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "templateId",
+                "methodName": "onTemplateIdChanged"
+            }];
+    }
 }

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

@@ -5,7 +5,7 @@ export class VerdocsSearch {
         this.endpoint = VerdocsEndpoint.getDefault();
     }
     render() {
-        return (h("div", { key: '1bdc73f6b69fdaf197b4d228c36ac28a4de147c8', class: "container" }, h("verdocs-search-box", { key: 'd5305d39714c09a83dca8d87282fe3bec40491f0', endpoint: this.endpoint }), h("div", { key: '6f333add2936ca54994f0ec4e33023fa2b196b07', class: "boxes" }, h("verdocs-search-activity", { key: '2c49e617f5bbb0337a3e48a18b2687478f512847', type: "recent", endpoint: this.endpoint }), h("verdocs-search-activity", { key: '3ee0c69f75e839459c63f33bf24302e3cc277adf', type: "saved", endpoint: this.endpoint }), h("verdocs-search-activity", { key: '1f78fdc2d68b97a24a37ba544bd2d49d49d43b32', type: "starred", endpoint: this.endpoint }), h("verdocs-quick-functions", { key: '789f6170d2f7e0b17da045d4c2350c69a7e9588b', endpoint: this.endpoint }))));
+        return (h("div", { key: '200d955b8750bfb853a491a39d2614f65c3dae2e', class: "container" }, h("verdocs-search-box", { key: '55db0748ab0102d71235903b1c668587e45ad527', endpoint: this.endpoint }), h("div", { key: '88ca9f594578f71b8abfb1fcbd1e31d455bcfb46', class: "boxes" }, h("verdocs-search-activity", { key: '7d95bd072f011865207fc0365e18d82b7875fd6a', type: "recent", endpoint: this.endpoint }), h("verdocs-search-activity", { key: 'f2f364ddb7347b7479aa5fd54d2519f7f96628ac', type: "saved", endpoint: this.endpoint }), h("verdocs-search-activity", { key: 'd504730b955a6c14cdf5d77eba96d3bb35eaf876', type: "starred", endpoint: this.endpoint }), h("verdocs-quick-functions", { key: 'dd543a416a6aab58e7566e320a20ea73f0313bce', endpoint: this.endpoint }))));
     }
     static get is() { return "verdocs-search"; }
     static get originalStyleUrls() {

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

@@ -8,17 +8,23 @@ const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"
 const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
 const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
 /**
- * Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.
- * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
- * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
- * directly to the `createEnvelope()` call in JS-SDK.
+ * Display a form to send a template to one or more recipients in an envelope for signing. Note
+ * that because most applications have custom workflow requirements to trigger after sending an
+ * Envelope, this component does not actually perform that operation. Parent applications should
+ * listen for the `onSend` event, and can pass the contents of `event.detail` directly to the
+ * `createEnvelope()` call in JS-SDK.
  *
- * Host applications should ensure the template is "sendable" before displaying this component. To be sendable, a template must have
- * at least one document attached, at least one participant defined, and at least one field assigned to every "signer" participant.
+ * Host applications should ensure the template is "sendable" before displaying this component.
+ * To be sendable, a template must have at least one document attached, at least one participant
+ * defined, and at least one field assigned to every "signer" participant. This component will
+ * hide itself if the template is not sendable.
+ *
+ * ```ts
+ * <verdocs-send templateId={templateId} />
+ * ```
  */
 export class VerdocsSend {
     constructor() {
-        this.levels = [];
         this.templateStore = null;
         this.roleStore = null;
         this.endpoint = VerdocsEndpoint.getDefault();
@@ -34,38 +40,41 @@ export class VerdocsSend {
     async reset() {
         this.rolesCompleted = {};
     }
+    onTemplateIdChanged(newTemplateId) {
+        console.log('[SEND] Template ID changed', newTemplateId);
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         try {
-            const loadSessionResult = this.endpoint.loadSession();
-            if (!this.templateId) {
-                console.log(`[SEND] Missing required template ID ${this.templateId}`);
+            this.endpoint.loadSession();
+            if (!this.endpoint.session) {
+                console.log('[SEND] Unable to start Send operation, must be authenticated');
                 return;
             }
-            if (!this.endpoint.session) {
-                console.log('[SEND] Unable to start builder session, must be authenticated');
+            if (!this.templateId) {
+                console.log(`[SEND] Missing required template ID ${this.templateId}`);
                 return;
             }
-            this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
-            this.roleStore = getTemplateRoleStore(this.templateId);
+            return this.loadTemplate(this.templateId);
+        }
+        catch (e) {
+            console.log('[SEND] Error with send session', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    async loadTemplate(templateId) {
+        var _a, _b, _c, _d, _e, _f;
+        if (!templateId) {
+            return;
+        }
+        try {
+            const loadSessionResult = this.endpoint.loadSession();
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
+            this.roleStore = getTemplateRoleStore(templateId);
+            this.recomputeRolesCompleted();
             if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
-                console.warn(`[SEND] Template is not sendable`, this.templateId);
-            }
-            if (this.roleStore.get('roles')) {
-                const rolesAtLevel = {};
-                this.rolesCompleted = {};
-                this.roleStore.get('roles').forEach(role => {
-                    const level = role.sequence - 1;
-                    rolesAtLevel[level] || (rolesAtLevel[level] = []);
-                    const id = `r-${level}-${rolesAtLevel[level].length}`;
-                    rolesAtLevel[level].push({ ...role, id });
-                    if (role.full_name && (role.email || role.phone)) {
-                        this.rolesCompleted[id] = { ...role, id };
-                    }
-                });
-                this.rolesAtLevel = rolesAtLevel;
-                this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-                this.levels.sort((a, b) => a - b);
+                console.warn(`[SEND] Template is not sendable`, templateId);
             }
             if ((_c = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _c === void 0 ? void 0 : _c.profile) {
                 this.sessionContacts.push({
@@ -81,11 +90,41 @@ export class VerdocsSend {
             (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
+    recomputeRolesCompleted() {
+        const roles = this.roleStore.get('roles') || [];
+        const rolesAtLevel = {};
+        this.rolesCompleted = {};
+        roles.forEach(role => {
+            const level = role.sequence - 1;
+            rolesAtLevel[level] || (rolesAtLevel[level] = []);
+            const id = `r-${level}-${rolesAtLevel[level].length}`;
+            rolesAtLevel[level].push({ ...role, id });
+            if (role.full_name && (role.email || role.phone)) {
+                this.rolesCompleted[id] = { ...role, id };
+            }
+        });
+    }
+    getRoleLevels() {
+        const roles = this.roleStore.get('roles') || [];
+        const rolesAtLevel = {};
+        this.rolesCompleted = {};
+        roles.forEach(role => {
+            const level = role.sequence - 1;
+            rolesAtLevel[level] || (rolesAtLevel[level] = []);
+            const id = `r-${level}-${rolesAtLevel[level].length}`;
+            rolesAtLevel[level].push({ ...role, id });
+        });
+        this.rolesAtLevel = rolesAtLevel;
+        const levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
+        levels.sort((a, b) => a - b);
+        return levels;
+    }
     getLevelIcon(level) {
+        const levels = this.getRoleLevels();
         if (level < 0) {
             return h("div", { class: "level-icon", innerHTML: startIcon });
         }
-        else if (level >= this.levels.length) {
+        else if (level >= levels.length) {
             return h("div", { class: "level-icon", innerHTML: doneIcon });
         }
         else {
@@ -146,15 +185,19 @@ export class VerdocsSend {
     }
     render() {
         var _a, _b;
+        if (!this.endpoint.session) {
+            return (h(Host, { style: { display: 'flex' } }, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
         const roleNames = getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
         const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        return (h(Host, { key: 'ecdc1830949a5a35b092167b201c6feb8284e221', class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { key: '2d8ebba91a5cff228135465c0956848fcc8873b5', class: "recipients" }, h("div", { key: '1c72951bfc1e11a1d95c04e005b3fcd8108c39f5', class: "left-line" }), h("div", { key: '82834a006584cde2b8020f7f233dfff685e647f2', class: `level level-start` }, this.getLevelIcon(-1), h("div", { key: '930ca1cc5b3f93f11f0a38703396538ee90dba5b', class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+        const levels = this.getRoleLevels();
+        return (h(Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
             var _a, _b, _c, _d, _e, _f;
             const unknown = !role.email;
             const elId = `verdocs-send-recipient-${role.name}`;
             return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
-        })))), h("div", { key: '241118ea059aadb8a6030b5ee5bd4383e88af212', class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { key: '05ba689ac40aaf1543b921b490f8fe4550bad4df', class: "complete" }, "Signing Complete"))), h("div", { key: '39c73b0a3310d85dfbd29f2d2fda347d37091e90', class: "buttons" }, h("verdocs-button", { key: 'c3d1196a34f1cd4ab654aa07b707372054f26202', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { key: 'd2e16d7a4d97c8888df3e7257296dee6f8db3234', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", { key: 'd8c0a234261d1b77d6343dd7e426c28475dceadf' }))));
+        })))), h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
     }
     static get is() { return "verdocs-send"; }
     static get originalStyleUrls() {
@@ -206,7 +249,7 @@ export class VerdocsSend {
                     "text": "The ID of the template to create the document from."
                 },
                 "attribute": "template-id",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "null"
             },
             "environment": {
@@ -361,4 +404,10 @@ export class VerdocsSend {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "templateId",
+                "methodName": "onTemplateIdChanged"
+            }];
+    }
 }

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

@@ -5,6 +5,10 @@ import { SDKError } from "../../../utils/errors";
  * Display a template preview experience. This will display the template's attached
  * documents with signing fields overlaid on each page. Fields will be color-coded
  * by recipient, and will be read-only (cannot be filled, moved, or altered).
+ *
+ * ```ts
+ * <verdocs-settings />
+ * ```
  */
 export class VerdocsSettings {
     constructor() {
@@ -26,9 +30,8 @@ export class VerdocsSettings {
         }
     }
     render() {
-        console.log('sess', this.endpoint.session);
         if (!this.endpoint.session) {
-            return (h(Host, null, h("verdocs-loader", null)));
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization"), h("div", { class: `tab ${this.tab === 'members' ? 'active' : ''}`, onClick: () => (this.tab = 'members') }, "Members"), h("div", { class: `tab ${this.tab === 'apikeys' ? 'active' : ''}`, onClick: () => (this.tab = 'apikeys') }, "API Keys")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint }), this.tab === 'members' && h("verdocs-settings-members", { endpoint: this.endpoint }), this.tab === 'apikeys' && h("verdocs-settings-api-keys", { endpoint: this.endpoint })));
     }

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

@@ -36,6 +36,14 @@ verdocs-contact-picker form label {
   margin: 0 0 4px 0;
   color: #5c6575;
 }
+verdocs-contact-picker form .label-with-icon {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+verdocs-contact-picker form .label-with-icon verdocs-help-icon svg {
+  transform: scale(0.8);
+}
 verdocs-contact-picker form input {
   border: none;
   font-size: 18px;
@@ -92,7 +100,7 @@ verdocs-contact-picker form .dropdown .suggestion:hover {
 }
 verdocs-contact-picker .buttons {
   display: flex;
-  column-gap: 8px;
+  column-gap: 6px;
   margin-top: 16px;
   flex-direction: row;
 }

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

@@ -1,9 +1,10 @@
 import { VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h } from "@stencil/core";
 import { convertToE164 } from "../../../utils/utils";
-const messageIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
-const delegateIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';
-const placeholderIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AccountCircleIcon" tabindex="-1" title="AccountCircle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';
+const messageIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
+const delegateIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';
+const kbaIcon = '<svg focusable="false" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" /></svg>';
+const placeholderIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';
 /**
  * Displays a contact picker suitable for filling out Recipient objects when sending Documents.
  *
@@ -25,6 +26,9 @@ export class VerdocsContactPicker {
         this.showSuggestions = false;
         this.showMessage = false;
         this.delegator = false;
+        this.showKba = false;
+        this.kbaMethod = '';
+        this.pinCode = '';
         this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
         this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
         this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
@@ -37,6 +41,10 @@ export class VerdocsContactPicker {
             this.delegator = this.templateRole.delegator || false;
             this.message = this.templateRole.message || '';
             this.showMessage = this.message !== '';
+            this.kbaMethod = this.templateRole.kba_method || '';
+            this.showKba = !!this.kbaMethod;
+            // TODO
+            this.pinCode = '';
         }
     }
     handleNameChange(e) {
@@ -81,18 +89,29 @@ export class VerdocsContactPicker {
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        return (h("form", { key: '45acdba47c2999d3d4aa88c72e4451c5565b222e', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '96b525fe36cb094bbd4492841cb095e62b4358b8', class: "row" }, h("label", { key: 'f264a4b8cc6da4ef82f78a1841d5b3bce0ae4fef', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: '15898561eeff05ad20dd73787f39702ab862d295', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
+        return (h("form", { key: 'b4c1d548719a9e43b09e9632078efecf461728fd', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '010bfa4a4802cdf165f4a837d52143296eeb9615', class: "row" }, h("label", { key: 'baadc6a3159a5e9fe58c91d944269fa5f2319fc5', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: 'e570c3218970843b9acfb276349a7b9b2cc0d4fc', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
             // onBlur={() => (this.showSuggestions = false)}
-            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { key: 'ad28ba30382a2d2a40ac1992352368b883097553', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { key: 'a99e1d83a4292c1f7d978529526f49622ab8a18e', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
             var _a;
             return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : h("div", { class: "avatar", innerHTML: placeholderIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        })))), h("div", { key: '7a7d4b6df5eab37ede0b87f9d10ba8b8e4e8254f', class: "row" }, h("label", { key: '2058494eeac07248115323afe529bcaf681afed1', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: 'd1c41d7b356190b4705e7d255103534bd1a47cd2', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '5f9668b15bfb2e1e06cc03e2f1ea051b893307f6', class: "row" }, h("label", { key: '54b40e4aa240e2c6fb2364fbe59707d25dbfdb65', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'dc20e317c4dbeae41bc9454685a0bf97f57db2bb', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (h("div", { key: '85fb931022f96a0916c162e335a1ea91a11a9590', class: "row" }, h("label", { key: '45c30e86e0038b8159c417bb59fb88885e309853', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'edd7b070c3fa83fe93e3305d70182a63b8a273b5', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '0cfb64faed1d1bfa9d712811ac7c05412b135a8c', class: "buttons" }, h("verdocs-toggle-button", { key: '6fe54edfc3e822f4863c8e2ad8109ea7cde8be94', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+        })))), h("div", { key: 'c1973698147b613df52fa2b8895fb6f7c6eda1e5', class: "row" }, h("label", { key: 'd9211e7aa931b9e270746be2e3a983e346d14f35', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '4e6e978b03cb2bb7f642ef9472ccb8914021561b', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '79fd52114dc907678d3f97fcf50502401c7c7cc6', class: "row" }, h("label", { key: '5f044851b4fd341162ac27308a53ef3ae9f87d9e', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '6b9e582317bf57617f3ef03771dc208d7a85d20a', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: 'ee0a3a7bb56ad26f9c6bfad38b1575999b6b1f1a', class: "row" }, h("div", { key: '7aaa78abd9f934b59862e94c6c657cbccc0ec587', class: "label-with-icon" }, h("label", { key: '3b5625726464e64f2a2089828f8efed86d3e6fac' }, "KBA:"), h("verdocs-help-icon", { key: 'e3ae8688cb0a3ee0f5673de35de911930b5c1264', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), h("verdocs-select-input", { key: '25f9fe8483ce98ba0984edbe40ea71432bfa0803', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+                { label: 'None', value: '' },
+                { label: 'PIN Code', value: 'pin' },
+                { label: 'Full Verification', value: 'kba' },
+            ] }), this.kbaMethod === 'pin' && (h("input", { key: 'c73d9196e00f0d8e2ef2372b4c7eec6521e1a8c4', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: '8501cd90265ade56a8491226b3fe4f6fd27cab96', class: "row" }, h("label", { key: 'ed86374d406062b31923a3b70dd8a65454b147e2', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'f8c01b1dc7ee18729db4578b490e4e6caeaba006', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '127c1bae45f6b5e01bb6ea7304c543550cb87074', class: "buttons" }, h("verdocs-toggle-button", { key: '7c1fc2e0955cd33d5e8b9778a104120685b9cafd', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+                this.showKba = e.detail.active;
+                if (!e.detail.active) {
+                    this.pinCode = '';
+                    this.kbaMethod = '';
+                }
+                this.showSuggestions = false;
+            } }), h("verdocs-toggle-button", { key: '60d536d5c030075158d2f237251cdc9045a7c7e6', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("verdocs-toggle-button", { key: '56941f96e455fa978d664cfecd6c015c0c133127', icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: '6d634b2fc96412b136fa55074349f85ad2ae0a99', icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
                 this.delegator = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: 'ec687a638006d9902d5041b57de14a0d6fbb4ff3', class: "flex-fill" }), h("verdocs-button", { key: 'e984e3783aa6483ab20873254dd96998e0d505e8', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '1b997aede29f9e8576c0739e089d879ba05ce123', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), h("div", { key: 'c798509d79008ba083e028ad4ca78170ac7659d3', class: "flex-fill" }), h("verdocs-button", { key: '4f0355a6ebae37fa80d451918e1572a9fe900861', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'ec6df05fb07868162f6d641e6b7a7d1dc80e5e5d', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
     }
     static get is() { return "verdocs-contact-picker"; }
     static get originalStyleUrls() {
@@ -189,6 +208,9 @@ export class VerdocsContactPicker {
             "showSuggestions": {},
             "showMessage": {},
             "delegator": {},
+            "showKba": {},
+            "kbaMethod": {},
+            "pinCode": {},
             "nameFieldId": {},
             "emailFieldId": {},
             "phoneFieldId": {}

package/dist/collection/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.js

@@ -75,7 +75,7 @@ export class VerdocsEnvelopeDocumentPage {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: 'a8a29647c914fafe6361029943ae43a5819fdbcb', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (h(Host, { key: '1626cbea713462254f8d518479181a39156fd599', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values