@verdocs/web-sdk 2.2.5 → 2.2.7

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "./components/controls/verdocs-quick-filter/verdocs-quick-filter.js",
     "./components/elements/verdocs-search-box/verdocs-search-box.js",
     "./components/controls/verdocs-table/verdocs-table.js",
+    "./components/controls/verdocs-tabs/verdocs-tabs.js",
     "./components/templates/verdocs-templates-list/verdocs-templates-list.js",
     "./components/controls/verdocs-toggle/verdocs-toggle.js",
     "./components/controls/verdocs-button/verdocs-button.js",

package/dist/collection/components/controls/verdocs-table/verdocs-table.css

@@ -1,9 +1,9 @@
 verdocs-table {
-  font-family: "Inter", "Barlow", sans-serif;
-  box-sizing: border-box;
-  margin: 0 0 10px 0;
-  display: block;
   width: 100%;
+  display: block;
+  margin: 0 0 10px 0;
+  box-sizing: border-box;
+  font-family: "Inter", "Barlow", sans-serif;
 }
 verdocs-table .table-wrapper {
   margin: 10px 0;
@@ -12,14 +12,19 @@ verdocs-table .table-wrapper {
 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: 3px 8px;
-  font-weight: 700;
-  color: #555555;
+  padding: 8px 16px;
 }
 verdocs-table .data-col {
-  padding: 3px 8px;
   font-weight: 400;
+  padding: 8px 16px;
 }

package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.css

@@ -0,0 +1,33 @@
+verdocs-tabs {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  color: #72757d;
+  flex-wrap: wrap;
+  margin: 0 0 10px 0;
+  flex-direction: row;
+  align-items: flex-end;
+  box-sizing: border-box;
+  background-color: #e5e5e5;
+  font-family: "Inter", "Barlow", sans-serif;
+  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: flex;
+  cursor: pointer;
+  padding: 0 40px;
+  font-size: 16px;
+  font-weight: 600;
+  align-items: center;
+  justify-content: center;
+  background-color: #e4e4e7;
+}
+verdocs-tabs .tab.active {
+  color: #707ae5;
+  background-color: #ffffff;
+}
+verdocs-tabs .tab.disabled {
+  color: #d4d4d8;
+  cursor: default;
+}

package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.js

@@ -0,0 +1,102 @@
+import { Host, h } from '@stencil/core';
+/**
+ * Display a simple row of selectable tabs.
+ */
+export class VerdocsTabs {
+  constructor() {
+    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 is() { return "verdocs-tabs"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tabs": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ITab[]",
+          "resolved": "ITab[]",
+          "references": {
+            "ITab": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The tabs to display"
+        },
+        "defaultValue": "[]"
+      },
+      "defaultTab": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The index of the initial tab to select."
+        },
+        "attribute": "default-tab",
+        "reflect": false,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedTab": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectTab",
+        "name": "selectTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "complexType": {
+          "original": "{tab: ITab; index: number}",
+          "resolved": "{ tab: ITab; index: number; }",
+          "references": {
+            "ITab": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.stories.js

@@ -0,0 +1,25 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Tabs',
+  component: 'verdocs-tabs',
+  args: {
+    tabs: [
+      { id: 'id', header: 'ID' },
+      { id: 'name', header: 'Name' },
+      {
+        id: 'date',
+        header: 'Date',
+        renderHeader: () => 'Past Due Since',
+        renderCell: (_, row) => `<span style="color: red">${new Date(row.date).toLocaleDateString()}</a>`,
+      },
+    ],
+    data: [
+      { id: '123', name: 'Test 1', date: new Date() },
+      { id: '456', name: 'Test 2', date: new Date() },
+    ],
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const Table = ({ columns, data }) => html `<verdocs-table .columns=${columns} .data=${data} />`;

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.css

@@ -56,4 +56,19 @@ verdocs-text-input .clear {
 verdocs-text-input .clear:hover {
   fill: #720101;
   cursor: pointer;
+}
+verdocs-text-input .copy {
+  top: 7px;
+  right: 5px;
+  width: 18px;
+  height: 18px;
+  fill: #cccccc;
+  position: absolute;
+}
+verdocs-text-input .copy:hover {
+  fill: #654dcb;
+  cursor: pointer;
+}
+verdocs-text-input.clearable .input-element, verdocs-text-input.copyable .input-element {
+  padding-right: 32px;
 }

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.js

@@ -1,5 +1,7 @@
 import { Host, h } from '@stencil/core';
+import { VerdocsToast } from '../../../utils/Toast';
 const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
+const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
 /**
  * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
  * visual styles of the other components. Note that events "bubble" from the input field to the container,
@@ -13,12 +15,20 @@ export class VerdocsTextInput {
     this.autocomplete = '';
     this.helpText = '';
     this.clearable = false;
+    this.copyable = false;
     this.type = 'text';
     this.disabled = false;
     this.required = false;
   }
+  copyToClipboard() {
+    this.inputEl.select();
+    navigator.clipboard
+      .writeText(this.value)
+      .then(() => VerdocsToast('Copied!'))
+      .catch(e => console.log('Error copying to clipboard', e));
+  }
   render() {
-    return (h(Host, { class: "input-field" }, h("label", null, this.label && (h("div", { class: "input-label" }, this.label + ':', this.required && h("span", { class: "required" }, "*"))), h("div", { class: "input-container" }, h("input", { type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { innerHTML: ClearIcon, class: "clear", onClick: () => {
+    return (h(Host, { class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", null, this.label && (h("div", { class: "input-label" }, this.label + ':', this.required && h("span", { class: "required" }, "*"))), h("div", { class: "input-container" }, h("input", { type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { innerHTML: ClearIcon, class: "clear", onClick: () => {
         // We need to allow the onInput event to fire first in case
         // the user was focused on this field before clicking clear.
         setTimeout(() => {
@@ -32,7 +42,7 @@ export class VerdocsTextInput {
             (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
           }, 50);
         }, 50);
-      } }))), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
+      } })), !this.clearable && this.copyable && this.value && h("span", { innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
   }
   static get is() { return "verdocs-text-input"; }
   static get originalStyleUrls() {
@@ -155,6 +165,24 @@ export class VerdocsTextInput {
         "reflect": false,
         "defaultValue": "false"
       },
+      "copyable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\nboth clearable and copyable. If both properties are set to true, copyable will\nbe ignored."
+        },
+        "attribute": "copyable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "type": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/dialogs/verdocs-dialog/verdocs-dialog.css

@@ -18,18 +18,34 @@ verdocs-dialog .background-overlay {
   justify-content: center;
 }
 verdocs-dialog .dialog {
-  width: 320px;
+  width: 420px;
   display: flex;
-  flex-direction: column;
-  border-radius: 4px;
+  max-width: 100%;
   overflow: hidden;
+  border-radius: 4px;
+  flex-direction: column;
   background: #ffffff;
-  padding: 16px;
   box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
 }
 verdocs-dialog .heading {
   display: flex;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 500;
+  padding: 8px 16px;
+  flex-direction: row;
+  color: #ffffff;
+  background: #46497d;
+}
+verdocs-dialog .content {
+  padding: 16px;
+}
+verdocs-dialog .content p {
+  margin: 0 0 1em 0;
+}
+verdocs-dialog .buttons {
+  gap: 14px;
+  display: flex;
   flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
 }

package/dist/collection/components/dialogs/verdocs-dialog/verdocs-dialog.js

@@ -5,13 +5,14 @@ import { h, Host } from '@stencil/core';
 export class VerdocsDialog {
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
+    var _a;
     if (e.target.className === 'background-overlay') {
       e.preventDefault();
-      this.exit.emit();
+      (_a = this.exit) === null || _a === void 0 ? void 0 : _a.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))))));
+    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("div", { class: "content" }))))));
   }
   static get is() { return "verdocs-dialog"; }
   static get originalStyleUrls() {

package/dist/collection/components/embeds/verdocs-view/verdocs-view.js

@@ -45,7 +45,13 @@ export class VerdocsView {
     console.log('[VIEW] Loading envelope...');
     try {
       this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+      console.log('[VIEW] Loaded envelope', this.envelope);
       this.roleNames = this.envelope.recipients.map(r => r.role_name);
+      setTimeout(async () => {
+        console.log('[VIEW] Reloading envelope...');
+        this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+        console.log('[VIEW] Reloaded envelope', this.envelope);
+      }, 2000);
     }
     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));
@@ -129,11 +135,12 @@ export class VerdocsView {
     }
     // Add download options to the menu
     const hasAttachments = this.envelope.documents.length > 0;
-    const hasCertificate = !!this.envelope.certificate;
+    const normalDocCount = this.envelope.documents.filter(doc => doc.type === 'attachment').length;
+    const hasCertificate = this.envelope.documents.find(doc => doc.type === 'certificate') !== undefined;
     if (hasAttachments || hasCertificate) {
       menuOptions.push({ label: '' });
       if (hasAttachments) {
-        menuOptions.push({ id: 'download-attachments', label: 'Download Documents(s)' });
+        menuOptions.push({ id: 'download-attachments', label: normalDocCount > 1 ? 'Download Documents' : 'Download Document' });
       }
       if (hasCertificate) {
         menuOptions.push({ id: 'download-certificate', label: 'Download Certificate' });

package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.css

@@ -11,28 +11,37 @@ verdocs-settings-api-keys {
 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;
+verdocs-settings-api-keys .data-col div {
+  gap: 12px;
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-verdocs-settings-api-keys .col.col-actions {
-  align-items: center;
-  text-align: center;
+  flex-direction: row;
 }
-verdocs-settings-api-keys .col.col-actions svg {
-  cursor: pointer;
+verdocs-settings-api-keys .data-col svg {
   width: 24px;
   height: 24px;
-  fill: #777777;
 }
-verdocs-settings-api-keys .col.col-actions svg:hover {
-  fill: red;
+verdocs-settings-api-keys .col-name svg,
+verdocs-settings-api-keys .col-client_id svg,
+verdocs-settings-api-keys .col-profile_id svg {
+  fill: #a1a1aa;
+}
+verdocs-settings-api-keys .col-actions svg {
+  fill: #ffffff;
+  stroke: #a1a1aa;
+}
+verdocs-settings-api-keys .col-actions svg:hover {
+  cursor: pointer;
+  stroke: red;
+}
+verdocs-settings-api-keys .col-actions > div {
+  justify-content: center;
+}
+verdocs-settings-api-keys .header-col.col-actions {
+  text-align: center;
+}
+verdocs-settings-api-keys verdocs-dialog p {
+  font-size: 16px;
+  line-height: 18px;
+  margin: 0 0 1em 0;
 }

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

@@ -1,9 +1,14 @@
-import { ApiKeys } from '@verdocs/js-sdk/Organizations';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { ApiKeys, Members } from '@verdocs/js-sdk/Organizations';
+import { formatFullName } from '@verdocs/js-sdk/Utils/Primitives';
 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 ClockIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z" clip-rule="evenodd" /></svg>`;
+const TagIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.5 3A2.5 2.5 0 003 5.5v2.879a2.5 2.5 0 00.732 1.767l6.5 6.5a2.5 2.5 0 003.536 0l2.878-2.878a2.5 2.5 0 000-3.536l-6.5-6.5A2.5 2.5 0 008.38 3H5.5zM6 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /></svg>`;
+const UserIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z" clip-rule="evenodd" /></svg>`;
+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>`;
 /**
  * Displays a settings form that allows the user to manage their API keys.
  */
@@ -11,6 +16,13 @@ export class VerdocsSettingsApiKeys {
   constructor() {
     this.endpoint = VerdocsEndpoint.getDefault();
     this.keys = [];
+    this.creatingKey = false;
+    this.createdKey = null;
+    this.deletingKey = null;
+    this.rotatingKey = null;
+    this.newApiKeyName = '';
+    this.newApiKeyProfileId = '';
+    this.members = [];
   }
   componentWillLoad() {
     this.endpoint.loadSession();
@@ -20,25 +32,111 @@ export class VerdocsSettingsApiKeys {
     }
   }
   async componentDidLoad() {
-    var _a, _b, _c;
-    try {
-      this.keys = await ApiKeys.getKeys(this.endpoint, this.endpoint.session.organization_id);
-    }
-    catch (e) {
+    this.newApiKeyProfileId = this.endpoint.session.profile_id;
+    Members.getMembers(this.endpoint, this.endpoint.session.organization_id)
+      .then(mem => {
+      this.members = mem;
+    })
+      .catch((e) => {
+      var _a, _b, _c;
+      console.log('[SETTINGS] Error loading organization members', 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');
-    }
+      VerdocsToast('Unable to load API keys. Please try again later', { style: 'error' });
+    });
+    this.loadKeys();
+  }
+  loadKeys() {
+    ApiKeys.getKeys(this.endpoint, this.endpoint.session.organization_id)
+      .then(r => {
+      this.keys = r;
+    })
+      .catch(e => {
+      var _a, _b, _c;
+      console.log('[SETTINGS] Unable to load API keys', 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 API keys. Please try again later', { style: 'error' });
+    });
+  }
+  async handleDeleteKey() {
+    ApiKeys.deleteKey(this.endpoint, this.deletingKey.organization_id, this.deletingKey.client_id)
+      .then(() => {
+      this.deletingKey = null;
+      VerdocsToast('API key deleted', { style: 'success' });
+      this.loadKeys();
+    })
+      .catch(e => {
+      var _a, _b, _c;
+      this.deletingKey = null;
+      console.log('[SETTINGS] Unable to delete API key', 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 delete API key. Please try again later', { style: 'error' });
+    });
+  }
+  async handleRotateKey() {
+    ApiKeys.rotateKey(this.endpoint, this.rotatingKey.organization_id, this.rotatingKey.client_id)
+      .then(r => {
+      this.rotatingKey = null;
+      VerdocsToast('API key rotated', { style: 'success' });
+      this.loadKeys();
+      this.createdKey = r;
+    })
+      .catch(e => {
+      var _a, _b, _c;
+      this.rotatingKey = null;
+      console.log('[SETTINGS] Unable to rotate API key', 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 rotate API key. Please try again later', { style: 'error' });
+    });
+  }
+  async handleCreateKey() {
+    ApiKeys.createKey(this.endpoint, this.endpoint.session.organization_id, { name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
+      .then(r => {
+      this.creatingKey = false;
+      this.createdKey = r;
+      VerdocsToast('API key created', { style: 'success' });
+      this.loadKeys();
+    })
+      .catch(e => {
+      var _a, _b, _c;
+      this.creatingKey = false;
+      console.log('[SETTINGS] Unable to create API key', 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 create API key. Please try again later', { style: 'error' });
+    });
   }
   render() {
+    var _a, _b, _c, _d;
+    const profileOptions = this.members.map(member => ({ label: formatFullName(member), value: member.id }));
     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 })));
+    return (h(Host, null, h("verdocs-table", { data: this.keys, columns: [
+        {
+          id: 'name',
+          header: 'Name',
+          renderCell: (_, row) => (h("div", null, h("div", null, row.name))),
+        },
+        {
+          id: 'client_id',
+          header: 'Client ID',
+          renderCell: (_, row) => (h("div", null, h("div", { innerHTML: TagIcon }), h("div", null, row.client_id))),
+        },
+        {
+          id: 'profile_id',
+          header: 'Acts as',
+          renderCell: (_, row) => (h("div", null, h("div", { innerHTML: UserIcon }), h("div", null, formatFullName(row.profile)))),
+        },
+        {
+          id: 'actions',
+          header: 'Actions',
+          renderCell: (_, row) => (h("div", null, h("div", { innerHTML: TrashIcon, onClick: () => (this.deletingKey = row) }), h("div", { innerHTML: ArrowPathIcon, onClick: () => (this.rotatingKey = row) }))),
+        },
+      ] }), h("verdocs-button", { label: "Add API Key", size: "normal", onClick: () => (this.creatingKey = true) }), this.deletingKey && (h("verdocs-dialog", { onExit: () => (this.deletingKey = null) }, h("div", { slot: "title", class: "heading" }, "Delete API key \"", this.deletingKey.name, "\"?"), h("div", { class: "content" }, h("p", null, "Are you sure you want to delete this key? This action cannot be undone."), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: () => (this.deletingKey = null) }), h("verdocs-button", { size: "small", label: "OK", onClick: () => this.handleDeleteKey() }))))), this.rotatingKey && (h("verdocs-dialog", { onExit: () => (this.rotatingKey = null) }, h("div", { slot: "title", class: "heading" }, "Rotate API key \"", this.rotatingKey.name, "\"?"), h("div", { class: "content" }, h("p", null, "Are you sure you want to rotate this key? A new client secret will be generated, and the old value will become unusable. This action cannot be undone."), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: () => (this.rotatingKey = null) }), h("verdocs-button", { size: "small", label: "OK", onClick: () => this.handleRotateKey() }))))), this.creatingKey && (h("verdocs-dialog", { onExit: () => (this.creatingKey = false) }, h("div", { slot: "title", class: "heading" }, "Create API Key"), h("div", { class: "content" }, h("verdocs-text-input", { label: "Name", placeholder: "API key name...", id: "verdocs-api-key-name", value: this.newApiKeyName, autocomplete: "off", required: true, onInput: (e) => (this.newApiKeyName = e.target.value), onFocusout: (e) => {
+        this.newApiKeyName = e.target.value.trim();
+      } }), h("p", null, "API keys must be associated with a profile. Actions performed via API calls using this key will \"act as\" this profile."), h("verdocs-select-input", { options: profileOptions, label: "Act as Profile", onInput: (e) => {
+        this.newApiKeyProfileId = e.target.value;
+      } }), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: () => (this.creatingKey = false) }), h("verdocs-button", { size: "small", label: "OK", onClick: () => this.handleCreateKey() }))))), this.createdKey && (h("verdocs-dialog", { onExit: () => (this.createdKey = null) }, h("div", { slot: "title", class: "heading" }, "API Key Details"), h("div", { class: "content" }, h("verdocs-text-input", { label: "Name", disabled: true, value: (_a = this.createdKey) === null || _a === void 0 ? void 0 : _a.name }), h("verdocs-text-input", { label: "Profile", disabled: true, value: formatFullName((_b = this.createdKey) === null || _b === void 0 ? void 0 : _b.profile) }), h("p", null, "Please save the Client ID and Secret below. Be sure to never expose your secret key in insecure (Web or mobile environments)!"), h("verdocs-text-input", { label: "Client ID", disabled: true, value: (_c = this.createdKey) === null || _c === void 0 ? void 0 : _c.client_id, copyable: true }), h("verdocs-text-input", { label: "Secret Key", disabled: true, value: (_d = this.createdKey) === null || _d === void 0 ? void 0 : _d.client_secret, copyable: true }), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", label: "Done", onClick: () => (this.createdKey = null) })))))));
   }
   static get is() { return "verdocs-settings-api-keys"; }
   static get originalStyleUrls() {
@@ -78,7 +176,14 @@ export class VerdocsSettingsApiKeys {
   }
   static get states() {
     return {
-      "keys": {}
+      "keys": {},
+      "creatingKey": {},
+      "createdKey": {},
+      "deletingKey": {},
+      "rotatingKey": {},
+      "newApiKeyName": {},
+      "newApiKeyProfileId": {},
+      "members": {}
     };
   }
   static get events() {

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

@@ -23,16 +23,40 @@ verdocs-settings-members .role {
   align-items: center;
   justify-content: center;
 }
-verdocs-settings-members .col.col-actions {
+verdocs-settings-members .table {
+  margin: 12px 0;
+}
+verdocs-settings-members .data-col div {
+  gap: 12px;
+  display: flex;
   align-items: center;
-  text-align: center;
+  flex-direction: row;
 }
-verdocs-settings-members .col.col-actions svg {
-  cursor: pointer;
+verdocs-settings-members .data-col svg {
   width: 24px;
   height: 24px;
-  fill: #777777;
 }
-verdocs-settings-members .col.col-actions svg:hover {
-  fill: red;
+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 {
+  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;
 }