@verdocs/web-sdk 4.2.56 → 4.2.58

package/dist/esm/verdocs-envelope-recipient-link_2.entry.js

@@ -84,7 +84,8 @@ const VerdocsEnvelopeRecipientLink = class {
         }
         // const recipientsWithActions = getRecipientsWithActions(this.store.state); const showLinkButton = recipientCanAct(recipient, recipientsWithActions); const link =
         //   this.links[recipient.role_name]; const gettingLink = this.gettingLinks[recipient.role_name]; return (
-        return (h(Host, null, h("div", { class: "summary-content" }, h("h1", { class: "summary-title" }, "In-Person Signing Link"), h("div", { class: "summary-rows" }, h("div", { class: "summary-recipient" }, h("div", { class: "role-name" }, this.recipient.role_name), h("div", { class: "role-details" }, h("div", { class: "role-info" }, h("div", { class: "role-full-name" }, this.recipient.full_name, " (", this.recipient.email || this.recipient.phone, ")"), !this.link && (h("verdocs-button", { size: "small", variant: "outline", label: this.gettingLink ? 'Loading...' : 'Get Link', disabled: this.gettingLink, onClick: () => this.getLink(this.recipient) }))), this.link && (h("div", { class: "link-wrapper" }, h("div", { class: "link" }, this.link), h("verdocs-button", { size: "small", variant: "outline", label: "Copy", onClick: () => this.copyLink(this.link) })))))), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", label: "Done", onClick: e => this.handleDone(e) })))));
+        const fullName = `${this.recipient.first_name || ''} ${this.recipient.last_name || ''}`.trim() || this.recipient.full_name || '';
+        return (h(Host, null, h("div", { class: "summary-content" }, h("h1", { class: "summary-title" }, "In-Person Signing Link"), h("div", { class: "summary-rows" }, h("div", { class: "summary-recipient" }, h("div", { class: "role-name" }, this.recipient.role_name), h("div", { class: "role-details" }, h("div", { class: "role-info" }, h("div", { class: "role-full-name" }, fullName, " (", this.recipient.email || this.recipient.phone, ")"), !this.link && (h("verdocs-button", { size: "small", variant: "outline", label: this.gettingLink ? 'Loading...' : 'Get Link', disabled: this.gettingLink, onClick: () => this.getLink(this.recipient) }))), this.link && (h("div", { class: "link-wrapper" }, h("div", { class: "link" }, this.link), h("verdocs-button", { size: "small", variant: "outline", label: "Copy", onClick: () => this.copyLink(this.link) })))))), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", label: "Done", onClick: e => this.handleDone(e) })))));
     }
 };
 VerdocsEnvelopeRecipientLink.style = VerdocsEnvelopeRecipientLinkStyle0;
@@ -193,7 +194,8 @@ const VerdocsEnvelopeRecipientSummary = class {
             const showLinkButton = recipientCanAct(recipient, recipientsWithActions);
             const link = this.links[recipient.role_name];
             const gettingLink = this.gettingLinks[recipient.role_name];
-            return (h("div", { class: "summary-recipient" }, h("div", { class: "role-name" }, recipient.role_name), h("div", { class: "role-details" }, h("div", { class: "role-info" }, h("div", { class: "role-full-name" }, recipient.full_name, " (", recipient.email || recipient.phone, ")"), showLinkButton && !link && h("verdocs-button", { size: "small", variant: "outline", label: "Get Link", disabled: gettingLink, onClick: () => this.getLink(recipient) })), link && (h("div", { class: "link-wrapper" }, h("div", { class: "link" }, link), h("verdocs-button", { size: "small", variant: "outline", label: "Copy", onClick: () => this.copyLink(link) }))))));
+            const fullName = `${recipient.first_name || ''} ${recipient.last_name || ''}`.trim() || recipient.full_name || '';
+            return (h("div", { class: "summary-recipient" }, h("div", { class: "role-name" }, recipient.role_name), h("div", { class: "role-details" }, h("div", { class: "role-info" }, h("div", { class: "role-full-name" }, fullName, " (", recipient.email || recipient.phone, ")"), showLinkButton && !link && h("verdocs-button", { size: "small", variant: "outline", label: "Get Link", disabled: gettingLink, onClick: () => this.getLink(recipient) })), link && (h("div", { class: "link-wrapper" }, h("div", { class: "link" }, link), h("verdocs-button", { size: "small", variant: "outline", label: "Copy", onClick: () => this.copyLink(link) }))))));
         })), (this.canSendAnother || this.canView || this.canDone) && (h("div", { class: "buttons" }, this.canSendAnother && h("verdocs-button", { size: "small", label: "Send Another", onClick: e => this.handleAnother(e) }), this.canView && h("verdocs-button", { size: "small", label: "View Now", onClick: e => this.handleView(e) }), this.canDone && h("verdocs-button", { size: "small", label: "Done", onClick: e => this.handleDone(e) }))))));
     }
 };

package/dist/esm/verdocs-envelope-sidebar.entry.js

