@verdocs/web-sdk 4.2.118 → 4.2.121

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

@@ -10,9 +10,9 @@ const TemplateStore = require('./TemplateStore-d11d62c0.js');
 const errors = require('./errors-017fb835.js');
 const Icons = require('./Icons-9a6f2f7c.js');
 const Toast = require('./Toast-d84d7bd3.js');
-const format = require('./format-0f565a28.js');
+const format = require('./format-dc0f3757.js');
 const interact_min = require('./interact.min-e6956f8b.js');
-const utils = require('./utils-c878d0c2.js');
+const utils = require('./utils-6a8c3390.js');
 require('./index-c12980a1.js');
 require('./index-2a189d85.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
@@ -772,19 +772,17 @@ const VerdocsTemplateFields = class {
             this.placing = null;
         }
     }
-    async handleFieldChange(field, e, optionId) {
-        console.log('[FIELDS] handleFieldChange', field, e, optionId);
-    }
+    // async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {
+    //   console.log('[FIELDS] handleFieldChange', field, e, optionId);
+    // }
     attachFieldAttributes(pageInfo, field, el) {
-        el.addEventListener('input', e => this.handleFieldChange(field, e));
-        el.addEventListener('settingsChanged', (e) => {
+        // el.addEventListener('input', e => this.handleFieldChange(field, e));
+        el.addEventListener('settingsChanged', () => {
             var _a, _b;
-            console.log('Settings changed', e.detail);
             (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
         });
         el.addEventListener('deleted', () => {
             var _a, _b;
-            console.log('[FIELDS] Deleted', this, field);
             el.remove();
             (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
         });
@@ -833,7 +831,7 @@ const VerdocsTemplateFields = class {
         utils.updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
     }
     async handleMoveEnd(event) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const name = event.target.getAttribute('fieldname');
         const option = +(event.target.getAttribute('option') || '0');
         const field = this.fieldStore.get('fields').find(field => field.name === name);
@@ -842,19 +840,33 @@ const VerdocsTemplateFields = class {
             return;
         }
         const pageNumber = event.target.getAttribute('pagenumber');
-        const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
+        let { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
         const clientRect = event.target.getBoundingClientRect();
         const parent = event.target.parentElement;
         const parentRect = parent.getBoundingClientRect();
         const width = field.width || utils.defaultWidth(field.type);
         const height = field.height || utils.defaultHeight(field.type);
-        // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
-        // "up" from the bottom (negative displacement).
+        // These two being backwards is not a mistake. Left measures "over" from the left
+        // (positive displacement) while bottom measures "up" from the bottom (negative displacement).
         const newX = Math.max(clientRect.left - parentRect.left, 0);
-        const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
+        let newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
+        console.log('drop', { pageNumber, newX, newY });
+        let newPageNumber = parseInt(pageNumber);
+        if (newY > renderedHeight) {
+            newPageNumber = Math.min(newPageNumber + 1, ((_d = (_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[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1);
+            newY -= renderedHeight;
+            renderedHeight = this.cachedPageInfo[newPageNumber].renderedHeight;
+            console.log('Next page', { newPageNumber, newY, renderedHeight });
+        }
+        else if (newY < 0) {
+            newPageNumber = Math.max(newPageNumber - 1, 1);
+            renderedHeight = this.cachedPageInfo[newPageNumber].renderedHeight;
+            newY += renderedHeight;
+            console.log('Next page', { newPageNumber, newY, renderedHeight });
+        }
         const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
         try {
-            const params = { x, y };
+            const params = { x, y, page: newPageNumber };
             console.log('[FIELDS] Will update', name, y, option, params);
             const newFieldData = await jsSdk.updateField(this.endpoint, this.templateId, name, params);
             console.log('[FIELDS] Updated', newFieldData);
@@ -862,12 +874,12 @@ const VerdocsTemplateFields = class {
             event.target.removeAttribute('posX');
             event.target.removeAttribute('posY');
             utils.removeCssTransform(event.target);
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+            (_e = this.templateUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, template: (_f = this.templateStore) === null || _f === void 0 ? void 0 : _f.state, event: 'updated-field' });
         }
         catch (e) {
             Toast.VerdocsToast('Error updating field, please try again later', { style: 'error' });
             console.log('[FIELDS] Error updating field', e);
-            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new errors.SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+            (_g = this.sdkError) === null || _g === void 0 ? void 0 : _g.emit(new errors.SDKError(e.message, (_h = e.response) === null || _h === void 0 ? void 0 : _h.status, (_j = e.response) === null || _j === void 0 ? void 0 : _j.data));
             event.target.removeAttribute('posX');
             event.target.removeAttribute('posY');
             utils.removeCssTransform(event.target);

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

@@ -24,7 +24,7 @@ const VerdocsQuickFunctions = class {
         this.createDocument.emit();
     }
     render() {
-        return (index.h("div", { key: 'e0edb4e04bbf4ee92ba26f50f3c56beec434e375', class: "container" }, index.h("p", { key: '58e823308edc32e234587cd6232c5014460a7a8a', class: "title" }, "Quick Create"), index.h("button", { key: '5ef91f83933d1d716c6627ab393cb171e977aa81', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: '773b5d9e6f4288f288cee92d4c7884cdce8a3374', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (index.h("div", { key: 'ab46c28e7f1420c3d38537fa3f1df68e3a4552bd', class: "container" }, index.h("p", { key: '1fedfcb6362e8c94e20c5ab0b8dae925f0a50542', class: "title" }, "Quick Create"), index.h("button", { key: 'eb7816bba752b3a2b531166413b8004f239db36d', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'c551132ca96ce060bf0fcd18f017b20b9a27cfda', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
 };
 VerdocsQuickFunctions.style = VerdocsQuickFunctionsStyle0;

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

@@ -23,7 +23,7 @@ const VerdocsRadioButton = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '8bb79695c8aab74877a368290a467078500c049b', class: { disabled: this.disabled } }, index.h("input", { key: '6cddceb3e5ec00f1aced019b49cbd162c58fc05f', 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: 'c6dc8308fe34376bd2cb9561dc328570db52d340', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+        return (index.h(index.Host, { key: 'b8dc5d8e34deeaf6d67f8b38bcf485a66e6fe8c8', class: { disabled: this.disabled } }, index.h("input", { key: '5e03859b9d3082add93aeba0eb626d8f41988f1c', 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: '4caa876b9138003b5ff7d576fdc32fcf62858bca', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
     }
 };
 VerdocsRadioButton.style = VerdocsRadioButtonStyle0;
@@ -144,34 +144,34 @@ const VerdocsTemplateRoleProperties = class {
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (index.h(index.Host, { key: 'a1e71e2e85110fc84f4639a249a869effa03059c' }, index.h("div", { key: 'e5d573e2e8782ac53a34caa8a861e31e5011a8e0', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: 'e185f3b840b6ac8922672f5cdafbd2a0215e820f', class: "dialog" }, index.h("form", { key: '8d98eae65f1672e89db98aed339533f5723d544b', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: 'e5659b7b89e51cf6a7e1015ff962730009888113', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (index.h(index.Host, { key: 'c54a0b5c84e2ca6eba28bccd0ed7dbaf61b9318e' }, index.h("div", { key: 'ed724b07e6bd402c2c8f593e4f0ae5eeb7af6f2a', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: '7372ec9e048dde505c4f59f30d4bf94c9d206e2c', class: "dialog" }, index.h("form", { key: '2fc19ec7adb1fafa2f501698a6e61025fdc31749', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: 'd11fa702e1b5ae5ffb300b9d89c437ac6ba419c1', 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: 'b891fcf91ddb5dda364c2906c24d3d8a133ba959', class: "row" }, index.h("div", { key: 'e7c4510014a59a4c77cc178b535082d8a4048365', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: '1cc4b4a1e3edbb40ba60ef5d35b4becde48d5a17', value: this.type, options: [
+            } }), index.h("div", { key: 'e9558475d3e2a193ac753402e4df7fd4c975bc9d', class: "row" }, index.h("div", { key: 'ecb28611e04310a9d802f597ef4bc3a4b7b53f4d', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: 'a9dc9ae0fd6ac107ec9a79fc5a77b2b4f0286808', 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: '69b3ffb497857debafc245aeb263d3e1cdbcac11', 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: '15ef892258e97a4397ce6b05d13e999937112cce', id: "verdocs-recipient-first", label: "First Name", value: this.first_name, autocomplete: "off", helpText: "The recipient's first 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: "First Name...", onInput: (e) => {
+            } }), index.h("verdocs-help-icon", { key: '56b67267f62756e09f7b02d2ebbd5b3cc20e228f', 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: '29f2c4124c9fc9a126f73088f8f7f8056f4c4323', id: "verdocs-recipient-first", label: "First Name", value: this.first_name, autocomplete: "off", helpText: "The recipient's first 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: "First Name...", onInput: (e) => {
                 this.first_name = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: '0319a7fe5f3bd910ac32cb327ba764e209c08a6c', id: "verdocs-recipient-first", label: "Last Name", value: this.last_name, autocomplete: "off", helpText: "The recipient's last 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: "Last Name...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: '512457a0c6e9abf29b6f4e8403deef8ee833dec4', id: "verdocs-recipient-first", label: "Last Name", value: this.last_name, autocomplete: "off", helpText: "The recipient's last 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: "Last Name...", onInput: (e) => {
                 this.last_name = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: '2848ae472e3c0b2bf634a235cb72e89bd2d409b0', 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: 'b69cc6d65593ecd139748a6b39e33f13f38ed3be', 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: 'd25f31ed90028ca4cd4f7b1660a0988be3ecf112', 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: '931910a385e6b54ae33897bde3c344a4643089f6', 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: '1c569da3207a3d46bb3a0f417cf1488d4c4ebfa6', class: "row" }, index.h("div", { key: 'daa2968dcba6cba37b84d57fd682f60a1dd5adbc', class: "input-label" }, "May Delegate:"), index.h("div", { key: '15b44b67d4b554bb1f6546746b0d60b78b67a3ee', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '6f6046bd9791923328c234f7394ecacd674a1926', checked: this.delegator, onInput: (e) => {
+            } }), index.h("div", { key: '380809846d4cc9a93737e244c60f2455dc3c451b', class: "row" }, index.h("div", { key: 'f2f518c482eed372f261eb80c4678f839ec23c9c', class: "input-label" }, "May Delegate:"), index.h("div", { key: 'ee8816cd6b1268c8c62c793fcd500f45d676f1d6', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '36958e4cdfbc38ea934fe19fb3509e3107aa015f', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), index.h("verdocs-help-icon", { key: 'ad0ffedf4341761786cd3764f6b9794a97211dc9', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '496ee13c6b658687975d58978a000f9eb555a9c3', class: "buttons" }, index.h("button", { key: 'fa00b8f96af35ba7603ef660dd596cee1c7d3e21', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: '7866c12a9e3d073aaef509324de7c02788d117a9', style: { flex: '1' } }), index.h("verdocs-button", { key: '699bda4fd7cad7cd02affd6e76fdf00f360e940b', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: 'df0476c8601ec5a0bd84ab7166ea03a323ff68f5', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), index.h("verdocs-help-icon", { key: '44b92c48e4604fb543ff5028528bb761c348091e', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '855c97f472fe9ec7e230cb3687bbb43ad0f3d893', class: "buttons" }, index.h("button", { key: '09b8562821002359fa9c3d5e6281b58e2eea5ee5', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: '65fdeeecbdc7a34bee5d1c72dcc9ab9630e6adfa', style: { flex: '1' } }), index.h("verdocs-button", { key: '1dcf66c59be34535f3af1e96cc15816ea097546b', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '0eb80af6e8d388eeb6563db768bc5511a14cafb8', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
 };
 VerdocsTemplateRoleProperties.style = VerdocsTemplateRolePropertiesStyle0;
@@ -238,7 +238,7 @@ const VerdocsTemplateSender = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'e51de4bd58287341b8b1f5679c03ea8f388aeaed' }, index.h("div", { key: 'a93c06f123a78217478fe16299fa4345863d8b53', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '78a9f18025bbad871be472a12ec3f27665700be4', class: "dialog" }, index.h("div", { key: '4227eb9c4f23342c0d7b40b4c4cc77878f48f3ba', class: "options" }, index.h("div", { key: '041a7ec81a81653c650924323a6ad6597d2c46f5', class: "option" }, index.h("verdocs-radio-button", { key: 'e98602966885fd7a5119d4c5acb3d3fecaf752ad', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '3f7fb8069d798329020eca837db6431bd1d80ba2', class: "description" }, index.h("div", { key: 'cb1da501fd3cce4f0bdecdb7992d1889caded1a7', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: '837bfdb94c53c951fd2669bceb25947a0cec0f98', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '05a5a34875d6103fbec3ac0a9c41d001abcf73cb', class: "option" }, index.h("verdocs-radio-button", { key: '15a5daa447b6697c3ccc6621802451b10ab18cb7', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: 'a4c8e2fce754de4f4fb65a983dcd6a73b3c4cf90', class: "description" }, index.h("div", { key: '60bc31ca29d6c9554c4b20202a848e0eb742914e', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: 'c0cf14c6ba072ed36b039facf59b749b25fa80ed', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'd3aa2900be1c02c82859c46e62554b0ea3bd0382', class: "option" }, index.h("verdocs-radio-button", { key: 'edab1a25a81388f237ab187cad4ebfecbfd8f5b7', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: '05006c432b108586048d8e3a63f3b506f184dab3', class: "description" }, index.h("div", { key: '46d929d03d0ac453bf75e5bb7785373f741f2b47', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: 'e02f6a03e7e5c46141ecdf9aa50b4047eced450e', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: 'd6a67519982feab0e5ef3131349ca53a4312597f', class: "option" }, index.h("verdocs-radio-button", { key: '9eef88a57e5e2653a0a6e06c8d7d30d6a56ff9ec', 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: '725275a9b3a1d702328aed52f831eaf28827d399', class: "description" }, index.h("div", { key: '85ee3e891b241048cf2bcc05812fc221faf21b28', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: '960eb5345948e8a4adef466138d0cc62b49b9406', 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: 'd7b71dbd2019e20d2a734c737a21f9097b9dcf60', class: "option" }, index.h("verdocs-radio-button", { key: 'f99c206e998ed717754b2ee7d51ba614f7774d4d', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: 'aca94259df3bf9904cbc51a3996699df3aeba58c', class: "description" }, index.h("div", { key: '123b4a4d607575fb116912f74318a74e593c9da8', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: 'ef96de2bf38213c4ade608b8ef26576a86fbb8b9', text: "Only I can use this template." })))), index.h("div", { key: '44945452b32f23b58c4941ecd8b91284f5c85040', class: "buttons" }, index.h("verdocs-button", { key: 'e128593df73e4b1733ec15ebb70dcb6726319496', label: "Close", onClick: () => this.handleClose() }))))));
+        return (index.h(index.Host, { key: '67fca56fbc8af88952abcbf38e100924ef12450e' }, index.h("div", { key: '7aa3d03b7cf0a197c2c0b19f8095acff8f33b0c7', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '14ed1a78f60c2f9390f5b950bc367334bf3ba5ab', class: "dialog" }, index.h("div", { key: 'eadbe8d3794d0bbaef40c4cf66b2b4003470cff3', class: "options" }, index.h("div", { key: '4e55a553a7a543ba7d0d0f9b89cc079a29cbc23f', class: "option" }, index.h("verdocs-radio-button", { key: 'cd77756aff5201d3278a8bf8564842bfd77378b1', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '65aa448d8011a4835762bda5350758353fb86554', class: "description" }, index.h("div", { key: '4811f42f5a2779834b8e0c0705b52bc4ea9071df', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: '2738d5cbd942df36910ae33548dfda99b93114be', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'f316dd18967d795dc19973d46c0178d48b04cf3a', class: "option" }, index.h("verdocs-radio-button", { key: '06c9415f680dbe9eb06995ac46f3884ab341ca76', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '5f88f41c3eac901c01a996edeb21ef729d90dbf4', class: "description" }, index.h("div", { key: '4f6977dc538f073bf0eb24034ea9ec60e274169c', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: 'a3d6246ae9288c701f50ecc73176c649962c3301', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: '00209bb46399d1e8630540a020db6a83acb80d70', class: "option" }, index.h("verdocs-radio-button", { key: 'b236c9613d1078151e4c0adea3767d095714276b', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: '6335469dd6109b6b36eec21bfb344e2a94fa793e', class: "description" }, index.h("div", { key: '88cddc5dd229213d243e175c7bca422e67d84fc4', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: 'e2f24e4d1c5af940e1c8860b7fd78eeb8a8367b4', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: 'fcbfa21b9b5aad992a608b83cec6104bee2e410f', class: "option" }, index.h("verdocs-radio-button", { key: 'b31555051581c7eeedd012510053f29cee40b2d0', 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: 'ca1941475808a7db037dafab17ff6c2fc6b40b1b', class: "description" }, index.h("div", { key: '6bca41574f92ce15eba532289db4ac2a5480c9f2', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: '8e916441fcd37488e0061c49c0b91c88b9b7f467', 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: '2c32fb35cc221336e96cd07ff5e79971c26475c8', class: "option" }, index.h("verdocs-radio-button", { key: '2f86e27c50fb65632dd647e627621f163369ca2e', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: '21cef2358038a2089c5a80f32f745530380cb5f0', class: "description" }, index.h("div", { key: 'ed173b10391c63d838d2a814de2d3c74a056a837', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: 'c7f3204522f631e84d34f7f040bb73af50455196', text: "Only I can use this template." })))), index.h("div", { key: '4d26f9e23c3b3eed492a0782b324612ddd989325', class: "buttons" }, index.h("verdocs-button", { key: 'e65545f203f631214e5939946b95fbc14f37686a', label: "Close", onClick: () => this.handleClose() }))))));
     }
 };
 VerdocsTemplateSender.style = VerdocsTemplateSenderStyle0;

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

@@ -47,7 +47,7 @@ const VerdocsSearchBox = class {
         }
     }
     render() {
-        return (index.h("form", { key: 'c7e0698afde279984bfa46382443f40d5110c023', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (index.h("span", { key: '07cbbb7bee52f85bbb22a0254b1f1a109b70d408', class: "type" }, this.type, "s ", index.h("button", { key: '7c7522a957cd4f80d98abb680d7164ac6db1f377', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), index.h("input", { key: '362af3bf09cf9c781c287f5193e7dad31bd85d87', 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: '7d4c890a308373d0b8a38548f2ad6995980ab7d7', onClick: e => this.handleSearch(e), class: "search" }, index.h("span", { key: 'a403419fe53c5a8f1271826f35c2061ca6a88328', innerHTML: SearchIcon }), "Search")));
+        return (index.h("form", { key: '5244d8a4276ead04d75be718eff4cbfd6203c8c3', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (index.h("span", { key: '740ef6719f4e2ac16daedfb539311ee252c37b0e', class: "type" }, this.type, "s ", index.h("button", { key: 'c101d22f53a80d18c5c155ce930688ccb72228f9', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), index.h("input", { key: 'b30a27a9c7dd82bdf2df7d4941356245ca4e0302', 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: 'd1cd5ea8fbde2c5f138d44c9bc289dd34de520cb', onClick: e => this.handleSearch(e), class: "search" }, index.h("span", { key: 'f1afef424ebd455cf68c22298a65594a29b57c85', innerHTML: SearchIcon }), "Search")));
     }
 };
 VerdocsSearchBox.style = VerdocsSearchBoxStyle0;

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: '1f3dba2661771f24f6a9a416b040b84d48f0356b' }, "\u00A0");
+        return index.h("div", { key: 'afc8ae06fa51a4aa236c12b7ed057e16112ce8a8' }, "\u00A0");
     }
 };
 VerdocsSearchTabs.style = VerdocsSearchTabsStyle0;

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

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a27a7f77.js');
 const jsSdk = require('@verdocs/js-sdk');
-const utils = require('./utils-c878d0c2.js');
+const utils = require('./utils-6a8c3390.js');
 const TemplateFieldStore = require('./TemplateFieldStore-836d8bf5.js');
 const Toast = require('./Toast-d84d7bd3.js');
 const errors = require('./errors-017fb835.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');
-require('./format-0f565a28.js');
+require('./format-dc0f3757.js');
 require('./index-c12980a1.js');
 
-const verdocsSignCss = "@-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-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign .agree{-ms-flex:0;flex:0;width:600px;display:-ms-flexbox;display:flex;max-width:90%;padding:30px 15px;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree li{margin:0.5em 0}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 20px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}";
+const verdocsSignCss = "@-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-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign .agree{-ms-flex:0;flex:0;width:600px;display:-ms-flexbox;display:flex;max-width:90%;padding:30px 15px;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree li{margin:0.5em 0}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 20px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}#verdocs-sign-header .spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}";
 const VerdocsSignStyle0 = verdocsSignCss;
 
 const inProgressMenuOptions = [
@@ -60,6 +60,7 @@ const VerdocsSign = class {
         this.agreed = false;
         this.documentsSingularPlural = 'document';
         this.kbaStep = '';
+        this.showSpinner = true;
     }
     componentWillLoad() {
         if (!this.endpoint) {
@@ -209,6 +210,7 @@ const VerdocsSign = class {
         this.getRecipientFields().forEach(oldField => {
             if (oldField.name === fieldName) {
                 oldField.value = updateResult.value;
+                // TODO: Keeping this while attachments still rely on it
                 oldField.settings = updateResult.settings;
                 utils.updateDocumentFieldValue(oldField);
                 this.checkRecipientFields();
@@ -338,7 +340,7 @@ const VerdocsSign = class {
         return recipientFields;
     }
     async handleNext() {
-        var _a, _b;
+        var _a;
         if (this.nextSubmits) {
             try {
                 // Patches the date picker to be forcibly removed if still showing during submission
@@ -366,8 +368,8 @@ const VerdocsSign = class {
             this.submitting = false;
             return;
         }
-        // Find and focus the next incomplete` field (that is fillable)
-        const emptyFields = this.getSortedFillableFields().filter(field => !this.isFieldFilled(field));
+        // Find and focus the next incomplete field (that is fillable)
+        const emptyFields = this.getSortedFillableFields().filter(field => field.required && !this.isFieldFilled(field));
         jsSdk.sortFields(emptyFields);
         const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
         let nextFocusedIndex = focusedIndex + 1;
@@ -375,9 +377,10 @@ const VerdocsSign = class {
             nextFocusedIndex = 0;
         }
         let nextRequiredField = emptyFields[nextFocusedIndex];
+        console.log('Next field', nextRequiredField);
         // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
         let skips = 0;
-        if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
+        if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
             skips++;
             nextFocusedIndex++;
             if (nextFocusedIndex >= emptyFields.length) {
@@ -415,6 +418,7 @@ const VerdocsSign = class {
         }
     }
     attachFieldAttributes(pageInfo, field, el) {
+        // console.log('attach', field.name);
         el.addEventListener('input', (e) => {
             // console.log('[SIGN] onfieldInput', e.detail, e.target.value);
             // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
@@ -431,10 +435,19 @@ const VerdocsSign = class {
         el.addEventListener('attached', async (e) => {
             // TODO: Show a spinner and/or progress bar
             console.log('[SIGN] onAttached', e.detail, e.target.value);
-            const r = await jsSdk.uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
-            console.log('upload result', r);
-            // this.updateRecipientFieldValue(fieldName, updateResult)
-            this.checkRecipientFields();
+            this.showSpinner = true;
+            try {
+                const r = await jsSdk.uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
+                console.log('upload result', r);
+                // this.updateRecipientFieldValue(fieldName, updateResult)
+                this.checkRecipientFields();
+                this.showSpinner = false;
+            }
+            catch (e) {
+                console.log('Error uploading attachment', e);
+                Toast.VerdocsToast('Unable to upload attachment, please try again later', { style: 'error' });
+                this.showSpinner = false;
+            }
         });
         el.addEventListener('remove', (e) => {
             console.log('[SIGN] onRemoved', e.detail, e.target.value);
@@ -446,7 +459,8 @@ const VerdocsSign = class {
                 .catch(e => console.log('[SIGN] Error deleting attachment', e));
         });
         el.addEventListener('focusout', e => {
-            if (field.type !== 'dropdown') {
+            // These field types trigger focusout as they're used, even without a value change
+            if (field.type !== 'dropdown' && field.type !== 'attachment') {
                 this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
             }
         });
@@ -467,12 +481,7 @@ const VerdocsSign = class {
         // NOTE: We don't filter on pageNumber here because we need the position in the
         // entire list to set the tabIndex.
         const recipientFields = this.getSortedFillableFields();
-        console.log('Recipient fields', recipientFields);
-        // this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
         // First render the fields for the signer
-        // Also show field placeholders for other signers who have yet to act
-        // In template list in Beta, show second date being sorted on
-        // Sign top to bottom left to right
         recipientFields.forEach((field, tabIndex) => {
             if (field.page !== pageInfo.pageNumber) {
                 return;
@@ -562,7 +571,7 @@ const VerdocsSign = class {
         })), this.showFinishLater && (index.h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && index.h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (index.h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
-            } })), this.submitting && (index.h("div", { class: "loading-indicator" }, index.h("verdocs-loader", null)))));
+            } })), this.submitting && (index.h("div", { class: "loading-indicator" }, index.h("verdocs-loader", null))), this.showSpinner && (index.h("verdocs-portal", null, index.h("div", { class: "spinner-overlay" }, index.h("verdocs-spinner", null))))));
     }
 };
 VerdocsSign.style = VerdocsSignStyle0;

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

@@ -16,7 +16,7 @@ const VerdocsQuickFilter = class {
         this.mode = 'light';
     }
     render() {
-        return (index.h(index.Host, { key: '33e182037ce0a988e30b7a2ee1f31591f8ac1b08', style: {
+        return (index.h(index.Host, { key: '87070faacac5435c529ef7f2104e4e8df403fce8', style: {
                 width: `${this.size}px`, //
                 height: `${this.size}px`,
                 flex: `0 0 ${this.size}px`,

package/dist/cjs/verdocs-status-indicator.cjs.entry.js

@@ -7193,11 +7193,11 @@ const VerdocsStatusIndicator = class {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (index.h(index.Host, { key: '59e5538e41c29b74d4f8d53c8674fb2d0d159ab9', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (index.h(index.Host, { key: 'a579d2ed18289b75beaaaf5fef322db25d0a4e93', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, index.h("span", { key: 'c3fda712b9cbede053c1ed89914d85b3eb8c8d96', class: "icon", innerHTML: icon }), index.h("span", { key: 'da87a24aef046a682a479580f7157f22778c1344', class: "content" }, statusMessage), index.h("div", { key: '37ca0dc5c864927f40b6bacaff2aed3a8b9b892b', class: "detail-panel", ref: el => (this.detailPanel = el) }, index.h("div", { key: 'cd4ebea386ae4abd6c95720c7f8c3cf640e33c3d', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (index.h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, index.h("span", { key: 'c59f8b21dce6f4fe2cd7bdc1124c6af339e70de7', class: "icon", innerHTML: icon }), index.h("span", { key: '1c96b95b111836c791a14e22c28defc43db1cc48', class: "content" }, statusMessage), index.h("div", { key: 'd673852a5e1a03656cb15d39d7f469a6e43f45a9', class: "detail-panel", ref: el => (this.detailPanel = el) }, index.h("div", { key: '0d1597689117ca7419f556fc38ff55711644f55f', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (index.h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
 };
 VerdocsStatusIndicator.style = VerdocsStatusIndicatorStyle0;

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

@@ -16,9 +16,9 @@ const VerdocsTable = class {
         this.data = [];
     }
     render() {
-        return (index.h(index.Host, { key: '0f5ccb1d3bf8296157a3b4988a158a0277405127', class: "table-wrapper" }, index.h("table", { key: '0994c41fb599962358081f0849dd3d3399780397', class: "table" }, index.h("thead", { key: 'ebee5297f9bae8d5527e8ea2ad84c44278aed243' }, index.h("tr", { key: 'ee44689ef6c78e4debb206e6d554f9df848e1868', class: "row header-row" }, this.columns.map((col, i) => {
+        return (index.h(index.Host, { key: 'd19cf6b46ea9a6cc982eb95a85b0cc390db42a51', class: "table-wrapper" }, index.h("table", { key: 'b47796f52ce057fe9bdc6e99f79b1cbf51d788d5', class: "table" }, index.h("thead", { key: '9cfe8d27d078f8909680a463acee75dba172f15d' }, index.h("tr", { key: 'cb17d88359a5e3282fbd101d1990deb1d5582898', class: "row header-row" }, this.columns.map((col, i) => {
             return (index.h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
-        }))), index.h("tbody", { key: '9cbccc8987ca66498dbd006c2599bc6f2c85c8d6' }, this.data.map(row => (index.h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
+        }))), index.h("tbody", { key: '4590b2ecbb1ad3aac1b67fcd0fc06c2bb8754644' }, this.data.map(row => (index.h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
             return col.renderCell ? (index.h("td", { class: `col data-col col-${i} col-${col.id}`, innerHTML: col.renderCell(col, row) })) : (index.h("td", { class: `col data-col col-${i} col-${col.id}` }, row[col.id]));
         }))))))));
     }

package/dist/cjs/verdocs-template-card.cjs.entry.js

@@ -18,7 +18,7 @@ const VerdocsTemplateCard = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '764d4b13847b9248b54f75b415d7aa9bd47f1a0e' }, index.h("span", { key: '63e24c019fa23f00dd40b251fe89cdf720df9994', class: "name" }, this.template.name), index.h("span", { key: 'a709d0cf41957ba84ccbd5b58c63ecaec41272d5', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), index.h("hr", { key: '33a685839d160dc1f8cea2ede8784878a34cca13' }), index.h("div", { key: '0e08647c71b9245cfd1cb372c4dbe44805cb98db', class: "controls" }, index.h("div", { key: '42763e333948034dbf73e186dfdc4ba82068d399', class: "control" }, index.h("span", { key: '3ffcc3c8c3c766fa2d8a4a617373223bffab5768', class: "icon", innerHTML: StarIcon }), index.h("span", { key: 'e1bdfa83c6764f1522e87011d19d65dee70492b8', class: "value" }, this.template.star_counter)), index.h("div", { key: '05f132e36844a277a4bf619248d4f1405f5175a6', class: "control secondary" }, index.h("span", { key: '88615f3a8413a68132098961898ceed4d369d9b1', class: "icon", innerHTML: PagesIcon }), index.h("span", { key: 'd35c7465d76f88a8fd29045d4ea18b9dd6031667', 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)), index.h("div", { key: '179a4acabb579ea1c52793c4681f0dec2947800f', class: "control secondary" }, index.h("span", { key: '3d5de3e3d320eb3209aa5b8809d06613fe24da7c', class: "icon", innerHTML: EmailIcon }), index.h("span", { key: 'f2386b02c0562d8dc02bd2508c5a56059616d2c7', class: "value" }, this.template.counter)), index.h("span", { key: 'd98e1df83d33b1aa258f4bb92361dd4dc119269f', class: "additional-controls", innerHTML: ActionsIcon }))));
+        return (index.h(index.Host, { key: '3e5011cab3a4e78b92e9c2565f40d304ad334ed6' }, index.h("span", { key: '65ae319e5f2c07d6ad30dc7e1ef797d7d1f45e34', class: "name" }, this.template.name), index.h("span", { key: '81078cc46080d7417f3a2aa2a87f62787867ab7d', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), index.h("hr", { key: 'e35365811650f21862ebc87e89015c1c044f65cc' }), index.h("div", { key: '9d7e0b7a9e09be59890df0b8655f1ad74b8aadc9', class: "controls" }, index.h("div", { key: '24e402c45e499969b3f039010a730b7e22e5eb82', class: "control" }, index.h("span", { key: '06891917e493b9902f141acf3c906d9f2dfb98fc', class: "icon", innerHTML: StarIcon }), index.h("span", { key: '6599c695f7f5e1798254a16e1e209afe1768cd9d', class: "value" }, this.template.star_counter)), index.h("div", { key: '868b45b247a1e613caa0ca20270435ecfc52032d', class: "control secondary" }, index.h("span", { key: 'c0c308c9762ed5ada2456d69697dc5b0295f257c', class: "icon", innerHTML: PagesIcon }), index.h("span", { key: 'f851ea648cd5115798937af1d9d12671410e3f5b', 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)), index.h("div", { key: '3c24408d7b9cd968d721cd5360a87f7d66d0f02a', class: "control secondary" }, index.h("span", { key: '12a94b8fc7850db8ab535161abd7003ddb8f5eca', class: "icon", innerHTML: EmailIcon }), index.h("span", { key: '544d6b2ba82c971ba46649fa45d044293a89ca07', class: "value" }, this.template.counter)), index.h("span", { key: '62c64a478015d8edd079272405a366fc117dafea', class: "additional-controls", innerHTML: ActionsIcon }))));
     }
 };
 VerdocsTemplateCard.style = VerdocsTemplateCardStyle0;

package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a27a7f77.js');
 const jsSdk = require('@verdocs/js-sdk');
 const TemplateFieldStore = require('./TemplateFieldStore-836d8bf5.js');
-const utils = require('./utils-c878d0c2.js');
+const utils = require('./utils-6a8c3390.js');
 const popper = require('./popper-31badbf8.js');
 require('./index-c12980a1.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');
-require('./format-0f565a28.js');
+require('./format-dc0f3757.js');
 
 const verdocsTemplateDocumentPageCss = "@-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-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}";
 const VerdocsTemplateDocumentPageStyle0 = verdocsTemplateDocumentPageCss;
@@ -102,7 +102,7 @@ const VerdocsTemplateDocumentPage = class {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (index.h(index.Host, { key: 'a0d656b86f18762601961c420ab39fb439c3ca7e', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+        return (index.h(index.Host, { key: '4c35b1d1d350e3c16813170b0421d888aaf76a4d', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.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)
@@ -197,7 +197,7 @@ const VerdocsToolbarIcon = class {
     //   this.press?.emit();
     // }
     render() {
-        return (index.h(index.Host, { key: 'de2235124c7fbeb0a24950b67617a2acb55cdd69', class: {} }, index.h("div", { key: '35fe164dc6dd850c31d7fa50e91312b14a213da1', "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) }), index.h("div", { key: '1b4e2acd66ce940c36736bb5cff35a89f6d3142b', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { key: 'df3ad06add46d573dbcdbbf9f675d1b0949d1892', "data-popper-arrow": "true", class: "arrow" }))));
+        return (index.h(index.Host, { key: '869ac7bc88e9985e3338183acfe2f794cb32f4b7', class: {} }, index.h("div", { key: 'a14eee006ba0eebacb118df48b3518e766be1c05', "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) }), index.h("div", { key: '2dc9c1cccc90348cb8355d46db3c6bfe4e0845b3', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { key: 'd062ddd320b47a7f1c397c56721cb544018b9434', "data-popper-arrow": "true", class: "arrow" }))));
     }
 };
 VerdocsToolbarIcon.style = VerdocsToolbarIconStyle0;

package/dist/cjs/verdocs-template-star.cjs.entry.js

@@ -46,7 +46,7 @@ const VerdocsTemplateStar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '40bad1fc57171bcdffe69ff8f1c876813ff6cc78' }, index.h("div", { key: '656891e6efc6645d9d3638a9be48728529a078ad', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), index.h("div", { key: '486526042ff5d20a37e7b8207c959d6ee2eede0a', class: "count" }, this.template.star_counter || '--')));
+        return (index.h(index.Host, { key: '9b776fbc0df8053116cf8c90abf92ca936e4aed3' }, index.h("div", { key: '4623b371e18334c1c88f8a2463c9cc48b308eedf', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), index.h("div", { key: 'd0f7d0d65266d1683a1fcd537cd4eda40e94b287', class: "count" }, this.template.star_counter || '--')));
     }
 };
 VerdocsTemplateStar.style = VerdocsTemplateStarStyle0;

package/dist/cjs/verdocs-template-tags.cjs.entry.js

@@ -14,7 +14,7 @@ const VerdocsTemplateTags = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'b1adfd5844f2d5302e2fda6355d868a845005345' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (index.h("span", null, tag)))));
+        return (index.h(index.Host, { key: 'bae2503fd50b94ad99bfbb24f2abe5e6d5629e2e' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (index.h("span", null, tag)))));
     }
 };
 VerdocsTemplateTags.style = VerdocsTemplateTagsStyle0;

package/dist/cjs/verdocs-templates-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a27a7f77.js');
 const jsSdk = require('@verdocs/js-sdk');
 const errors = require('./errors-017fb835.js');
-const format = require('./format-0f565a28.js');
+const format = require('./format-dc0f3757.js');
 
 const verdocsTemplatesListCss = "@-webkit-keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\nverdocs-templates-list {\n  display: -ms-flexbox;\n  display: flex;\n  padding: 10px;\n  font-size: 18px;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 6px;\n  color: #33364b;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  font-family: \"Inter\", \"Barlow\", sans-serif;\n}\nverdocs-templates-list .header {\n  width: 100%;\n  row-gap: 4px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -webkit-column-gap: 12px;\n  -moz-column-gap: 12px;\n  column-gap: 12px;\n  margin: 0 0 10px 0;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-direction: row;\n  flex-direction: row;\n}\nverdocs-templates-list .header .filter {\n  width: 150px;\n}\nverdocs-templates-list .header verdocs-text-input {\n  margin: 0;\n}\nverdocs-templates-list .header verdocs-text-input input {\n  height: 32px;\n}\nverdocs-templates-list .filter {\n  -ms-flex-align: center;\n  align-items: center;\n}\nverdocs-templates-list .template-placeholder {\n  height: 48px;\n  -ms-flex: 0 0 48px;\n  flex: 0 0 48px;\n  margin: 5px 0;\n  border-radius: 5px;\n  background: #f5f5fa;\n}\nverdocs-templates-list .template {\n  width: 100%;\n  margin: 2px 0;\n  border: 1px solid #ffffff;\n  background: #ffffff;\n}\nverdocs-templates-list .template:hover {\n  cursor: pointer;\n  background: #ededff;\n  border: 1px solid #a7a7f5;\n}\nverdocs-templates-list .template .inner {\n  gap: 12px;\n  display: -ms-flexbox;\n  display: flex;\n  padding: 8px 14px;\n  border-radius: 5px;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  -ms-flex-align: center;\n  align-items: center;\n  container-type: inline-size;\n}\nverdocs-templates-list .template .inner svg {\n  width: 24px;\n  height: 24px;\n}\nverdocs-templates-list .name {\n  -ms-flex: 1;\n  flex: 1;\n  display: -ms-flexbox;\n  display: flex;\n  color: black;\n  font-size: 16px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n@media screen and (max-width: 1300px) {\n  verdocs-templates-list .name {\n    font-size: 16px;\n  }\n}\nverdocs-templates-list .spacer {\n  margin: 0;\n  height: 30px;\n  -ms-flex: 0 0 1px;\n  flex: 0 0 1px;\n  display: -ms-flexbox;\n  display: flex;\n  border-right: 1px solid #dad8dd;\n}\n@media screen and (max-width: 800px) {\n  verdocs-templates-list .spacer {\n    display: none;\n  }\n}\nverdocs-templates-list .empty-text {\n  font-size: 20px;\n  text-align: center;\n  margin: 16px 0 0 0;\n  padding: 80px 80px;\n  border: 2px solid #ccc;\n}\nverdocs-templates-list .usage,\nverdocs-templates-list .ownership,\nverdocs-templates-list .last-used {\n  gap: 10px;\n  color: #444;\n  display: -ms-flexbox;\n  display: flex;\n  font-size: 16px;\n  margin: 0 0 0 10px;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nverdocs-templates-list .usage span,\nverdocs-templates-list .usage svg,\nverdocs-templates-list .ownership span,\nverdocs-templates-list .ownership svg,\nverdocs-templates-list .last-used span,\nverdocs-templates-list .last-used svg {\n  width: 24px;\n  height: 24px;\n}\nverdocs-templates-list .usage span,\nverdocs-templates-list .ownership span,\nverdocs-templates-list .last-used span {\n  display: block;\n}\n@media screen and (max-width: 700px) {\n  verdocs-templates-list verdocs-template-star {\n    display: none;\n  }\n}\nverdocs-templates-list .ownership {\n  -ms-flex: 0 0 100px;\n  flex: 0 0 100px;\n}\n@media screen and (max-width: 700px) {\n  verdocs-templates-list .ownership {\n    display: none;\n  }\n}\nverdocs-templates-list .last-used {\n  -ms-flex: 0 0 130px;\n  flex: 0 0 130px;\n}\nverdocs-templates-list .usage {\n  -ms-flex: 0 0 60px;\n  flex: 0 0 60px;\n}\nverdocs-templates-list .header-row {\n  display: none;\n}\nverdocs-templates-list table {\n  container-type: size;\n  max-width: 100%;\n  overflow: hidden;\n  table-layout: fixed;\n}\nverdocs-templates-list .data-row {\n  cursor: pointer;\n  background: #ededff;\n  border: 1px solid #a7a7f5;\n}\nverdocs-templates-list .data-col svg {\n  width: 24px;\n  height: 24px;\n}\nverdocs-templates-list .col-name {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n@container (max-width:700 px) {\n  verdocs-templates-list verdocs-templates-list .col-starred {\n    display: none;\n  }\n}";
 const VerdocsTemplatesListStyle0 = verdocsTemplatesListCss;
@@ -159,24 +159,24 @@ const VerdocsTemplatesList = class {
         // 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 (index.h(index.Host, { key: '7dc672029a1ec88a20c7ea019bdd80bd98b4e54d' }, index.h("div", { key: 'feb106c393aa87d7e4207679a3823fb5ceb0f8d0', class: "header" }, index.h("div", { key: 'c53a7346d4c485fda35c4ebe960e1e76c8a58d81', class: "filter" }, index.h("verdocs-text-input", { key: 'ba16ba49cce33494d5379751378061a2ed838762', 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 (index.h(index.Host, { key: '898a88f10e4db5a0478c10370b9560e9ec2d2e25' }, index.h("div", { key: 'c4c2a4a0bff5ab4ca103377ae08d376b0951f9b6', class: "header" }, index.h("div", { key: '20f158444d4b919126800d546a54834128f7a44d', class: "filter" }, index.h("verdocs-text-input", { key: 'dbe2cbff9289957b4fd1ab37664d8c465502fb2e', 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);
-            } })), index.h("verdocs-quick-filter", { key: '2854a34cb955ed1e330234eac3303c1dbf90dff0', label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
+            } })), index.h("verdocs-quick-filter", { key: '5fde3481a06af0d8fb407754178762d03dbeb2f2', 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);
-            } }), index.h("verdocs-quick-filter", { key: 'db872856578e8961bfce82e6ee3a8161100fff51', label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
+            } }), index.h("verdocs-quick-filter", { key: 'a712ec2f941b30700b8fc8becd6e97d7be1311e2', 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);
-            } }), index.h("verdocs-quick-filter", { key: '7ff37f6760a422c30426247434f75f61c1403773', label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
+            } }), index.h("verdocs-quick-filter", { key: '593d4b27e4939583864c799b77a7b3a81c99b2f0', 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 && index.h("verdocs-spinner", { key: '5f957818a90efacab9f67e0a672bde9da0cc5fba', mode: "dark", size: 24 }), index.h("div", { key: '8c2cf92c197f2c76e9a2586eda4377042d851537', style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
+            } }), this.loading && index.h("verdocs-spinner", { key: '6ee3d50355dabbd44a89b38f8239470a18ac9fa8', mode: "dark", size: 24 }), index.h("div", { key: 'd7601f4897a5322d0bd09e579c54de2a183fd622', 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 = [];
@@ -223,9 +223,9 @@ const VerdocsTemplatesList = class {
                     var _a;
                     (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template });
                 } }, index.h("div", { class: "inner" }, index.h("verdocs-template-star", { template: template, endpoint: this.endpoint }), index.h("div", { class: "spacer icon-spacer" }), index.h("div", { class: "name" }, template.name), index.h("div", { class: "spacer usage-spacer" }), index.h("div", { class: "usage" }, index.h("span", { innerHTML: EnvelopeIcon, title: "Usage Counter" }), template.counter || '--'), index.h("div", { class: "spacer last-used-spacer" }), index.h("div", { class: "last-used" }, dateToShow === 'created_at' && index.h("span", { innerHTML: CreatedIcon, title: "Created" }), dateToShow === 'updated_at' && index.h("span", { innerHTML: UpdatedIcon, title: "Last Updated" }), dateToShow === 'last_used_at' && index.h("span", { innerHTML: LastUsedIcon, title: "Last Used" }), date ? format.format(new Date(date), 'P') : 'Never'), index.h("div", { class: "spacer ownership-spacer" }), template.is_public && (index.h("div", { class: "ownership" }, index.h("span", { innerHTML: GlobeAltIcon }), " Public")), !template.is_public && !template.is_personal && (index.h("div", { class: "ownership" }, index.h("span", { innerHTML: LockClosedIcon }), " Private")), !template.is_public && template.is_personal && (index.h("div", { class: "ownership" }, index.h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), index.h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, template) }))));
-        }), !this.initiallyLoaded && (index.h("div", { key: '47313a9255707d50181d0211425c60085fa5583a' }, jsSdk.integerSequence(0, this.rowsPerPage).map(() => (index.h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && index.h("div", { key: '9bb8a3dd1a35a0c742284b8bb9c8bd4f03b19680', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.length && this.showPagination ? (index.h("div", { style: { marginTop: '20px' } }, index.h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
+        }), !this.initiallyLoaded && (index.h("div", { key: '8a712cf07d27722804ffa0984e2860b07e148e96' }, jsSdk.integerSequence(0, this.rowsPerPage).map(() => (index.h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && index.h("div", { key: '41d59dffca16ffcfe601a06ac85d85534b02a415', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.length && this.showPagination ? (index.h("div", { style: { marginTop: '20px' } }, index.h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
                 this.selectedPage = e.detail.selectedPage;
-            } }))) : (index.h("div", null)), this.confirmDelete && (index.h("verdocs-ok-dialog", { key: 'dc67ae619c47deca58789f3495813b78d6c90070', heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
+            } }))) : (index.h("div", null)), this.confirmDelete && (index.h("verdocs-ok-dialog", { key: '8a42405881f456dac853d2bb382277e4c7e7f0b7', 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/cjs/verdocs-toggle.cjs.entry.js

@@ -19,7 +19,7 @@ const VerdocsToggle = class {
         this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
     }
     render() {
-        return (index.h("div", { key: 'ce82d507e5ec506aa85dca4c21b3ee78c751a7ea', class: "container" }, index.h("span", { key: 'b099fdab13ec8c866be39c1f0d8f81e5fe8360ef', class: "label" }, `${this.options.label}:`), index.h("div", { key: 'bbd49091a1c7c4cd0c1088bf0efb76a4476895f5', class: "buttons" }, this.options.buttons.map((button, index$1) => (index.h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index$1 === this.selectedOption ? 'selected' : '', onClick: () => {
+        return (index.h("div", { key: '57246a93e1421d288f52be821a6d848a6ead44d6', class: "container" }, index.h("span", { key: '310c86cf81c8d5cb205c0f54727e91c44137c490', class: "label" }, `${this.options.label}:`), index.h("div", { key: '724c1d20ae6d81756b1b2f26bfbe4fa22fb7387d', class: "buttons" }, this.options.buttons.map((button, index$1) => (index.h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index$1 === this.selectedOption ? 'selected' : '', onClick: () => {
                 console.log('clicked', index$1);
                 this.selectedOption = index$1;
             } }))))));