@verdocs/web-sdk 4.0.8 → 4.1.2

package/dist/components/verdocs-send2.js

@@ -3,9 +3,12 @@ import { VerdocsEndpoint, createEnvelope, isValidEmail, isValidPhone, getRGBA }
 import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$5 } from './verdocs-button2.js';
-import { d as defineCustomElement$4 } from './verdocs-contact-picker2.js';
-import { d as defineCustomElement$3 } from './verdocs-portal2.js';
+import { d as defineCustomElement$8 } from './verdocs-button2.js';
+import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$6 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$5 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$4 } from './verdocs-portal2.js';
+import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-spinner2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
@@ -25,7 +28,6 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         this.exit = createEvent(this, "exit", 7);
         this.sdkError = createEvent(this, "sdkError", 7);
         this.searchContacts = createEvent(this, "searchContacts", 7);
-        this.levels = [];
         this.templateStore = null;
         this.roleStore = null;
         this.endpoint = VerdocsEndpoint.getDefault();
@@ -41,38 +43,41 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
     async reset() {
         this.rolesCompleted = {};
     }
+    onTemplateIdChanged(newTemplateId) {
+        console.log('[SEND] Template ID changed', newTemplateId);
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         try {
-            const loadSessionResult = this.endpoint.loadSession();
-            if (!this.templateId) {
-                console.log(`[SEND] Missing required template ID ${this.templateId}`);
+            this.endpoint.loadSession();
+            if (!this.endpoint.session) {
+                console.log('[SEND] Unable to start Send operation, must be authenticated');
                 return;
             }
-            if (!this.endpoint.session) {
-                console.log('[SEND] Unable to start builder session, must be authenticated');
+            if (!this.templateId) {
+                console.log(`[SEND] Missing required template ID ${this.templateId}`);
                 return;
             }
-            this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
-            this.roleStore = getTemplateRoleStore(this.templateId);
+            return this.loadTemplate(this.templateId);
+        }
+        catch (e) {
+            console.log('[SEND] Error with send session', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    async loadTemplate(templateId) {
+        var _a, _b, _c, _d, _e, _f;
+        if (!templateId) {
+            return;
+        }
+        try {
+            const loadSessionResult = this.endpoint.loadSession();
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
+            this.roleStore = getTemplateRoleStore(templateId);
+            this.recomputeRolesCompleted();
             if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
-                console.warn(`[SEND] Template is not sendable`, this.templateId);
-            }
-            if (this.roleStore.get('roles')) {
-                const rolesAtLevel = {};
-                this.rolesCompleted = {};
-                this.roleStore.get('roles').forEach(role => {
-                    const level = role.sequence - 1;
-                    rolesAtLevel[level] || (rolesAtLevel[level] = []);
-                    const id = `r-${level}-${rolesAtLevel[level].length}`;
-                    rolesAtLevel[level].push({ ...role, id });
-                    if (role.full_name && (role.email || role.phone)) {
-                        this.rolesCompleted[id] = { ...role, id };
-                    }
-                });
-                this.rolesAtLevel = rolesAtLevel;
-                this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-                this.levels.sort((a, b) => a - b);
+                console.warn(`[SEND] Template is not sendable`, templateId);
             }
             if ((_c = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _c === void 0 ? void 0 : _c.profile) {
                 this.sessionContacts.push({
@@ -88,11 +93,41 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
             (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
+    recomputeRolesCompleted() {
+        const roles = this.roleStore.get('roles') || [];
+        const rolesAtLevel = {};
+        this.rolesCompleted = {};
+        roles.forEach(role => {
+            const level = role.sequence - 1;
+            rolesAtLevel[level] || (rolesAtLevel[level] = []);
+            const id = `r-${level}-${rolesAtLevel[level].length}`;
+            rolesAtLevel[level].push({ ...role, id });
+            if (role.full_name && (role.email || role.phone)) {
+                this.rolesCompleted[id] = { ...role, id };
+            }
+        });
+    }
+    getRoleLevels() {
+        const roles = this.roleStore.get('roles') || [];
+        const rolesAtLevel = {};
+        this.rolesCompleted = {};
+        roles.forEach(role => {
+            const level = role.sequence - 1;
+            rolesAtLevel[level] || (rolesAtLevel[level] = []);
+            const id = `r-${level}-${rolesAtLevel[level].length}`;
+            rolesAtLevel[level].push({ ...role, id });
+        });
+        this.rolesAtLevel = rolesAtLevel;
+        const levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
+        levels.sort((a, b) => a - b);
+        return levels;
+    }
     getLevelIcon(level) {
+        const levels = this.getRoleLevels();
         if (level < 0) {
             return h("div", { class: "level-icon", innerHTML: startIcon });
         }
-        else if (level >= this.levels.length) {
+        else if (level >= levels.length) {
             return h("div", { class: "level-icon", innerHTML: doneIcon });
         }
         else {
@@ -152,20 +187,27 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
     }
     render() {
         var _a, _b;
+        if (!this.endpoint.session) {
+            return (h(Host, { style: { display: 'flex' } }, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
         const roleNames = getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
         const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        return (h(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 } }, h("div", { key: '1d4fdeda91a23a81bb1c72a4200de76e36ba74c8', class: "recipients" }, h("div", { key: '9bb72122ba245dd95c3f2ffb0c1768764c2f2da7', class: "left-line" }), h("div", { key: 'c2056047a4bf20612fb83693fcf279a1354c98e0', class: `level level-start` }, this.getLevelIcon(-1), h("div", { key: '0220edca79c791bdd561d0ff92cfad3236dd7800', class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+        const levels = this.getRoleLevels();
+        return (h(Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (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 ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(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, 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.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); } })))));
-        })))), h("div", { key: '16fba92b62896c3368d54743c9ae5c79b7558f16', class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { key: '0cae926609fc5c2a10387bee716d49c98a8ebcf6', class: "complete" }, "Signing Complete"))), h("div", { key: 'f8457f0c451cc70a096e46447395186aca90169f', class: "buttons" }, h("verdocs-button", { key: '2be6f8c3cfb4c2ec8c010c4cba79855f20e5461d', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { key: 'b34393a6e3197acd0143161c71a43420f45302be', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", { key: '8e26caa183719e765c771921d365e39ec4916be4' }))));
+        })))), 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 {
+        "templateId": ["onTemplateIdChanged"]
+    }; }
     static get style() { return VerdocsSendStyle0; }
 }, [0, "verdocs-send", {
         "endpoint": [16],
-        "templateId": [1, "template-id"],
+        "templateId": [513, "template-id"],
         "environment": [1],
         "containerId": [32],
         "rolesAtLevel": [32],
@@ -174,12 +216,14 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         "sending": [32],
         "rolesCompleted": [32],
         "reset": [64]
+    }, undefined, {
+        "templateId": ["onTemplateIdChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-portal", "verdocs-spinner", "verdocs-toggle-button"];
+    const components = ["verdocs-send", "verdocs-button", "verdocs-component-error", "verdocs-contact-picker", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-spinner", "verdocs-toggle-button"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-send":
             if (!customElements.get(tagName)) {
@@ -188,15 +232,30 @@ function defineCustomElement() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
             }
             break;
         case "verdocs-contact-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
             }
             break;
         case "verdocs-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-select-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
@@ -213,6 +272,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsSend as V, defineCustomElement as d };

package/dist/components/verdocs-settings-api-keys2.js

@@ -44,7 +44,7 @@ const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
     }
     async componentDidLoad() {
         this.newApiKeyProfileId = this.endpoint.session.profile_id;
-        getOrganizationMembers(this.endpoint, this.endpoint.session.organization_id)
+        getOrganizationMembers(this.endpoint)
             .then(mem => {
             this.members = mem;
         })
@@ -57,7 +57,7 @@ const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
         this.loadKeys();
     }
     loadKeys() {
-        getApiKeys(this.endpoint, this.endpoint.session.organization_id)
+        getApiKeys(this.endpoint)
             .then(r => {
             this.keys = r;
         })
@@ -69,7 +69,7 @@ const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
         });
     }
     async handleDeleteKey() {
-        deleteApiKey(this.endpoint, this.deletingKey.organization_id, this.deletingKey.client_id)
+        deleteApiKey(this.endpoint, this.deletingKey.client_id)
             .then(() => {
             this.deletingKey = null;
             VerdocsToast('API key deleted', { style: 'success' });
@@ -84,7 +84,7 @@ const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
         });
     }
     async handleRotateKey() {
-        rotateApiKey(this.endpoint, this.rotatingKey.organization_id, this.rotatingKey.client_id)
+        rotateApiKey(this.endpoint, this.rotatingKey.client_id)
             .then(r => {
             this.rotatingKey = null;
             VerdocsToast('API key rotated', { style: 'success' });
@@ -101,7 +101,7 @@ const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
     }
     async handleCreateKey() {
         // TODO: Add permission dropdown
-        createApiKey(this.endpoint, this.endpoint.session.organization_id, { permission: 'personal', name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
+        createApiKey(this.endpoint, { permission: 'personal', name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
             .then(r => {
             this.creatingKey = false;
             this.createdKey = r;
@@ -205,6 +205,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsSettingsApiKeys as V, defineCustomElement as d };

package/dist/components/verdocs-settings-members2.js

@@ -9,7 +9,7 @@ import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-table2.js';
 import { d as defineCustomElement$2 } from './verdocs-tabs2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
-import { d as dateFns } from './index4.js';
+import { d as dateFns } from './index2.js';
 
 const verdocsSettingsMembersCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-settings-members{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-settings-members .table{margin:12px 0}verdocs-settings-members .role{font-size:12px;width:32px;height:32px;border-radius:32px;background:#777777;color:#ffffff;font-weight:700;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-settings-members .table{margin:12px 0}verdocs-settings-members .data-col div{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-settings-members .data-col svg{width:24px;height:24px}verdocs-settings-members .col-name svg,verdocs-settings-members .col-client_id svg,verdocs-settings-members .col-profile_id svg{fill:#a1a1aa}verdocs-settings-members .col-actions svg{fill:#ffffff;stroke:#a1a1aa}verdocs-settings-members .col-actions svg:hover{cursor:pointer;stroke:red}verdocs-settings-members .col-actions>div{-ms-flex-pack:center;justify-content:center}verdocs-settings-members .header-col.col-actions{text-align:center}verdocs-settings-members verdocs-dialog p{font-size:16px;line-height:18px;margin:0 0 1em 0}@media all and (max-width: 450px){verdocs-settings-members .col-email,verdocs-settings-members .col-phone,verdocs-settings-members .col-actions{display:none}}";
 const VerdocsSettingsMembersStyle0 = verdocsSettingsMembersCss;
@@ -76,11 +76,7 @@ const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
     async loadMembers() {
         var _a, _b, _c;
         try {
-            const [members, invites] = await Promise.all([
-                // getRoles(this.endpoint),
-                getOrganizationMembers(this.endpoint, this.endpoint.session.organization_id),
-                getOrganizationInvitations(this.endpoint, this.endpoint.session.organization_id),
-            ]);
+            const [members, invites] = await Promise.all([getOrganizationMembers(this.endpoint), getOrganizationInvitations(this.endpoint)]);
             this.members = members;
             this.invited = invites;
             this.newRole = 'member';
@@ -92,11 +88,9 @@ const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
     }
     async handleInviteMember() {
         this.submitting = true;
-        createOrganizationInvitation(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
+        createOrganizationInvitation(VerdocsEndpoint.getDefault(), {
             email: this.newEmailAddress,
             role: this.newRole,
-            // TODO: Test
-            // organization_id: this.endpoint.session.organization_id,
         })
             .then(r => {
             console.log('[SETTINGS] Invited member', r);
@@ -118,7 +112,7 @@ const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
     }
     async handleDeleteMember() {
         this.submitting = true;
-        deleteOrganizationMember(VerdocsEndpoint.getDefault(), this.deletingMember.organization_id, this.deletingMember.email)
+        deleteOrganizationMember(VerdocsEndpoint.getDefault(), this.deletingMember.email)
             .then(() => {
             this.submitting = false;
             this.deletingMember = null;
@@ -134,7 +128,7 @@ const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
     }
     async handleDeleteInvitation() {
         this.submitting = true;
-        deleteOrganizationInvitation(VerdocsEndpoint.getDefault(), this.deletingInvitation.organization_id, this.deletingInvitation.email)
+        deleteOrganizationInvitation(VerdocsEndpoint.getDefault(), this.deletingInvitation.email)
             .then(() => {
             this.submitting = false;
             this.deletingInvitation = null;
@@ -150,7 +144,7 @@ const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class VerdocsSet
     }
     async handleResendInvitation() {
         this.submitting = true;
-        resendOrganizationInvitation(VerdocsEndpoint.getDefault(), this.resendingInvitation.organization_id, this.resendingInvitation.email)
+        resendOrganizationInvitation(VerdocsEndpoint.getDefault(), this.resendingInvitation.email)
             .then(() => {
             this.submitting = false;
             this.resendingInvitation = null;
@@ -261,6 +255,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsSettingsMembers as V, defineCustomElement as d };

package/dist/components/verdocs-settings-organization2.js

@@ -28,7 +28,6 @@ const VerdocsSettingsOrganization = /*@__PURE__*/ proxyCustomElement(class Verdo
         this.dirty = false;
         this.submitting = false;
         this.name = '';
-        this.business_name = '';
         this.contact_email = '';
         this.phone = '';
         this.url = '';
@@ -47,7 +46,6 @@ const VerdocsSettingsOrganization = /*@__PURE__*/ proxyCustomElement(class Verdo
     }
     resetForm(organization) {
         this.name = organization.name;
-        this.business_name = organization.business_name;
         this.contact_email = organization.contact_email;
         this.phone = organization.phone;
         this.url = organization.url;
@@ -59,7 +57,6 @@ const VerdocsSettingsOrganization = /*@__PURE__*/ proxyCustomElement(class Verdo
         e.stopPropagation();
         updateOrganization(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
             name: this.name,
-            business_name: this.business_name,
             contact_email: this.contact_email,
             phone: this.phone,
             url: this.url,
@@ -75,7 +72,6 @@ const VerdocsSettingsOrganization = /*@__PURE__*/ proxyCustomElement(class Verdo
     processFields() {
         const validation = schema.safeParse({
             name: this.name,
-            business_name: this.business_name,
             contact_email: this.contact_email,
             phone: this.phone,
             url: this.url,
@@ -92,9 +88,6 @@ const VerdocsSettingsOrganization = /*@__PURE__*/ proxyCustomElement(class Verdo
         return (h(Host, null, h("h1", null, "Organization Profile"), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", { class: "columns" }, h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-organization-name", value: this.name, autocomplete: "off", label: "Name", required: false, disabled: false, placeholder: "Enter your organization's name...", onInput: (e) => (this.name = e.target.value), onFocusout: (e) => {
                 this.name = e.target.value.trim();
                 this.processFields();
-            } }), h("verdocs-text-input", { id: "verdocs-organization-business-name", value: this.business_name, autocomplete: "off", label: "Display Name", placeholder: "The name to display on communications...", onInput: (e) => (this.business_name = e.target.value), onFocusout: (e) => {
-                this.business_name = e.target.value.trim();
-                this.processFields();
             } }), h("verdocs-text-input", { id: "verdocs-organization-url", value: this.url, autocomplete: "off", label: "Web URL", placeholder: "Enter your Web URL...", onInput: (e) => (this.url = e.target.value), onFocusout: (e) => {
                 this.url = e.target.value.trim();
                 this.processFields();
@@ -113,7 +106,6 @@ const VerdocsSettingsOrganization = /*@__PURE__*/ proxyCustomElement(class Verdo
         "dirty": [32],
         "submitting": [32],
         "name": [32],
-        "business_name": [32],
         "contact_email": [32],
         "phone": [32],
         "url": [32]
@@ -146,6 +138,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsSettingsOrganization as V, defineCustomElement as d };

package/dist/components/verdocs-settings-profile2.js

@@ -136,6 +136,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsSettingsProfile as V, defineCustomElement as d };

package/dist/components/verdocs-settings.js

@@ -2,9 +2,9 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$d } from './verdocs-button2.js';
-import { d as defineCustomElement$c } from './verdocs-dialog2.js';
-import { d as defineCustomElement$b } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$a } from './verdocs-loader2.js';
+import { d as defineCustomElement$c } from './verdocs-component-error2.js';
+import { d as defineCustomElement$b } from './verdocs-dialog2.js';
+import { d as defineCustomElement$a } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$9 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$8 } from './verdocs-settings-api-keys2.js';
 import { d as defineCustomElement$7 } from './verdocs-settings-members2.js';
@@ -40,9 +40,8 @@ const VerdocsSettings$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSettings
         }
     }
     render() {
-        console.log('sess', this.endpoint.session);
         if (!this.endpoint.session) {
-            return (h(Host, null, h("verdocs-loader", null)));
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization"), h("div", { class: `tab ${this.tab === 'members' ? 'active' : ''}`, onClick: () => (this.tab = 'members') }, "Members"), h("div", { class: `tab ${this.tab === 'apikeys' ? 'active' : ''}`, onClick: () => (this.tab = 'apikeys') }, "API Keys")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint }), this.tab === 'members' && h("verdocs-settings-members", { endpoint: this.endpoint }), this.tab === 'apikeys' && h("verdocs-settings-api-keys", { endpoint: this.endpoint })));
     }
@@ -55,7 +54,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-settings", "verdocs-button", "verdocs-dialog", "verdocs-help-icon", "verdocs-loader", "verdocs-select-input", "verdocs-settings-api-keys", "verdocs-settings-members", "verdocs-settings-organization", "verdocs-settings-profile", "verdocs-table", "verdocs-tabs", "verdocs-text-input"];
+    const components = ["verdocs-settings", "verdocs-button", "verdocs-component-error", "verdocs-dialog", "verdocs-help-icon", "verdocs-select-input", "verdocs-settings-api-keys", "verdocs-settings-members", "verdocs-settings-organization", "verdocs-settings-profile", "verdocs-table", "verdocs-tabs", "verdocs-text-input"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-settings":
             if (!customElements.get(tagName)) {
@@ -67,17 +66,17 @@ function defineCustomElement$1() {
                 defineCustomElement$d();
             }
             break;
-        case "verdocs-dialog":
+        case "verdocs-component-error":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "verdocs-help-icon":
+        case "verdocs-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "verdocs-loader":
+        case "verdocs-help-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
@@ -124,7 +123,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const VerdocsSettings = VerdocsSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-sign.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { VerdocsEndpoint, getSigningSession, getEnvelope, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, envelopeRecipientSubmit, uploadEnvelopeFieldAttachment, fullNameToInitials, integerSequence } from '@verdocs/js-sdk';
-import { j as saveAttachment, k as updateDocumentFieldValue, r as renderDocumentField, b as getFieldId } from './utils.js';
-import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils.js';
+import { c as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
@@ -606,7 +606,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const VerdocsSign = VerdocsSign$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-signature-dialog2.js

@@ -19,12 +19,11 @@ const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsSig
     }
     componentWillLoad() {
         this.enteredName = this.name;
-        // TODO
-        // const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
-        // ds.load().then(font => {
-        //   document.fonts.add(font);
-        //   this.fontLoaded = true;
-        // });
+        const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
+        ds.load().then(font => {
+            document.fonts.add(font);
+            this.fontLoaded = true;
+        });
     }
     componentDidLoad() {
         this.redrawSignature();
@@ -221,7 +220,7 @@ const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsSig
     }
      */
     render() {
-        return (h(Host, { key: 'fcb13a8c842458da1e1d357d19bbb9b55074d1e9', onClick: e => this.handleCancel(e) }, h("div", { key: '277162d473d0eb91c09cc7edb41b0ec7ff777620', class: "dialog" }, h("div", { key: 'e0c067842ccbe269f69b466aaa6eb8c371044b3a', class: "heading" }, "Create Your Signature"), h("div", { key: 'c56cadd1096c74209200b370814ac7f3866c0fde', class: "content" }, h("verdocs-text-input", { key: '8b159acdfa214181d66cc6b0a0b28f3e1f5c4595', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '2576df6f2f30c1ebd8c2b1727006156386c8a387', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: 'f321aff6afb7ffac373693e934431cba9ae25aaa', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: 'cca9cd2ba4514edd99fd82dfa7c61875246d7355', class: "buttons" }, h("verdocs-button", { key: '99412bf5275d7369bef49025e9ff0563fc2692c8', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '75f5ddf100fef479941790b64c807f02ef7aa895', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
+        return (h(Host, { key: '88ef514634fef3e3773f13efeeb2b22cbaf9ff0a', onClick: e => this.handleCancel(e) }, h("div", { key: '31369669f68670330cb2f54ec9be44ff6100ac83', class: "dialog" }, h("div", { key: 'd161b9a0e0945cda909eabbd0404448a03e29198', class: "heading" }, "Create Your Signature"), h("div", { key: '9777dd4289072f0be511bb1ec828ed540011e6be', class: "content" }, h("verdocs-text-input", { key: 'afed3547dd47d4883ac84d83d4d05eca9a30d5a2', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '728f24c1a88a395f940df350169ed6ba628d2685', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: 'abafa624e941b6f6e758fbd75ddd7e0044a377dc', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: 'fbcc0705c21b7ed206222a9b7382a5562ee7f83d', class: "buttons" }, h("verdocs-button", { key: '5f921b4dfc7df16867071b117a9b055a8aeee8da', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'dbf88043b9deedb378181bf48d7a04428a32e653', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
     }
     static get style() { return VerdocsSignatureDialogStyle0; }
 }, [0, "verdocs-signature-dialog", {
@@ -258,6 +257,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsSignatureDialog as V, defineCustomElement as d };

package/dist/components/verdocs-spinner2.js

@@ -13,7 +13,7 @@ const VerdocsQuickFilter = /*@__PURE__*/ proxyCustomElement(class VerdocsQuickFi
         this.mode = 'light';
     }
     render() {
-        return (h(Host, { key: 'f5a8b78035f45b04cd8a017f0052857d74e4d454', style: {
+        return (h(Host, { key: '72538e137a5d5063f0056aab93709a1b2ee4a4c1', style: {
                 width: `${this.size}px`, //
                 height: `${this.size}px`,
                 flex: `0 0 ${this.size}px`,
@@ -38,6 +38,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsQuickFilter as V, defineCustomElement as d };

package/dist/components/verdocs-status-indicator2.js

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

package/dist/components/verdocs-table2.js

@@ -13,12 +13,10 @@ const VerdocsTable = /*@__PURE__*/ proxyCustomElement(class VerdocsTable extends
         this.data = [];
     }
     render() {
-        return (h(Host, { key: 'd048ed4b7942038c96da6873520ecaa2a83014f0', class: "table-wrapper" }, h("table", { key: '4328cdcb8da0670fff20f175c9a12deba009e85d', class: "table" }, h("thead", { key: 'c94cbef7c8b3e05d9ee71c812525f1599529bcd1' }, h("tr", { key: 'd27169ab0901fef379fd2001953c944915d9cd5e', class: "row header-row" }, this.columns.map((col, i) => {
+        return (h(Host, { key: 'efe778730c2c95e24dffa2043e1b16e93a964612', class: "table-wrapper" }, h("table", { key: '18b29a87f943123886ce6191e8d2cfc4f2c76b85', class: "table" }, h("thead", { key: '5152847a22a948d8fa0abd8b4ecc5ecdd7014f50' }, h("tr", { key: 'db88562938a289ea701291926b6d221c62fcd78c', class: "row header-row" }, this.columns.map((col, i) => {
             return (h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
-        }))), h("tbody", { key: '5ecf556cd6c25d1f47220c0a22793d0a6ba8ff3e' }, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
-            var _a;
-            return h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
-            // return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
+        }))), h("tbody", { key: 'f8fd817f153e1e1067bebed5ca5b3ee40590e1eb' }, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
+            return col.renderCell ? (h("td", { class: `col data-col col-${i} col-${col.id}`, innerHTML: col.renderCell(col, row) })) : (h("td", { class: `col data-col col-${i} col-${col.id}` }, row[col.id]));
         }))))))));
     }
     static get style() { return VerdocsTableStyle0; }
@@ -39,6 +37,5 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement();
 
 export { VerdocsTable as V, defineCustomElement as d };