@verdocs/web-sdk 2.2.0 → 2.2.2

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

@@ -0,0 +1,210 @@
+import { Members } from '@verdocs/js-sdk/Organizations';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { VerdocsToast } from '../../../utils/Toast';
+import { SDKError } from '../../../utils/errors';
+import { capitalize } from '@verdocs/js-sdk/Utils/Strings';
+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 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 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';
+};
+/**
+ * Displays a settings form that allows the user to manage their Verdocs profile.
+ */
+export class VerdocsSettingsMembers {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.members = [];
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return;
+    }
+  }
+  async componentDidLoad() {
+    var _a, _b, _c;
+    try {
+      this.members = await Members.getMembers(this.endpoint, this.endpoint.session.organization_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));
+      VerdocsToast('Unable to load members. Please try again later');
+    }
+  }
+  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: [
+        {
+          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)))),
+        },
+        { 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 })));
+  }
+  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": {}
+    };
+  }
+  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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,17 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Settings/Members',
+  component: 'verdocs-settings-members',
+  args: {},
+  argTypes: {
+    onMemberInvited: { action: 'memberInvited' },
+    onMemberUpdated: { action: 'memberUpdated' },
+    onMemberRemoved: { action: 'memberRemoved' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const Members = ({ onMemberInvited, onMemberUpdated, onMemberRemoved }) => html `
+  <verdocs-settings-members @memberInvited=${onMemberInvited} @memberUpdated=${onMemberUpdated} @memberRemoved=${onMemberRemoved} />
+`;

package/dist/components/Strings.js

@@ -0,0 +1,6 @@
+/**
+ * Capitalize the first letter of a string.
+ */
+var capitalize = function (str) { return str.charAt(0).toUpperCase() + str.slice(1); };
+
+export { capitalize as c };

package/dist/components/index.d.ts

@@ -8,6 +8,7 @@ export { VerdocsButtonPanel as VerdocsButtonPanel } from '../types/components/co
 export { VerdocsCheckbox as VerdocsCheckbox } from '../types/components/controls/verdocs-checkbox/verdocs-checkbox';
 export { VerdocsComponentError as VerdocsComponentError } from '../types/components/controls/verdocs-component-error/verdocs-component-error';
 export { VerdocsContactPicker as VerdocsContactPicker } from '../types/components/envelopes/verdocs-contact-picker/verdocs-contact-picker';
+export { VerdocsDialog as VerdocsDialog } from '../types/components/dialogs/verdocs-dialog/verdocs-dialog';
 export { VerdocsDropdown as VerdocsDropdown } from '../types/components/controls/verdocs-dropdown/verdocs-dropdown';
 export { VerdocsEnvelopeDocumentPage as VerdocsEnvelopeDocumentPage } from '../types/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page';
 export { VerdocsEnvelopeRecipientLink as VerdocsEnvelopeRecipientLink } from '../types/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link';
@@ -46,12 +47,15 @@ export { VerdocsSearchTabs as VerdocsSearchTabs } from '../types/components/elem
 export { VerdocsSelectInput as VerdocsSelectInput } from '../types/components/controls/verdocs-select-input/verdocs-select-input';
 export { VerdocsSend as VerdocsSend } from '../types/components/embeds/verdocs-send/verdocs-send';
 export { VerdocsSettings as VerdocsSettings } from '../types/components/embeds/verdocs-settings/verdocs-settings';
+export { VerdocsSettingsApiKeys as VerdocsSettingsApiKeys } from '../types/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys';
+export { VerdocsSettingsMembers as VerdocsSettingsMembers } from '../types/components/settings/verdocs-settings-members/verdocs-settings-members';
 export { VerdocsSettingsOrganization as VerdocsSettingsOrganization } from '../types/components/settings/verdocs-settings-organization/verdocs-settings-organization';
 export { VerdocsSettingsProfile as VerdocsSettingsProfile } from '../types/components/settings/verdocs-settings-profile/verdocs-settings-profile';
 export { VerdocsSign as VerdocsSign } from '../types/components/embeds/verdocs-sign/verdocs-sign';
 export { VerdocsSignatureDialog as VerdocsSignatureDialog } from '../types/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog';
 export { VerdocsQuickFilter as VerdocsSpinner } from '../types/components/controls/verdocs-spinner/verdocs-spinner';
 export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/components/envelopes/verdocs-status-indicator/verdocs-status-indicator';
+export { VerdocsTable as VerdocsTable } from '../types/components/controls/verdocs-table/verdocs-table';
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/templates/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';

package/dist/components/index.js

@@ -8,6 +8,7 @@ export { VerdocsButtonPanel, defineCustomElement as defineCustomElementVerdocsBu
 export { VerdocsCheckbox, defineCustomElement as defineCustomElementVerdocsCheckbox } from './verdocs-checkbox.js';
 export { VerdocsComponentError, defineCustomElement as defineCustomElementVerdocsComponentError } from './verdocs-component-error.js';
 export { VerdocsContactPicker, defineCustomElement as defineCustomElementVerdocsContactPicker } from './verdocs-contact-picker.js';
+export { VerdocsDialog, defineCustomElement as defineCustomElementVerdocsDialog } from './verdocs-dialog.js';
 export { VerdocsDropdown, defineCustomElement as defineCustomElementVerdocsDropdown } from './verdocs-dropdown.js';
 export { VerdocsEnvelopeDocumentPage, defineCustomElement as defineCustomElementVerdocsEnvelopeDocumentPage } from './verdocs-envelope-document-page.js';
 export { VerdocsEnvelopeRecipientLink, defineCustomElement as defineCustomElementVerdocsEnvelopeRecipientLink } from './verdocs-envelope-recipient-link.js';
@@ -46,12 +47,15 @@ export { VerdocsSearchTabs, defineCustomElement as defineCustomElementVerdocsSea
 export { VerdocsSelectInput, defineCustomElement as defineCustomElementVerdocsSelectInput } from './verdocs-select-input.js';
 export { VerdocsSend, defineCustomElement as defineCustomElementVerdocsSend } from './verdocs-send.js';
 export { VerdocsSettings, defineCustomElement as defineCustomElementVerdocsSettings } from './verdocs-settings.js';
+export { VerdocsSettingsApiKeys, defineCustomElement as defineCustomElementVerdocsSettingsApiKeys } from './verdocs-settings-api-keys.js';
+export { VerdocsSettingsMembers, defineCustomElement as defineCustomElementVerdocsSettingsMembers } from './verdocs-settings-members.js';
 export { VerdocsSettingsOrganization, defineCustomElement as defineCustomElementVerdocsSettingsOrganization } from './verdocs-settings-organization.js';
 export { VerdocsSettingsProfile, defineCustomElement as defineCustomElementVerdocsSettingsProfile } from './verdocs-settings-profile.js';
 export { VerdocsSign, defineCustomElement as defineCustomElementVerdocsSign } from './verdocs-sign.js';
 export { VerdocsSignatureDialog, defineCustomElement as defineCustomElementVerdocsSignatureDialog } from './verdocs-signature-dialog.js';
 export { VerdocsSpinner, defineCustomElement as defineCustomElementVerdocsSpinner } from './verdocs-spinner.js';
 export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdocsStatusIndicator } from './verdocs-status-indicator.js';
+export { VerdocsTable, defineCustomElement as defineCustomElementVerdocsTable } from './verdocs-table.js';
 export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
 export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';
 export { VerdocsTemplateCreate, defineCustomElement as defineCustomElementVerdocsTemplateCreate } from './verdocs-template-create.js';

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

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

package/dist/components/verdocs-dialog.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsDialogCss = "verdocs-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog .background-overlay{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:absolute;-ms-flex-align:center;align-items:center;background:#0000007f;-ms-flex-pack:center;justify-content:center}verdocs-dialog .dialog{width:320px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-dialog .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}";
+
+const VerdocsDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.exit = createEvent(this, "exit", 7);
+  }
+  // We need a separate event handler for clicking the background because it can receive events "through" other child components
+  handleDismiss(e) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.exit.emit();
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("slot", { name: "title" }, h("div", { class: "heading" }, "Please Confirm")), h("slot", null, h("p", null))))));
+  }
+  static get style() { return verdocsDialogCss; }
+}, [4, "verdocs-dialog"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-dialog"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-dialog":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsDialog$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsDialog = VerdocsDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsDialog, defineCustomElement };

