@verdocs/web-sdk 4.0.9 → 4.1.2

package/dist/esm/verdocs-settings-api-keys_4.entry.js

@@ -4,7 +4,7 @@ import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import { d as dateFns } from './index-0329eed3.js';
 import { z } from './index-7456b04f.js';
-import { i as convertToE164 } from './utils-61c1093b.js';
+import { i as convertToE164 } from './utils-d1c95309.js';
 import './Types-e4a6eba5.js';
 
 const verdocsSettingsApiKeysCss = "@-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-settings-api-keys{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-settings-api-keys .table{margin:12px 0}verdocs-settings-api-keys .data-col div{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-settings-api-keys .data-col svg{width:24px;height:24px}verdocs-settings-api-keys .col-name svg,verdocs-settings-api-keys .col-client_id svg,verdocs-settings-api-keys .col-profile_id svg{fill:#a1a1aa}verdocs-settings-api-keys .col-actions svg{fill:#ffffff;stroke:#a1a1aa}verdocs-settings-api-keys .col-actions svg:hover{cursor:pointer;stroke:red}verdocs-settings-api-keys .col-actions>div{-ms-flex-pack:center;justify-content:center}verdocs-settings-api-keys .header-col.col-actions{text-align:center}verdocs-settings-api-keys verdocs-dialog p{font-size:16px;line-height:18px;margin:0 0 1em 0}@media all and (max-width: 450px){verdocs-settings-api-keys .col-client_id,verdocs-settings-api-keys .col-actions{display:none}}";
