@verdocs/web-sdk 4.0.9 → 4.1.2

package/dist/components/verdocs-template-build-tabs2.js

@@ -1,13 +1,18 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { g as getTemplateStore } from './TemplateStore.js';
+import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$3 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$2 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$1 } from './verdocs-tabs2.js';
+import { d as dateFns } from './index2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateBuildTabs extends HTMLElement {
     constructor() {
@@ -18,14 +23,18 @@ const VerdocsTemplateBuildTabs = /*@__PURE__*/ proxyCustomElement(class VerdocsT
         this.endpoint = 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) {
@@ -33,19 +42,26 @@ const VerdocsTemplateBuildTabs = /*@__PURE__*/ proxyCustomElement(class VerdocsT
                 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 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 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 SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
-    async loadTemplate() {
-        if (this.templateId) {
-            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+    async loadTemplate(templateId) {
+        if (templateId) {
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
         }
     }
     setStep(e) {
@@ -56,23 +72,30 @@ const VerdocsTemplateBuildTabs = /*@__PURE__*/ proxyCustomElement(class VerdocsT
         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(() => {
+            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 (h(Host, null, 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) {
@@ -84,16 +107,17 @@ const VerdocsTemplateBuildTabs = /*@__PURE__*/ proxyCustomElement(class VerdocsT
         if (!canEditRoles && selectedStepIndex >= 1) {
             selectedStepIndex = 0;
         }
-        console.log({ selectedStepIndex, canPreview, canEditFields, canEditRoles });
         return (h(Host, null, 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 && (h("div", { class: "info" }, h("verdocs-button-panel", { icon: HelpIcon }, h("div", { class: "template-details-panel" }, h("h6", null, "Template Details"), h("div", { class: "row" }, h("label", null, "ID:"), h("div", { class: "value" }, this.templateId), h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), h("div", { class: "row" }, h("label", null, "Name:"), h("div", { class: "value" }, (_l = (_k = this.templateStore) === null || _k === void 0 ? void 0 : _k.state) === null || _l === void 0 ? void 0 : _l.name)), h("div", { class: "row" }, h("label", null, "Visibility:"), 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')), h("div", { class: "row" }, h("label", null, "Created:"), h("div", { class: "value" }, ((_s = (_r = this.templateStore) === null || _r === void 0 ? void 0 : _r.state) === null || _s === void 0 ? void 0 : _s.counter) ? 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') : '')), h("div", { class: "row" }, h("label", null, "Used:"), 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"]
     }; }
     static get style() { return VerdocsTemplateBuildTabsStyle0; }
@@ -101,21 +125,27 @@ const VerdocsTemplateBuildTabs = /*@__PURE__*/ proxyCustomElement(class VerdocsT
         "endpoint": [16],
         "templateId": [1537, "template-id"],
         "step": [1537],
-        "store": [32]
+        "templateStore": [32]
     }, undefined, {
+        "templateId": ["onTemplateIdChanged"],
         "step": ["onStepChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-template-build-tabs", "verdocs-component-error", "verdocs-tabs"];
+    const components = ["verdocs-template-build-tabs", "verdocs-button-panel", "verdocs-component-error", "verdocs-tabs"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-template-build-tabs":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, VerdocsTemplateBuildTabs);
             }
             break;
+        case "verdocs-button-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "verdocs-component-error":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/components/verdocs-template-card.js

@@ -15,7 +15,7 @@ const VerdocsTemplateCard$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '3ef4b7a60f214bc1b4301f82c4d6c0c43cb31c1c' }, h("span", { key: '5da8ee7013a901cfd37bde9319f2efa68d08d6f6', class: "name" }, this.template.name), h("span", { key: '0e27a427f7575435bc09e98408cb8ebfd20f2221', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: '3471951b3a1aae2b6e753f7eaf14bb44b5ec9270' }), h("div", { key: 'eb4f5304de241f9e7ff0a558591d1a3caca8b29f', class: "controls" }, h("div", { key: '3d913d458116470de9abc5f88234bb4ed57e561e', class: "control" }, h("span", { key: '5dbfeb4e3c103b49ce9c6d54b5249af8b5b16086', class: "icon", innerHTML: StarIcon }), h("span", { key: 'ca84ade8a0d54ab96bdee35c63b03e34ab893257', class: "value" }, this.template.star_counter)), h("div", { key: '01385ff24ea0de2948b3ede9fbf1058f92ab5c7f', class: "control secondary" }, h("span", { key: '907331cb5970739199c2b319b18f17f9ce98bb93', class: "icon", innerHTML: PagesIcon }), h("span", { key: '9120a25679b0f9bf7a89a77b76f9c253d66df2c9', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: '935459e3076e01cbbd2af34b2515e10722672799', class: "control secondary" }, h("span", { key: '1db1cc5176095a2d5646112a1d8aafc66b6e8772', class: "icon", innerHTML: EmailIcon }), h("span", { key: 'a66c84bfb81ac9ca2608a2dd35c28a707d3e7956', class: "value" }, this.template.counter)), h("span", { key: '0f9a72ba9ccc5c8c68321df12d0fdb489a25e4ac', class: "additional-controls", innerHTML: ActionsIcon }))));
+        return (h(Host, { key: '92db1527b29db1accce1236ad170c1d071bd9af9' }, h("span", { key: '6df84f4e3f47f2a3bde4de1aaeb55cfdaaf24cec', class: "name" }, this.template.name), h("span", { key: '6be1cd61a1496fa579f25ff06fcd5295149aada1', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: '8f95b065445cf18ec71b2976c5c75d7335857f1a' }), h("div", { key: 'cce4e78b58f924de6b68bcf947af20dbed74ae15', class: "controls" }, h("div", { key: '124cf87ac1ab5f25d505004ebba55c0ad00d3b34', class: "control" }, h("span", { key: 'b39885d89f97c7f29077f5a0e8e943c2fd74e8a0', class: "icon", innerHTML: StarIcon }), h("span", { key: '7fa8e32525ed221d9907e658ca6f982fed16dba6', class: "value" }, this.template.star_counter)), h("div", { key: '37fb74c5e9302e8c310e2052b725183bac587c3d', class: "control secondary" }, h("span", { key: 'bef0ebc42c5f9062bf67d86a097dd0d4a8e03e11', class: "icon", innerHTML: PagesIcon }), h("span", { key: '3763e7ec4ac4e73ce712c460101223d6f8663b2a', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: 'e4f9d35db361036a46297e82ecf1528058e214bc', class: "control secondary" }, h("span", { key: '985da1d76dfeecb4e57e440fbf788c18453696a1', class: "icon", innerHTML: EmailIcon }), h("span", { key: 'f098866929e19bf47e30a660aba05a3e508561ed', class: "value" }, this.template.counter)), h("span", { key: 'c742e5c6e1087a9b0f1a8b037476759274838c42', class: "additional-controls", innerHTML: ActionsIcon }))));
     }
     static get style() { return VerdocsTemplateCardStyle0; }
 }, [0, "verdocs-template-card", {

package/dist/components/verdocs-template-document-page2.js

@@ -115,7 +115,7 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: '3555442b7b8cc1dcb799184fa09a8cb22ca698b4', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+        return (h(Host, { key: '6fabe54a0840385228e13a0e61f7748d41fbcf17', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
             this.fieldStore
                 .get('fields')
                 .filter(field => field && field.page === this.pageNumber)

package/dist/components/verdocs-template-role-properties2.js

@@ -129,31 +129,31 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (h(Host, { key: '710e7f0ab8b1ecad6fa29a2872cfa8cd724deabd' }, h("div", { key: 'cce8cee42d046c80504e4ae6905cd290334612e6', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: '9d43dd9253210f0682f9cf59835702e3ccde5b4f', class: "dialog" }, h("form", { key: 'b532cbc42c82301bbb528b8a3c5112ccad7ae0e4', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: '084af944f9d6c9f3e6fbc562caae052523c755f0', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (h(Host, { key: 'c2728e2fb47306d99d3eebaaa38130322d37ad64' }, h("div", { key: 'a329fa189219f99c747e915ee2f0a41de978474f', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: 'a0325d8949c173d73ba2a48af5924d015e746266', class: "dialog" }, h("form", { key: '378e17dc270ae28779557793f6669143c86a41a3', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, 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;
-            } }), h("div", { key: '2dabe3a2431972036407ec97432809b58ca8f250', class: "row" }, h("div", { key: 'fe50813b64830cd68e0c24621aaf72b926aac517', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '24ba6e3ae5f4fe7c187e7a11e12baaba4caaa094', value: this.type, options: [
+            } }), h("div", { key: '35310c43c72be59031d74995d5e4e08fd74b34bd', class: "row" }, h("div", { key: '4b47e8595ad1119d4027049b56acd43443a4b09a', class: "input-label" }, "Type:"), 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;
-            } }), 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." })), 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) => {
+            } }), 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." })), 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;
-            } }), 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) => {
+            } }), 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;
-            } }), 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) => {
+            } }), 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;
-            } }), h("div", { key: '9fd9cb1a91e78154bf1df75cec3b357a464955c5', class: "row" }, h("div", { key: '480168f43800400d9572f6018a0d1d60cc56a588', class: "input-label" }, "May Delegate:"), h("div", { key: 'e65486b714f0e8917572494c57f1ea316ef73038', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '3c76bfc3d233e09be06e7bf252fd6997b30fc38b', checked: this.delegator, onInput: (e) => {
+            } }), h("div", { key: '12903a2f12f8f750cecaf0332a69099f67b4d530', class: "row" }, h("div", { key: '9959973a48e154155cc6b5892ae81a5105d62d33', class: "input-label" }, "May Delegate:"), h("div", { key: '0dd8af27a2fd4cf6c8a641a39ea3332887b1f71a', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '8a145a05207fc1cae42d5c3e4596c2d673ecc097', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), h("verdocs-help-icon", { key: '99076f70ccdf5a961a7078093e2f3f2ca73b56fb', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '86f63ddbd965d2709269cfeb1f105c69424d3a5c', class: "buttons" }, h("button", { key: 'ddde079896635a69dcd10bb82008c1986ed52383', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'f4d23743dce9acb5f16c519b569764bb17253944', style: { flex: '1' } }), h("verdocs-button", { key: 'fe271dda2a5e9d6a8f0c4ba4199af5ea8f81077d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '38b2986e9e3b784215fcafdf486631f7ebf1361b', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), h("verdocs-help-icon", { key: 'd725f8446967e2c145e0e5ecad8416ee7e368bc8', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: 'eae241c53cc8213d5c14bb213b41923620e17be3', class: "buttons" }, h("button", { key: '5eb5792ff0f79aab12bcfbb20ffdf58d431f4103', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'bca3f871c37e1a346d98620ee0fd1dd0dfce9917', style: { flex: '1' } }), h("verdocs-button", { key: 'b40fb1ff70cb3cce19b793f940fc0038d12490ea', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '51270815757b0fd6803d527ac3388f1e2af16b25', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
     static get style() { return VerdocsTemplateRolePropertiesStyle0; }
 }, [0, "verdocs-template-role-properties", {

package/dist/components/verdocs-template-roles2.js

@@ -220,6 +220,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class VerdocsTempl
             phone: '',
             type: 'signer',
             delegator: false,
+            kba_method: null,
         })
             .then(async (r) => {
             var _a;

package/dist/components/verdocs-template-sender2.js

@@ -69,7 +69,7 @@ const VerdocsTemplateSender = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
         });
     }
     render() {
-        return (h(Host, { key: 'b8ca2ff8bdae1256801c67f7be188f6b3e4c5c33' }, h("div", { key: '565b0287142ce32fd1d11b7e344b35b8151b9e93', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '2ece454c0aba99deb418e1ac2035e237a2296a6c', class: "dialog" }, h("div", { key: 'cbac2ba10ad6cd63e714019e4311627e7972ae52', class: "options" }, h("div", { key: '1ab94e1e5f30089cabb6abf23ee1294663cfa878', class: "option" }, h("verdocs-radio-button", { key: 'ae1689ae1a34ff1f9e1ae99917e659c27e2b6731', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '78741f9340debb402dfcca11bf33a19660f7c541', class: "description" }, h("div", { key: 'ddee4eaf150cf0989849a2799896a2fd7c401411', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: 'f51b1ba236eb08ebaae5a6171b9d3f8815dfb7c5', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: '37095164cf4cfa5030b1d2da04b6add9a572c914', class: "option" }, 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') }), h("div", { key: '5a94fd99ef10648c5c1f68a91f80c31d1e8f5078', class: "description" }, h("div", { key: '9a64f779ebe53499683f5af9ec7bc0218fe66499', class: "name" }, "Anyone on the Web as me"), 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'.)" }))), h("div", { key: 'b287986b5282e92153504a328a9273b0fcb81902', class: "option" }, h("verdocs-radio-button", { key: '909e26ec66bf5d27014f2ef41c533662f5e2033e', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: '3a42018b36b144feefa5a662e23f852dcd230889', class: "description" }, h("div", { key: '071573ff99a6019b9d9ba164c7d6d3123b209510', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: 'ecb0c3cd3f39c92954dd20c94a12c38ce35aa8cb', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: '2515c8c359379c70b7be04b2c50a139b760d777c', class: "option" }, 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') }), h("div", { key: '31cbe88f2cc23b74534bb2d51f280a3112827722', class: "description" }, h("div", { key: '11160a0c962837e4c4342f46e111fe8ada8ca4d3', class: "name" }, "Anyone in my organization as me"), 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'.)" }))), h("div", { key: '128da3cd0259b4d72bd6bca910b932898d9f5f38', class: "option" }, h("verdocs-radio-button", { key: '0a65d2f15e37330526bbf384868b4e65a3b7ce5b', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: '6182e6fd82ea55b8e59e175e6413f324657405b5', class: "description" }, h("div", { key: '919c6b40c4f171b491b8001c30acca73c6308a86', class: "name" }, "Me"), h("verdocs-help-icon", { key: '9aaaa7ad26ec56b5667c1c1ea31ce19f2742c81e', text: "Only I can use this template." })))), h("div", { key: '6b7bdc820887b652552d4ad9f08ac5c3f83fc71c', class: "buttons" }, h("verdocs-button", { key: 'bcaf3bc67e9de9c62cda7fb6cc1c5ecbfd168d9e', label: "Close", onClick: () => this.handleClose() }))))));
+        return (h(Host, { key: 'f8d8cca0bfceaf4770487a2013d8b4719236ddf4' }, h("div", { key: '2f3adaefa9ee3dcbac271ee02d76fa46bbe58e10', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '659f51292068e189d9c995db643fae5c2acb15b3', class: "dialog" }, h("div", { key: '3015a1be71fe71983fce44357433b5e2186c4946', class: "options" }, h("div", { key: 'ce818b1d25630a8f487fbaff0c5db38119a6f824', class: "option" }, h("verdocs-radio-button", { key: '8a4d98f6553248a88a024c1d024d3a4145a202ed', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: 'e2924ad4589dfcdca2ad342852f517f919e99914', class: "description" }, h("div", { key: '6bf123474dc857917dd84c971bb3e634eecc8868', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '53129fa609dcb99cf6f1ddc76867c09a90359973', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: '4b566084de0d35ade13b0d82354ddfab42fb4be2', class: "option" }, 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') }), h("div", { key: '8dd4ffbcc1727fb28bec4e404dcc1a4a7cec9431', class: "description" }, h("div", { key: '2c4093c5ecff6192c6ec94ffa0a32ae516a4d13d', class: "name" }, "Anyone on the Web as me"), 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'.)" }))), h("div", { key: '528f64ff348386c14b0cea7d4983bccd664a0645', class: "option" }, h("verdocs-radio-button", { key: 'f1538d9c86ad7f2dc337a42f53f49f86faa3a469', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: 'ddd5129726d3b2a0786341c2df2f8012e783d643', class: "description" }, h("div", { key: '449c1a5eb124b7006f319f96ff617d6480cab3a9', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: '8d01e0fba4bfb8b5d12390b5c138b19d6362a055', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: '76f686a2976749ffa02be5b95d9d61ded315714c', class: "option" }, 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') }), h("div", { key: '7eaf1cce0528f17359b19320ba0e10311ec34821', class: "description" }, h("div", { key: '4bd0b1b35504afa1c67566ac8cd589041958de41', class: "name" }, "Anyone in my organization as me"), 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'.)" }))), h("div", { key: 'f86771d023449f505a45f07b73e505a7c481bdf0', class: "option" }, h("verdocs-radio-button", { key: '039f5bb7b444f942fb609ad1ef5fda0d5f160083', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: 'b7ecd4a8e68ac17e9ba116a6f8f2dcf84ff92c56', class: "description" }, h("div", { key: 'ca006222ed947daf96a22425fe7dbc1dd809aef5', class: "name" }, "Me"), h("verdocs-help-icon", { key: 'fec5c4aeb7285eaa3a22d238208e2072b17a14b0', text: "Only I can use this template." })))), h("div", { key: '1344c8e35ee75f17f5a035ba93e770958b1fcba0', class: "buttons" }, h("verdocs-button", { key: '6d2e2796fd3464440662e8dd5dba2ae273aab02e', label: "Close", onClick: () => this.handleClose() }))))));
     }
     static get style() { return VerdocsTemplateSenderStyle0; }
 }, [0, "verdocs-template-sender", {

package/dist/components/verdocs-template-star2.js

@@ -43,7 +43,7 @@ const VerdocsTemplateStar = /*@__PURE__*/ proxyCustomElement(class VerdocsTempla
         });
     }
     render() {
-        return (h(Host, { key: 'a3b6ca54b4549954355f9061b871489243432da7' }, h("div", { key: 'abcfec7a6fb4d928b3bc7080cbe49eb299cb56f9', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: 'a36087cb85065e3cf888ec8c8ef6fa88f4b3a2e9', class: "count" }, this.template.star_counter || '--')));
+        return (h(Host, { key: '96d245ead9fb7891ab0f497b37b306b379a20abc' }, h("div", { key: '67ceace21c9957fbb27a05a527ef1b7847ac33a9', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '3a76f28df10bb79ffb87ca8a046a6ec4e04dc49b', class: "count" }, this.template.star_counter || '--')));
     }
     static get style() { return VerdocsTemplateStarStyle0; }
 }, [0, "verdocs-template-star", {

package/dist/components/verdocs-template-tags.js

@@ -11,7 +11,7 @@ const VerdocsTemplateTags$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b98c9a6fdcf66d4a7f779a7022f6b16cb7eef987' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
+        return (h(Host, { key: 'e754a66c64713a7b01c072b1becd919d9768ac66' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
     }
     static get style() { return VerdocsTemplateTagsStyle0; }
 }, [0, "verdocs-template-tags", {

package/dist/components/verdocs-templates-list.js

@@ -165,24 +165,24 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTem
         // In addition to the server query we also filter locally. This provides a faster UI update
         // while the onBlur re-queries the server for any new records that now qualify by the filter.
         const locallyFilteredTemplates = !this.localNameFilter ? this.templates : this.templates.filter(t => t.name.toLowerCase().includes(this.localNameFilter.toLowerCase()));
-        return (h(Host, { key: 'bebf191a117bcaa2fdf9c04f0ad11b1bb51bfe0a' }, h("div", { key: '4f965488f88b32ba4372135a8c69e1c54334681d', class: "header" }, h("div", { key: '81d9da459a3694104a59c99c4fc12f1b5de65f12', class: "filter" }, h("verdocs-text-input", { key: '1f48c9fcea48ca89bd3129b5c99b284274d0368c', id: "verdocs-filter-name", value: this.name, clearable: true, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => (this.localNameFilter = e.target.value.trim()), onFocusout: (e) => {
+        return (h(Host, { key: '427c88bd9fe07c13b042fdfdf09506757aec8450' }, h("div", { key: '7da207667ddf2726b1b62243cec5fc903adda2f9', class: "header" }, h("div", { key: 'af1a65cd8003875dd2aa6007db20e9af5bea94c8', class: "filter" }, h("verdocs-text-input", { key: '3250ac9712dedb307f1c932295de9ccd9194e7dc', id: "verdocs-filter-name", value: this.name, clearable: true, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => (this.localNameFilter = e.target.value.trim()), onFocusout: (e) => {
                 var _a;
                 this.name = e.target.value.trim();
                 this.localNameFilter = e.target.value.trim();
                 (_a = this.changeName) === null || _a === void 0 ? void 0 : _a.emit(this.name);
-            } })), h("verdocs-quick-filter", { key: '000233a7fc8793d9ace12fc11dbda636fd71028e', label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
+            } })), h("verdocs-quick-filter", { key: '68c85c2c151344ec1d6501e2dce7f73aa8ff1604', label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
                 var _a;
                 this.sharing = e.detail.value;
                 (_a = this.changeSharing) === null || _a === void 0 ? void 0 : _a.emit(this.sharing);
-            } }), h("verdocs-quick-filter", { key: 'e0d6f6ff8d7d6add7352859c9ab3ed38082645c9', label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
+            } }), h("verdocs-quick-filter", { key: '3af03c6d1debc02567190bb23c99ff742b118851', label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
                 var _a;
                 this.starred = e.detail.value;
                 (_a = this.changeStarred) === null || _a === void 0 ? void 0 : _a.emit(this.starred);
-            } }), h("verdocs-quick-filter", { key: 'bc4125163612f3e9e06867052f5e3f644a616dee', label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
+            } }), h("verdocs-quick-filter", { key: 'e2314edc3c1c99b6ffb016e87a51118a04c15f23', label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
                 var _a;
                 this.sort = e.detail.value;
                 (_a = this.changeSort) === null || _a === void 0 ? void 0 : _a.emit(this.sort);
-            } }), this.loading && h("verdocs-spinner", { key: '4d13c53ac70efcfa24e2e3e1c360cc44717771f1', mode: "dark", size: 24 }), h("div", { key: 'f921d5d44e2bda13b52e0d7095225f357f8fa9d5', style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
+            } }), this.loading && h("verdocs-spinner", { key: '92047db505aab0850e4c2d369ec8a7a16fd08dc4', mode: "dark", size: 24 }), h("div", { key: '7fd1eaeee3e8e567b0036c3f45923f3c422b34a8', style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
             const dateToShow = this.sort === 'created_at' ? 'created_at' : this.sort === 'updated_at' ? 'updated_at' : 'last_used_at';
             const date = template[dateToShow];
             const MENU_OPTIONS = [];
@@ -229,9 +229,9 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTem
                     var _a;
                     (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template });
                 } }, h("div", { class: "inner" }, h("verdocs-template-star", { template: template, endpoint: this.endpoint }), h("div", { class: "spacer icon-spacer" }), h("div", { class: "name" }, template.name), h("div", { class: "spacer usage-spacer" }), h("div", { class: "usage" }, h("span", { innerHTML: EnvelopeIcon, title: "Usage Counter" }), template.counter || '--'), h("div", { class: "spacer last-used-spacer" }), h("div", { class: "last-used" }, dateToShow === 'created_at' && h("span", { innerHTML: CreatedIcon, title: "Created" }), dateToShow === 'updated_at' && h("span", { innerHTML: UpdatedIcon, title: "Last Updated" }), dateToShow === 'last_used_at' && h("span", { innerHTML: LastUsedIcon, title: "Last Used" }), date ? dateFns.format(new Date(date), 'P') : 'Never'), h("div", { class: "spacer ownership-spacer" }), template.is_public && (h("div", { class: "ownership" }, h("span", { innerHTML: GlobeAltIcon }), " Public")), !template.is_public && !template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: LockClosedIcon }), " Private")), !template.is_public && template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, template) }))));