@@ -4,7 +4,7 @@ import { g as getEnvelopeStore } from './EnvelopeStore-712b9ca3.js';
 import { F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
-import { d as dateFns } from './index-5b8ab2d2.js';
+import { d as dateFns } from './index-0329eed3.js';
 import './index-e58b15f6.js';
 import './index-7588a071.js';
 
@@ -150,77 +150,77 @@ const VerdocsEnvelopeSidebar = class {
         }
         histories.forEach(history => {
             var _a;
-            const user = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.recipients.find(recipient => recipient.role_name === history.role_name);
-            const name = (user === null || user === void 0 ? void 0 : user.full_name) || '';
+            const recipient = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.recipients.find(recipient => recipient.role_name === history.role_name);
+            const fullName = `${recipient.first_name || ''} ${recipient.last_name || ''}`.trim() || recipient.full_name || '';
             switch (history.event.toLowerCase()) {
                 case 'recipient:signed':
-                    entries.push({ icon: 'gesture', message: `Signed by ${name}.`, date: new Date(history.created_at) });
+                    entries.push({ icon: 'gesture', message: `Signed by ${fullName}.`, date: new Date(history.created_at) });
                     break;
                 case 'recipient:declined':
-                    entries.push({ icon: 'clear', message: `Declined by ${name}.`, date: new Date(history.created_at) });
+                    entries.push({ icon: 'clear', message: `Declined by ${fullName}.`, date: new Date(history.created_at) });
                     break;
                 case 'recipient:opened':
                     switch (history.event_detail) {
                         // TODO: Sync these up with reality
                         case 'email':
                         case 'mail':
-                            entries.push({ icon: 'visibility', message: `Opened by ${name}, via email.`, date: new Date(history.created_at) });
+                            entries.push({ icon: 'visibility', message: `Opened by ${fullName}, via email.`, date: new Date(history.created_at) });
                             break;
                         case 'sms':
-                            entries.push({ icon: 'visibility', message: `Opened by ${name}, via SMS.`, date: new Date(history.created_at) });
+                            entries.push({ icon: 'visibility', message: `Opened by ${fullName}, via SMS.`, date: new Date(history.created_at) });
                             break;
                         case 'in_person_link':
-                            entries.push({ icon: 'visibility', message: `Opened by ${name}, via In-person link.`, date: new Date(history.created_at) });
+                            entries.push({ icon: 'visibility', message: `Opened by ${fullName}, via In-person link.`, date: new Date(history.created_at) });
                             break;
                         case 'in_app':
-                            entries.push({ icon: 'visibility', message: `Opened by ${name}, via dashboard.`, date: new Date(history.created_at) });
+                            entries.push({ icon: 'visibility', message: `Opened by ${fullName}, via dashboard.`, date: new Date(history.created_at) });
                             break;
                         default:
-                            entries.push({ icon: 'visibility', message: `Opened by ${name}.`, date: new Date(history.created_at) });
+                            entries.push({ icon: 'visibility', message: `Opened by ${fullName}.`, date: new Date(history.created_at) });
                     }
                     break;
                 case 'recipient:submitted':
                     switch (history.event_detail) {
                         // TODO: Sync up
                         case 'approver':
-                            entries.push({ icon: 'check_circle', message: `Approved by ${name}.`, date: new Date(history.created_at) });
+                            entries.push({ icon: 'check_circle', message: `Approved by ${fullName}.`, date: new Date(history.created_at) });
                             break;
                         default:
-                            entries.push({ icon: 'send', message: `Submitted by ${name}.`, date: new Date(history.created_at) });
+                            entries.push({ icon: 'send', message: `Submitted by ${fullName}.`, date: new Date(history.created_at) });
                             break;
                     }
                     break;
                 case 'recipient:prepared':
-                    entries.push({ icon: 'send', message: `Prepared by ${name}.`, date: new Date(history.created_at) });
+                    entries.push({ icon: 'send', message: `Prepared by ${fullName}.`, date: new Date(history.created_at) });
                     break;
                 case 'recipient:claimed':
                     if (history.event_detail === 'guest') {
-                        entries.push({ icon: 'account_circle', message: `${name} claimed the Verdoc as a guest.`, date: new Date(history.created_at) });
+                        entries.push({ icon: 'account_circle', message: `${fullName} claimed the Verdoc as a guest.`, date: new Date(history.created_at) });
                     }
                     else if (history.event_detail === 'profile') {
-                        entries.push({ icon: 'verified_user', message: `${name} claimed the Verdoc as a verified user.`, date: new Date(history.created_at) });
+                        entries.push({ icon: 'verified_user', message: `${fullName} claimed the Verdoc as a verified user.`, date: new Date(history.created_at) });
                     }
                     break;
                 case 'recipient:agreed':
-                    entries.push({ icon: 'done', message: `${name} agreed to use electronic records and signatures.`, date: new Date(history.created_at) });
+                    entries.push({ icon: 'done', message: `${fullName} agreed to use electronic records and signatures.`, date: new Date(history.created_at) });
                     break;
                 case 'recipient:invited':
                     if (history.event_detail === 'sms') {
-                        entries.push({ icon: 'textsms', message: `${name} has been invited via SMS.`, date: new Date(history.created_at) });
+                        entries.push({ icon: 'textsms', message: `${fullName} has been invited via SMS.`, date: new Date(history.created_at) });
                     }
                     else {
-                        entries.push({ icon: 'mail', message: `${name} has been invited via email.`, date: new Date(history.created_at) });
+                        entries.push({ icon: 'mail', message: `${fullName} has been invited via email.`, date: new Date(history.created_at) });
                     }
                     break;
                 case 'invitation:resent':
                     entries.push({
                         icon: 'mail',
-                        message: `Invitation was resent to ${name} ${history.event_detail === 'reminder' ? ' by reminder' : ''}.`,
+                        message: `Invitation was resent to ${fullName} ${history.event_detail === 'reminder' ? ' by reminder' : ''}.`,
                         date: new Date(history.created_at),
                     });
                     break;
                 case 'envelope:cc':
-                    entries.push({ icon: 'contact_mail', message: `A copy has been sent to ${name}.`, date: new Date(history.created_at) });
+                    entries.push({ icon: 'contact_mail', message: `A copy has been sent to ${fullName}.`, date: new Date(history.created_at) });
                     break;
                 case 'recipient:delegated':
                     entries.push({ icon: 'people', message: history.event_detail, date: new Date(history.created_at) });
@@ -242,7 +242,7 @@ const VerdocsEnvelopeSidebar = class {
                     entries.push({ icon: 'cancel', message: `Envelope was canceled by the creator.`, date: new Date(history.created_at) });
                     break;
                 case 'owner:get_in_person_link':
-                    entries.push({ icon: 'link', message: `Owner accessed the In-person link for ${user}.`, date: new Date(history.created_at) });
+                    entries.push({ icon: 'link', message: `Owner accessed the In-person link for ${recipient}.`, date: new Date(history.created_at) });
                     break;
                 default:
                     console.log('[SIDEBAR] Unknown history type', history);
@@ -271,13 +271,14 @@ const VerdocsEnvelopeSidebar = class {
             _0.recipients.map((recipient, index) => {
                 const canGetInPersonLink = recipient.status !== 'submitted' && recipient.status !== 'canceled' && recipient.status !== 'declined';
                 const canSendReminder = this.canResendRecipient(recipient);
+                const fullName = `${recipient.first_name || ''} ${recipient.last_name || ''}`.trim() || recipient.full_name || '';
                 return (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.role_name), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && !functionsDisabled && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
                         { id: 'reminder', label: 'Send Reminder', disabled: !canSendReminder },
                         { id: 'inperson', label: 'Get In-Person Link', disabled: !canGetInPersonLink },
                         // {id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient)},
                         // TODO: Details dialog
                         // {id:'details',label: 'View Details'},
-                    ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))));
+                    ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, fullName), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))));
             }), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Verdoc", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, dateFns.format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
                 var _a;
                 this.showManageDialog = false;

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

