@verdocs/web-sdk 4.0.9 → 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: 'ecdc1830949a5a35b092167b201c6feb8284e221', 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: '2d8ebba91a5cff228135465c0956848fcc8873b5', class: "recipients" }, h("div", { key: '1c72951bfc1e11a1d95c04e005b3fcd8108c39f5', class: "left-line" }), h("div", { key: '82834a006584cde2b8020f7f233dfff685e647f2', class: `level level-start` }, this.getLevelIcon(-1), h("div", { key: '930ca1cc5b3f93f11f0a38703396538ee90dba5b', 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: '241118ea059aadb8a6030b5ee5bd4383e88af212', class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { key: '05ba689ac40aaf1543b921b490f8fe4550bad4df', class: "complete" }, "Signing Complete"))), h("div", { key: '39c73b0a3310d85dfbd29f2d2fda347d37091e90', class: "buttons" }, h("verdocs-button", { key: 'c3d1196a34f1cd4ab654aa07b707372054f26202', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { key: 'd2e16d7a4d97c8888df3e7257296dee6f8db3234', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", { key: 'd8c0a234261d1b77d6343dd7e426c28475dceadf' }))));
+        })))), 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();
             }

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;

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

@@ -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;

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]

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();
             }

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: '6caa5dec8418f01505b6804accccc752207a2536', onClick: e => this.handleCancel(e) }, h("div", { key: '70a86117042b81e39b014457b7c54c945a351eea', class: "dialog" }, h("div", { key: '42c8ba061575c774a4a002176c3859baac281d9b', class: "heading" }, "Create Your Signature"), h("div", { key: '6f5d716812f90e624c6e31a9f36cbf9883d79c42', class: "content" }, h("verdocs-text-input", { key: 'a308d527df3926d85dbffadf25802ef55e4c3bd7', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '78a2c7b343835127d715055e6107af144c47152f', 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: '4886115298e397686d10911054504a25d90c11f3', 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: '12bbe3a5abfedc9594aa59439fd05dd1ad73377b', class: "buttons" }, h("verdocs-button", { key: '7a57e964b2b93fa18a2ad97dd5693886c27bbbc8', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'd1f6f30b207e61710bdd93eeee4fb7e0b22c3c4e', 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", {

package/dist/components/verdocs-spinner2.js

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

package/dist/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: 'aaaa7b0cc222b74a9fc8b1663ca3ddf9d4580cf6', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (h(Host, { key: '7e17d1f0ebec0898aff25f562fc7d10a4687d9b9', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '03baee21425fefa4ce17e3e1998fb60f32310bb0', class: "icon", innerHTML: icon }), h("span", { key: '19b98f1e2cb76a7488bd7400928930d33b1003d0', class: "content" }, statusMessage), h("div", { key: '870dd620390fa1f201ca1b509f0c3bcf513cfa8c', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '7cbe6e3452da0997d2169f2d1024e3d68f891d96', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '6f17422d18876713f28ca8336b59338a3697f906', class: "icon", innerHTML: icon }), h("span", { key: '71b11f70c36bd2be72094f39edc9da893da89a29', class: "content" }, statusMessage), h("div", { key: 'd321e89c2ccf9da54f86c1f93958ccfe62db70e0', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'fb57fbe71ca19de698f8866b8aa1863b512d83b2', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
     static get style() { return VerdocsStatusIndicatorStyle0; }
 }, [0, "verdocs-status-indicator", {

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; }

package/dist/components/verdocs-tabs2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#666666;cursor:default}";
+const verdocsTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#aaaaaa;cursor:default}";
 const VerdocsTabsStyle0 = verdocsTabsCss;
 
 const VerdocsTabs = /*@__PURE__*/ proxyCustomElement(class VerdocsTabs extends HTMLElement {
@@ -16,7 +16,7 @@ const VerdocsTabs = /*@__PURE__*/ proxyCustomElement(class VerdocsTabs extends H
         (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
     }
     render() {
-        return (h(Host, { key: '9ec11ccd4c66cea85db7bd16bade6f7919aa3a9b' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: '1d2591798e0d995eb3f7b8da7f0fb107f171c5b9', class: "flex flex-1" }), h("slot", { key: '236c55b5248128b60b3d023d78d5e6c91ce94c35' }, h("div", { key: '62105d98b32d6cdde640cd6ccb99872d31b0c067' }))));
+        return (h(Host, { key: '0cb3a6e9ab650081ca8185d3803575db2fd6f420' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: 'a6608f5f0590b549849870b597e79679a2fc7641', class: "flex flex-1" }), h("slot", { key: '3b7c759679a8d1ac23e31b9b7dd6007f5be9a26a' }, h("div", { key: '4f6f65746404e6e86cead45704842b70aaca08c4' }))));
     }
     static get style() { return VerdocsTabsStyle0; }
 }, [4, "verdocs-tabs", {