-        }), !this.initiallyLoaded && (h("div", { key: '46a1bff9ddae80881dd897e052b223e141afb358' }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && h("div", { key: 'a9d8f7f6602a0e2c8a447bb0868f097b9d7cb094', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
+        }), !this.initiallyLoaded && (h("div", { key: '549a95b02f62e46a25a9b69671be83cdf1411a2e' }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && h("div", { key: '5ab1a9ce5e3505f06099b9cfbaae165141df3cc0', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
                 this.selectedPage = e.detail.selectedPage;
-            } }))) : (h("div", null)), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'a94528dd94af77c49c1b8c168c2c82d91003ba31', heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
+            } }))) : (h("div", null)), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'c8a3b36ac98b3c1859fc5dba792cdfc1447ac2c4', heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
     }
     static get watchers() { return {
         "sharing": ["handleSharingUpdated"],

package/dist/components/verdocs-text-input2.js

@@ -30,7 +30,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class VerdocsTextInput
             .catch(e => console.log('Error copying to clipboard', e));
     }
     render() {
-        return (h(Host, { key: '01f4cc50d00022fec700dd1703c403f788a7f3ee', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '755ccc9d7978816128f25e14051a4148246e2172' }, this.label && (h("div", { key: '275d72bce18e285eab0c5afee67998ffa8ef1717', class: "input-label" }, this.label + ':', this.required && h("span", { key: '4bc22add83d9953a8f719fc1737bbecbe70ad6fd', class: "required" }, "*"))), h("div", { key: '89b5a9e5795574005f3e45ad6e6701f32963f528', class: "input-container" }, h("input", { key: '6ef1db6b39dd01e7f2168983b08fd17fb94e5451', type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: 'afbff38029e87d44b4bfe37ea654e2b3813d766d', innerHTML: ClearIcon, class: "clear", onClick: () => {
+        return (h(Host, { key: '5bc396cdd768637ac69a21dcb672a53809b979ed', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '6294f9b41603ce31f561aeb2940fe764f1e3b573' }, this.label && (h("div", { key: '593198e43df84cc8f57b950bfaeab7defd4b8a15', class: "input-label" }, this.label + ':', this.required && h("span", { key: 'aad606689352175230d4644884e2a9d8ff2726f1', class: "required" }, "*"))), h("div", { key: '238b830122b5278da983330b87cd84fdd7627297', class: "input-container" }, h("input", { key: 'af8888c6146e5f617e3121aa6bbb5f56846521dc', type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: 'd51ff8c5760437916d45514fe38832bd70a0ddb6', innerHTML: ClearIcon, class: "clear", onClick: () => {
                 // We need to allow the onInput event to fire first in case
                 // the user was focused on this field before clicking clear.
                 setTimeout(() => {
@@ -44,7 +44,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class VerdocsTextInput
                         (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
                     }, 50);
                 }, 50);
-            } })), !this.clearable && this.copyable && this.value && h("span", { key: '099378e71c88710a9d2fdc9a34e38ff12b4ee85f', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: '1ac26e8e0513c247e8e04489026f5311eb51529f', text: this.helpText }))));
+            } })), !this.clearable && this.copyable && this.value && h("span", { key: 'e05ce0fb15f2ed2358edcbdfe1c5de77238311a8', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: 'b9d0e50d517e04e37636dd4d85e6e4409266b1e2', text: this.helpText }))));
     }
     get hostEl() { return this; }
     static get style() { return VerdocsTextInputStyle0; }

