@verdocs/web-sdk 2.2.6 → 2.2.7

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

@@ -1,15 +1,45 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getMembers, c as capitalize } from './Strings.js';
-import './Types.js';
+import { g as getRoles } from './Profiles.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import './Types.js';
+import { g as getMembers, d as deleteMember } from './Members.js';
+import { b as formatInitials, a as formatFullName, c as capitalize } from './Primitives.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$2 } from './verdocs-button2.js';
-import { d as defineCustomElement$1 } from './verdocs-table2.js';
+import { d as defineCustomElement$7 } from './verdocs-button2.js';
+import { d as defineCustomElement$6 } from './verdocs-dialog2.js';
+import { d as defineCustomElement$5 } from './verdocs-help-icon2.js';
+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 { f as format } from './index2.js';
 
-const verdocsSettingsMembersCss = "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 .col.col-actions{-ms-flex-align:center;align-items:center;text-align:center}verdocs-settings-members .col.col-actions svg{cursor:pointer;width:24px;height:24px;fill:#777777}verdocs-settings-members .col.col-actions svg:hover{fill:red}";
+var getInvitations = function (endpoint, organizationId) {
+    return endpoint.api //
+        .get("/organizations/".concat(organizationId, "/invitation"))
+        .then(function (r) { return r.data; });
+};
+var createInvitation = function (endpoint, organizationId, params) {
+    return endpoint.api //
+        .post("/organizations/".concat(organizationId, "/invitation"), params)
+        .then(function (r) { return r.data; });
+};
+var deleteInvitation = function (endpoint, organizationId, email) {
+    return endpoint.api //
+        .delete("/organizations/".concat(organizationId, "/invitation/").concat(email))
+        .then(function (r) { return r.data; });
+};
+var resendInvitation = function (endpoint, organizationId, email) {
+    return endpoint.api //
+        .post("/organizations/".concat(organizationId, "/invitation/").concat(email, "/resend"))
+        .then(function (r) { return r.data; });
+};
+
+const verdocsSettingsMembersCss = "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}";
 
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
+const ArrowPathIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>`;
 const getRoleLabel = (roles) => {
   if (roles.find(role => role.name === 'owner') !== undefined)
     return 'Owner';
@@ -44,6 +74,16 @@ const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.memberRemoved = createEvent(this, "memberRemoved", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.members = [];
+    this.invited = [];
+    this.roles = [];
+    this.selectedTab = 0;
+    this.invitingMember = false;
+    this.newEmailAddress = '';
+    this.newRoleId = '';
+    this.submitting = false;
+    this.deletingInvitation = null;
+    this.resendingInvitation = null;
+    this.deletingMember = null;
   }
   componentWillLoad() {
     this.endpoint.loadSession();
@@ -53,42 +93,155 @@ const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
   }
   async componentDidLoad() {
-    var _a, _b, _c;
+    this.loadMembers().catch((e) => console.log('Unknown Error', e));
+  }
+  async loadMembers() {
+    var _a, _b, _c, _d;
     try {
-      this.members = await getMembers(this.endpoint, this.endpoint.session.organization_id);
+      const [roles, members, invites] = await Promise.all([
+        getRoles(this.endpoint),
+        getMembers(this.endpoint, this.endpoint.session.organization_id),
+        getInvitations(this.endpoint, this.endpoint.session.organization_id),
+      ]);
+      this.roles = roles;
+      this.members = members;
+      this.invited = invites;
+      this.newRoleId = ((_a = roles.find(role => role.name === 'member')) === null || _a === void 0 ? void 0 : _a.id) || '';
     }
     catch (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));
+      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
       VerdocsToast('Unable to load members. Please try again later');
     }
   }
+  async handleInviteMember() {
+    this.submitting = true;
+    createInvitation(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
+      email: this.newEmailAddress,
+      role_id: this.newRoleId,
+      organization_id: this.endpoint.session.organization_id,
+    })
+      .then(r => {
+      console.log('[SETTINGS] Invited member', r);
+      this.invitingMember = false;
+      this.submitting = false;
+      this.newRoleId = '';
+      this.newEmailAddress = '';
+      VerdocsToast('Invitation sent!', { style: 'success' });
+      this.loadMembers();
+    })
+      .catch(e => {
+      console.log('[SETTINGS] Unable to invite member', e);
+      this.invitingMember = false;
+      this.submitting = false;
+      this.newRoleId = '';
+      this.newEmailAddress = '';
+      VerdocsToast('Unable to invite member. Please try again later', { style: 'error' });
+    });
+  }
+  async handleDeleteMember() {
+    this.submitting = true;
+    deleteMember(VerdocsEndpoint.getDefault(), this.deletingMember.organization_id, this.deletingMember.email)
+      .then(() => {
+      this.submitting = false;
+      this.deletingMember = null;
+      VerdocsToast('The member has been deleted.', { style: 'success' });
+      this.loadMembers();
+    })
+      .catch(e => {
+      this.submitting = false;
+      this.deletingMember = null;
+      console.log('Delete error', e);
+      VerdocsToast('Unable to cancel invitation. Please try again later', { style: 'error' });
+    });
+  }
+  async handleDeleteInvitation() {
+    this.submitting = true;
+    deleteInvitation(VerdocsEndpoint.getDefault(), this.deletingInvitation.organization_id, this.deletingInvitation.email)
+      .then(() => {
+      this.submitting = false;
+      this.deletingInvitation = null;
+      VerdocsToast('The invitation has been cancelled.', { style: 'success' });
+      this.loadMembers();
+    })
+      .catch(e => {
+      this.submitting = false;
+      this.deletingInvitation = null;
+      console.log('Delete error', e);
+      VerdocsToast('Unable to cancel invitation. Please try again later', { style: 'error' });
+    });
+  }
+  async handleResendInvitation() {
+    this.submitting = true;
+    resendInvitation(VerdocsEndpoint.getDefault(), this.resendingInvitation.organization_id, this.resendingInvitation.email)
+      .then(() => {
+      this.submitting = false;
+      this.resendingInvitation = null;
+      VerdocsToast('The invitation has been resent.', { style: 'success' });
+      this.loadMembers();
+    })
+      .catch(e => {
+      this.submitting = false;
+      this.resendingInvitation = null;
+      console.log('REsend error', e);
+      VerdocsToast('Unable to resend invitation. Please try again later', { style: 'error' });
+    });
+  }
   render() {
     if (!this.endpoint.session) {
       console.log('[SETTINGS] Must be authenticated');
       return h(Host, { class: "authentication-required" }, "Must be authenticated");
     }
-    return (h(Host, null, h("h1", null, "Members"), h("verdocs-table", { data: this.members, columns: [
+    const roleOptions = this.roles.map(role => ({ label: getRoleLabel([{ name: role.name }]), value: role.id }));
+    return (h(Host, null, h("verdocs-tabs", { tabs: [{ label: `Members (${this.members.length})` }, { label: `Pending Invitations (${this.invited.length})` }], onSelectTab: e => (this.selectedTab = e.detail.index) }), this.selectedTab === 0 && (h("verdocs-table", { data: this.members, columns: [
         {
           id: 'name',
           renderHeader: () => 'Member',
-          renderCell: (_, row) => (h("div", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' } }, h("div", { class: "role", style: { backgroundColor: getRoleColor(row.roles) } }, row.first_name.charAt(0), " ", row.last_name.charAt(0)), h("span", null, capitalize(row.first_name), " ", capitalize(row.last_name)))),
+          renderCell: (_, row) => (h("div", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' } }, h("div", { class: "role", style: { backgroundColor: getRoleColor(row.roles) } }, formatInitials(row)), h("span", null, formatFullName(row)))),
         },
         { id: 'email', header: 'E-mail Address' },
         { id: 'phone', header: 'Phone Number' },
         { id: 'roles', header: 'Role', renderCell: (_, row) => `${getRoleLabel(row.roles)}` },
-        { id: 'actions', header: 'Actions', renderCell: () => h("span", { innerHTML: TrashIcon, onClick: () => { } }) },
-      ] }), h("verdocs-button", { label: "Invite New Member", size: "normal", disabled: true })));
+        {
+          id: 'actions',
+          header: 'Actions',
+          renderCell: (_, row) => h("div", null, row.id !== this.endpoint.session.profile_id && h("div", { innerHTML: TrashIcon, onClick: () => (this.deletingMember = row) })),
+        },
+      ] })), this.selectedTab === 1 && (h("verdocs-table", { data: this.invited, columns: [
+        { id: 'email', header: 'E-mail Address' },
+        { id: 'generated_at', header: 'Invited', renderCell: (_, row) => h("div", null, format(new Date(row.generated_at), 'MMM d, Y')) },
+        { id: 'role_id', header: 'Role', renderCell: (_, row) => { var _a; return h("div", null, getRoleLabel([{ name: (_a = this.roles.find(r => r.id === row.role_id)) === null || _a === void 0 ? void 0 : _a.name }])); } },
+        { id: 'status', header: 'Status', renderCell: (_, row) => h("div", null, capitalize(row.status)) },
+        {
+          id: 'actions',
+          header: 'Actions',
+          renderCell: (_, row) => (h("div", null, h("div", { innerHTML: TrashIcon, onClick: () => (this.deletingInvitation = row) }), h("div", { innerHTML: ArrowPathIcon, onClick: () => (this.resendingInvitation = row) }))),
+        },
+      ] })), h("verdocs-button", { label: "Invite New Member", size: "normal", disabled: this.submitting, onClick: () => (this.invitingMember = true) }), this.invitingMember && (h("verdocs-dialog", { onExit: () => (this.invitingMember = false) }, h("div", { slot: "title", class: "heading" }, "Invite New Member"), h("div", { class: "content" }, h("verdocs-text-input", { label: "E-mail Address", placeholder: "Enter the user's email address...", id: "verdocs-invite-email", value: this.newEmailAddress, autocomplete: "off", required: true, onInput: (e) => (this.newEmailAddress = e.target.value), onFocusout: (e) => {
+        this.newEmailAddress = e.target.value.trim();
+      } }), h("div", { style: { marginBottom: '20px' } }), h("verdocs-select-input", { options: roleOptions, label: "Role", onInput: (e) => {
+        this.newRoleId = e.target.value;
+      } }), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", disabled: this.submitting, onClick: () => (this.invitingMember = false) }), h("verdocs-button", { size: "small", label: "OK", disabled: this.submitting || !this.newEmailAddress || !this.newRoleId, onClick: () => this.handleInviteMember() }))))), this.deletingMember && (h("verdocs-dialog", { onExit: () => (this.deletingMember = null) }, h("div", { slot: "title", class: "heading" }, "Delete Member?"), h("div", { class: "content" }, h("p", null, "Are you sure you want to delete this member? This action cannot be undone."), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", disabled: this.submitting, label: "Cancel", onClick: () => (this.deletingMember = null) }), h("verdocs-button", { size: "small", label: "OK", disabled: this.submitting, onClick: () => this.handleDeleteMember() }))))), this.deletingInvitation && (h("verdocs-dialog", { onExit: () => (this.deletingInvitation = null) }, h("div", { slot: "title", class: "heading" }, "Cancel Invitation?"), h("div", { class: "content" }, h("p", null, "Are you sure you want to cancel this invitation? This action cannot be undone."), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", disabled: this.submitting, label: "Cancel", onClick: () => (this.deletingInvitation = null) }), h("verdocs-button", { size: "small", label: "OK", disabled: this.submitting, onClick: () => this.handleDeleteInvitation() }))))), this.resendingInvitation && (h("verdocs-dialog", { onExit: () => (this.resendingInvitation = null) }, h("div", { slot: "title", class: "heading" }, "Resend Invitation?"), h("div", { class: "content" }, h("p", null, "The user will receive an email reminder to join your organization."), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", disabled: this.submitting, label: "Cancel", onClick: () => (this.resendingInvitation = null) }), h("verdocs-button", { size: "small", label: "OK", disabled: this.submitting, onClick: () => this.handleResendInvitation() })))))));
   }
   static get style() { return verdocsSettingsMembersCss; }
 }, [0, "verdocs-settings-members", {
     "endpoint": [16],
-    "members": [32]
+    "members": [32],
+    "invited": [32],
+    "roles": [32],
+    "selectedTab": [32],
+    "invitingMember": [32],
+    "newEmailAddress": [32],
+    "newRoleId": [32],
+    "submitting": [32],
+    "deletingInvitation": [32],
+    "resendingInvitation": [32],
+    "deletingMember": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-settings-members", "verdocs-button", "verdocs-table"];
+  const components = ["verdocs-settings-members", "verdocs-button", "verdocs-dialog", "verdocs-help-icon", "verdocs-select-input", "verdocs-table", "verdocs-tabs", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-settings-members":
       if (!customElements.get(tagName)) {
@@ -97,10 +250,35 @@ function defineCustomElement() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
       }
       break;
     case "verdocs-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { z } from './index3.js';
-import { g as getCurrentProfile, u as updateProfile } from './Profiles.js';
+import { a as getCurrentProfile, u as updateProfile } from './Profiles.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import './Types.js';
 import { d as convertToE164 } from './utils.js';

package/dist/components/verdocs-settings.js

@@ -2,16 +2,17 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$c } from './verdocs-button2.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-loader2.js';
-import { d as defineCustomElement$8 } from './verdocs-select-input2.js';
-import { d as defineCustomElement$7 } from './verdocs-settings-api-keys2.js';
-import { d as defineCustomElement$6 } from './verdocs-settings-members2.js';
-import { d as defineCustomElement$5 } from './verdocs-settings-organization2.js';
-import { d as defineCustomElement$4 } from './verdocs-settings-profile2.js';
-import { d as defineCustomElement$3 } from './verdocs-table2.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$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';
+import { d as defineCustomElement$6 } from './verdocs-settings-organization2.js';
+import { d as defineCustomElement$5 } from './verdocs-settings-profile2.js';
+import { d as defineCustomElement$4 } from './verdocs-table2.js';
+import { d as defineCustomElement$3 } from './verdocs-tabs2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
 const verdocsSettingsCss = "verdocs-settings{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-settings .tabs{gap:4px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid #654dcb}verdocs-settings .tabs .tab{cursor:pointer;padding:5px 10px;color:#ffffff;background-color:#777777}verdocs-settings .tabs .tab.active{color:#ffffff;background-color:#654dcb}";
@@ -53,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-text-input"];
+  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"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-settings":
       if (!customElements.get(tagName)) {
@@ -62,50 +63,55 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "verdocs-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "verdocs-select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "verdocs-settings-api-keys":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "verdocs-settings-members":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "verdocs-settings-organization":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "verdocs-settings-profile":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-tabs":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-table2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const verdocsTableCss = "verdocs-table{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block;width:100%}verdocs-table .table-wrapper{margin:10px 0;padding:0}verdocs-table .table{width:100%;border:none}verdocs-table .row.data-row{border:1px solid #cccccc;background-color:#ffffff}verdocs-table .header-col{text-align:left;padding:8px 16px;font-weight:600;color:#5c6575}verdocs-table .data-col{padding:8px 16px;font-weight:400}";
+const verdocsTableCss = "verdocs-table{width:100%;display:block;margin:0 0 10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-table .table-wrapper{margin:10px 0;padding:0}verdocs-table .table{width:100%;border:none;border-collapse:collapse}verdocs-table .row.data-row{border:1px solid #d4d4d8;background-color:#ffffff}verdocs-table .header-col{color:#5c6575;font-weight:600;text-align:left;padding:8px 16px}verdocs-table .data-col{font-weight:400;padding:8px 16px}";
 
 const VerdocsTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTabs extends Components.VerdocsTabs, HTMLElement {}
+export const VerdocsTabs: {
+  prototype: VerdocsTabs;
+  new (): VerdocsTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-tabs.js

@@ -0,0 +1,6 @@
+import { V as VerdocsTabs$1, d as defineCustomElement$1 } from './verdocs-tabs2.js';
+
+const VerdocsTabs = VerdocsTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTabs, defineCustomElement };

package/dist/components/verdocs-tabs2.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsTabsCss = "verdocs-tabs{width:100%;height:50px;display:-ms-flexbox;display:flex;color:#72757d;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 10px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#e5e5e5;font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06))}verdocs-tabs .tab{height:50px;display:-ms-flexbox;display:flex;cursor:pointer;padding:0 40px;font-size:16px;font-weight:600;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:#e4e4e7}verdocs-tabs .tab.active{color:#707ae5;background-color:#ffffff}verdocs-tabs .tab.disabled{color:#d4d4d8;cursor:default}";
+
+const VerdocsTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.selectTab = createEvent(this, "selectTab", 7);
+    this.tabs = [];
+    this.defaultTab = 0;
+    this.selectedTab = 0;
+  }
+  componentWillLoad() {
+    this.selectedTab = this.defaultTab || 0;
+  }
+  handleSelectTab(index) {
+    var _a;
+    this.selectedTab = index;
+    (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
+  }
+  render() {
+    return (h(Host, null, 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", { class: "flex flex-1" }), h("slot", null, h("div", null))));
+  }
+  static get style() { return verdocsTabsCss; }
+}, [4, "verdocs-tabs", {
+    "tabs": [16],
+    "defaultTab": [2, "default-tab"],
+    "selectedTab": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTabs);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTabs as V, defineCustomElement as d };

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-26T00:04:40",
+  "timestamp": "2023-09-26T14:52:29",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -1262,12 +1262,16 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "verdocs-settings-api-keys"
+        "verdocs-settings-api-keys",
+        "verdocs-settings-members"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "verdocs-settings-api-keys": [
           "verdocs-dialog"
+        ],
+        "verdocs-settings-members": [
+          "verdocs-dialog"
         ]
       }
     },
@@ -6662,6 +6666,7 @@
       "dependents": [
         "verdocs-auth",
         "verdocs-settings-api-keys",
+        "verdocs-settings-members",
         "verdocs-settings-organization",
         "verdocs-template-field-properties",
         "verdocs-template-fields",
@@ -6675,6 +6680,9 @@
         "verdocs-settings-api-keys": [
           "verdocs-select-input"
         ],
+        "verdocs-settings-members": [
+          "verdocs-select-input"
+        ],
         "verdocs-settings-organization": [
           "verdocs-select-input"
         ],
@@ -6872,8 +6880,12 @@
           "verdocs-button"
         ],
         "verdocs-settings-members": [
+          "verdocs-tabs",
           "verdocs-table",
-          "verdocs-button"
+          "verdocs-button",
+          "verdocs-dialog",
+          "verdocs-text-input",
+          "verdocs-select-input"
         ],
         "verdocs-settings-api-keys": [
           "verdocs-table",
@@ -7050,13 +7062,24 @@
         "verdocs-settings"
       ],
       "dependencies": [
+        "verdocs-tabs",
         "verdocs-table",
-        "verdocs-button"
+        "verdocs-button",
+        "verdocs-dialog",
+        "verdocs-text-input",
+        "verdocs-select-input"
       ],
       "dependencyGraph": {
         "verdocs-settings-members": [
+          "verdocs-tabs",
           "verdocs-table",
-          "verdocs-button"
+          "verdocs-button",
+          "verdocs-dialog",
+          "verdocs-text-input",
+          "verdocs-select-input"
+        ],
+        "verdocs-text-input": [
+          "verdocs-help-icon"
         ],
         "verdocs-settings": [
           "verdocs-settings-members"
@@ -7691,6 +7714,74 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/controls/verdocs-tabs/verdocs-tabs.tsx",
+      "encapsulation": "none",
+      "tag": "verdocs-tabs",
+      "docs": "Display a simple row of selectable tabs.",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "defaultTab",
+          "type": "number",
+          "mutable": false,
+          "attr": "default-tab",
+          "reflectToAttr": false,
+          "docs": "The index of the initial tab to select.",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "tabs",
+          "type": "ITab[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The tabs to display",
+          "docsTags": [],
+          "default": "[]",
+          "values": [
+            {
+              "type": "ITab[]"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "selectTab",
+          "detail": "{ tab: ITab; index: number; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\nto the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "verdocs-settings-members"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "verdocs-settings-members": [
+          "verdocs-tabs"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/templates/verdocs-template-attachments/verdocs-template-attachments.tsx",
       "encapsulation": "none",
@@ -9691,6 +9782,7 @@
         "verdocs-envelopes-list",
         "verdocs-initial-dialog",
         "verdocs-settings-api-keys",
+        "verdocs-settings-members",
         "verdocs-settings-organization",
         "verdocs-settings-profile",
         "verdocs-signature-dialog",
@@ -9719,6 +9811,9 @@
         "verdocs-settings-api-keys": [
           "verdocs-text-input"
         ],
+        "verdocs-settings-members": [
+          "verdocs-text-input"
+        ],
         "verdocs-settings-organization": [
           "verdocs-text-input"
         ],