@@ -41,7 +41,7 @@ const VerdocsSettingsApiKeys = class {
     }
     async componentDidLoad() {
         this.newApiKeyProfileId = this.endpoint.session.profile_id;
-        getOrganizationMembers(this.endpoint, this.endpoint.session.organization_id)
+        getOrganizationMembers(this.endpoint)
             .then(mem => {
             this.members = mem;
         })
@@ -54,7 +54,7 @@ const VerdocsSettingsApiKeys = class {
         this.loadKeys();
     }
     loadKeys() {
-        getApiKeys(this.endpoint, this.endpoint.session.organization_id)
+        getApiKeys(this.endpoint)
             .then(r => {
             this.keys = r;
         })
@@ -66,7 +66,7 @@ const VerdocsSettingsApiKeys = class {
         });
     }
     async handleDeleteKey() {
-        deleteApiKey(this.endpoint, this.deletingKey.organization_id, this.deletingKey.client_id)
+        deleteApiKey(this.endpoint, this.deletingKey.client_id)
             .then(() => {
             this.deletingKey = null;
             VerdocsToast('API key deleted', { style: 'success' });
@@ -81,7 +81,7 @@ const VerdocsSettingsApiKeys = class {
         });
     }
     async handleRotateKey() {
-        rotateApiKey(this.endpoint, this.rotatingKey.organization_id, this.rotatingKey.client_id)
+        rotateApiKey(this.endpoint, this.rotatingKey.client_id)
             .then(r => {
             this.rotatingKey = null;
             VerdocsToast('API key rotated', { style: 'success' });
@@ -98,7 +98,7 @@ const VerdocsSettingsApiKeys = class {
     }
     async handleCreateKey() {
         // TODO: Add permission dropdown
-        createApiKey(this.endpoint, this.endpoint.session.organization_id, { permission: 'personal', name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
+        createApiKey(this.endpoint, { permission: 'personal', name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
             .then(r => {
             this.creatingKey = false;
             this.createdKey = r;
@@ -214,11 +214,7 @@ const VerdocsSettingsMembers = class {
     async loadMembers() {
         var _a, _b, _c;
         try {
-            const [members, invites] = await Promise.all([
-                // getRoles(this.endpoint),
-                getOrganizationMembers(this.endpoint, this.endpoint.session.organization_id),
-                getOrganizationInvitations(this.endpoint, this.endpoint.session.organization_id),
-            ]);
+            const [members, invites] = await Promise.all([getOrganizationMembers(this.endpoint), getOrganizationInvitations(this.endpoint)]);
             this.members = members;
             this.invited = invites;
             this.newRole = 'member';
@@ -230,11 +226,9 @@ const VerdocsSettingsMembers = class {
     }
     async handleInviteMember() {
         this.submitting = true;
-        createOrganizationInvitation(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
+        createOrganizationInvitation(VerdocsEndpoint.getDefault(), {
             email: this.newEmailAddress,
             role: this.newRole,
-            // TODO: Test
-            // organization_id: this.endpoint.session.organization_id,
         })
             .then(r => {
             console.log('[SETTINGS] Invited member', r);
@@ -256,7 +250,7 @@ const VerdocsSettingsMembers = class {
     }
     async handleDeleteMember() {
         this.submitting = true;
-        deleteOrganizationMember(VerdocsEndpoint.getDefault(), this.deletingMember.organization_id, this.deletingMember.email)
+        deleteOrganizationMember(VerdocsEndpoint.getDefault(), this.deletingMember.email)
             .then(() => {
             this.submitting = false;
             this.deletingMember = null;
@@ -272,7 +266,7 @@ const VerdocsSettingsMembers = class {
     }
     async handleDeleteInvitation() {
         this.submitting = true;
-        deleteOrganizationInvitation(VerdocsEndpoint.getDefault(), this.deletingInvitation.organization_id, this.deletingInvitation.email)
+        deleteOrganizationInvitation(VerdocsEndpoint.getDefault(), this.deletingInvitation.email)
             .then(() => {
             this.submitting = false;
             this.deletingInvitation = null;
@@ -288,7 +282,7 @@ const VerdocsSettingsMembers = class {
     }
     async handleResendInvitation() {
         this.submitting = true;
-        resendOrganizationInvitation(VerdocsEndpoint.getDefault(), this.resendingInvitation.organization_id, this.resendingInvitation.email)
+        resendOrganizationInvitation(VerdocsEndpoint.getDefault(), this.resendingInvitation.email)
             .then(() => {
             this.submitting = false;
             this.resendingInvitation = null;
@@ -360,7 +354,6 @@ const VerdocsSettingsOrganization = class {
         this.dirty = false;
         this.submitting = false;
         this.name = '';
-        this.business_name = '';
         this.contact_email = '';
         this.phone = '';
         this.url = '';
@@ -379,7 +372,6 @@ const VerdocsSettingsOrganization = class {
     }
     resetForm(organization) {
         this.name = organization.name;
-        this.business_name = organization.business_name;
         this.contact_email = organization.contact_email;
         this.phone = organization.phone;
         this.url = organization.url;
@@ -391,7 +383,6 @@ const VerdocsSettingsOrganization = class {
         e.stopPropagation();
         updateOrganization(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
             name: this.name,
-            business_name: this.business_name,
             contact_email: this.contact_email,
             phone: this.phone,
             url: this.url,
@@ -407,7 +398,6 @@ const VerdocsSettingsOrganization = class {
     processFields() {
         const validation = schema$1.safeParse({
             name: this.name,
-            business_name: this.business_name,
             contact_email: this.contact_email,
             phone: this.phone,
             url: this.url,
@@ -424,9 +414,6 @@ const VerdocsSettingsOrganization = class {
         return (h(Host, null, h("h1", null, "Organization Profile"), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", { class: "columns" }, h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-organization-name", value: this.name, autocomplete: "off", label: "Name", required: false, disabled: false, placeholder: "Enter your organization's name...", onInput: (e) => (this.name = e.target.value), onFocusout: (e) => {
                 this.name = e.target.value.trim();
                 this.processFields();
-            } }), h("verdocs-text-input", { id: "verdocs-organization-business-name", value: this.business_name, autocomplete: "off", label: "Display Name", placeholder: "The name to display on communications...", onInput: (e) => (this.business_name = e.target.value), onFocusout: (e) => {
-                this.business_name = e.target.value.trim();
-                this.processFields();
             } }), h("verdocs-text-input", { id: "verdocs-organization-url", value: this.url, autocomplete: "off", label: "Web URL", placeholder: "Enter your Web URL...", onInput: (e) => (this.url = e.target.value), onFocusout: (e) => {
                 this.url = e.target.value.trim();
                 this.processFields();

package/dist/esm/verdocs-settings.entry.js

@@ -27,9 +27,8 @@ const VerdocsSettings = class {
         }
     }
     render() {
-        console.log('sess', this.endpoint.session);
         if (!this.endpoint.session) {
-            return (h(Host, null, h("verdocs-loader", null)));
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization"), h("div", { class: `tab ${this.tab === 'members' ? 'active' : ''}`, onClick: () => (this.tab = 'members') }, "Members"), h("div", { class: `tab ${this.tab === 'apikeys' ? 'active' : ''}`, onClick: () => (this.tab = 'apikeys') }, "API Keys")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint }), this.tab === 'members' && h("verdocs-settings-members", { endpoint: this.endpoint }), this.tab === 'apikeys' && h("verdocs-settings-api-keys", { endpoint: this.endpoint })));
     }

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, getSigningSession, getEnvelope, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, envelopeRecipientSubmit, uploadEnvelopeFieldAttachment, fullNameToInitials, integerSequence } from '@verdocs/js-sdk';
-import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils-61c1093b.js';
-import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore-d7516adf.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils-d1c95309.js';
+import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore-32329b5a.js';
 import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './Types-e4a6eba5.js';

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

@@ -12,7 +12,7 @@ const VerdocsQuickFilter = class {
         this.mode = 'light';
     }
     render() {
-        return (h(Host, { key: 'd8e7181efe02d923319257c59da36ae807fcf7a0', style: {
+        return (h(Host, { key: '72538e137a5d5063f0056aab93709a1b2ee4a4c1', style: {
                 width: `${this.size}px`, //
                 height: `${this.size}px`,
                 flex: `0 0 ${this.size}px`,

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

@@ -154,6 +154,9 @@ const globals = {
   window: typeof window === 'undefined' ? null : window,
   document: typeof document === 'undefined' ? null : document
 };
+function getWindow() {
+  return globals.window;
+}
 
 class Base {
   // constructor (node/*, {extensions = []} */) {
@@ -6337,7 +6340,12 @@ function dmove(dx, dy) {
     // e.g. title and other descriptive elements
     try {
       // Get the childs bbox
-      bbox = child.bbox();
+      // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1905039
+      // Because bbox for nested svgs returns the contents bbox in the coordinate space of the svg itself (weird!), we cant use bbox for svgs
+      // Therefore we have to use getBoundingClientRect. But THAT is broken (as explained in the bug).
+      // Funnily enough the broken behavior would work for us but that breaks it in chrome
+      // So we have to replicate the broken behavior of FF by just reading the attributes of the svg itself
+      bbox = child.node instanceof getWindow().SVGSVGElement ? new Box(child.attr(['x', 'y', 'width', 'height'])) : child.bbox();
     } catch (e) {
       return;
     }
@@ -7181,11 +7189,11 @@ const VerdocsStatusIndicator = class {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (h(Host, { key: 'aaaa7b0cc222b74a9fc8b1663ca3ddf9d4580cf6', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (h(Host, { key: '7e17d1f0ebec0898aff25f562fc7d10a4687d9b9', 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) }, h("span", { key: '03baee21425fefa4ce17e3e1998fb60f32310bb0', class: "icon", innerHTML: icon }), h("span", { key: '19b98f1e2cb76a7488bd7400928930d33b1003d0', class: "content" }, statusMessage), h("div", { key: '870dd620390fa1f201ca1b509f0c3bcf513cfa8c', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '7cbe6e3452da0997d2169f2d1024e3d68f891d96', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '6f17422d18876713f28ca8336b59338a3697f906', class: "icon", innerHTML: icon }), h("span", { key: '71b11f70c36bd2be72094f39edc9da893da89a29', class: "content" }, statusMessage), h("div", { key: 'd321e89c2ccf9da54f86c1f93958ccfe62db70e0', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'fb57fbe71ca19de698f8866b8aa1863b512d83b2', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
 };
 VerdocsStatusIndicator.style = VerdocsStatusIndicatorStyle0;

package/dist/esm/verdocs-tabs.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 
-const verdocsTabsCss = "@-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-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#666666;cursor:default}";
+const verdocsTabsCss = "@-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-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#aaaaaa;cursor:default}";
 const VerdocsTabsStyle0 = verdocsTabsCss;
 
 const VerdocsTabs = class {
@@ -15,7 +15,7 @@ const VerdocsTabs = class {
         (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
     }
     render() {
-        return (h(Host, { key: '9ec11ccd4c66cea85db7bd16bade6f7919aa3a9b' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: '1d2591798e0d995eb3f7b8da7f0fb107f171c5b9', class: "flex flex-1" }), h("slot", { key: '236c55b5248128b60b3d023d78d5e6c91ce94c35' }, h("div", { key: '62105d98b32d6cdde640cd6ccb99872d31b0c067' }))));
+        return (h(Host, { key: '0cb3a6e9ab650081ca8185d3803575db2fd6f420' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: 'a6608f5f0590b549849870b597e79679a2fc7641', class: "flex flex-1" }), h("slot", { key: '3b7c759679a8d1ac23e31b9b7dd6007f5be9a26a' }, h("div", { key: '4f6f65746404e6e86cead45704842b70aaca08c4' }))));
     }
 };
 VerdocsTabs.style = VerdocsTabsStyle0;

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

@@ -14,7 +14,7 @@ const VerdocsTemplateCard = class {
     }
     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 }))));
     }
 };
 VerdocsTemplateCard.style = VerdocsTemplateCardStyle0;

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

@@ -0,0 +1,205 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-b89cf6a4.js';
+import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk';
+import { g as getTemplateFieldStore } from './TemplateFieldStore-32329b5a.js';
+import { t as throttle, k as getControlStyles, g as getFieldId, d as getFieldOptionId } from './utils-d1c95309.js';
+import { c as createPopper } from './popper-0fbeff6d.js';
+import './index-296aabaf.js';
+import './Types-e4a6eba5.js';
+import './index-0329eed3.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;
+
+const VerdocsTemplateDocumentPage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageRendered = createEvent(this, "pageRendered", 7);
+        this.fieldStore = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.editable = false;
+        this.disabled = false;
+        this.done = false;
+        this.templateId = '';
+        this.documentId = '';
+        this.pageNumber = 1;
+        this.virtualWidth = 612;
+        this.virtualHeight = 792;
+        this.layers = [{ name: 'page', type: 'canvas' }];
+        this.containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;
+        this.renderedWidth = this.virtualWidth;
+        this.renderedHeight = this.virtualHeight;
+        this.naturalWidth = this.virtualWidth;
+        this.naturalHeight = this.virtualHeight;
+        this.aspectRatio = this.virtualWidth / this.virtualHeight;
+        this.skipFirstNotification = true;
+        this.pageDisplayUri = '';
+        this.xScale = 1;
+        this.yScale = 1;
+    }
+    async componentWillLoad() {
+        this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
+        this.fieldStore = getTemplateFieldStore(this.templateId);
+    }
+    componentDidLoad() {
+        this.resizeObserver = new ResizeObserver(throttle(entries => {
+            for (const entry of entries) {
+                const renderedWidth = entry.contentRect.width;
+                this.renderedWidth = renderedWidth;
+                this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);
+            }
+            this.notifyRenderedSize();
+        }, 100));
+        this.resizeObserver.observe(this.container);
+    }
+    componentDidUpdate() {
+        // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop
+        this.notifyRenderedSize();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
+    // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
+    // componentDidRender() {
+    //   this.notifyRenderedSize();
+    // }
+    notifyRenderedSize() {
+        // We skip one notification because by default we will always get at least two, one when rendering the initial size
+        // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
+        if (this.skipFirstNotification) {
+            this.skipFirstNotification = false;
+            return;
+        }
+        const xScale = this.renderedWidth / this.virtualWidth;
+        if (this.xScale !== xScale) {
+            this.xScale = xScale;
+        }
+        const yScale = this.renderedHeight / this.virtualHeight;
+        if (this.yScale !== yScale) {
+            this.yScale = yScale;
+        }
+        this.pageRendered.emit({
+            // container: this.container,
+            containerId: this.containerId,
+            documentId: this.documentId,
+            pageNumber: this.pageNumber,
+            virtualWidth: this.virtualWidth,
+            virtualHeight: this.virtualHeight,
+            renderedWidth: this.renderedWidth,
+            renderedHeight: this.renderedHeight,
+            naturalWidth: this.naturalWidth,
+            naturalHeight: this.naturalHeight,
+            aspectRatio: this.aspectRatio,
+            xScale,
+            yScale,
+        });
+    }
+    render() {
+        const height = `${this.renderedHeight}px`;
+        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)
+                .map(field => {
+                var _a, _b;
+                const id = getFieldId(field);
+                let { name, type } = field;
+                const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
+                if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
+                    type = 'textarea';
+                }
+                switch (type) {
+                    case 'textbox':
+                        return (h("verdocs-field-textbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'textarea':
+                        return (h("verdocs-field-textarea", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'date':
+                        return (h("verdocs-field-date", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'attachment':
+                        return (h("verdocs-field-attachment", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'dropdown':
+                        return (h("verdocs-field-dropdown", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'initial':
+                        return (h("verdocs-field-initial", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'signature':
+                        return (h("verdocs-field-signature", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+                    case 'timestamp':
+                        return (h("verdocs-field-timestamp", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'checkbox_group':
+                        return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
+                            const id = getFieldOptionId(field, checkboxIndex);
+                            return (h("verdocs-field-checkbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, option: checkboxIndex, style: getControlStyles(field, xScale, yScale, checkboxIndex) }));
+                        });
+                    case 'radio_button_group':
+                        return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
+                            const id = getFieldOptionId(field, checkboxIndex);
+                            return (h("verdocs-field-radio-button", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, option: checkboxIndex, style: getControlStyles(field, xScale, yScale, checkboxIndex) }));
+                        });
+                    default:
+                        return h(Fragment, null, name);
+                }
+            }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
+                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
+                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
+                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
+                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
+                // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
+                // TODO: Store this in the DB with each page.
+                this.naturalWidth = e.target.naturalWidth;
+                this.naturalHeight = e.target.naturalHeight;
+                this.aspectRatio = this.naturalWidth / this.naturalHeight;
+                this.virtualHeight = this.virtualWidth / this.aspectRatio;
+                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
+            } })) : (h("div", null)))));
+    }
+    get container() { return getElement(this); }
+};
+VerdocsTemplateDocumentPage.style = VerdocsTemplateDocumentPageStyle0;
+
+const verdocsToolbarIconCss = "@-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-toolbar-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:20000;white-space:nowrap}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]{padding:3px 10px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-1px}";
+const VerdocsToolbarIconStyle0 = verdocsToolbarIconCss;
+
+const VerdocsToolbarIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.text = '';
+        this.icon = '';
+        this.placement = 'bottom';
+        this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentDidLoad() {
+        this.popperInstance = createPopper(this.iconEl, this.tooltip, {
+            placement: this.placement,
+            modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
+        });
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        // });
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    show() {
+        var _a, _b;
+        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    }
+    hide() {
+        var _a;
+        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    }
+    // handlePress() {
+    //   this.press?.emit();
+    // }
+    render() {
+        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" }))));
+    }
+};
+VerdocsToolbarIcon.style = VerdocsToolbarIconStyle0;
+
+export { VerdocsTemplateDocumentPage as verdocs_template_document_page, VerdocsToolbarIcon as verdocs_toolbar_icon };

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

@@ -42,7 +42,7 @@ const VerdocsTemplateStar = class {
         });
     }
     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 || '--')));
     }
 };
 VerdocsTemplateStar.style = VerdocsTemplateStarStyle0;

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

@@ -10,7 +10,7 @@ const VerdocsTemplateTags = class {
     }
     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)))));
     }
 };
 VerdocsTemplateTags.style = VerdocsTemplateTagsStyle0;

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

@@ -155,24 +155,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 (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 = [];
@@ -219,9 +219,9 @@ const VerdocsTemplatesList = class {
                     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/esm/verdocs-toggle.entry.js

@@ -15,7 +15,7 @@ const VerdocsToggle = class {
         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/esm/verdocs-view.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, throttledGetEnvelope, getDocumentDownloadLink, cancelEnvelope, userCanCancelEnvelope, integerSequence } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './utils-61c1093b.js';
+import { s as saveEnvelopesAsZip } from './utils-d1c95309.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';