@verdocs/web-sdk 4.0.8 → 4.0.9

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

@@ -45,7 +45,7 @@ const VerdocsQuickFilter$1 = class {
         const firstPage = Math.max(0, this.selectedPage - 2);
         const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
         const pagesToDisplay = jsSdk.integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
-        return (index.h(index.Host, { key: 'b8dd66f21bffa468b40674e3ee68fbead0dd300c' }, this.selectedPage > 0 && index.h(PageButton, { key: '0e5b3a90f97ed05f87a56a400404a9168e2dd208', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { key: 'a2e31ffd4452f88b0a8ab88a55f3adae765b5157', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && index.h("div", { key: '9d720bcc6635c8ce891303304d97c82aa9ff9c2d', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { key: '41bf9584d353c5ca15435ac970b89c49215fc6f3', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+        return (index.h(index.Host, { key: '35e9f8dee414ae4addb4a0615d41ac2f877d6185' }, this.selectedPage > 0 && index.h(PageButton, { key: 'e3ccf5d514ed45c2e279b6ace160fa5865132f7d', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { key: '74d1aaa681f9b8f3baafc935758d6dcc723fcdac', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && index.h("div", { key: 'cb5d8461f4a33adffcb2a6df87f6ffcf66d08737', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { key: 'c433baeead865058d66f4aa127a6ce1fcc28f3bc', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -229,12 +229,12 @@ const VerdocsSend = class {
         const roleNames = TemplateRoleStore.getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email) || jsSdk.isValidPhone(recipient.phone));
         const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        return (index.h(index.Host, { key: 'd0bd3f9d7ef226896f095059203280e1c1e71265', class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { key: '1d4fdeda91a23a81bb1c72a4200de76e36ba74c8', class: "recipients" }, index.h("div", { key: '9bb72122ba245dd95c3f2ffb0c1768764c2f2da7', class: "left-line" }), index.h("div", { key: 'c2056047a4bf20612fb83693fcf279a1354c98e0', class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { key: '0220edca79c791bdd561d0ff92cfad3236dd7800', class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+        return (index.h(index.Host, { key: 'ecdc1830949a5a35b092167b201c6feb8284e221', class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { key: '2d8ebba91a5cff228135465c0956848fcc8873b5', class: "recipients" }, index.h("div", { key: '1c72951bfc1e11a1d95c04e005b3fcd8108c39f5', class: "left-line" }), index.h("div", { key: '82834a006584cde2b8020f7f233dfff685e647f2', class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { key: '930ca1cc5b3f93f11f0a38703396538ee90dba5b', class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
             var _a, _b, _c, _d, _e, _f;
             const unknown = !role.email;
             const elId = `verdocs-send-recipient-${role.name}`;
             return unknown ? (index.h("div", { class: "recipient", style: { backgroundColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, 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.name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.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); } }))))) : (index.h("div", { class: "recipient", style: { borderColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, 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, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.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); } })))));
-        })))), index.h("div", { key: '16fba92b62896c3368d54743c9ae5c79b7558f16', class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { key: '0cae926609fc5c2a10387bee716d49c98a8ebcf6', class: "complete" }, "Signing Complete"))), index.h("div", { key: 'f8457f0c451cc70a096e46447395186aca90169f', class: "buttons" }, index.h("verdocs-button", { key: '2be6f8c3cfb4c2ec8c010c4cba79855f20e5461d', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { key: 'b34393a6e3197acd0143161c71a43420f45302be', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", { key: '8e26caa183719e765c771921d365e39ec4916be4' }))));
+        })))), index.h("div", { key: '241118ea059aadb8a6030b5ee5bd4383e88af212', class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { key: '05ba689ac40aaf1543b921b490f8fe4550bad4df', class: "complete" }, "Signing Complete"))), index.h("div", { key: '39c73b0a3310d85dfbd29f2d2fda347d37091e90', class: "buttons" }, index.h("verdocs-button", { key: 'c3d1196a34f1cd4ab654aa07b707372054f26202', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { key: 'd2e16d7a4d97c8888df3e7257296dee6f8db3234', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", { key: 'd8c0a234261d1b77d6343dd7e426c28475dceadf' }))));
     }
 };
 VerdocsSend.style = VerdocsSendStyle0;

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

@@ -24,7 +24,7 @@ const VerdocsQuickFunctions = class {
         this.createDocument.emit();
     }
     render() {
-        return (index.h("div", { key: 'eb5dc623120c7c528a9eb81f3dd4a2cdabdb7238', class: "container" }, index.h("p", { key: '09ab8ebada6eee21819e9152a76199bc86043a91', class: "title" }, "Quick Create"), index.h("button", { key: '9d1d124c64f0b6b7d4adc95a4c637907ad40bdfd', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'e7f2bf2070c45e3266be984c66115615f6578e27', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (index.h("div", { key: 'e7d2ca753e83c18c1ca85aedcbe277db1488ab63', class: "container" }, index.h("p", { key: 'b5e1a9ff78f3fb76eacb96c8168f094f41f8d877', class: "title" }, "Quick Create"), index.h("button", { key: 'ac967b777b02f6d6155798ddd015de9eeafadd6f', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'e36d5ac7e47e8e0d943b3722820fc994e0cad625', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
 };
 VerdocsQuickFunctions.style = VerdocsQuickFunctionsStyle0;

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

@@ -23,7 +23,7 @@ const VerdocsRadioButton = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '9eee43dc3c08fdd5c3dbde1bb167dfa4d57fe4fa', class: { disabled: this.disabled } }, index.h("input", { key: '07a13e1ea2e2fc2aa78f2b830908fa6f96e4963d', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { key: '303f4ed1d9f45123a563c6e12e8eafa03e876ef6', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+        return (index.h(index.Host, { key: '08503221049dbcdb5ad6d8804576bd302437a784', class: { disabled: this.disabled } }, index.h("input", { key: '649115f2c5d916fbec807ab0566ec3352abe6afd', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { key: '597495b414c518d808f241cea9c3c66b0fabdf63', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
     }
 };
 VerdocsRadioButton.style = VerdocsRadioButtonStyle0;
@@ -146,31 +146,31 @@ const VerdocsTemplateRoleProperties = class {
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (index.h(index.Host, { key: 'f26ffe2f3c4cf162dc113e38a57347cf6c426074' }, index.h("div", { key: 'd9c5104918e6cf08b28d70b6278d7493a40d36e5', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: 'b1001937ae574b088c17d2f866296cb10ae8f237', class: "dialog" }, index.h("form", { key: 'd46822f635025195120735636d68a4c0424370f0', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: '6d115e047e1fa310397d52f7873b68301f84ba1f', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (index.h(index.Host, { key: '710e7f0ab8b1ecad6fa29a2872cfa8cd724deabd' }, index.h("div", { key: 'cce8cee42d046c80504e4ae6905cd290334612e6', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: '9d43dd9253210f0682f9cf59835702e3ccde5b4f', class: "dialog" }, index.h("form", { key: 'b532cbc42c82301bbb528b8a3c5112ccad7ae0e4', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: '084af944f9d6c9f3e6fbc562caae052523c755f0', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
                 ? 'This role has fields assigned and can no longer be renamed.'
                 : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), index.h("div", { key: '8a775c7e42acd009e25859726f48e777203304a3', class: "row" }, index.h("div", { key: '284d78cd23689e9c8683cf1f8fe55252ae1070cc', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: 'f996e3e885cd40a3aeff9469d2051fd09dd43274', value: this.type, options: [
+            } }), index.h("div", { key: '2dabe3a2431972036407ec97432809b58ca8f250', class: "row" }, index.h("div", { key: 'fe50813b64830cd68e0c24621aaf72b926aac517', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: '24ba6e3ae5f4fe7c187e7a11e12baaba4caaa094', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-help-icon", { key: 'a320b1084f1a2333638c0e8b17d82efeb0a7bf1a', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), index.h("verdocs-text-input", { key: 'e554caea134e5955f0577397b902c8e6083520bf', 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) => {
+            } }), index.h("verdocs-help-icon", { key: '271c9d72f5b7b7ecb683cd4b0ea0dbfec26d385b', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), index.h("verdocs-text-input", { key: 'cccad696894aeb79f93803c8cc50fa9552a29860', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
                 this.full_name = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: '21aae473dc54ed8cb94adcc1e72fdedf3a3f91d9', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: '5a374e483b87942567a63c39fe9fdef13d460c59', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: 'd5ebf4575a092d3f70570d1a7c419aa90c75c64b', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: '8e9bf75190115c2b856a5a109a82e4fade3d99a7', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }), index.h("div", { key: 'f7aca6f48663383ee649c7e3f11488c6a54f0420', class: "row" }, index.h("div", { key: 'f5304cffb00b6cf7edc92c9f2f9cb4013a8f16e8', class: "input-label" }, "May Delegate:"), index.h("div", { key: '78f6e51ccdfb7cccf4ad4d7c173eb29495ad93a9', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '319258417639cd160e0ad63de3feb413f8d18a9f', checked: this.delegator, onInput: (e) => {
+            } }), index.h("div", { key: '9fd9cb1a91e78154bf1df75cec3b357a464955c5', class: "row" }, index.h("div", { key: '480168f43800400d9572f6018a0d1d60cc56a588', class: "input-label" }, "May Delegate:"), index.h("div", { key: 'e65486b714f0e8917572494c57f1ea316ef73038', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '3c76bfc3d233e09be06e7bf252fd6997b30fc38b', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), index.h("verdocs-help-icon", { key: 'e8614cdde73aac4c52fef105562058a2e34773ee', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '66302c80e7ce3cfb80d71ca9eb798832bbee64cd', class: "buttons" }, index.h("button", { key: '4198669a9355ba0b5065944c4dd28648ba4fd7d2', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: 'f7eccd789c90c1e3e570b54d0a8a3b947a5c5cf1', style: { flex: '1' } }), index.h("verdocs-button", { key: '0ad00a425bd9fc3ef21405c73b0159fc5a8dd13d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '8b11ea5d3f0797775909cb8590aec5a4518637ce', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), index.h("verdocs-help-icon", { key: '99076f70ccdf5a961a7078093e2f3f2ca73b56fb', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '86f63ddbd965d2709269cfeb1f105c69424d3a5c', class: "buttons" }, index.h("button", { key: 'ddde079896635a69dcd10bb82008c1986ed52383', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: 'f4d23743dce9acb5f16c519b569764bb17253944', style: { flex: '1' } }), index.h("verdocs-button", { key: 'fe271dda2a5e9d6a8f0c4ba4199af5ea8f81077d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '38b2986e9e3b784215fcafdf486631f7ebf1361b', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
 };
 VerdocsTemplateRoleProperties.style = VerdocsTemplateRolePropertiesStyle0;
@@ -237,7 +237,7 @@ const VerdocsTemplateSender = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'f68de757047cf08e13ca4b5f33e28c0af48fc216' }, index.h("div", { key: '6d1d7f7fc65b8ec2112dc7c33750cfce5d4f3e8c', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '4d89b066209259145a82549e572b558fc11cf884', class: "dialog" }, index.h("div", { key: 'fe42cd60ee5ed150318152a21db7bd0bfd41bb6f', class: "options" }, index.h("div", { key: '5e6193483c37781365aabccef51a67ff56ff937e', class: "option" }, index.h("verdocs-radio-button", { key: 'ea3ece13bab53d052186194b9708c7a072335103', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '785b66f5cc26579d6caafc85924c5ad7e3966d40', class: "description" }, index.h("div", { key: 'd82d392c83f757ff7f23d5e78bfd68ab97eb0f52', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: '34f2139c6e1f4cf01bb497066fea7000837c3ee9', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '1b20cb65e1ed7bdf317e6af82b5b445f988e98c8', class: "option" }, index.h("verdocs-radio-button", { key: '236a72f8c58ab2a2ad52824c698b8e0367881c3c', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '5e23b141d9d9c126ac2c82ab30bcb279b73d4793', class: "description" }, index.h("div", { key: 'f9b6deeff27abb6ae722cc8b70aa662c400108b7', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: '03982e3624ba4e858fd478e8dc5c8ee0a1b98f3f', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'db8d9acd7b3a06a6f09a5fb03ca8403dc82db00c', class: "option" }, index.h("verdocs-radio-button", { key: 'a12f063f0ff6e06eb5aaff35b815621e5b06d8b3', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: 'acfba148b6c50fac0a3d72a6f46b3a5f144d3986', class: "description" }, index.h("div", { key: '3120e3ed05176dfc34ce482d359274755dcb55dc', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: '0e78f7bc767c863d53ed113c52584252f893ecc4', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: 'ac2f56ad77d0d4aeef9d311e7b44a5c9d19a74c7', class: "option" }, index.h("verdocs-radio-button", { key: '433e69e8fb00ee8676ec46657ad5c19df76ddd6c', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), index.h("div", { key: 'ff50c7fee92e6cce3e488b4a4df2274ada44b11a', class: "description" }, index.h("div", { key: 'de3fd4b8f985e7f348a3743fb7431d4f9ad66598', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: '257a87eb54dbfceb8edbeffca997fe787916ddc8', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), index.h("div", { key: 'f9223854c2616a85d057b7d7208e82ba85413556', class: "option" }, index.h("verdocs-radio-button", { key: 'c74d08475eb3601c21e75916366908c15c652ba8', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: '9af51dd805406c23c9fc081d284d661e16f69f0a', class: "description" }, index.h("div", { key: '16b852696b984473a5dbfc09345dffbc6f3e0a40', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: '104c0ec597a028b30dcc0d6e00a0bcac0433b0c9', text: "Only I can use this template." })))), index.h("div", { key: 'ce8b9f36df6c8beab9305dec9d3acc64f5369d07', class: "buttons" }, index.h("verdocs-button", { key: '722df3e64f41b5c8aee45d66eaa13b33711bba5c', label: "Close", onClick: () => this.handleClose() }))))));
+        return (index.h(index.Host, { key: 'b8ca2ff8bdae1256801c67f7be188f6b3e4c5c33' }, index.h("div", { key: '565b0287142ce32fd1d11b7e344b35b8151b9e93', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '2ece454c0aba99deb418e1ac2035e237a2296a6c', class: "dialog" }, index.h("div", { key: 'cbac2ba10ad6cd63e714019e4311627e7972ae52', class: "options" }, index.h("div", { key: '1ab94e1e5f30089cabb6abf23ee1294663cfa878', class: "option" }, index.h("verdocs-radio-button", { key: 'ae1689ae1a34ff1f9e1ae99917e659c27e2b6731', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '78741f9340debb402dfcca11bf33a19660f7c541', class: "description" }, index.h("div", { key: 'ddee4eaf150cf0989849a2799896a2fd7c401411', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: 'f51b1ba236eb08ebaae5a6171b9d3f8815dfb7c5', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '37095164cf4cfa5030b1d2da04b6add9a572c914', class: "option" }, index.h("verdocs-radio-button", { key: '8e8c8681e992cf00caa314c493afcd5bdb7a0fbe', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '5a94fd99ef10648c5c1f68a91f80c31d1e8f5078', class: "description" }, index.h("div", { key: '9a64f779ebe53499683f5af9ec7bc0218fe66499', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: '64edd79a609173c7399dbc2cce06269f0f7adc15', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'b287986b5282e92153504a328a9273b0fcb81902', class: "option" }, index.h("verdocs-radio-button", { key: '909e26ec66bf5d27014f2ef41c533662f5e2033e', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: '3a42018b36b144feefa5a662e23f852dcd230889', class: "description" }, index.h("div", { key: '071573ff99a6019b9d9ba164c7d6d3123b209510', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: 'ecb0c3cd3f39c92954dd20c94a12c38ce35aa8cb', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: '2515c8c359379c70b7be04b2c50a139b760d777c', class: "option" }, index.h("verdocs-radio-button", { key: 'd5edd7267eb494c73cee3168de5d841c969a22aa', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), index.h("div", { key: '31cbe88f2cc23b74534bb2d51f280a3112827722', class: "description" }, index.h("div", { key: '11160a0c962837e4c4342f46e111fe8ada8ca4d3', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: 'd23472c9393598908dab4ae2a4cba983bafc89e1', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), index.h("div", { key: '128da3cd0259b4d72bd6bca910b932898d9f5f38', class: "option" }, index.h("verdocs-radio-button", { key: '0a65d2f15e37330526bbf384868b4e65a3b7ce5b', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: '6182e6fd82ea55b8e59e175e6413f324657405b5', class: "description" }, index.h("div", { key: '919c6b40c4f171b491b8001c30acca73c6308a86', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: '9aaaa7ad26ec56b5667c1c1ea31ce19f2742c81e', text: "Only I can use this template." })))), index.h("div", { key: '6b7bdc820887b652552d4ad9f08ac5c3f83fc71c', class: "buttons" }, index.h("verdocs-button", { key: 'bcaf3bc67e9de9c62cda7fb6cc1c5ecbfd168d9e', label: "Close", onClick: () => this.handleClose() }))))));
     }
 };
 VerdocsTemplateSender.style = VerdocsTemplateSenderStyle0;

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

@@ -13,7 +13,7 @@ const VerdocsSearchTabs = class {
         this.selected = 'all';
     }
     render() {
-        return index.h("div", { key: 'b4ac2045933155b547df5cde6e4dc72a0af06050' }, "\u00A0");
+        return index.h("div", { key: 'b5bf8a69699b2d55bd2c744dc2c96ec09e185351' }, "\u00A0");
     }
 };
 VerdocsSearchTabs.style = VerdocsSearchTabsStyle0;

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

@@ -14,7 +14,7 @@ const VerdocsSearch = class {
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
     }
     render() {
-        return (index.h("div", { key: '4ebcbcca303725a1114792af29474ec365759850', class: "container" }, index.h("verdocs-search-box", { key: 'b1998f81d2e95d31f71bc1a59b0eb93b2be2347c', endpoint: this.endpoint }), index.h("div", { key: 'a604d97bd63254a5988d110e5e00c91d9bf98466', class: "boxes" }, index.h("verdocs-search-activity", { key: '8ff0e974bdb7d34b78c140b74c69623f5abf3519', type: "recent", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '308c66ef4be9f29d8efbe807fd02f1eaa73b3c59', type: "saved", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: 'f4c067b93ccfaf2ecfd6d40ecdfb194bc7d21c3e', type: "starred", endpoint: this.endpoint }), index.h("verdocs-quick-functions", { key: '589d9f73adad835d739abf4375bd25fdcbfeeb21', endpoint: this.endpoint }))));
+        return (index.h("div", { key: '1bdc73f6b69fdaf197b4d228c36ac28a4de147c8', class: "container" }, index.h("verdocs-search-box", { key: 'd5305d39714c09a83dca8d87282fe3bec40491f0', endpoint: this.endpoint }), index.h("div", { key: '6f333add2936ca54994f0ec4e33023fa2b196b07', class: "boxes" }, index.h("verdocs-search-activity", { key: '2c49e617f5bbb0337a3e48a18b2687478f512847', type: "recent", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '3ee0c69f75e839459c63f33bf24302e3cc277adf', type: "saved", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '1f78fdc2d68b97a24a37ba544bd2d49d49d43b32', type: "starred", endpoint: this.endpoint }), index.h("verdocs-quick-functions", { key: '789f6170d2f7e0b17da045d4c2350c69a7e9588b', endpoint: this.endpoint }))));
     }
 };
 VerdocsSearch.style = VerdocsSearchStyle0;

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

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

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

@@ -7185,11 +7185,11 @@ const VerdocsStatusIndicator = class {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (index.h(index.Host, { key: '4f448a7efa8648f23fa6fca7c1684998c54a2869', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (index.h(index.Host, { key: 'aaaa7b0cc222b74a9fc8b1663ca3ddf9d4580cf6', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, index.h("span", { key: '8849c6dbf2be4339630768f064e76cb660919f15', class: "icon", innerHTML: icon }), index.h("span", { key: 'ae89d44c5b7bc18d1670957097c36ed044645a23', class: "content" }, statusMessage), index.h("div", { key: '65779af7d179cba0d6d685834f4da129472590c0', class: "detail-panel", ref: el => (this.detailPanel = el) }, index.h("div", { key: '9b564f492cdcaa5fdb4b622a0ea32be625f0cd57', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (index.h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, index.h("span", { key: '03baee21425fefa4ce17e3e1998fb60f32310bb0', class: "icon", innerHTML: icon }), index.h("span", { key: '19b98f1e2cb76a7488bd7400928930d33b1003d0', class: "content" }, statusMessage), index.h("div", { key: '870dd620390fa1f201ca1b509f0c3bcf513cfa8c', class: "detail-panel", ref: el => (this.detailPanel = el) }, index.h("div", { key: '7cbe6e3452da0997d2169f2d1024e3d68f891d96', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (index.h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
 };
 VerdocsStatusIndicator.style = VerdocsStatusIndicatorStyle0;

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

@@ -18,7 +18,7 @@ const VerdocsTemplateCard = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '8c1e1c635b1baa655956acdb25c0dadf7aa7fb37' }, index.h("span", { key: '27f70562114c4b477a39d2c592ac970958308b6a', class: "name" }, this.template.name), index.h("span", { key: 'e7d9da9cef9ead160a65a4cee49f030d52b20eb3', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), index.h("hr", { key: 'ae53a4cb7e75c6b2af578e2518b601e742aecfb8' }), index.h("div", { key: 'f493a7d3641fe90d6bf35649664f76b5fc1ee3d3', class: "controls" }, index.h("div", { key: 'f0ef5225ff60e056166eede4ba69d4999c1a9887', class: "control" }, index.h("span", { key: '5f3f45383a81584741ee04b1fce6b4720bab9063', class: "icon", innerHTML: StarIcon }), index.h("span", { key: '9faf96a64292b6529e29186a4bd1e12d9ad3b42b', class: "value" }, this.template.star_counter)), index.h("div", { key: '2b605818b05ddf5ea9c3ac28f1bad3d0c8a3e3fb', class: "control secondary" }, index.h("span", { key: 'c12a8f975614144c72060cf9213a7e8081636602', class: "icon", innerHTML: PagesIcon }), index.h("span", { key: '53dd14ec4e8c0c57bbff3866901d10baa61abc31', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), index.h("div", { key: 'c2e72a02dcb918fe595f2fd7228728bd29b1c816', class: "control secondary" }, index.h("span", { key: '9ed65ee6703d3db204c7f9619884615d3595f9f2', class: "icon", innerHTML: EmailIcon }), index.h("span", { key: '805565cdc082e8d76e2dd2db98aeede1eee9810f', class: "value" }, this.template.counter)), index.h("span", { key: '8914f5b5d9d2395bd60f7fded9d58b4c48f85100', class: "additional-controls", innerHTML: ActionsIcon }))));
+        return (index.h(index.Host, { key: '3ef4b7a60f214bc1b4301f82c4d6c0c43cb31c1c' }, index.h("span", { key: '5da8ee7013a901cfd37bde9319f2efa68d08d6f6', class: "name" }, this.template.name), index.h("span", { key: '0e27a427f7575435bc09e98408cb8ebfd20f2221', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), index.h("hr", { key: '3471951b3a1aae2b6e753f7eaf14bb44b5ec9270' }), index.h("div", { key: 'eb4f5304de241f9e7ff0a558591d1a3caca8b29f', class: "controls" }, index.h("div", { key: '3d913d458116470de9abc5f88234bb4ed57e561e', class: "control" }, index.h("span", { key: '5dbfeb4e3c103b49ce9c6d54b5249af8b5b16086', class: "icon", innerHTML: StarIcon }), index.h("span", { key: 'ca84ade8a0d54ab96bdee35c63b03e34ab893257', class: "value" }, this.template.star_counter)), index.h("div", { key: '01385ff24ea0de2948b3ede9fbf1058f92ab5c7f', class: "control secondary" }, index.h("span", { key: '907331cb5970739199c2b319b18f17f9ce98bb93', class: "icon", innerHTML: PagesIcon }), index.h("span", { key: '9120a25679b0f9bf7a89a77b76f9c253d66df2c9', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), index.h("div", { key: '935459e3076e01cbbd2af34b2515e10722672799', class: "control secondary" }, index.h("span", { key: '1db1cc5176095a2d5646112a1d8aafc66b6e8772', class: "icon", innerHTML: EmailIcon }), index.h("span", { key: 'a66c84bfb81ac9ca2608a2dd35c28a707d3e7956', class: "value" }, this.template.counter)), index.h("span", { key: '0f9a72ba9ccc5c8c68321df12d0fdb489a25e4ac', class: "additional-controls", innerHTML: ActionsIcon }))));
     }
 };
 VerdocsTemplateCard.style = VerdocsTemplateCardStyle0;

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

@@ -46,7 +46,7 @@ const VerdocsTemplateStar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '0bfc2a29037c8753d08852eb5b0d0e7ccae821fc' }, index.h("div", { key: '16441206c390f010d43fddf52df556f503f2309b', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), index.h("div", { key: '0b7ed0bba53a2e243c47195efcb09934d056d479', class: "count" }, this.template.star_counter || '--')));
+        return (index.h(index.Host, { key: 'a3b6ca54b4549954355f9061b871489243432da7' }, index.h("div", { key: 'abcfec7a6fb4d928b3bc7080cbe49eb299cb56f9', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), index.h("div", { key: 'a36087cb85065e3cf888ec8c8ef6fa88f4b3a2e9', class: "count" }, this.template.star_counter || '--')));
     }
 };
 VerdocsTemplateStar.style = VerdocsTemplateStarStyle0;

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

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

package/dist/cjs/verdocs-toolbar-icon.cjs.entry.js

@@ -44,7 +44,7 @@ const VerdocsToolbarIcon = class {
     //   this.press?.emit();
     // }
     render() {
-        return (index.h(index.Host, { key: 'c12c9e2593bf281d5c0ce60ebffebf974a4a1afb', class: {} }, index.h("div", { key: '7c03bd3e40eed4fa9966afe926cdc4c490d5a6d7', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), index.h("div", { key: 'd757834d1be057de971a7bcbb47158c9c2182907', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { key: '0a9e2615fa20a0625b929173dd2705be5165c39a', "data-popper-arrow": "true", class: "arrow" }))));
+        return (index.h(index.Host, { key: 'f9c2c8bd293559e5e504b69cbc445ca813f134a2', class: {} }, index.h("div", { key: 'e5d497d4859e8bd61364f56f8c452c61ece75a76', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), index.h("div", { key: 'ebb1c0fa2cd8b58eba9d5057fc965ead53c23059', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { key: 'df0d03fbeeeb3016dde67f6d8bf8f75c5a97105c', "data-popper-arrow": "true", class: "arrow" }))));
     }
 };
 VerdocsToolbarIcon.style = VerdocsToolbarIconStyle0;

package/dist/collection/components/controls/verdocs-button/verdocs-button.js

@@ -1,4 +1,11 @@
 import { h } from "@stencil/core";
+/**
+ * A simple button
+ *
+ * ```jsx
+ * <verdocs-button label="Click Me" />
+ * ```
+ */
 export class VerdocsButton {
     constructor() {
         this.label = undefined;
@@ -10,7 +17,7 @@ export class VerdocsButton {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '813ea229dd512708d1b1c0fe87cf7462cb2276b7', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'd1ca3189f5513bbe13eeda50aa0dc27a03f67480', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (h("button", { key: '92cd9d2b91cd0c950ae687af05496c2edc095e95', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: '916c32a365115a8e4c1eaeb9a641acf376ff3f1c', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
     static get is() { return "verdocs-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js

@@ -1,5 +1,9 @@
 import { createPopper } from "@popperjs/core";
 import { h, Host } from "@stencil/core";
+/**
+ * Display an icon button that triggers a drop-down panel that can display
+ * arbitrary child content, such as metadata, forms, or other controls.
+ */
 export class VerdocsButtonPanel {
     constructor() {
         // Not marked as @State because it's not the thing that controls our rendering
@@ -61,10 +65,10 @@ export class VerdocsButtonPanel {
         }
     }
     render() {
-        return (h(Host, { key: '875a734696925dd22625880b694e32c4845e1254' }, h("div", { key: 'cc83aef76b34b3e9031160451f9643168d41cf3b', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (h(Host, { key: 'cbf8d72d05c0a1461d0fb99e78879c42bd737336' }, h("div", { key: '87dec92b073c1dee35b40f08db6752e663b6249e', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '136375bb517b9d86327c6fa63b115f3f496df7a4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '065c60cf39be8a608fbc5e2199b09cb55d8a551b', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '85af4ff2a549a5d062fff08bf17d1c6c24c439e5' }))));
+            }, ref: el => (this.iconEl = el) }), h("div", { key: '86911772f264252db5527655d5ac459c20813f1c', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '0b4286031122fafe3927da086fd0b826bad6c388', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '0644253791590daa7faf9de9e8be9cd599c2f9cc' }))));
     }
     static get is() { return "verdocs-button-panel"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -18,6 +18,22 @@ function debounce(func, wait, immediate) {
             func.apply(context, args);
     };
 }
+/**
+ * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
+ * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.
+ *
+ * ```html
+ * <verdocs-dropdown
+ *   options={[
+ *     {label: 'Option 1', disabled: true},
+ *     {label: 'Option 2', id: '2'}
+ *     {label: ''}
+ *     {label: 'Option 3', id: '2'}
+ *    ]}
+ *   label="OK" onClick={() => (console.log('OK clicked'))}
+ * />
+ * ```
+ */
 export class VerdocsDropdown {
     constructor() {
         this.options = [];
@@ -82,7 +98,7 @@ export class VerdocsDropdown {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (h(Host, { key: '068386cdca529f310e7914d475739ca9a574d02d' }, h("button", { key: '557fe893e3123fdff6251992c14a3a803451fd30', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/collection/components/controls/verdocs-file-chooser/verdocs-file-chooser.js

@@ -1,6 +1,10 @@
 import { VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
 import { unicodeNBSP } from "../../../utils/Icons";
+/**
+ * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
+ * provide the actual upload functionality.
+ */
 export class VerdocsFileChooser {
     constructor() {
         this.endpoint = VerdocsEndpoint.getDefault();
@@ -21,7 +25,7 @@ export class VerdocsFileChooser {
     }
     render() {
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-        return (h(Host, { key: '870f83d51356099942aeb7f50680bff38b946e74' }, h("input", { key: 'a4177207b2d87dd1d7e26093b93e36858a296f65', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '57e6c23406d1a12bc7b426fe76469c83925692ed', class: "upload-box" }, h("div", { key: '6b05c0bc019af781b632b91761e96b48a7e99623', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'b1ab95cb7d5a19c2d5c3e3a48c073a954bbed454', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'bec299eef4e98464c0cd76180c8b2af875ee6243', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+        return (h(Host, { key: 'f8febf3e2ed17a5997e9e97aad97a83ecd5a0bb2' }, h("input", { key: 'b151b6e4a19521ecb95b40a7b414c6ffd3e7c74b', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '9aa5d9b06f54f4479afb9276702632c695d24d0f', class: "upload-box" }, h("div", { key: '769adcb7a66ae0357e581909978fc18e5cca75ab', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'd50342ec030cf44a608b7e13e480015c63822ea7', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'd6a883649258392cb922a4b0a4901e526017bf5f', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
     static get is() { return "verdocs-file-chooser"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.js

@@ -27,6 +27,11 @@ const getScrollParent = node => {
     };
     return scrollParent(node);
 };
+/**
+ * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
+ * `overflow-y: scroll;`. The component will detect that placement and position itself in the bottom-right corner on top of the
+ * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
+ */
 export class VerdocsFloatingMenu {
     constructor() {
         this.menuContainer = null;
@@ -90,7 +95,7 @@ export class VerdocsFloatingMenu {
         }
     }
     render() {
-        return h(Host, { key: '5a96af4115dc0383751e35ac6b889689fc5256d0' });
+        return h(Host, { key: 'f86d62b15f087709d2f167a3c24cc769fb191c26' });
     }
     static get is() { return "verdocs-floating-menu"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-help-icon/verdocs-help-icon.js

@@ -1,6 +1,9 @@
 import { createPopper } from "@popperjs/core";
 import { h, Host } from "@stencil/core";
 const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+/**
+ * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+ */
 export class VerdocsHelpIcon {
     constructor() {
         this.text = '';
@@ -29,7 +32,7 @@ export class VerdocsHelpIcon {
         (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
     }
     render() {
-        return (h(Host, { key: '986dfad6178415607ada69ee50b3365bdec064b0', class: {} }, h("div", { key: '89ff032379d89a37d06bd6a0f6bc76a004ec4133', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '3e0e62c84b6fcda986e0468eb33165bd3ea0b47f', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '7650862d8c82d0571a510f6579ffa5d44b483930', innerHTML: this.text }), h("div", { key: '93633ec14de65aafbce3d46cbf9eb4617c3051ae', "data-popper-arrow": "true", class: "arrow" }))));
+        return (h(Host, { key: '4efe69ab5b8edeffe892fbce06d31dddf3c17e6b', class: {} }, h("div", { key: '05917e2f774970456b6c56a528fbdfe5b1a95586', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '25c6b233a2e8dc60425d27611d0f9ea1b8804a90', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '5ae3b1fce0724c421dc13c4439e79a9e88e4b40a', innerHTML: this.text }), h("div", { key: '136ce3de3ec515328f8b47fb35c052aad6e4e223', "data-popper-arrow": "true", class: "arrow" }))));
     }
     static get is() { return "verdocs-help-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-loader/verdocs-loader.js

@@ -1,7 +1,10 @@
 import { h, Host } from "@stencil/core";
+/**
+ * Animated loader placeholder. There are currently no configuration options for this control.
+ */
 export class VerdocsLoader {
     render() {
-        return h(Host, { key: '978af3f63b8c4582f2c92c97d7eea45dd9f71ae9' });
+        return h(Host, { key: '763614c6e09e0271d2de5a1a35af44a19063919b' });
     }
     static get is() { return "verdocs-loader"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.css

@@ -52,9 +52,24 @@ verdocs-organization-card .popup {
   flex-wrap: nowrap;
   font-family: sans-serif;
 }
+verdocs-organization-card .popup-header-with-logo {
+  display: flex;
+  flex: 0;
+  gap: 20px;
+  flex-direction: column;
+  margin: 0 0 20px 0;
+  font-size: 21px;
+  line-height: 16px;
+  color: #4c56cb;
+}
+verdocs-organization-card .popup-header-with-logo img {
+  max-width: 300px;
+  max-height: 50px;
+}
 verdocs-organization-card .popup-header {
   display: flex;
   flex: 0;
+  gap: 20px;
   flex-direction: row;
   align-items: flex-end;
   margin: 0 0 20px 0;
@@ -62,9 +77,6 @@ verdocs-organization-card .popup-header {
   line-height: 16px;
   color: #4c56cb;
 }
-verdocs-organization-card .popup-header .status {
-  margin-right: 20px;
-}
 verdocs-organization-card .popup-body {
   display: flex;
   flex-direction: column;

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.js

@@ -1,13 +1,21 @@
 import { format } from "date-fns";
 import { h, Host } from "@stencil/core";
+// TODO: See what was done in Storybook. Move all SVG icons to a common file that both projects can share
+//  and reduce duplication between components for re-used icons. Also bring icons into Figma for reuse there.
 const UserIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"/></g></svg>';
 const BusinessIcon = '<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';
+/**
+ * Display a small summary card describing an organization
+ */
 export class VerdocsOrganizationCard {
     constructor() {
         this.organization = undefined;
     }
     render() {
-        return (h(Host, { key: 'd1f1438a26008aff2ff3f473d4a1415ad6eb9107' }, h("span", { key: '8c75f4a11489eed0e4dd8ecbf6473fd3602a9323', class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon }), h("span", { key: 'b4a8b89fd3a035a706824e88e2fc5dd094e13930', class: "content" }, this.organization.name), h("div", { key: 'f37b67e08213a32c7158ef1295264468e245ffd0', class: "popup" }, h("div", { key: '5b3aa31a3e2a06d60aeb4c8001859dd5074a010b', class: "popup-header" }, h("span", { key: 'a8162c6716b0cee90d45f387f8192db065f30a0b', class: "status" }, h("span", { key: '6c219d9bb4084204c20f3a1c5b6cd136d7ed9bdd', class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon })), h("span", { key: '1d1eb7223bbf22fa36e3d5c229f257531f884849', class: "title" }, this.organization.name)), h("div", { key: '38e0749bac30611f8ccce43a60216ba37e2a0ca3', class: "popup-body" }, h("div", { key: 'b814334edaf18af880c3399e60ad4b3dedccca95', class: "field" }, h("strong", { key: '267dc23c6f9657913c31dec508f87f02408bdb66' }, "Joined"), format(new Date(this.organization.created_at || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: 'a68b424bf082741939e7dec61f7caa65fd922e18', class: "field" }, h("strong", { key: '004bb983f25e43cf42b55ade32d94103a69df0b1' }, "Website"), h("a", { key: '2aa22f7aebb0be11289d1fd08cb5342e9b3f4609', href: this.organization.url, target: "_blank", rel: "nofollow" }, this.organization.url)))))));
+        var _a, _b, _c, _d, _e, _f, _g;
+        console.log('Rendering org card', this.organization.thumbnail_url, this.organization);
+        const fallbackIcon = ((_a = this.organization) === null || _a === void 0 ? void 0 : _a.is_business) ? BusinessIcon : UserIcon;
+        return (h(Host, { key: 'f76a55b62fb94a6d0214f535faac0dd1bc7a3d2c' }, this.organization.thumbnail_url ? h("img", { class: "icon", src: this.organization.thumbnail_url, alt: "Logo" }) : h("span", { class: "icon", innerHTML: fallbackIcon }), h("span", { key: '081b7de4929a689351b9097a5492854597a6a2e0', class: "content" }, (_b = this.organization) === null || _b === void 0 ? void 0 : _b.name), h("div", { key: '3d4f6d20995a9c192bd0022edf95cc89023457cd', class: "popup" }, this.organization.full_logo_url ? (h("div", { class: "popup-header-with-logo" }, h("img", { src: this.organization.full_logo_url, alt: "Logo" }), h("div", { class: "title" }, (_c = this.organization) === null || _c === void 0 ? void 0 : _c.name))) : (h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: fallbackIcon })), h("span", { class: "title" }, (_d = this.organization) === null || _d === void 0 ? void 0 : _d.name))), h("div", { key: 'a17465bf3a71fc347699e749469209c43a643201', class: "popup-body" }, h("div", { key: '259540d41c8d257166a51139fdc29226ff3512ed', class: "field" }, h("strong", { key: 'c8d1a5abf7b48c5273e1f2d99ddffba71c528fb5' }, "Joined"), format(new Date(((_e = this.organization) === null || _e === void 0 ? void 0 : _e.created_at) || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: 'fe16d86018dc1f186e777afeb77dc43c2f2b1c73', class: "field" }, h("strong", { key: '1d3af10be4c1a3382d2425e5c38ab25c48d47872' }, "Website"), h("a", { key: 'cdd718f3d639015ce644b10a1c73f69c938e1426', href: (_f = this.organization) === null || _f === void 0 ? void 0 : _f.url, target: "_blank", rel: "nofollow" }, (_g = this.organization) === null || _g === void 0 ? void 0 : _g.url)))))));
     }
     static get is() { return "verdocs-organization-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-pagination/verdocs-pagination.js

@@ -17,6 +17,9 @@ const PageButton = ({ page, selected, onClick }) => {
     }
     return h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
 };
+/**
+ * Display a simple pagination control with individual buttons to move through the data set.
+ */
 export class VerdocsQuickFilter {
     constructor() {
         this.selectedPage = 0;
@@ -32,7 +35,7 @@ export class VerdocsQuickFilter {
         const firstPage = Math.max(0, this.selectedPage - 2);
         const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
         const pagesToDisplay = integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
-        return (h(Host, { key: 'b8dd66f21bffa468b40674e3ee68fbead0dd300c' }, this.selectedPage > 0 && h(PageButton, { key: '0e5b3a90f97ed05f87a56a400404a9168e2dd208', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: 'a2e31ffd4452f88b0a8ab88a55f3adae765b5157', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: '9d720bcc6635c8ce891303304d97c82aa9ff9c2d', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: '41bf9584d353c5ca15435ac970b89c49215fc6f3', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+        return (h(Host, { key: '35e9f8dee414ae4addb4a0615d41ac2f877d6185' }, this.selectedPage > 0 && h(PageButton, { key: 'e3ccf5d514ed45c2e279b6ace160fa5865132f7d', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: '74d1aaa681f9b8f3baafc935758d6dcc723fcdac', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: 'cb5d8461f4a33adffcb2a6df87f6ffcf66d08737', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: 'c433baeead865058d66f4aa127a6ce1fcc28f3bc', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
     }
     static get is() { return "verdocs-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-portal/verdocs-portal.js

@@ -1,5 +1,13 @@
 import { h, Host } from "@stencil/core";
 const Z_INDEX = '10001';
+/**
+ * Display a child component in a "portal", popping it out of the main DOM tree
+ * to allow it to escape the bounds set by its parent.
+ * @credit https://github.com/tomas-teston/stencil-portal for the basic
+ * technique. This has been altered in a few ways to make it more friendly
+ * to cases where there may be multiple portals on the page and provide more
+ * alignment options for the child to be displayed.
+ */
 export class VerdocsPortal {
     constructor() {
         this.moved = false;
@@ -61,7 +69,7 @@ export class VerdocsPortal {
         this.moved ? this.portal.remove() : (this.moved = true);
     }
     render() {
-        return (h(Host, { key: 'fe50082da1b3228d1492330d3cea3536af919794', ref: el => (this.element = el) }, h("slot", { key: '6b5dcf7d19c5de30eed63bb6e568bf0054930a0f' })));
+        return (h(Host, { key: 'bca4c2bfa7c2f16dcfd4046e66cf8011207c4902', ref: el => (this.element = el) }, h("slot", { key: '8e451491ccd52c55d08621198d916dc991487bfc' })));
     }
     static get is() { return "verdocs-portal"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-progress-bar/verdocs-progress-bar.js

@@ -1,4 +1,7 @@
 import { h, Host } from "@stencil/core";
+/**
+ * A simple progress bar.
+ */
 export class VerdocsProgressBar {
     constructor() {
         this.label = '';
@@ -7,7 +10,8 @@ export class VerdocsProgressBar {
     }
     render() {
         const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);
-        return (h(Host, { key: '3bdafa75c9908d839f4798cca904ef0d87e77e79' }, h("div", { key: '37306b18904d0824c8169911023fd0d11db83c3f', class: "labels" }, this.label && h("div", { key: '1cc24f6fa43f35802f20ebdd5fecbfd9497bab03', class: "label" }, this.label), this.showPercent && h("div", { key: 'd380b895f79be2c234a3ef492c67e2f1e79e0502', class: "label" }, this.percent, "%")), h("div", { key: '10301a56898976fe9ade194691de5f96f5af3ca9', class: "bar" }, h("div", { key: 'f7b764b7869b07a1e206294562840302c89fa2ef', class: "slider", style: { width: `${widthPercent}%` } }))));
+        console.log('Rendering progress bar', { widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent });
+        return (h(Host, { key: '44ff05aec2048b9ed24847dc0b410f379f94bbc6' }, h("div", { key: '8706b9d902db9b9731a1d92744fa5cd071bdfca9', class: "labels" }, this.label && h("div", { key: 'b56b39c39a16f0316de5b3d15d4e0c130ab9d232', class: "label" }, this.label), this.showPercent && h("div", { key: '99ec3b060256124b4f49325c16ab3cd5ec6d0640', class: "label" }, this.percent, "%")), h("div", { key: '4cbd4ac85304f77d148ebecd339e9eb87d8e12b5', class: "bar" }, h("div", { key: '472a105258357d4ab398b69f4d75c39b089ade96', class: "slider", style: { width: `${widthPercent}%` } }))));
     }
     static get is() { return "verdocs-progress-bar"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.js

@@ -25,7 +25,7 @@ export class VerdocsRadioButton {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '9eee43dc3c08fdd5c3dbde1bb167dfa4d57fe4fa', class: { disabled: this.disabled } }, h("input", { key: '07a13e1ea2e2fc2aa78f2b830908fa6f96e4963d', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), h("label", { key: '303f4ed1d9f45123a563c6e12e8eafa03e876ef6', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+        return (h(Host, { key: '08503221049dbcdb5ad6d8804576bd302437a784', class: { disabled: this.disabled } }, h("input", { key: '649115f2c5d916fbec807ab0566ec3352abe6afd', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), h("label", { key: '597495b414c518d808f241cea9c3c66b0fabdf63', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
     }
     static get is() { return "verdocs-radio-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.js

@@ -12,7 +12,7 @@ export class VerdocsSelectInput {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'a353e008560aed3f922fc52d5c091d88cbe099a3', class: "input-field" }, h("label", { key: '90a9b8244853fa2083f0d7fb1672ed204ed22a4c' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: 'a68e1ea7b9f9b6f375b2d6c1df859708acc79bea', class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
+        return (h(Host, { key: 'f4ed5ac0b8cd5321d4dc378dfb4118bd55993c6b', class: "input-field" }, h("label", { key: '0c46eaac6ae1e9044d477ee4e41cbb8ddf79ae91' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: '983b8be81f9c017acb69a8d23560b72a0f0bf729', class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
     }
     static get is() { return "verdocs-select-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-spinner/verdocs-spinner.js

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