@@ -1,11 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-3476681c.js';
 import { VerdocsEndpoint, getEnvelopes, integerSequence, getRecipientsWithActions, userCanCancelEnvelope, userCanAct, cancelEnvelope } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './utils-c9afd888.js';
+import { s as saveEnvelopesAsZip } from './utils-467fcc6a.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-e4a6eba5.js';
-import './index-5b8ab2d2.js';
+import './index-0329eed3.js';
 
 const verdocsEnvelopesListCss = "@-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-envelopes-list{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}@media screen and (max-width: 800px){verdocs-envelopes-list{font-size:14px}}verdocs-envelopes-list .envelope-placeholder{height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin:5px 0;border-radius:5px;background:#f5f5fa}verdocs-envelopes-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .header .filter{width:300px}verdocs-envelopes-list .header verdocs-text-input{margin:0}verdocs-envelopes-list .header verdocs-text-input input{height:32px}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0;background:#ffffff}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#f5f5fa}verdocs-envelopes-list .envelope .inner{gap:12px;display:-ms-flexbox;display:flex;padding:8px 14px;border-radius:5px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;container-type:inline-size}verdocs-envelopes-list .envelope .inner svg{width:24px;height:24px}verdocs-envelopes-list .vert-spacer{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;border-right:1px solid #dad8dd}@media screen and (max-width: 800px){verdocs-envelopes-list .vert-spacer{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list .envelope-icon{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-checkbox{display:none}}verdocs-envelopes-list .last-modified{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 180px;flex:0 0 180px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;white-space:nowrap}@media screen and (max-width: 800px){verdocs-envelopes-list .last-modified{display:none}}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;line-height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .envelope-recipients{color:#4b5563;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .empty-text{text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-envelopes-list .containing{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-status-indicator{font-size:14px}}";
 const VerdocsEnvelopesListStyle0 = verdocsEnvelopesListCss;
