@verdocs/web-sdk 2.2.0 → 2.2.1

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

package/dist/components/verdocs-settings.js

@@ -2,12 +2,15 @@ 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$8 } from './verdocs-button2.js';
-import { d as defineCustomElement$7 } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$6 } from './verdocs-loader2.js';
-import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
-import { d as defineCustomElement$4 } from './verdocs-settings-organization2.js';
-import { d as defineCustomElement$3 } from './verdocs-settings-profile2.js';
+import { d as defineCustomElement$b } from './verdocs-button2.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$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}";
@@ -38,7 +41,7 @@ const VerdocsSettings$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint })));
+    return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization"), h("div", { class: `tab ${this.tab === 'members' ? 'active' : ''}`, onClick: () => (this.tab = 'members') }, "Members"), h("div", { class: `tab ${this.tab === 'apikeys' ? 'active' : ''}`, onClick: () => (this.tab = 'apikeys') }, "API Keys")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint }), this.tab === 'members' && h("verdocs-settings-members", { endpoint: this.endpoint }), this.tab === 'apikeys' && h("verdocs-settings-api-keys", { endpoint: this.endpoint })));
   }
   static get style() { return verdocsSettingsCss; }
 }, [0, "verdocs-settings", {
@@ -49,7 +52,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-settings", "verdocs-button", "verdocs-help-icon", "verdocs-loader", "verdocs-select-input", "verdocs-settings-organization", "verdocs-settings-profile", "verdocs-text-input"];
+  const components = ["verdocs-settings", "verdocs-button", "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"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-settings":
       if (!customElements.get(tagName)) {
@@ -58,30 +61,45 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$b();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$a();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$9();
       }
       break;
     case "verdocs-select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-settings-api-keys":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-settings-members":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
       }
       break;
     case "verdocs-settings-organization":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-settings-profile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-table":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

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

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

package/dist/components/verdocs-table.js

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

package/dist/components/verdocs-table2.js

@@ -0,0 +1,41 @@
+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 .header-col{text-align:left;padding:3px 8px;font-weight:700;color:#555555}verdocs-table .data-col{padding:3px 8px;font-weight:400}";
+
+const VerdocsTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.columns = [];
+    this.data = [];
+  }
+  render() {
+    return (h(Host, { class: "table-wrapper" }, h("table", { class: "table" }, h("thead", null, h("tr", { class: "row header-row" }, this.columns.map((col, i) => {
+      return h("th", { class: `col header-col col-${i} col-${col.id}`, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id });
+    }))), h("tbody", null, this.data.map(row => (h("tr", { class: "row data-row" }, this.columns.map((col, i) => {
+      var _a;
+      return h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
+      // return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
+    }))))))));
+  }
+  static get style() { return verdocsTableCss; }
+}, [0, "verdocs-table", {
+    "columns": [16],
+    "data": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTable);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTable as V, defineCustomElement as d };

package/dist/custom-elements.json

@@ -1290,6 +1290,22 @@
       },
       "attributes": []
     },
+    {
+      "name": "verdocs-settings-api-keys",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays a settings form that allows the user to manage their API keys."
+      },
+      "attributes": []
+    },
+    {
+      "name": "verdocs-settings-members",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays a settings form that allows the user to manage their Verdocs profile."
+      },
+      "attributes": []
+    },
     {
       "name": "verdocs-settings-organization",
       "description": {
@@ -1438,6 +1454,14 @@
         }
       ]
     },
+    {
+      "name": "verdocs-table",
+      "description": {
+        "kind": "markdown",
+        "value": "Display a simple table of data. Columns and data cells may have custom renderers defined to\nsupport creating interactive table layouts."
+      },
+      "attributes": []
+    },
     {
       "name": "verdocs-template-attachments",
       "description": {