@verdocs/web-sdk 4.2.57 → 4.2.58

package/dist/collection/components/templates/verdocs-template-sender/verdocs-template-sender.js

@@ -61,7 +61,7 @@ export class VerdocsTemplateSender {
         });
     }
     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() }))))));
     }
     static get is() { return "verdocs-template-sender"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-star/verdocs-template-star.js

@@ -38,7 +38,7 @@ export class VerdocsTemplateStar {
         });
     }
     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 || '--')));
     }
     static get is() { return "verdocs-template-star"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class VerdocsTemplateTags {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5ae49ef85eb1b1e92695101f551ca08e9fb1ea39' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
+        return (h(Host, { key: 'b365b82377eea90c414fe742dd023306abcf7393' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
     }
     static get is() { return "verdocs-template-tags"; }
     static get originalStyleUrls() {

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

@@ -328,7 +328,7 @@ export class VerdocsTemplatesList {
                     "references": {
                         "TAllowedTemplateAction": {
                             "location": "local",
-                            "path": "/Users/chad/projects/verdocs/a2/web-sdk/verdocs-web-sdk/src/components/templates/verdocs-templates-list/verdocs-templates-list.tsx",
+                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/templates/verdocs-templates-list/verdocs-templates-list.tsx",
                             "id": "src/components/templates/verdocs-templates-list/verdocs-templates-list.tsx::TAllowedTemplateAction"
                         }
                     }

package/dist/components/verdocs-contact-picker2.js

@@ -44,7 +44,8 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
     componentWillLoad() {
         if (this.templateRole) {
             // TODO: For backwards compatibility, may be removed once templateRole no longer has a full_name
-            const nameComponents = (this.templateRole.full_name || '').split(' ');
+            const fullName = `${this.templateRole.first_name || ''} ${this.templateRole.last_name || ''}`.trim() || this.templateRole.full_name || '';
+            const nameComponents = fullName.split(' ');
             const firstName = this.templateRole.first_name || nameComponents.shift() || '';
             const lastName = this.templateRole.last_name || nameComponents.join(' ') || '';
             this.first_name = firstName;
@@ -110,24 +111,24 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        return (h("form", { key: '8af5dbd2e066184e5bcafaa8ce88607b3c45eb3c', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '866df17f478ea88eebd4066b37dbc2633e9a3125', class: "row" }, h("label", { key: 'e9218a81ae6c5b14ce3eb6362b5b2a32de918e25', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: '655c9a8bfca059dc3e0a3cedf2a59138d255248f', class: "names-row" }, h("input", { key: '6f2451ab980513e7fb840b2e2c3f3a51a6fc2bfb', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: '187fc2767904dd61a853786c2571c4a9bf6a5377', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: '4bea4ff52a5824336f769aa71fd9d07357f9bcc4', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+        return (h("form", { key: 'eaf9f3ce3f5d435a0fc2ff9b2ee10275c5bb65d4', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '16041c43395714ac4853849149b9ef09ed8b3a8b', class: "row" }, h("label", { key: 'd25085f7277cd11de5dafa15f628a983f35bbb93', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: '64863ec682dc90555992f99c3d23cb297e72a335', class: "names-row" }, h("input", { key: 'b3f70dd283ddddeb3a003e53430a5bb155882022', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: '8567b897b4ff2241e896d9b1fc18bd376dfb3ba7', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: 'e1b968a478ba6c5e8683dd47b33febdf179b8cc8', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
             var _a;
             return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : h("div", { class: "avatar", innerHTML: placeholderIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        })))), h("div", { key: '11be90948242134e109d1e2d0bc8ed99abbcbf76', class: "row" }, h("label", { key: '06745e80fb6cac8f7f94a13dd03cb88bcf9176bf', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '41f636a6b44ca22d7f7766f7034cf6c7eab95a64', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '4af9e4f820a6a2d0a3daf9264797b193718122a8', class: "row" }, h("label", { key: '1c35261e9941adbc584e03fcd26f1c85d3c594b1', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'e7b0010c8047785f7ccdf1c5b69114a79077baf5', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: '6f0a224dbf3ee2a269f4e9506dbe4d570bcd7fbf', class: "row" }, h("div", { key: '64dbfdec97ba55010a44dd7e8504b1457be8e852', class: "label-with-icon" }, h("label", { key: '33fe672a3ba66fc3dc95d1fcf6694c3ee0e73785' }, "KBA:"), h("verdocs-help-icon", { key: 'f42c59f44000a76b6dd5b457f966bdb72f0fdc99', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), h("verdocs-select-input", { key: '89d90d77187246062073084c38ab16fd6388bc9a', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+        })))), h("div", { key: 'a10b105c1b4b39f555dca754570624ee4cf1fa3a', class: "row" }, h("label", { key: 'c17158644af04aed1f57ad9592a1c86ce839b304', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '31de4d700141c32dc073d9842f111f0f5d087869', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '178f5e239279e98c5f7e7b8e7d74e01b029cd575', class: "row" }, h("label", { key: 'be1381774c82ec9ac1d34bfd0fed8b09703ef722', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '20bbeee5c02793a302324ce1c3da3ba0423a886d', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: '2114ba18ca47e1ddb3a0242862a3a7a489f9cac3', class: "row" }, h("div", { key: '8805ad508c881764373dc0b2731d09f7d64ed51f', class: "label-with-icon" }, h("label", { key: '7f8aa6458dfe937e7b17b98ca5ea8457bd13d330' }, "KBA:"), h("verdocs-help-icon", { key: 'b5d979a6799f47760c6f4b7caecbbcf04f4be07d', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), h("verdocs-select-input", { key: 'a8074ec42c02edffb9141f0efab39d55c88f84a8', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
                 { label: 'None', value: '' },
                 { label: 'PIN Code', value: 'pin' },
                 { label: 'Full Verification', value: 'kba' },
-            ] }), this.kbaMethod === 'pin' && (h("input", { key: 'e53128bbc3732379e0bf98e8ae70151e55b2ff64', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: '5ff8d72b8da46eb6adbf712bd87571613b7b5d81', class: "row" }, h("label", { key: '8f18c67eb9bb51dc138da21068c1d05bd714e5fc', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: '9c0d81f831335a1a712d097c57e79fdd3b901465', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: 'fda4e846bddb572c9a8baa7cd009bdb2ff6c5814', class: "buttons" }, h("verdocs-toggle-button", { key: 'faf34cacb6a7f21d98d266113e230e58c3673a72', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+            ] }), this.kbaMethod === 'pin' && (h("input", { key: '2bf19c40e5b2e1a4fb13002b78719cef04d9a80c', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: '422e5484637d0d8bb5c75135440e749c8d61762c', class: "row" }, h("label", { key: '14a30145cbfe95e9506e6158653043ad514ebfcc', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: '6f185da10b418d83924be637c8761656c57ee9d5', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '1783766a39890c1df677e64e64a43d8a2b2acf70', class: "buttons" }, h("verdocs-toggle-button", { key: '6728bee193c128e218d1e672915cc90e3563ef61', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
                 this.showKba = e.detail.active;
                 if (!e.detail.active) {
                     this.pinCode = '';
                     this.kbaMethod = '';
                 }
                 this.showSuggestions = false;
-            } }), h("verdocs-toggle-button", { key: 'c7790cc8c9beb9ad8f3e69dfe62436fe9365463e', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: 'a981d7f6385fbfcfb1de11a9a228080bd7480650', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: '0c12444bf7ce9bbaa2ddac54f2d219b9b86157a4', class: "flex-fill" }), h("verdocs-button", { key: '3f7f3356cfd19f407ea7fcb8c2e8e641b69bf03a', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '598bff5040b18bb4eff4e35b848b7a99fe536953', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), h("div", { key: 'ec7885eb818035917f71cc100d6316896c0c435b', class: "flex-fill" }), h("verdocs-button", { key: 'edfe1ae05b3bc87b2bc86b61f768e56ad70b5c7f', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'ab7405721d454dbb4db3e936cf36337e60f2051f', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
     }
     static get style() { return VerdocsContactPickerStyle0; }
 }, [0, "verdocs-contact-picker", {

package/dist/components/verdocs-envelope-recipient-link2.js

@@ -84,7 +84,8 @@ const VerdocsEnvelopeRecipientLink = /*@__PURE__*/ proxyCustomElement(class Verd
         }
         // 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) })))));
     }
     static get style() { return VerdocsEnvelopeRecipientLinkStyle0; }
 }, [0, "verdocs-envelope-recipient-link", {

package/dist/components/verdocs-envelope-recipient-summary2.js

@@ -109,7 +109,8 @@ const VerdocsEnvelopeRecipientSummary = /*@__PURE__*/ proxyCustomElement(class V
             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) }))))));
     }
     static get style() { return VerdocsEnvelopeRecipientSummaryStyle0; }

package/dist/components/verdocs-envelope-sidebar.js

@@ -154,77 +154,77 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
         }
         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) });
@@ -246,7 +246,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
                     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);
@@ -275,13 +275,14 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
             _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/components/verdocs-envelopes-list.js

@@ -233,7 +233,7 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsEnv
                     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':
@@ -255,7 +255,7 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsEnv
                             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/components/verdocs-send2.js

@@ -54,7 +54,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
                     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,
                     });
@@ -103,9 +104,9 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
             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 };
             }
         });
     }
@@ -143,6 +144,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         }
     }
     handleSelectContact(e, role) {
+        console.log('selc', e.detail);
         e.preventDefault();
         this.rolesCompleted[role.id] = { ...role, ...e.detail };
         this.showPickerForId = '';
@@ -207,7 +209,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
             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 {

package/dist/components/verdocs-sign.js

@@ -405,7 +405,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         }
     }
     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
@@ -433,8 +433,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         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/components/verdocs-status-indicator2.js

@@ -7027,8 +7027,7 @@ const VerdocsStatusIndicator = /*@__PURE__*/ proxyCustomElement(class VerdocsSta
                 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,
@@ -7190,11 +7189,11 @@ const VerdocsStatusIndicator = /*@__PURE__*/ proxyCustomElement(class VerdocsSta
         }
         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` } }))))));
     }
     static get style() { return VerdocsStatusIndicatorStyle0; }
 }, [0, "verdocs-status-indicator", {

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

@@ -32,7 +32,8 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
         this.saving = false;
         this.name = '';
         this.type = 'signer';
-        this.full_name = '';
+        this.first_name = '';
+        this.last_name = '';
         this.email = '';
         this.phone = '';
         this.delegator = false;
@@ -51,18 +52,13 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
             }
             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;
@@ -81,7 +77,8 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
         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;
@@ -95,7 +92,8 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
         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,
@@ -129,31 +127,34 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
     }
     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) })))))));
     }
     static get style() { return VerdocsTemplateRolePropertiesStyle0; }
 }, [0, "verdocs-template-role-properties", {
@@ -165,7 +166,8 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
         "saving": [32],
         "name": [32],
         "type": [32],
-        "full_name": [32],
+        "first_name": [32],
+        "last_name": [32],
         "email": [32],
         "phone": [32],
         "delegator": [32]

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

@@ -220,7 +220,9 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class VerdocsTempl
             sequence,
             message: '',
             order,
-            full_name: '',
+            full_name: null,
+            first_name: '',
+            last_name: '',
             email: '',
             phone: '',
             type: 'signer',
@@ -265,7 +267,8 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class VerdocsTempl
         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 () => {