package/dist/components/verdocs-settings-api-keys.d.ts

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

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

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

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

@@ -0,0 +1,108 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { c as capitalize } from './Strings.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';
+
+/**
+ * API keys are used to authenticate server-to-server calls. (API keys should **never** be used for client-to-server operations!)
+ * To generate a key, either use the Verdocs admin interface and make note of the client_id and client_secret generated, or call
+ * createKey as shown below. Then call {@link Users.Auth.authenticateApp} to obtain an access token using the provided ID and
+ * secret. Note that server-to-server authentication requests return shorter-lived tokens, so it is important to check the `exp`
+ * field and re-authenticate as needed for subsequent calls.
+ *
+ * API keys may be updated or rotated at any time. Regular rotation is recommended. Rotation will not expire or invalidate
+ * existing server-to-server sessions, so it may be done at any time without disrupting your application.
+ *
+ * @module
+ */
+/**
+ * Get a list of keys for a given organization. The caller must have admin access to the organization.
+ *
+ * ```typescript
+ * import {ApiKeys} from '@verdocs/js-sdk/Organizations';
+ *
+ * const keys = await ApiKeys.getKeys(ORGID);
+ * ```
+ */
+var getKeys = function (endpoint, organizationId) {
+    return endpoint.api //
+        .get("/organizations/".concat(organizationId, "/api_key"))
+        .then(function (r) { return r.data; });
+};
+
+const verdocsSettingsApiKeysCss = "verdocs-settings-api-keys{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-api-keys .table{margin:12px 0}verdocs-settings-api-keys .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-api-keys .col.col-actions{-ms-flex-align:center;align-items:center;text-align:center}verdocs-settings-api-keys .col.col-actions svg{cursor:pointer;width:24px;height:24px;fill:#777777}verdocs-settings-api-keys .col.col-actions svg:hover{fill:red}";
+
+const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.memberInvited = createEvent(this, "memberInvited", 7);
+    this.memberUpdated = createEvent(this, "memberUpdated", 7);
+    this.memberRemoved = createEvent(this, "memberRemoved", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.keys = [];
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return;
+    }
+  }
+  async componentDidLoad() {
+    var _a, _b, _c;
+    try {
+      this.keys = await getKeys(this.endpoint, this.endpoint.session.organization_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));
+      VerdocsToast('Unable to load members. Please try again later');
+    }
+  }
+  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, "API Keys"), h("verdocs-table", { data: this.keys, columns: [
+        { id: 'name', header: 'Name' },
+        { id: 'client_id', header: 'Client ID' },
+        { id: 'profile_id', header: 'Acts as', renderCell: (_, row) => { var _a, _b; return `${capitalize((_a = row.profile) === null || _a === void 0 ? void 0 : _a.first_name)} ${capitalize((_b = row.profile) === null || _b === void 0 ? void 0 : _b.last_name)}`; } },
+      ] }), h("verdocs-button", { label: "Add API Key", size: "normal", disabled: true })));
+  }
+  static get style() { return verdocsSettingsApiKeysCss; }
+}, [0, "verdocs-settings-api-keys", {
+    "endpoint": [16],
+    "keys": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-settings-api-keys", "verdocs-button", "verdocs-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-settings-api-keys":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSettingsApiKeys);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsSettingsApiKeys as V, defineCustomElement as d };

package/dist/components/verdocs-settings-members.d.ts

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

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

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

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

@@ -0,0 +1,123 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { c as capitalize } from './Strings.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';
+
+/**
+ * An Organization Member (aka Profile) is an individual user with access to an organization.
+ *
+ * @module
+ */
+var getMembers = function (endpoint, organizationId) {
+    return endpoint.api //
+        .get("/organizations/".concat(organizationId, "/profiles"))
+        .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 .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}";
+
+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 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 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';
+};
+const VerdocsSettingsMembers = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.memberInvited = createEvent(this, "memberInvited", 7);
+    this.memberUpdated = createEvent(this, "memberUpdated", 7);
+    this.memberRemoved = createEvent(this, "memberRemoved", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.members = [];
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return;
+    }
+  }
+  async componentDidLoad() {
+    var _a, _b, _c;
+    try {
+      this.members = await getMembers(this.endpoint, this.endpoint.session.organization_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));
+      VerdocsToast('Unable to load members. Please try again later');
+    }
+  }
+  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: [
+        {
+          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)))),
+        },
+        { 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 })));
+  }
+  static get style() { return verdocsSettingsMembersCss; }
+}, [0, "verdocs-settings-members", {
+    "endpoint": [16],
+    "members": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-settings-members", "verdocs-button", "verdocs-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-settings-members":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSettingsMembers);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsSettingsMembers as V, defineCustomElement as d };