@verdocs/web-sdk 4.0.8 → 4.1.2

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cfdfab36.js');
 const jsSdk = require('@verdocs/js-sdk');
-const utils = require('./utils-5eb11b46.js');
+const utils = require('./utils-d9ecd23d.js');
 const popper = require('./popper-31badbf8.js');
 require('./Types-db1bd1d8.js');
 require('./index-5f130ec0.js');
@@ -45,7 +45,7 @@ const VerdocsQuickFilter$1 = class {
         const firstPage = Math.max(0, this.selectedPage - 2);
         const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
         const pagesToDisplay = jsSdk.integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
-        return (index.h(index.Host, { key: 'b8dd66f21bffa468b40674e3ee68fbead0dd300c' }, this.selectedPage > 0 && index.h(PageButton, { key: '0e5b3a90f97ed05f87a56a400404a9168e2dd208', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { key: 'a2e31ffd4452f88b0a8ab88a55f3adae765b5157', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && index.h("div", { key: '9d720bcc6635c8ce891303304d97c82aa9ff9c2d', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { key: '41bf9584d353c5ca15435ac970b89c49215fc6f3', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+        return (index.h(index.Host, { key: '618d88a5b4dae883914e939ef05456b9d44f2df3' }, this.selectedPage > 0 && index.h(PageButton, { key: 'eaff39fe466f9219173b52222eaf87f9dcb41272', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { key: 'e37014eb7b3bad65cc940871c6fccc5e81cdb7bc', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && index.h("div", { key: 'c5575814246a760a87d9453422fda25cac2951bf', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { key: '80c7278265cb970457cb23c6ca6f34a6b4af1888', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
     }
     get el() { return index.getElement(this); }
 };
@@ -133,7 +133,7 @@ const VerdocsQuickFilter = class {
         const longestLabelWidth = utils.renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
         const prefixWidth = utils.renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
         const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
-        return (index.h(index.Host, { key: '1f334530a8ad36661234df13dfcded2b0578f6a0', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, index.h("div", { key: 'ca820c376c072a6de23e9bddf2255fd18d1423c6', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, index.h("div", { key: '6b64609796a46da25d7fdcd4b0f667b010feaf5c', class: "title", ref: el => (this.dropdownButton = el) }, index.h("span", { key: 'da9dd1d6b822e26e478edef34127324a24c4fa46', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), index.h("div", { key: 'c3e735e29d3a53780c94689502044af65df358da', style: { flex: '1' } }), index.h("div", { key: '7ea36915d9db4c97520486db47cb60f6b08ba868', class: "separator" }), index.h("div", { key: '32b41b27f18e34ab13c80af1562489df9c75edcc', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), index.h("div", { key: 'f9c2a98829e67f30cd2234ce5532684f4ca45ce1', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (index.h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (index.h("div", { class: "separator" }))))));
+        return (index.h(index.Host, { key: 'ccc8423ebae51aa9c9523ae8ddb547b5ff33e85c', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, index.h("div", { key: '51edc34e8ff8916c206413a2a0006733df65a6ee', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, index.h("div", { key: 'a58d23d6fb24512f2857b3f7b96fb1f29e3bb4da', class: "title", ref: el => (this.dropdownButton = el) }, index.h("span", { key: 'ec2639bb2800f5d1df9c024c7b35db9e178a1514', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), index.h("div", { key: '11f5ed99195b02d467f7dcb38fe69a85ff6c166b', style: { flex: '1' } }), index.h("div", { key: 'b58e34715555bc873f0850c01f70a37593462cd1', class: "separator" }), index.h("div", { key: 'bc7618f508a8a5b9e4c27c7fa4a0203e96e12e3c', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), index.h("div", { key: '27aa83763ec9cd0ce52d221254acfb7d00a4cda3', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (index.h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (index.h("div", { class: "separator" }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cfdfab36.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateFieldStore = require('./TemplateFieldStore-6a79aae7.js');
-const TemplateRoleStore = require('./TemplateRoleStore-06db6e56.js');
-const TemplateStore = require('./TemplateStore-5a46be5e.js');
-const utils = require('./utils-5eb11b46.js');
+const TemplateFieldStore = require('./TemplateFieldStore-2db70818.js');
+const TemplateRoleStore = require('./TemplateRoleStore-fb869e9a.js');
+const TemplateStore = require('./TemplateStore-037833e5.js');
+const utils = require('./utils-d9ecd23d.js');
 const errors = require('./errors-017fb835.js');
 const Icons = require('./Icons-9a6f2f7c.js');
-const interact_min = require('./interact.min-3f0b5e7d.js');
 const Toast = require('./Toast-bb6f20af.js');
+const index$1 = require('./index-5f130ec0.js');
+const interact_min = require('./interact.min-ee721bdc.js');
 require('./index-3e4c5891.js');
 require('./index-a5472099.js');
 require('./Types-db1bd1d8.js');
-require('./index-5f130ec0.js');
 
 const verdocsPreviewCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 const VerdocsPreviewStyle0 = verdocsPreviewCss;
@@ -31,41 +31,54 @@ const VerdocsPreview = class {
         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 {
+                TemplateStore.getTemplateStore(this.endpoint, this.templateId, true)
+                    .then(ts => {
+                    this.templateStore = ts;
+                    this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
+                    this.roleStore = TemplateRoleStore.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 errors.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));
             }
-            TemplateStore.getTemplateStore(this.endpoint, this.templateId, true)
-                .then(ts => {
-                this.templateStore = ts;
-                console.log('[PREVIEW] Loaded Template Store', ts.state);
-                this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
-                this.roleStore = TemplateRoleStore.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 errors.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 errors.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 TemplateStore.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 => utils.renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false }));
     }
     render() {
@@ -75,12 +88,15 @@ const VerdocsPreview = class {
         }
         return (index.h(index.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 = jsSdk.integerSequence(1, document.pages);
-            return (index.h(index.Fragment, null, pageNumbers.map(pageNumber => (index.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 (index.h(index.Fragment, null, pageNumbers.map(pageNumber => (index.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' },
                 ] })))));
         })));
     }
+    static get watchers() { return {
+        "templateId": ["onTemplateIdChanged"]
+    }; }
 };
 VerdocsPreview.style = VerdocsPreviewStyle0;
 
@@ -99,7 +115,6 @@ const VerdocsSend = class {
         this.exit = index.createEvent(this, "exit", 7);
         this.sdkError = index.createEvent(this, "sdkError", 7);
         this.searchContacts = index.createEvent(this, "searchContacts", 7);
-        this.levels = [];
         this.templateStore = null;
         this.roleStore = null;
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
@@ -115,38 +130,41 @@ const VerdocsSend = class {
     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 TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-            this.roleStore = TemplateRoleStore.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 errors.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 TemplateStore.getTemplateStore(this.endpoint, templateId, false);
+            this.roleStore = TemplateRoleStore.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({
@@ -162,11 +180,41 @@ const VerdocsSend = class {
             (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new errors.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 index.h("div", { class: "level-icon", innerHTML: startIcon$1 });
         }
-        else if (level >= this.levels.length) {
+        else if (level >= levels.length) {
             return index.h("div", { class: "level-icon", innerHTML: doneIcon$1 });
         }
         else {
@@ -226,16 +274,23 @@ const VerdocsSend = class {
     }
     render() {
         var _a, _b;
+        if (!this.endpoint.session) {
+            return (index.h(index.Host, { style: { display: 'flex' } }, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
         const roleNames = TemplateRoleStore.getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email) || jsSdk.isValidPhone(recipient.phone));
         const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        return (index.h(index.Host, { key: 'd0bd3f9d7ef226896f095059203280e1c1e71265', class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { key: '1d4fdeda91a23a81bb1c72a4200de76e36ba74c8', class: "recipients" }, index.h("div", { key: '9bb72122ba245dd95c3f2ffb0c1768764c2f2da7', class: "left-line" }), index.h("div", { key: 'c2056047a4bf20612fb83693fcf279a1354c98e0', class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { key: '0220edca79c791bdd561d0ff92cfad3236dd7800', class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+        const levels = this.getRoleLevels();
+        return (index.h(index.Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (index.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 ? (index.h("div", { class: "recipient", style: { backgroundColor: jsSdk.getRGBA(TemplateRoleStore.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, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.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); } }))))) : (index.h("div", { class: "recipient", style: { borderColor: jsSdk.getRGBA(TemplateRoleStore.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, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.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); } })))));
-        })))), index.h("div", { key: '16fba92b62896c3368d54743c9ae5c79b7558f16', class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { key: '0cae926609fc5c2a10387bee716d49c98a8ebcf6', class: "complete" }, "Signing Complete"))), index.h("div", { key: 'f8457f0c451cc70a096e46447395186aca90169f', class: "buttons" }, index.h("verdocs-button", { key: '2be6f8c3cfb4c2ec8c010c4cba79855f20e5461d', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { key: 'b34393a6e3197acd0143161c71a43420f45302be', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", { key: '8e26caa183719e765c771921d365e39ec4916be4' }))));
+        })))), index.h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), index.h("div", { class: "complete" }, "Signing Complete"))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", null))));
     }
+    static get watchers() { return {
+        "templateId": ["onTemplateIdChanged"]
+    }; }
 };
 VerdocsSend.style = VerdocsSendStyle0;
 
@@ -373,9 +428,11 @@ const VerdocsTemplateAttachments = class {
 };
 VerdocsTemplateAttachments.style = VerdocsTemplateAttachmentsStyle0;
 
-const verdocsTemplateBuildTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-build-tabs{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-build-tabs verdocs-template-attachments,verdocs-template-build-tabs verdocs-template-roles{margin:20px}verdocs-template-build-tabs verdocs-template-fields{border-top:1px solid #777777}verdocs-template-build-tabs verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-template-build-tabs verdocs-template-fields{width:100%}verdocs-template-build-tabs verdocs-preview{-ms-flex:1;flex:1}";
+const verdocsTemplateBuildTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-build-tabs{-ms-flex:1;flex:1;gap:15px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-build-tabs verdocs-button-panel svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-build-tabs verdocs-template-attachments,verdocs-template-build-tabs verdocs-template-roles{margin:20px}verdocs-template-build-tabs verdocs-template-fields{border-top:1px solid #777777}verdocs-template-build-tabs verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-template-build-tabs verdocs-template-fields{width:100%}verdocs-template-build-tabs verdocs-preview{-ms-flex:1;flex:1}.template-details-panel .row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px;margin:10px 0}.template-details-panel label{-ms-flex:0 0 70px;flex:0 0 70px}.template-details-panel .value{-ms-flex:1;flex:1;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-details-panel .icon-button{cursor:pointer;opacity:0.8;-ms-flex:0;flex:0;width:18px;height:18px}.template-details-panel .icon-button svg{stroke:#000000;width:18px;height:18px}.template-details-panel .icon-button:hover{opacity:1}";
 const VerdocsTemplateBuildTabsStyle0 = verdocsTemplateBuildTabsCss;
 
+const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" /></svg>`;
 const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
 const VerdocsTemplateBuildTabs = class {
     constructor(hostRef) {
@@ -385,14 +442,18 @@ const VerdocsTemplateBuildTabs = class {
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.step = 'preview';
-        this.store = null;
+        this.templateStore = null;
     }
-    onStepChanged() {
-        console.log('Step changed', this.step, this.templateId);
-        this.loadTemplate().catch((e) => console.log('Unknown Error', e));
+    onTemplateIdChanged(newTemplateId) {
+        console.log('[BUILD_TABS] Template ID changed', newTemplateId);
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    }
+    onStepChanged(newStep) {
+        console.log('[BUILD_TABS] Step changed', newStep);
+        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) {
@@ -400,19 +461,26 @@ const VerdocsTemplateBuildTabs = class {
                 return;
             }
             if (!this.templateId) {
-                this.step = 'preview';
+                this.step = 'attachments';
+                console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');
                 return;
             }
-            this.loadTemplate().catch(e => console.log('[BUILD_TABS] Unable to load template', e));
+            try {
+                this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+            }
+            catch (e) {
+                console.log('[BUILD_TABS] Error loading template', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
+            }
         }
         catch (e) {
             console.log('[BUILD_TABS] Error loading template', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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 errors.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() {
-        if (this.templateId) {
-            this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+    async loadTemplate(templateId) {
+        if (templateId) {
+            this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, templateId, false);
         }
     }
     setStep(e) {
@@ -423,23 +491,30 @@ const VerdocsTemplateBuildTabs = class {
         this.step = e.detail.tab.id;
         (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail.tab.id);
     }
+    copyTemplateId() {
+        navigator.clipboard
+            .writeText(this.templateId)
+            .then(() => {
+            Toast.VerdocsToast('Template ID copied', { style: 'success', duration: 3000 });
+        })
+            .catch(e => {
+            var _a;
+            console.warn('[BUILD_TABS] Error copying to clipboard', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e);
+        });
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         if (!this.endpoint.session) {
             return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         let canPreview = false;
         let canEditFields = false;
         let canEditRoles = false;
-        console.log('[BUILD_TABS] Rendering tabs', this.templateId, this.step);
-        if (this.templateId && this.store && this.store.state) {
-            canEditRoles = ((_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
-            canEditFields = canEditRoles && ((_f = (_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
-            canPreview = canEditFields && ((_j = (_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.length) > 0;
-            // TODO
-            // canPreview = this.store && userCanPreviewTemplate(this.endpoint.session, this.store?.state);
-            // canEditFields = this.store && userCanBuildTemplate(this.endpoint.session, this.store?.state);
-            // canEditRoles = this.store && userCanUpdateTemplate(this.endpoint.session, this.store?.state);
+        if (this.templateId && this.templateStore && this.templateStore.state) {
+            canEditRoles = ((_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
+            canEditFields = canEditRoles && ((_f = (_e = (_d = this.templateStore) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
+            canPreview = canEditFields && ((_j = (_h = (_g = this.templateStore) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.length) > 0;
         }
         let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);
         if (!canPreview && selectedStepIndex >= 4) {
@@ -451,16 +526,17 @@ const VerdocsTemplateBuildTabs = class {
         if (!canEditRoles && selectedStepIndex >= 1) {
             selectedStepIndex = 0;
         }
-        console.log({ selectedStepIndex, canPreview, canEditFields, canEditRoles });
         return (index.h(index.Host, null, index.h("verdocs-tabs", { onSelectTab: e => this.setStep(e), selectedTab: selectedStepIndex, tabs: [
-                { id: 'attachments', disabled: false, label: this.templateId && this.store ? 'Attachment(s)' : 'Upload Attachment(s)' },
+                { id: 'attachments', disabled: false, label: 'Attachment(s)' },
                 { id: 'roles', disabled: !canEditRoles, label: 'Roles' },
                 { id: 'settings', disabled: !canEditFields, label: 'Settings' },
                 { id: 'fields', disabled: !canEditFields, label: 'Fields' },
                 { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
-            ] })));
+            ] }), this.templateId && (index.h("div", { class: "info" }, index.h("verdocs-button-panel", { icon: HelpIcon }, index.h("div", { class: "template-details-panel" }, index.h("h6", null, "Template Details"), index.h("div", { class: "row" }, index.h("label", null, "ID:"), index.h("div", { class: "value" }, this.templateId), index.h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), index.h("div", { class: "row" }, index.h("label", null, "Name:"), index.h("div", { class: "value" }, (_l = (_k = this.templateStore) === null || _k === void 0 ? void 0 : _k.state) === null || _l === void 0 ? void 0 : _l.name)), index.h("div", { class: "row" }, index.h("label", null, "Visibility:"), index.h("div", { class: "value" }, ((_o = (_m = this.templateStore) === null || _m === void 0 ? void 0 : _m.state) === null || _o === void 0 ? void 0 : _o.is_public) ? 'Public' : ((_q = (_p = this.templateStore) === null || _p === void 0 ? void 0 : _p.state) === null || _q === void 0 ? void 0 : _q.is_personal) ? 'Private' : 'Shared')), index.h("div", { class: "row" }, index.h("label", null, "Created:"), index.h("div", { class: "value" }, ((_s = (_r = this.templateStore) === null || _r === void 0 ? void 0 : _r.state) === null || _s === void 0 ? void 0 : _s.counter) ? index$1.dateFns.format(new Date((_u = (_t = this.templateStore) === null || _t === void 0 ? void 0 : _t.state) === null || _u === void 0 ? void 0 : _u.created_at), 'P p') : '')), index.h("div", { class: "row" }, index.h("label", null, "Used:"), index.h("div", { class: "value" }, (_w = (_v = this.templateStore) === null || _v === void 0 ? void 0 : _v.state) === null || _w === void 0 ? void 0 :
+            _w.counter, " time(s)"))))))));
     }
     static get watchers() { return {
+        "templateId": ["onTemplateIdChanged"],
         "step": ["onStepChanged"]
     }; }
 };
@@ -1334,6 +1410,7 @@ const VerdocsTemplateRoles = class {
             phone: '',
             type: 'signer',
             delegator: false,
+            kba_method: null,
         })
             .then(async (r) => {
             var _a;

package/dist/cjs/verdocs-quick-functions_2.cjs.entry.js

@@ -24,7 +24,7 @@ const VerdocsQuickFunctions = class {
         this.createDocument.emit();
     }
     render() {
-        return (index.h("div", { key: 'eb5dc623120c7c528a9eb81f3dd4a2cdabdb7238', class: "container" }, index.h("p", { key: '09ab8ebada6eee21819e9152a76199bc86043a91', class: "title" }, "Quick Create"), index.h("button", { key: '9d1d124c64f0b6b7d4adc95a4c637907ad40bdfd', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'e7f2bf2070c45e3266be984c66115615f6578e27', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (index.h("div", { key: '8732c14ba59bc441cdc1b164832ef66b5c7842bb', class: "container" }, index.h("p", { key: 'f6909de1cfed09c6514bd0d6530a380ad62aff85', class: "title" }, "Quick Create"), index.h("button", { key: 'e95f2fc551ad5342a4ceef8995c11b5b56a0e12a', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: '6707f329d007c1027d159c5b928a124fb41b6f73', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
 };
 VerdocsQuickFunctions.style = VerdocsQuickFunctionsStyle0;
@@ -71,7 +71,7 @@ const VerdocsSearchBox = class {
         }
     }
     render() {
-        return (index.h("form", { key: 'd134a33663d3e85c469534b154b211f9ab8c4a51', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (index.h("span", { key: 'c9993bcc9112ac432b780216fbf29adfceded0e5', class: "type" }, this.type, "s ", index.h("button", { key: 'b9a8ac4bd299fafe0cccee64e4b50d4cbbcef863', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), index.h("input", { key: 'bcd7f9c630d41b0a1dc3eed8400c44c2a81ffc79', type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), index.h("button", { key: '546ceb6ef7b4b47dcc82e6409052838c980c2889', onClick: e => this.handleSearch(e), class: "search" }, index.h("span", { key: '585037b13dee3865890a4a8ffe919a45bcbc9fbf', innerHTML: SearchIcon }), "Search")));
+        return (index.h("form", { key: 'bd9ecc80b3c557f27328777c4518ca86e0012f57', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (index.h("span", { key: 'e6db2d986dd0bef76717be89f4bbf0f4713cd49b', class: "type" }, this.type, "s ", index.h("button", { key: '859a75c3372ab7518497cdda018857c9305a0d19', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), index.h("input", { key: 'd2b2716fb4d2e6c9fc7a9c6c2912319f04dcf275', type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), index.h("button", { key: '575626601e59c2020f7ec18d7fa7a667870fda2b', onClick: e => this.handleSearch(e), class: "search" }, index.h("span", { key: '035b6b114e0327df6cb6940265337ce8f8ddfc83', innerHTML: SearchIcon }), "Search")));
     }
 };
 VerdocsSearchBox.style = VerdocsSearchBoxStyle0;

package/dist/cjs/verdocs-radio-button_3.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cfdfab36.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-06db6e56.js');
-const TemplateFieldStore = require('./TemplateFieldStore-6a79aae7.js');
-const TemplateStore = require('./TemplateStore-5a46be5e.js');
+const TemplateRoleStore = require('./TemplateRoleStore-fb869e9a.js');
+const TemplateFieldStore = require('./TemplateFieldStore-2db70818.js');
+const TemplateStore = require('./TemplateStore-037833e5.js');
 const errors = require('./errors-017fb835.js');
 require('./index-3e4c5891.js');
 require('./index-a5472099.js');
@@ -23,7 +23,7 @@ const VerdocsRadioButton = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '9eee43dc3c08fdd5c3dbde1bb167dfa4d57fe4fa', class: { disabled: this.disabled } }, index.h("input", { key: '07a13e1ea2e2fc2aa78f2b830908fa6f96e4963d', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { key: '303f4ed1d9f45123a563c6e12e8eafa03e876ef6', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+        return (index.h(index.Host, { key: '75bec4ec1ed0b9f7683a6b3c43c987c5f8c01539', class: { disabled: this.disabled } }, index.h("input", { key: '7493bdafdaef15d48696a51c4d1e9a7c162bdf8f', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { key: 'c0d1aa6861cb76ec86f5995a047e9d923e9a951e', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
     }
 };
 VerdocsRadioButton.style = VerdocsRadioButtonStyle0;
@@ -146,31 +146,31 @@ const VerdocsTemplateRoleProperties = class {
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (index.h(index.Host, { key: 'f26ffe2f3c4cf162dc113e38a57347cf6c426074' }, index.h("div", { key: 'd9c5104918e6cf08b28d70b6278d7493a40d36e5', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: 'b1001937ae574b088c17d2f866296cb10ae8f237', class: "dialog" }, index.h("form", { key: 'd46822f635025195120735636d68a4c0424370f0', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: '6d115e047e1fa310397d52f7873b68301f84ba1f', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (index.h(index.Host, { key: 'c2728e2fb47306d99d3eebaaa38130322d37ad64' }, index.h("div", { key: 'a329fa189219f99c747e915ee2f0a41de978474f', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: 'a0325d8949c173d73ba2a48af5924d015e746266', class: "dialog" }, index.h("form", { key: '378e17dc270ae28779557793f6669143c86a41a3', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: '20f8de0856c8e5c847b7e1852edc437a8c6427fb', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
                 ? 'This role has fields assigned and can no longer be renamed.'
                 : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), index.h("div", { key: '8a775c7e42acd009e25859726f48e777203304a3', class: "row" }, index.h("div", { key: '284d78cd23689e9c8683cf1f8fe55252ae1070cc', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: 'f996e3e885cd40a3aeff9469d2051fd09dd43274', value: this.type, options: [
+            } }), index.h("div", { key: '35310c43c72be59031d74995d5e4e08fd74b34bd', class: "row" }, index.h("div", { key: '4b47e8595ad1119d4027049b56acd43443a4b09a', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: '97f18bfb8052d6f0690bf2d570a42a0a604556b9', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-help-icon", { key: 'a320b1084f1a2333638c0e8b17d82efeb0a7bf1a', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), index.h("verdocs-text-input", { key: 'e554caea134e5955f0577397b902c8e6083520bf', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
+            } }), index.h("verdocs-help-icon", { key: '3f4059c1a1232aa08449e4518ccd9473066430df', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), index.h("verdocs-text-input", { key: 'df9c1439da6894608dad4ef81dddf21e2591115f', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
                 this.full_name = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: '21aae473dc54ed8cb94adcc1e72fdedf3a3f91d9', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: 'af0ac9644670cb4b3e5607eb75e6c0aa9746ed76', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: 'd5ebf4575a092d3f70570d1a7c419aa90c75c64b', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: 'f7055746726c2d199beac4206847bc1534de5601', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }), index.h("div", { key: 'f7aca6f48663383ee649c7e3f11488c6a54f0420', class: "row" }, index.h("div", { key: 'f5304cffb00b6cf7edc92c9f2f9cb4013a8f16e8', class: "input-label" }, "May Delegate:"), index.h("div", { key: '78f6e51ccdfb7cccf4ad4d7c173eb29495ad93a9', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '319258417639cd160e0ad63de3feb413f8d18a9f', checked: this.delegator, onInput: (e) => {
+            } }), index.h("div", { key: '12903a2f12f8f750cecaf0332a69099f67b4d530', class: "row" }, index.h("div", { key: '9959973a48e154155cc6b5892ae81a5105d62d33', class: "input-label" }, "May Delegate:"), index.h("div", { key: '0dd8af27a2fd4cf6c8a641a39ea3332887b1f71a', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '8a145a05207fc1cae42d5c3e4596c2d673ecc097', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), index.h("verdocs-help-icon", { key: 'e8614cdde73aac4c52fef105562058a2e34773ee', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '66302c80e7ce3cfb80d71ca9eb798832bbee64cd', class: "buttons" }, index.h("button", { key: '4198669a9355ba0b5065944c4dd28648ba4fd7d2', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: 'f7eccd789c90c1e3e570b54d0a8a3b947a5c5cf1', style: { flex: '1' } }), index.h("verdocs-button", { key: '0ad00a425bd9fc3ef21405c73b0159fc5a8dd13d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '8b11ea5d3f0797775909cb8590aec5a4518637ce', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), index.h("verdocs-help-icon", { key: 'd725f8446967e2c145e0e5ecad8416ee7e368bc8', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: 'eae241c53cc8213d5c14bb213b41923620e17be3', class: "buttons" }, index.h("button", { key: '5eb5792ff0f79aab12bcfbb20ffdf58d431f4103', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: 'bca3f871c37e1a346d98620ee0fd1dd0dfce9917', style: { flex: '1' } }), index.h("verdocs-button", { key: 'b40fb1ff70cb3cce19b793f940fc0038d12490ea', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '51270815757b0fd6803d527ac3388f1e2af16b25', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
 };
 VerdocsTemplateRoleProperties.style = VerdocsTemplateRolePropertiesStyle0;
@@ -237,7 +237,7 @@ const VerdocsTemplateSender = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'f68de757047cf08e13ca4b5f33e28c0af48fc216' }, index.h("div", { key: '6d1d7f7fc65b8ec2112dc7c33750cfce5d4f3e8c', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '4d89b066209259145a82549e572b558fc11cf884', class: "dialog" }, index.h("div", { key: 'fe42cd60ee5ed150318152a21db7bd0bfd41bb6f', class: "options" }, index.h("div", { key: '5e6193483c37781365aabccef51a67ff56ff937e', class: "option" }, index.h("verdocs-radio-button", { key: 'ea3ece13bab53d052186194b9708c7a072335103', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '785b66f5cc26579d6caafc85924c5ad7e3966d40', class: "description" }, index.h("div", { key: 'd82d392c83f757ff7f23d5e78bfd68ab97eb0f52', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: '34f2139c6e1f4cf01bb497066fea7000837c3ee9', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '1b20cb65e1ed7bdf317e6af82b5b445f988e98c8', class: "option" }, index.h("verdocs-radio-button", { key: '236a72f8c58ab2a2ad52824c698b8e0367881c3c', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '5e23b141d9d9c126ac2c82ab30bcb279b73d4793', class: "description" }, index.h("div", { key: 'f9b6deeff27abb6ae722cc8b70aa662c400108b7', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: '03982e3624ba4e858fd478e8dc5c8ee0a1b98f3f', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'db8d9acd7b3a06a6f09a5fb03ca8403dc82db00c', class: "option" }, index.h("verdocs-radio-button", { key: 'a12f063f0ff6e06eb5aaff35b815621e5b06d8b3', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: 'acfba148b6c50fac0a3d72a6f46b3a5f144d3986', class: "description" }, index.h("div", { key: '3120e3ed05176dfc34ce482d359274755dcb55dc', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: '0e78f7bc767c863d53ed113c52584252f893ecc4', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: 'ac2f56ad77d0d4aeef9d311e7b44a5c9d19a74c7', class: "option" }, index.h("verdocs-radio-button", { key: '433e69e8fb00ee8676ec46657ad5c19df76ddd6c', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), index.h("div", { key: 'ff50c7fee92e6cce3e488b4a4df2274ada44b11a', class: "description" }, index.h("div", { key: 'de3fd4b8f985e7f348a3743fb7431d4f9ad66598', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: '257a87eb54dbfceb8edbeffca997fe787916ddc8', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), index.h("div", { key: 'f9223854c2616a85d057b7d7208e82ba85413556', class: "option" }, index.h("verdocs-radio-button", { key: 'c74d08475eb3601c21e75916366908c15c652ba8', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: '9af51dd805406c23c9fc081d284d661e16f69f0a', class: "description" }, index.h("div", { key: '16b852696b984473a5dbfc09345dffbc6f3e0a40', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: '104c0ec597a028b30dcc0d6e00a0bcac0433b0c9', text: "Only I can use this template." })))), index.h("div", { key: 'ce8b9f36df6c8beab9305dec9d3acc64f5369d07', class: "buttons" }, index.h("verdocs-button", { key: '722df3e64f41b5c8aee45d66eaa13b33711bba5c', label: "Close", onClick: () => this.handleClose() }))))));
+        return (index.h(index.Host, { key: 'f8d8cca0bfceaf4770487a2013d8b4719236ddf4' }, index.h("div", { key: '2f3adaefa9ee3dcbac271ee02d76fa46bbe58e10', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '659f51292068e189d9c995db643fae5c2acb15b3', class: "dialog" }, index.h("div", { key: '3015a1be71fe71983fce44357433b5e2186c4946', class: "options" }, index.h("div", { key: 'ce818b1d25630a8f487fbaff0c5db38119a6f824', class: "option" }, index.h("verdocs-radio-button", { key: '8a4d98f6553248a88a024c1d024d3a4145a202ed', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: 'e2924ad4589dfcdca2ad342852f517f919e99914', class: "description" }, index.h("div", { key: '6bf123474dc857917dd84c971bb3e634eecc8868', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: '53129fa609dcb99cf6f1ddc76867c09a90359973', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '4b566084de0d35ade13b0d82354ddfab42fb4be2', class: "option" }, index.h("verdocs-radio-button", { key: '3704512d6d38faf3f275fb039a1c97cf2464b0e2', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '8dd4ffbcc1727fb28bec4e404dcc1a4a7cec9431', class: "description" }, index.h("div", { key: '2c4093c5ecff6192c6ec94ffa0a32ae516a4d13d', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: '73b99113cd11ac40ef3784fe23b523e54f2a8d5a', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: '528f64ff348386c14b0cea7d4983bccd664a0645', class: "option" }, index.h("verdocs-radio-button", { key: 'f1538d9c86ad7f2dc337a42f53f49f86faa3a469', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: 'ddd5129726d3b2a0786341c2df2f8012e783d643', class: "description" }, index.h("div", { key: '449c1a5eb124b7006f319f96ff617d6480cab3a9', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: '8d01e0fba4bfb8b5d12390b5c138b19d6362a055', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: '76f686a2976749ffa02be5b95d9d61ded315714c', class: "option" }, index.h("verdocs-radio-button", { key: '00c5b5d78a7c380665abc3157403f597cbcaabc9', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), index.h("div", { key: '7eaf1cce0528f17359b19320ba0e10311ec34821', class: "description" }, index.h("div", { key: '4bd0b1b35504afa1c67566ac8cd589041958de41', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: 'cfe825b414ef5a0c4ddd33e3de621629cc92149e', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), index.h("div", { key: 'f86771d023449f505a45f07b73e505a7c481bdf0', class: "option" }, index.h("verdocs-radio-button", { key: '039f5bb7b444f942fb609ad1ef5fda0d5f160083', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: 'b7ecd4a8e68ac17e9ba116a6f8f2dcf84ff92c56', class: "description" }, index.h("div", { key: 'ca006222ed947daf96a22425fe7dbc1dd809aef5', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: 'fec5c4aeb7285eaa3a22d238208e2072b17a14b0', text: "Only I can use this template." })))), index.h("div", { key: '1344c8e35ee75f17f5a035ba93e770958b1fcba0', class: "buttons" }, index.h("verdocs-button", { key: '6d2e2796fd3464440662e8dd5dba2ae273aab02e', label: "Close", onClick: () => this.handleClose() }))))));
     }
 };
 VerdocsTemplateSender.style = VerdocsTemplateSenderStyle0;

package/dist/cjs/verdocs-search-tabs.cjs.entry.js

@@ -13,7 +13,7 @@ const VerdocsSearchTabs = class {
         this.selected = 'all';
     }
     render() {
-        return index.h("div", { key: 'b4ac2045933155b547df5cde6e4dc72a0af06050' }, "\u00A0");
+        return index.h("div", { key: '16e93641cee94ed98e3c8de50222fb41f5dbfb90' }, "\u00A0");
     }
 };
 VerdocsSearchTabs.style = VerdocsSearchTabsStyle0;

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

@@ -14,7 +14,7 @@ const VerdocsSearch = class {
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
     }
     render() {
-        return (index.h("div", { key: '4ebcbcca303725a1114792af29474ec365759850', class: "container" }, index.h("verdocs-search-box", { key: 'b1998f81d2e95d31f71bc1a59b0eb93b2be2347c', endpoint: this.endpoint }), index.h("div", { key: 'a604d97bd63254a5988d110e5e00c91d9bf98466', class: "boxes" }, index.h("verdocs-search-activity", { key: '8ff0e974bdb7d34b78c140b74c69623f5abf3519', type: "recent", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '308c66ef4be9f29d8efbe807fd02f1eaa73b3c59', type: "saved", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: 'f4c067b93ccfaf2ecfd6d40ecdfb194bc7d21c3e', type: "starred", endpoint: this.endpoint }), index.h("verdocs-quick-functions", { key: '589d9f73adad835d739abf4375bd25fdcbfeeb21', endpoint: this.endpoint }))));
+        return (index.h("div", { key: '200d955b8750bfb853a491a39d2614f65c3dae2e', class: "container" }, index.h("verdocs-search-box", { key: '55db0748ab0102d71235903b1c668587e45ad527', endpoint: this.endpoint }), index.h("div", { key: '88ca9f594578f71b8abfb1fcbd1e31d455bcfb46', class: "boxes" }, index.h("verdocs-search-activity", { key: '7d95bd072f011865207fc0365e18d82b7875fd6a', type: "recent", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: 'f2f364ddb7347b7479aa5fd54d2519f7f96628ac', type: "saved", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: 'd504730b955a6c14cdf5d77eba96d3bb35eaf876', type: "starred", endpoint: this.endpoint }), index.h("verdocs-quick-functions", { key: 'dd543a416a6aab58e7566e320a20ea73f0313bce', endpoint: this.endpoint }))));
     }
 };
 VerdocsSearch.style = VerdocsSearchStyle0;