@@ -226,7 +226,7 @@ const VerdocsEnvelopesList = class {
                     else {
                         this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
                     }
-                } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon, class: "envelope-icon" }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
+                } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon, class: "envelope-icon" }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0", ' ', h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => `${r.first_name || ''} ${r.last_name || ''}`.trim() || r.full_name || '').join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
                     var _a, _b;
                     switch (e.detail.id) {
                         case 'view':
@@ -248,7 +248,7 @@ const VerdocsEnvelopesList = class {
                             break;
                     }
                 } }))));
-        }), !this.initiallyLoaded && (h("div", { key: '61a9e69c17606600ecce9926286a019a4bd3f6e2', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '8b351e5c629ef3d4610a56b26f0eb264f7b4e6ff', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.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: 'fcea4e8de649f7e811adfd2465e3ec59b5d14289', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '9f69370d4263290168b89d746c8d9adf25ea87fb', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.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))));
     }

package/dist/esm/verdocs-field-attachment_13.entry.js

@@ -6,8 +6,8 @@ import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStor
 import { S as SettingsIcon } from './Icons-faf0377f.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-bdec4bbd.js';
 import { a as FORMAT_DATE, F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';
-import { d as dateFns } from './index-5b8ab2d2.js';
-import { n as format } from './format-4fde138a.js';
+import { d as dateFns } from './index-0329eed3.js';
+import { n as format } from './format-2bf71189.js';
 import './index-e58b15f6.js';
 
 const verdocsFieldAttachmentCss = "@-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-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-attachment svg{width:16px;height:16px}verdocs-field-attachment.disabled svg{opacity:0.5}verdocs-field-attachment.disabled svg span{cursor:inherit}verdocs-field-attachment .attach{cursor:inherit;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-field-attachment.required .attach{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}";
@@ -799,7 +799,7 @@ const VerdocsFieldTextbox = class {
         interact.dynamicDrop(true);
         if (this.editable) {
             interact(this.el).resizable({
-                edges: { top: true, bottom: true, left: true, right: true },
+                edges: { top: true, bottom: false, left: true, right: true },
                 modifiers: [
                     interact.modifiers.restrictSize({
                         min: { width: 30, height: 15 },

package/dist/esm/verdocs-organization-card_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, c as createEvent } from './index-3476681c.js';
-import { d as dateFns } from './index-5b8ab2d2.js';
-import { t as toDate, c as constructFrom, a as constants$1, d as differenceInCalendarDays, s as startOfISOWeekYear, g as getISOWeekYear, b as startOfDay, i as isValid, e as startOfISOWeek, f as getTimezoneOffsetInMilliseconds, h as startOfWeek, j as startOfYear, k as defaultOptions, l as defaultLocale, m as addLeadingZeros, n as format, o as getWeekYear, p as getWeek, q as getISOWeek, r as longFormatters, u as protectedTokens, v as lightFormatters, w as startOfWeekYear, x as getDayOfYear, y as isDate } from './format-4fde138a.js';
+import { d as dateFns } from './index-0329eed3.js';
+import { t as toDate, c as constructFrom, a as constants$1, d as differenceInCalendarDays, s as startOfISOWeekYear, g as getISOWeekYear, b as startOfDay, i as isValid, e as startOfISOWeek, f as getTimezoneOffsetInMilliseconds, h as startOfWeek, j as startOfYear, k as defaultOptions, l as defaultLocale, m as addLeadingZeros, n as format, o as getWeekYear, p as getWeek, q as getISOWeek, r as longFormatters, u as protectedTokens, v as lightFormatters, w as startOfWeekYear, x as getDayOfYear, y as isDate } from './format-2bf71189.js';
 
 var add$1 = {};
 

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

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3476681c.js';
 import { integerSequence } from '@verdocs/js-sdk';
-import { h as renderedTextWidth } from './utils-c9afd888.js';
+import { h as renderedTextWidth } from './utils-467fcc6a.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-e4a6eba5.js';
-import './index-5b8ab2d2.js';
+import './index-0329eed3.js';
 
 const verdocsPaginationCss = "@-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-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}";
 const VerdocsPaginationStyle0 = verdocsPaginationCss;

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

@@ -6,9 +6,9 @@ import { g as getTemplateStore } from './TemplateStore-ebd8f5f6.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon$1, b as PageCountIcon, T as TrashIcon } from './Icons-faf0377f.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
-import { d as dateFns } from './index-5b8ab2d2.js';
+import { d as dateFns } from './index-0329eed3.js';
 import { i as interact } from './interact.min-a71beb3d.js';
-import { b as updateCssTransform, c as removeCssTransform, g as getFieldId, d as defaultWidth, e as defaultHeight } from './utils-c9afd888.js';
+import { b as updateCssTransform, c as removeCssTransform, g as getFieldId, d as defaultWidth, e as defaultHeight } from './utils-467fcc6a.js';
 import './index-e58b15f6.js';
 import './index-7588a071.js';
 import './_commonjsHelpers-bdec4bbd.js';
@@ -132,7 +132,8 @@ const VerdocsSend = class {
                     this.sessionContacts = [];
                     this.sessionContacts.push({
                         id: profile.id,
-                        name: `${profile.first_name} ${profile.last_name}`,
+                        first_name: profile.first_name,
+                        last_name: profile.last_name,
                         email: profile.email,
                         phone: profile.phone,
                     });
@@ -181,9 +182,9 @@ const VerdocsSend = class {
             const level = role.sequence - 1;
             rolesAtLevel[level] || (rolesAtLevel[level] = []);
             const id = `r-${level}-${rolesAtLevel[level].length}`;
-            rolesAtLevel[level].push({ ...role, id, role_name: role.name, first_name: '', last_name: '' });
-            if (role.full_name && (role.email || role.phone)) {
-                this.rolesCompleted[id] = { ...role, id, role_name: role.name, first_name: '', last_name: '' };
+            rolesAtLevel[level].push({ ...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name });
+            if (role.first_name && (role.email || role.phone)) {
+                this.rolesCompleted[id] = { ...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name };
             }
         });
     }
@@ -221,6 +222,7 @@ const VerdocsSend = class {
         }
     }
     handleSelectContact(e, role) {
+        console.log('selc', e.detail);
         e.preventDefault();
         this.rolesCompleted[role.id] = { ...role, ...e.detail };
         this.showPickerForId = '';
@@ -285,7 +287,7 @@ const VerdocsSend = class {
             var _a, _b, _c, _d, _e, _f;
             const unknown = !role.email;
             const elId = `verdocs-send-recipient-${role.role_name}`;
-            return unknown ? (h("div", { class: "recipient", "data-ri": getRoleIndex(this.roleStore, role.role_name), "data-rn": role.role_name, style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
+            return unknown ? (h("div", { class: "recipient", "data-ri": getRoleIndex(this.roleStore, role.role_name), "data-rn": role.role_name, style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) !== null && _b !== void 0 ? _b : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.first_name) !== null && _e !== void 0 ? _e : role.first_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
         })))), h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
     }
     static get watchers() { return {
@@ -1318,7 +1320,9 @@ const VerdocsTemplateRoles = class {
             sequence,
             message: '',
             order,
-            full_name: '',
+            full_name: null,
+            first_name: '',
+            last_name: '',
             email: '',
             phone: '',
             type: 'signer',
@@ -1363,7 +1367,8 @@ const VerdocsTemplateRoles = class {
         console.log('Rendering', roleNames, sequences);
         return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[(_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
             const unknown = !role.email;
-            return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
+            console.log('ras', sequence, role);
+            return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.first_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
         }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
                 this.showingRoleDialog = null;
             }, onDelete: async () => {

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

@@ -45,7 +45,8 @@ const VerdocsTemplateRoleProperties = class {
         this.saving = false;
         this.name = '';
         this.type = 'signer';
-        this.full_name = '';
+        this.first_name = '';
+        this.last_name = '';
         this.email = '';
         this.phone = '';
         this.delegator = false;
@@ -64,18 +65,13 @@ const VerdocsTemplateRoleProperties = class {
             }
             this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
             this.fieldStore = getTemplateFieldStore(this.templateId);
-            // FIXME: This was createTemplateRoleStore, which it didn't have to be. But that shouldn't break anything,
-            //  and using create() will reload the roles from the TEMPLATE, not the server. Creating/deleting roles
-            //  isn't updating the template, so if you add a role and then pop this dialog the store will be reloaded
-            //  without the newly-added role in place causing the dialog (and future role edits) to break. We should
-            //  a) when creating/updating/deleting roles, update the template/store not just the roles, and b) review
-            //  and confirm that all things that look at roles are mapped to the role store, not the template.
             this.roleStore = getTemplateRoleStore(this.templateId);
             const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
             if (editingRole) {
                 this.name = editingRole.name;
                 this.type = editingRole.type;
-                this.full_name = editingRole.full_name;
+                this.first_name = editingRole.first_name;
+                this.last_name = editingRole.last_name;
                 this.email = editingRole.email;
                 this.phone = editingRole.phone;
                 this.delegator = editingRole.delegator;
@@ -94,7 +90,8 @@ const VerdocsTemplateRoleProperties = class {
         if (editingRole) {
             this.name = editingRole.name;
             this.type = editingRole.type;
-            this.full_name = editingRole.full_name;
+            this.first_name = editingRole.first_name;
+            this.last_name = editingRole.last_name;
             this.email = editingRole.email;
             this.phone = editingRole.phone;
             this.delegator = editingRole.delegator;
@@ -108,7 +105,8 @@ const VerdocsTemplateRoleProperties = class {
         updateTemplateRole(this.endpoint, this.templateId, this.roleName, {
             name: this.name,
             type: this.type,
-            full_name: this.full_name,
+            first_name: this.first_name,
+            last_name: this.last_name,
             email: this.email,
             phone: this.phone,
             delegator: this.delegator,
@@ -142,31 +140,34 @@ const VerdocsTemplateRoleProperties = class {
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (h(Host, { key: '3edd035c5d69b95c4cad1232b444513f1dbee44d' }, h("div", { key: '19aa33d7ba14d1034cb69d6cfeeb6506cf53a8e5', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: '2012d47d29d0bb7b5efc2c733792eb0fd0e51aed', class: "dialog" }, h("form", { key: 'bdbdd0be3c27ccf69c9303ae42585dd2c3e9fbc9', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: 'dee4b0337c8f1d065118b033ae4dfffce2251802', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (h(Host, { key: '446fc361d36870bf7f6bdfcfb813037ba8066e3f' }, h("div", { key: 'aa0c18d50efe53ffb09df9a68c7362d5377ac0cb', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: '7ff81072a30e3ea52d6016578e9267f0eb3030f7', class: "dialog" }, h("form", { key: '4f6a1edbf94b5373ff6fb576ba0c4651aacb0292', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: 'a146c853e81467503fbe778f8501878ac9270475', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
                 ? 'This role has fields assigned and can no longer be renamed.'
                 : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), h("div", { key: 'efdf8894739903c3f5fe8fb3eb039a5457cdf0bc', class: "row" }, h("div", { key: 'd2c85a2ca439758268704ced18dd7dbe76ffec69', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '343c54e4cde6b4cf540bb17a5190d1527e9528fc', value: this.type, options: [
+            } }), h("div", { key: 'eb3f826aabcc520b9dd96b7aa551b1705ed28657', class: "row" }, h("div", { key: 'e327959efc08f9698a54aa8fa00b407dbf419b05', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: 'bb37591e1dc0cd438067331a17e8ad8a748d237e', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-help-icon", { key: '6cc61871b2f417f0bf0d226c42e8fc3645841c5c', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: 'e151052eb861e97d4609bc3b4d41edc17c235822', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
-                this.full_name = e.target.value;
+            } }), h("verdocs-help-icon", { key: 'bdbe5e238bc66245bc831bef4dd05e5233e264de', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: '51b6bf958457eeeac73c8f1b6b969b28e21398af', 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;
-            } }), h("verdocs-text-input", { key: '5e7c0e612d73cfb3510ccfbcaa9af6e3ebe3c383', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: '4a2d6fcd8eb34e4b36480cec4b4b01b28df68126', 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;
+            } }), h("verdocs-text-input", { key: 'e3c39363a61870605c2ddfc11cc6b4200f7ed18d', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-text-input", { key: 'c3b395d1207358018e1b3168923b156c535f64e5', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: '221e6c33a231192f5052e8e5a19698430a0d2fdd', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }), h("div", { key: '9be759a4b006161944a3c64f88e0ec485442a498', class: "row" }, h("div", { key: '54736c623644013ec6f2920231c449f77f06b339', class: "input-label" }, "May Delegate:"), h("div", { key: '7a29cfa733029fb261399b675cde3bf757400810', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '35730144cecf76fd4d26737cac98fbceee559f8e', checked: this.delegator, onInput: (e) => {
+            } }), h("div", { key: 'e16a35b56433ad45f3a38755b2e7a24d8b53f9a1', class: "row" }, h("div", { key: 'e19e5538651cc16687c502cfbe17d30abe843f64', class: "input-label" }, "May Delegate:"), h("div", { key: '44ca712eec2c45195003059838910443f9542e58', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '5e88249d935ea1fd4deb7ab3d53c08655d87fce9', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), h("verdocs-help-icon", { key: 'fb8d8aa0d555b6fa0a747dbbcf38b0078622e864', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '4323af3ee35e76d3774c58b0831b989a815825eb', class: "buttons" }, h("button", { key: '5efaefcae1c438a70186d752c336790e5b3ca448', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'c2db70468bec1d73264ee5da8d83b9d0ee453bb6', style: { flex: '1' } }), h("verdocs-button", { key: '826e2694e1ec1f7a24b5f3174d0e1da079b0b10b', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '5bc64b65627615fbe543c42a619a98be9cb85ac7', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), h("verdocs-help-icon", { key: 'b7f12517079d993dc619f4abfae454507fe1aefb', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '04ab4e88fc2ecb74b8db91fbc43ef3e2ab9ac292', class: "buttons" }, h("button", { key: '3ac6e0de3f50216624c06aa52bba6c57847a1f52', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'e8e1c40859fd8902a32324a907960730e1da42d6', style: { flex: '1' } }), h("verdocs-button", { key: '1640057293784c41239faeba6deedf76f487c8be', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'a87cba644f418a7edae4b0d64ef7f88c7bfaf5bb', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
 };
 VerdocsTemplateRoleProperties.style = VerdocsTemplateRolePropertiesStyle0;
@@ -233,7 +234,7 @@ const VerdocsTemplateSender = class {
         });
     }
     render() {
-        return (h(Host, { key: 'b75d6f485ee4892b06723565b636e99934686734' }, h("div", { key: '571f2e8c2929d4c1613b81140b8f6bb6b3fef77c', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '5f367024e582f014eeeb8034e4584bd3ac2ba376', class: "dialog" }, h("div", { key: 'e56f16c943a49f75540d765001fb28478dec78df', class: "options" }, h("div", { key: '4f30c70e38c2a4c7da5ed36d2837419a9b4382f5', class: "option" }, h("verdocs-radio-button", { key: '5df0f864a7686e294f4d263fa15aaca7d76f23a7', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '193f9bacb11df6ee7ea8fce20352e8120d0ec9a2', class: "description" }, h("div", { key: 'b364415369c8926ba915ffc3509e022253564b3f', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '9f49f7abc5f0f83d3fe06eede0189d7f1afdc57f', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: '6f6a173447a264dc20b6fc42ce3431937f5a676f', class: "option" }, h("verdocs-radio-button", { key: 'ff8c0f0853bbc22917888e889322debdd6f43dcf', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: '294cd0ad0eefcd67312bde25f1e84b03d31a78ae', class: "description" }, h("div", { key: '1df07d5a0e436cb52e5aaab5df9e42737e979098', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: '804ba6375f4b5cb6e073455a090b15311fcb47d4', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: '7d95c56de1c94d1265ae1f34d9cae248b5b3677d', class: "option" }, h("verdocs-radio-button", { key: 'aede61f03827eb862be042c454c43e8adb162ab2', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: '3a6262cd830d04f9998c354a8de77672f846502e', class: "description" }, h("div", { key: '38e6ca2fde7d7e5eb1690335c94a30b07b8c2962', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: 'ccfb7459079de7bcdcd2bae2109ff6ba052a0ecd', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: 'd69133422e538a470c61e8a7bb1f36e43bb2cddd', class: "option" }, h("verdocs-radio-button", { key: '1b7cae03a6195c382476c855a6c7dcaa21c637aa', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: 'd1eb1bb2c1fb37e6662f4181745f803052d03d11', class: "description" }, h("div", { key: 'e9a3252ea21a19b9bef476ed1f50703e0abf791d', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: '999706b170134d8fd9ff8b92b7d9e5defb2f323b', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: '636e4f3c82d3ccc1059bc42bc3a0d2e6c1bb8963', class: "option" }, h("verdocs-radio-button", { key: '699a6a1d47b96c67095b7c5c2d183c14dab06543', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: 'afa65902411976df46efa7b7fd934b86f167d269', class: "description" }, h("div", { key: '928b69772bfb2ede80b88a90d76094d331987c94', class: "name" }, "Me"), h("verdocs-help-icon", { key: '8edfcdd374311e55e59e91b1158ae4159fc25fc2', text: "Only I can use this template." })))), h("div", { key: 'c89ffcba333565428c0a1a8de8a1c047af448d1a', class: "buttons" }, h("verdocs-button", { key: 'd46f0eec71c778e53ae811ef0f1fce5d4b3bb71c', label: "Close", onClick: () => this.handleClose() }))))));
+        return (h(Host, { key: '9e9ef64cde93a41755f5ef65c83fc4b1bb9ee01b' }, h("div", { key: 'a61e16463bb714f638183e5c8c345949c79628d1', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '6a05996d6b580d4ddbe8cc572a564aa4fdd88816', class: "dialog" }, h("div", { key: 'e756c920bff6d5ee85ac5fdc6e8eb2f7e1a3f0b5', class: "options" }, h("div", { key: '6d982838a3f40ca4102766a0c3baa68a08d71306', class: "option" }, h("verdocs-radio-button", { key: '2a818db6d423fc7853001b929b32397851fd4d03', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '528abe8e247f25b2604a1c416cd5c2c750a9c91e', class: "description" }, h("div", { key: '36c2f98411689f5cbde72126d40d4977f88f30d5', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: 'da8f47ff1109354760cb4d4c108915344047fa72', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: '2bb6c38c70166847282fb84156db0e82d3b4b7ed', class: "option" }, h("verdocs-radio-button", { key: 'b32b4ebaad9cea2e326e64b14a146d77ce9ac688', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: '4bc7df2433d7c910810c10b4dec2a2def1f65872', class: "description" }, h("div", { key: '2a519c9e9445483b2d42acc5a84f64c29f201698', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: '595192635e702c82b30b10a0dc01f6645c124cf7', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: '7043b0d4cfa7d496c8ed74aa48367092b71dac1a', class: "option" }, h("verdocs-radio-button", { key: 'a140410593b31efdd671143f3f8ae9d879169610', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: 'bc6fe482b77823d369d02015878c651e52b861fb', class: "description" }, h("div", { key: '540eeecb14a47a5a243974ecfd1d3d747808686a', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: '7268b0f914c9eaef3767ed2aad0cd21d824b0639', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: 'dbff363f43edd13ab98744a90a54343a2cd884ef', class: "option" }, h("verdocs-radio-button", { key: 'e0cf3a3d06064b4e14bd85f3993fb4aa6e48b578', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: 'e1f2a4d7700cf4f9a647cdd5004ae82c7e082e39', class: "description" }, h("div", { key: 'ccbb7eae66fabd9f148c860c0fee51cbfdaecedb', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: '8180a0a23de8d6c1e027db40bd18ed99c9ebd6af', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: '1ef46894cb6b02701c6ae3598758bebefa0675d1', class: "option" }, h("verdocs-radio-button", { key: '36c97de57f438532068f9f132ece7c3d122e08e7', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: '2bfa370b704ea584184fa5fe87178dcef1b90353', class: "description" }, h("div", { key: '436064827af589be38206212c23e9dfdba8f5e30', class: "name" }, "Me"), h("verdocs-help-icon", { key: 'a7be4de3d89bba37f2d8711725165d885b5fc20a', text: "Only I can use this template." })))), h("div", { key: '7e232f0c77b522a9a4cee610eceee784d89aff00', class: "buttons" }, h("verdocs-button", { key: '350d156285cfe7f595deed97112715c1398bf740', label: "Close", onClick: () => this.handleClose() }))))));
     }
 };
 VerdocsTemplateSender.style = VerdocsTemplateSenderStyle0;

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-3476681c.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-c9afd888.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils-467fcc6a.js';
 import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore-002f3d4c.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-e4a6eba5.js';
-import './index-5b8ab2d2.js';
+import './index-0329eed3.js';
 import './index-e58b15f6.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}";
@@ -401,7 +401,7 @@ const VerdocsSign = class {
         }
     }
     attachFieldAttributes(pageInfo, field, el) {
-        var _a;
+        var _a, _b, _c;
         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
@@ -429,8 +429,9 @@ const VerdocsSign = class {
         el.setAttribute('page', pageInfo.pageNumber);
         el.setAttribute('xScale', pageInfo.xScale);
         el.setAttribute('yScale', pageInfo.yScale);
-        el.setAttribute('initials', this.recipient ? fullNameToInitials(this.recipient.full_name) : '');
-        el.setAttribute('name', ((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.full_name) || '');
+        const fullName = `${((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.first_name) || ''} ${((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.last_name) || ''}`.trim() || ((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.full_name) || '';
+        el.setAttribute('initials', fullNameToInitials(fullName));
+        el.setAttribute('name', fullName);
     }
     handlePageRendered(e) {
         const pageInfo = e.detail;

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

@@ -7026,8 +7026,7 @@ const VerdocsStatusIndicator = class {
                 const leftOffset = ENTRY_PADDING / 2 + leftoverSpace / 2;
                 recipients.forEach((recipient, index) => {
                     var _a;
-                    const [first, last] = (recipient.full_name || 'Unknown').toUpperCase().split(' ');
-                    const name = `${first} ${last === null || last === void 0 ? void 0 : last.substring(0, 1)}`;
+                    const name = `${recipient.first_name || ''} ${recipient.last_name || (''.substring(0, 1))}`;
                     const entity = {
                         id: recipient.id,
                         text: name,
@@ -7189,11 +7188,11 @@ const VerdocsStatusIndicator = class {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (h(Host, { key: '16612687bb40047d888f35071a017956c670dfa7', 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: '94fb6a69e0c386c1261756e7d56006e6d8adcf58', 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: 'b2d8a3e8916a42773129dfe1e751fec203a8e87e', class: "icon", innerHTML: icon }), h("span", { key: 'c8312f756bfc95da805faf269f583e2b840c6e56', class: "content" }, statusMessage), h("div", { key: '0517fb3aeba6908cf05f517c64fd8e8878c2d0ec', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '2de4e11a3b809b549a96f78e393ef9c95f3a3021', 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: '18a63e9450c3541ee21761956abdadcb35f89c37', class: "icon", innerHTML: icon }), h("span", { key: '165b82636651f16261eb9ee4aba00592630cbb28', class: "content" }, statusMessage), h("div", { key: '32dec0a7c5f48c432e41928fa7f64acaa2530b6f', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '6964d9ab9b96149cc8207a5a38433442512df0a2', 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-template-document-page_2.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-3476681c.js';
 import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk';
 import { g as getTemplateFieldStore } from './TemplateFieldStore-002f3d4c.js';
-import { t as throttle, i as getControlStyles, g as getFieldId } from './utils-c9afd888.js';
+import { t as throttle, i as getControlStyles, g as getFieldId } from './utils-467fcc6a.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
 import './index-e58b15f6.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-e4a6eba5.js';
-import './index-5b8ab2d2.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;

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

@@ -42,7 +42,7 @@ const VerdocsTemplateStar = class {
         });
     }
     render() {
-        return (h(Host, { key: '42bac1aa4c8efb6c88d46f3fe17742a1137eff94' }, h("div", { key: '54e66f392f1b267088c9334e9651cff284488637', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '57cf9dfff4afab77f2e65c5df2f271874b88e625', class: "count" }, this.template.star_counter || '--')));
+        return (h(Host, { key: '02bbcc99ccb3fbce1d8bad4b2ff5b7fabee24132' }, h("div", { key: '4bfa868d8709b6b0d4f673635973b3ec94a1880c', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '0b5bf70bf88058ad49fd587be937ce2d61052858', class: "count" }, this.template.star_counter || '--')));
     }
 };
 VerdocsTemplateStar.style = VerdocsTemplateStarStyle0;