package/dist/components/verdocs-toggle-button2.js

@@ -25,7 +25,7 @@ const VerdocsToggleButton = /*@__PURE__*/ proxyCustomElement(class VerdocsToggle
         (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
     }
     render() {
-        return (h(Host, { key: '20e488d05d44870dcc7dd9ab4bf14b49d99b8d97', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
+        return (h(Host, { key: '19b820fa8c54c87afebe8fbd24d70282eab6922c', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
     }
     static get style() { return VerdocsToggleButtonStyle0; }
 }, [0, "verdocs-toggle-button", {

package/dist/components/verdocs-toggle.js

@@ -16,7 +16,7 @@ const VerdocsToggle$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsToggle ext
         this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
     }
     render() {
-        return (h("div", { key: 'bc1116c5d0c8b9a5096ace164a02c420751cc2ec', class: "container" }, h("span", { key: 'e0346b9aabd5e4fbb29c6f5cc897795870f0643e', class: "label" }, `${this.options.label}:`), h("div", { key: 'd91de7ce4ad8808f4faaa18b2865c0c4c21f7287', class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
+        return (h("div", { key: '2cffe22d376dc972de87f698e5213c789879978a', class: "container" }, h("span", { key: '9a6ad16cc9814f397284e359d29aa5eac0996517', class: "label" }, `${this.options.label}:`), h("div", { key: '7869d49e9b0c7bf528d0d564baa081834cead545', class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
                 console.log('clicked', index);
                 this.selectedOption = index;
             } }))))));

package/dist/components/verdocs-toolbar-icon2.js

@@ -41,7 +41,7 @@ const VerdocsToolbarIcon = /*@__PURE__*/ proxyCustomElement(class VerdocsToolbar
     //   this.press?.emit();
     // }
     render() {
-        return (h(Host, { key: 'f9c2c8bd293559e5e504b69cbc445ca813f134a2', class: {} }, h("div", { key: 'e5d497d4859e8bd61364f56f8c452c61ece75a76', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: 'ebb1c0fa2cd8b58eba9d5057fc965ead53c23059', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'df0d03fbeeeb3016dde67f6d8bf8f75c5a97105c', "data-popper-arrow": "true", class: "arrow" }))));
+        return (h(Host, { key: '81bef5d6b23987730bbeafe741a7fbc52c2d854c', class: {} }, h("div", { key: '87a7fab6e8cb787079f37332bdf8fb188f52157a', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: 'f6593f4c1d6b435a80b0a09d6356c383ec78a5c7', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'b13a8c43aa098db8ee6f2e05a53c02f0f3de9358', "data-popper-arrow": "true", class: "arrow" }))));
     }
     static get style() { return VerdocsToolbarIconStyle0; }
 }, [0, "verdocs-toolbar-icon", {

package/dist/components/verdocs-upload-dialog2.js

@@ -73,7 +73,7 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsUpload
         this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
     }
     render() {
-        return (h(Host, { key: 'a7e1e1a1feebdd423dfb0a6d3abac834bf404b32' }, h("div", { key: '68b079008f122b14abe3fc993260dddd28fea8a0', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'aad0fca28e1a1556c1590f5030f9de020353deb8', class: "dialog" }, h("div", { key: '1c938e1c4f72de7944f4f580bd1b86c2edeacfbf', class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: '4a7eb5bc46555fdec21b633f5602ea993bd4892a', class: "buttons" }, h("verdocs-button", { key: '086126dc1ceda3690b8fd236b5f8edbc2c206efe', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'e32a840359d7666e1175e92b96e4eb02145590ba', label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+        return (h(Host, { key: '00cddffd15d81c343c9f23ca79a26fd7b7c607ec' }, h("div", { key: '30308c5289e2bed777fb8d3bcbbfa4c5da71f967', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '667874e38d9b7c4be180e6097205c829e7bc497c', class: "dialog" }, h("div", { key: '25f97a72a7541feecf123a2c7a202024220c8a19', class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: 'a5fa38c5fdba79aef2f52b01a264ac9552190c78', class: "buttons" }, h("verdocs-button", { key: '07978b71c5a0293beca4eefebf3b7b280be914f8', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'c16e03120a392673aa656e7d6c6dfec599127f36', label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
     }
     static get style() { return VerdocsUploadDialogStyle0; }
 }, [0, "verdocs-upload-dialog", {

package/dist/esm/{EnvelopeStore-fefba6fd.js → EnvelopeStore-9df042b5.js}

@@ -37,6 +37,7 @@ const createEnvelopeStore = (envelopeId) => {
 };
 const envelopeStores = {};
 const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false) => {
+    var _a;
     let created = false;
     if (!envelopeStores[envelopeId]) {
         console.debug('[ENVELOPES] No envelope store found for ID, creating', envelopeId);
@@ -61,6 +62,15 @@ const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false) => {
         store.state.error = undefinedType;
         try {
             const envelope = await getEnvelope(endpoint, envelopeId);
+            // Post-process the envelope to upgrade to new data fields
+            (_a = envelope.documents) === null || _a === void 0 ? void 0 : _a.forEach(document => {
+                if (!document.order) {
+                    document.order = 0;
+                }
+                if (document.page_numbers) {
+                    document.pages = document.page_numbers;
+                }
+            });
             console.debug('[ENVELOPES] Got envelope', envelope);
             Object.assign(store.state, envelope);
             store.state.isLoaded = true;

package/dist/esm/{TemplateFieldStore-d7516adf.js → TemplateFieldStore-32329b5a.js}

@@ -3,18 +3,14 @@ import { c as createStore } from './index-296aabaf.js';
 const templateFieldStores = {};
 const getTemplateFieldStore = (templateId) => {
     if (!templateFieldStores[templateId]) {
+        console.log('Creating template field store', templateId);
         templateFieldStores[templateId] = createStore({ fields: [] });
     }
     return templateFieldStores[templateId];
 };
 const createTemplateFieldStore = (template) => {
     let store = getTemplateFieldStore(template.id);
-    if (!store) {
-        console.log('Creating template field store for template', template);
-        store = createStore({ fields: [] });
-        templateFieldStores[template.id] = store;
-    }
-    store.set('fields', [...template.fields]);
+    store.set('fields', [...template.fields.map(field => ({ ...field, page: field.page || field.page_sequence }))]);
     return store;
 };
 const createTemplateFieldStoreFromEnvelope = (envelope) => {

package/dist/esm/{TemplateRoleStore-ddc3b96f.js → TemplateRoleStore-0a4f98cb.js}

@@ -9,11 +9,6 @@ const getTemplateRoleStore = (templateId) => {
 };
 const createTemplateRoleStore = (template) => {
     let store = getTemplateRoleStore(template.id);
-    if (!store) {
-        console.log('Creating template role store for template', template);
-        store = createStore({ roles: [] });
-        templateRoleStores[template.id] = store;
-    }
     store.set('roles', [...template.roles]);
     return store;
 };

package/dist/esm/{TemplateStore-df5484bb.js → TemplateStore-78ad24d7.js}

@@ -1,7 +1,7 @@
 import { c as createStore } from './index-296aabaf.js';
 import { getTemplate } from '@verdocs/js-sdk';
-import { c as createTemplateRoleStore, g as getTemplateRoleStore } from './TemplateRoleStore-ddc3b96f.js';
-import { c as createTemplateFieldStore, g as getTemplateFieldStore } from './TemplateFieldStore-d7516adf.js';
+import { c as createTemplateRoleStore, g as getTemplateRoleStore } from './TemplateRoleStore-0a4f98cb.js';
+import { c as createTemplateFieldStore, g as getTemplateFieldStore } from './TemplateFieldStore-32329b5a.js';
 import { u as undefinedType } from './index-7456b04f.js';
 
 const createTemplateStore = (templateId) => {
@@ -41,6 +41,7 @@ const createTemplateStore = (templateId) => {
 };
 const templateStores = {};
 const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
+    var _a, _b;
     let created = false;
     if (!templateStores[templateId]) {
         console.debug('[TEMPLATES] No template store found for ID, creating', templateId);
@@ -48,9 +49,6 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
         created = true;
     }
     const store = templateStores[templateId];
-    // TODO: This can create a race condition if two components call this at the same time.
-    //  For now we can probably defer doing something smart here because it's only a
-    //  double-load issue.
     if (created || forceReload) {
         console.debug('[TEMPLATES] Loading template', { templateId, created, forceReload });
         store.state.isLoading = true;
@@ -59,6 +57,23 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
         store.state.error = undefinedType;
         try {
             const template = await getTemplate(endpoint, templateId);
+            // Post-process the template to upgrade to new data fields
+            if (!template.documents && template.template_documents) {
+                template.documents = template.template_documents;
+            }
+            (_a = template.documents) === null || _a === void 0 ? void 0 : _a.forEach(document => {
+                if (!document.order) {
+                    document.order = 0;
+                }
+                if (document.page_numbers) {
+                    document.pages = document.page_numbers;
+                }
+            });
+            (_b = template.fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+                if (field.setting) {
+                    field.settings = field.setting;
+                }
+            });
             console.debug('[TEMPLATES] Got template', template);
             Object.assign(store.state, template);
             store.state.isLoaded = true;