@verdocs/web-sdk 2.3.88 → 4.0.5

package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.js

@@ -1,337 +1,341 @@
-import { Profiles } from '@verdocs/js-sdk/Users';
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { capitalize } from '@verdocs/js-sdk/Utils/Strings';
-import { Members, Invitations } from '@verdocs/js-sdk/Organizations';
-import { formatFullName, formatInitials } from '@verdocs/js-sdk/Utils/Primitives';
-import { h, Host } from '@stencil/core';
-import { VerdocsToast } from '../../../utils/Toast';
-import { SDKError } from '../../../utils/errors';
-import { format } from 'date-fns';
+import { VerdocsEndpoint, getOrganizationInvitations, getOrganizationMembers, deleteOrganizationMember, createOrganizationInvitation, deleteOrganizationInvitation, resendOrganizationInvitation, formatFullName, formatInitials, capitalize, } from "@verdocs/js-sdk";
+import { h, Host } from "@stencil/core";
+import { VerdocsToast } from "../../../utils/Toast";
+import { SDKError } from "../../../utils/errors";
+import { format } from "date-fns";
 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';
-  if (roles.find(role => role.name === 'admin') !== undefined)
-    return 'Admin';
-  if (roles.find(role => role.name === 'member') !== undefined)
-    return 'Member';
-  if (roles.find(role => role.name === 'basic_user') !== undefined)
-    return 'Basic User';
-  if (roles.find(role => role.name === 'contact') !== undefined)
-    return 'Contact';
-};
+// const getRoleLabel = (roles: any[]) => {
+//   if (roles.find(role => role.name === 'owner') !== undefined) return 'Owner';
+//   if (roles.find(role => role.name === 'admin') !== undefined) return 'Admin';
+//   if (roles.find(role => role.name === 'member') !== undefined) return 'Member';
+//   if (roles.find(role => role.name === 'basic_user') !== undefined) return 'Basic User';
+//   if (roles.find(role => role.name === 'contact') !== undefined) return 'Contact';
+// };
+//
 const getRoleColor = (roles) => {
-  if (roles.find(role => role.name === 'owner') !== undefined)
-    return '#9333ea';
-  if (roles.find(role => role.name === 'admin') !== undefined)
-    return '#2563eb';
-  if (roles.find(role => role.name === 'member') !== undefined)
-    return '#16a34a';
-  if (roles.find(role => role.name === 'basic_user') !== undefined)
-    return '#ea580c';
-  if (roles.find(role => role.name === 'contact') !== undefined)
-    return '#52525B';
+    if (roles.find(role => role.name === 'owner') !== undefined)
+        return '#9333ea';
+    if (roles.find(role => role.name === 'admin') !== undefined)
+        return '#2563eb';
+    if (roles.find(role => role.name === 'member') !== undefined)
+        return '#16a34a';
+    if (roles.find(role => role.name === 'basic_user') !== undefined)
+        return '#ea580c';
+    if (roles.find(role => role.name === 'contact') !== undefined)
+        return '#52525B';
 };
+const roleOptions = [
+    { label: 'Contact', value: 'contact' },
+    { label: 'Basic User', value: 'basic_user' },
+    { label: 'Member', value: 'member' },
+    { label: 'Admin', value: 'admin' },
+    { label: 'Owner', value: 'owner' },
+];
 /**
  * Displays a settings form that allows the user to manage their Verdocs profile.
  */
 export class VerdocsSettingsMembers {
-  constructor() {
-    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();
-    if (!this.endpoint.session) {
-      console.log('[SETTINGS] Must be authenticated');
-      return;
-    }
-  }
-  async componentDidLoad() {
-    this.loadMembers().catch((e) => console.log('Unknown Error', e));
-  }
-  async loadMembers() {
-    var _a, _b, _c, _d;
-    try {
-      const [roles, members, invites] = await Promise.all([
-        Profiles.getRoles(this.endpoint),
-        Members.getMembers(this.endpoint, this.endpoint.session.organization_id),
-        Invitations.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) || '';
+    constructor() {
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.members = [];
+        this.invited = [];
+        this.selectedTab = 0;
+        this.invitingMember = false;
+        this.newEmailAddress = '';
+        this.newRole = 'member';
+        this.submitting = false;
+        this.deletingInvitation = null;
+        this.resendingInvitation = null;
+        this.deletingMember = null;
     }
-    catch (e) {
-      (_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');
+    componentWillLoad() {
+        this.endpoint.loadSession();
+        if (!this.endpoint.session) {
+            console.log('[SETTINGS] Must be authenticated');
+            return;
+        }
     }
-  }
-  async handleInviteMember() {
-    this.submitting = true;
-    Invitations.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;
-    Members.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;
-    Invitations.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;
-    Invitations.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");
+    async componentDidLoad() {
+        this.loadMembers().catch((e) => console.log('Unknown Error', e));
     }
-    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) } }, 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: (_, 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 is() { return "verdocs-settings-members"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-settings-members.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-settings-members.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "endpoint": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "VerdocsEndpoint",
-          "resolved": "VerdocsEndpoint",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
-        },
-        "defaultValue": "VerdocsEndpoint.getDefault()"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "members": {},
-      "invited": {},
-      "roles": {},
-      "selectedTab": {},
-      "invitingMember": {},
-      "newEmailAddress": {},
-      "newRoleId": {},
-      "submitting": {},
-      "deletingInvitation": {},
-      "resendingInvitation": {},
-      "deletingMember": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sdkError",
-        "name": "sdkError",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
-        },
-        "complexType": {
-          "original": "SDKError",
-          "resolved": "SDKError",
-          "references": {
-            "SDKError": {
-              "location": "import",
-              "path": "../../../utils/errors"
-            }
-          }
+    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),
+            ]);
+            this.members = members;
+            this.invited = invites;
+            this.newRole = 'member';
         }
