@verdocs/web-sdk 4.0.9 → 4.1.2

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: 'ecdc1830949a5a35b092167b201c6feb8284e221', 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: '2d8ebba91a5cff228135465c0956848fcc8873b5', class: "recipients" }, index.h("div", { key: '1c72951bfc1e11a1d95c04e005b3fcd8108c39f5', class: "left-line" }), index.h("div", { key: '82834a006584cde2b8020f7f233dfff685e647f2', class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { key: '930ca1cc5b3f93f11f0a38703396538ee90dba5b', 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: '241118ea059aadb8a6030b5ee5bd4383e88af212', class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { key: '05ba689ac40aaf1543b921b490f8fe4550bad4df', class: "complete" }, "Signing Complete"))), index.h("div", { key: '39c73b0a3310d85dfbd29f2d2fda347d37091e90', class: "buttons" }, index.h("verdocs-button", { key: 'c3d1196a34f1cd4ab654aa07b707372054f26202', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { key: 'd2e16d7a4d97c8888df3e7257296dee6f8db3234', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", { key: 'd8c0a234261d1b77d6343dd7e426c28475dceadf' }))));
+        })))), 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: 'e7d2ca753e83c18c1ca85aedcbe277db1488ab63', class: "container" }, index.h("p", { key: 'b5e1a9ff78f3fb76eacb96c8168f094f41f8d877', class: "title" }, "Quick Create"), index.h("button", { key: 'ac967b777b02f6d6155798ddd015de9eeafadd6f', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'e36d5ac7e47e8e0d943b3722820fc994e0cad625', 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: '08503221049dbcdb5ad6d8804576bd302437a784', class: { disabled: this.disabled } }, index.h("input", { key: '649115f2c5d916fbec807ab0566ec3352abe6afd', 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: '597495b414c518d808f241cea9c3c66b0fabdf63', 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: '710e7f0ab8b1ecad6fa29a2872cfa8cd724deabd' }, index.h("div", { key: 'cce8cee42d046c80504e4ae6905cd290334612e6', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: '9d43dd9253210f0682f9cf59835702e3ccde5b4f', class: "dialog" }, index.h("form", { key: 'b532cbc42c82301bbb528b8a3c5112ccad7ae0e4', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: '084af944f9d6c9f3e6fbc562caae052523c755f0', 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: '2dabe3a2431972036407ec97432809b58ca8f250', class: "row" }, index.h("div", { key: 'fe50813b64830cd68e0c24621aaf72b926aac517', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: '24ba6e3ae5f4fe7c187e7a11e12baaba4caaa094', 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: '271c9d72f5b7b7ecb683cd4b0ea0dbfec26d385b', 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: 'cccad696894aeb79f93803c8cc50fa9552a29860', 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: '5a374e483b87942567a63c39fe9fdef13d460c59', 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: '8e9bf75190115c2b856a5a109a82e4fade3d99a7', 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: '9fd9cb1a91e78154bf1df75cec3b357a464955c5', class: "row" }, index.h("div", { key: '480168f43800400d9572f6018a0d1d60cc56a588', class: "input-label" }, "May Delegate:"), index.h("div", { key: 'e65486b714f0e8917572494c57f1ea316ef73038', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '3c76bfc3d233e09be06e7bf252fd6997b30fc38b', 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: '99076f70ccdf5a961a7078093e2f3f2ca73b56fb', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '86f63ddbd965d2709269cfeb1f105c69424d3a5c', class: "buttons" }, index.h("button", { key: 'ddde079896635a69dcd10bb82008c1986ed52383', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: 'f4d23743dce9acb5f16c519b569764bb17253944', style: { flex: '1' } }), index.h("verdocs-button", { key: 'fe271dda2a5e9d6a8f0c4ba4199af5ea8f81077d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '38b2986e9e3b784215fcafdf486631f7ebf1361b', 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: 'b8ca2ff8bdae1256801c67f7be188f6b3e4c5c33' }, index.h("div", { key: '565b0287142ce32fd1d11b7e344b35b8151b9e93', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '2ece454c0aba99deb418e1ac2035e237a2296a6c', class: "dialog" }, index.h("div", { key: 'cbac2ba10ad6cd63e714019e4311627e7972ae52', class: "options" }, index.h("div", { key: '1ab94e1e5f30089cabb6abf23ee1294663cfa878', class: "option" }, index.h("verdocs-radio-button", { key: 'ae1689ae1a34ff1f9e1ae99917e659c27e2b6731', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '78741f9340debb402dfcca11bf33a19660f7c541', class: "description" }, index.h("div", { key: 'ddee4eaf150cf0989849a2799896a2fd7c401411', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: 'f51b1ba236eb08ebaae5a6171b9d3f8815dfb7c5', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '37095164cf4cfa5030b1d2da04b6add9a572c914', class: "option" }, index.h("verdocs-radio-button", { key: '8e8c8681e992cf00caa314c493afcd5bdb7a0fbe', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '5a94fd99ef10648c5c1f68a91f80c31d1e8f5078', class: "description" }, index.h("div", { key: '9a64f779ebe53499683f5af9ec7bc0218fe66499', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: '64edd79a609173c7399dbc2cce06269f0f7adc15', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'b287986b5282e92153504a328a9273b0fcb81902', class: "option" }, index.h("verdocs-radio-button", { key: '909e26ec66bf5d27014f2ef41c533662f5e2033e', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: '3a42018b36b144feefa5a662e23f852dcd230889', class: "description" }, index.h("div", { key: '071573ff99a6019b9d9ba164c7d6d3123b209510', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: 'ecb0c3cd3f39c92954dd20c94a12c38ce35aa8cb', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: '2515c8c359379c70b7be04b2c50a139b760d777c', class: "option" }, index.h("verdocs-radio-button", { key: 'd5edd7267eb494c73cee3168de5d841c969a22aa', 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: '31cbe88f2cc23b74534bb2d51f280a3112827722', class: "description" }, index.h("div", { key: '11160a0c962837e4c4342f46e111fe8ada8ca4d3', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: 'd23472c9393598908dab4ae2a4cba983bafc89e1', 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: '128da3cd0259b4d72bd6bca910b932898d9f5f38', class: "option" }, index.h("verdocs-radio-button", { key: '0a65d2f15e37330526bbf384868b4e65a3b7ce5b', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: '6182e6fd82ea55b8e59e175e6413f324657405b5', class: "description" }, index.h("div", { key: '919c6b40c4f171b491b8001c30acca73c6308a86', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: '9aaaa7ad26ec56b5667c1c1ea31ce19f2742c81e', text: "Only I can use this template." })))), index.h("div", { key: '6b7bdc820887b652552d4ad9f08ac5c3f83fc71c', class: "buttons" }, index.h("verdocs-button", { key: 'bcaf3bc67e9de9c62cda7fb6cc1c5ecbfd168d9e', 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: 'b5bf8a69699b2d55bd2c744dc2c96ec09e185351' }, "\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: '1bdc73f6b69fdaf197b4d228c36ac28a4de147c8', class: "container" }, index.h("verdocs-search-box", { key: 'd5305d39714c09a83dca8d87282fe3bec40491f0', endpoint: this.endpoint }), index.h("div", { key: '6f333add2936ca54994f0ec4e33023fa2b196b07', class: "boxes" }, index.h("verdocs-search-activity", { key: '2c49e617f5bbb0337a3e48a18b2687478f512847', type: "recent", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '3ee0c69f75e839459c63f33bf24302e3cc277adf', type: "saved", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '1f78fdc2d68b97a24a37ba544bd2d49d49d43b32', type: "starred", endpoint: this.endpoint }), index.h("verdocs-quick-functions", { key: '789f6170d2f7e0b17da045d4c2350c69a7e9588b', 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;