-      }, {
-        "method": "memberInvited",
-        "name": "memberInvited",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user chooses to invite a new member."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
-          "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            },
-            "IProfile": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Users/Types"
-            }
-          }
+        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));
+            VerdocsToast('Unable to load members. Please try again later');
         }
-      }, {
-        "method": "memberUpdated",
-        "name": "memberUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user chooses to invite a new member."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
-          "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            },
-            "IProfile": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Users/Types"
-            }
-          }
+    }
+    async handleInviteMember() {
+        this.submitting = true;
+        createOrganizationInvitation(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
+            email: this.newEmailAddress,
+            role: this.newRole,
+            // TODO: Test
+            // organization_id: this.endpoint.session.organization_id,
+        })
+            .then(r => {
+            console.log('[SETTINGS] Invited member', r);
+            this.invitingMember = false;
+            this.submitting = false;
+            this.newRole = 'member';
+            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.newRole = 'member';
+            this.newEmailAddress = '';
+            VerdocsToast('Unable to invite member. Please try again later', { style: 'error' });
+        });
+    }
+    async handleDeleteMember() {
+        this.submitting = true;
+        deleteOrganizationMember(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;
+        deleteOrganizationInvitation(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;
+        resendOrganizationInvitation(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");
         }
-      }, {
-        "method": "memberRemoved",
-        "name": "memberRemoved",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user chooses to invite a new member."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
-          "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            },
-            "IProfile": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Users/Types"
+        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) } }, formatInitials(row)), h("span", null, formatFullName(row)))),
+                },
+                { id: 'email', header: 'E-mail Address' },
+                { id: 'phone', header: 'Phone Number' },
+                { id: 'roles', header: 'Role', renderCell: (_, row) => `${row.roles}` },
+                {
+                    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', header: 'Role', renderCell: (_, row) => h("div", null, row.role) },
+                { 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.newRole = 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.newRole, 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 is() { return "verdocs-settings-members"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-settings-members.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-settings-members.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerdocsEndpoint",
+                    "resolved": "VerdocsEndpoint",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+                },
+                "defaultValue": "VerdocsEndpoint.getDefault()"
             }
-          }
-        }
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "members": {},
+            "invited": {},
+            "selectedTab": {},
+            "invitingMember": {},
+            "newEmailAddress": {},
+            "newRole": {},
+            "submitting": {},
+            "deletingInvitation": {},
+            "resendingInvitation": {},
+            "deletingMember": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdkError",
+                "name": "sdkError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+                },
+                "complexType": {
+                    "original": "SDKError",
+                    "resolved": "SDKError",
+                    "references": {
+                        "SDKError": {
+                            "location": "import",
+                            "path": "../../../utils/errors",
+                            "id": "src/utils/errors.ts::SDKError"
+                        }
+                    }
+                }
+            }, {
+                "method": "memberInvited",
+                "name": "memberInvited",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user chooses to invite a new member."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IProfile": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }, {
+                "method": "memberUpdated",
+                "name": "memberUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user chooses to invite a new member."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IProfile": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }, {
+                "method": "memberRemoved",
+                "name": "memberRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user chooses to invite a new member."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IProfile": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }];
+    }
 }