@verdocs/web-sdk 2.2.2 → 2.2.6

package/dist/components/verdocs-dialog2.js

@@ -0,0 +1,40 @@
+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:420px;display:-ms-flexbox;display:flex;max-width:100%;overflow:hidden;border-radius:4px;-ms-flex-direction:column;flex-direction:column;background:#ffffff;-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:16px;font-weight:500;padding:8px 16px;-ms-flex-direction:row;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
+
+const VerdocsDialog = /*@__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) {
+    var _a;
+    console.log('e', e.target.className);
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      (_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("div", { class: "content" }))))));
+  }
+  static get style() { return verdocsDialogCss; }
+}, [4, "verdocs-dialog"]);
+function defineCustomElement() {
+  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);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsDialog as V, defineCustomElement as d };

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

@@ -1,11 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
+import { g as getMembers, c as capitalize } from './Strings.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';
+import { d as defineCustomElement$6 } from './verdocs-button2.js';
+import { d as defineCustomElement$5 } from './verdocs-dialog2.js';
+import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$2 } from './verdocs-table2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
 /**
  * API keys are used to authenticate server-to-server calls. (API keys should **never** be used for client-to-server operations!)
@@ -33,9 +37,56 @@ var getKeys = function (endpoint, organizationId) {
         .get("/organizations/".concat(organizationId, "/api_key"))
         .then(function (r) { return r.data; });
 };
+/**
+ * Create an API key.
+ *
+ * ```typescript
+ * import {ApiKeys} from '@verdocs/js-sdk/Organizations';
+ *
+ * await ApiKeys.createKey(ORGID, {name: NEWNAME});
+ * ```
+ */
+var createKey = function (endpoint, organizationId, params) {
+    return endpoint.api //
+        .post("/organizations/".concat(organizationId, "/api_key"), params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Rotate the secret for an API key. The caller must have admin access to the organization.
+ *
+ * ```typescript
+ * import {ApiKeys} from '@verdocs/js-sdk/Organizations';
+ *
+ * const {client_secret: newSecret} = await ApiKeys.rotateKey(ORGID, CLIENTID);
+ * ```
+ */
+var rotateKey = function (endpoint, organizationId, clientId) {
+    return endpoint.api //
+        .put("/organizations/".concat(organizationId, "/api_key/").concat(clientId, "/rotate"))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Delete an API key.
+ *
+ * ```typescript
+ * import {ApiKeys} from '@verdocs/js-sdk/Organizations';
+ *
+ * await ApiKeys.deleteKey(ORGID, CLIENTID);
+ * ```
+ */
+var deleteKey = function (endpoint, organizationId, clientId) {
+    return endpoint.api //
+        .delete("/organizations/".concat(organizationId, "/api_key/").concat(clientId))
+        .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 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 .data-col div{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-settings-api-keys .data-col svg{width:24px;height:24px}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{-ms-flex-pack:center;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}";
 
+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>`;
 const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -46,6 +97,13 @@ const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.memberRemoved = createEvent(this, "memberRemoved", 7);
     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();
@@ -55,36 +113,132 @@ const VerdocsSettingsApiKeys = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
   }
   async componentDidLoad() {
-    var _a, _b, _c;
-    try {
-      this.keys = await getKeys(this.endpoint, this.endpoint.session.organization_id);
-    }
-    catch (e) {
+    this.newApiKeyProfileId = this.endpoint.session.profile_id;
+    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() {
+    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() {
+    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() {
+    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() {
+    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, _e, _f, _g;
+    const profileOptions = this.members.map(member => ({ label: `${member.first_name} ${member.last_name}`, 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 })));
+        {
+          id: 'name',
+          header: 'Name',
+          renderCell: (_, row) => (h("div", null, h("div", { innerHTML: ClockIcon }), 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) => {
+            var _a, _b;
+            return (h("div", null, h("div", { innerHTML: UserIcon }), h("div", null, 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))));
+          },
+        },
+        {
+          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: `${(_c = (_b = this.createdKey) === null || _b === void 0 ? void 0 : _b.profile) === null || _c === void 0 ? void 0 : _c.first_name} ${(_e = (_d = this.createdKey) === null || _d === void 0 ? void 0 : _d.profile) === null || _e === void 0 ? void 0 : _e.last_name}` }), 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: (_f = this.createdKey) === null || _f === void 0 ? void 0 : _f.client_id, copyable: true }), h("verdocs-text-input", { label: "Secret Key", disabled: true, value: (_g = this.createdKey) === null || _g === void 0 ? void 0 : _g.client_secret, copyable: true }), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", label: "Done", onClick: () => (this.createdKey = null) })))))));
   }
   static get style() { return verdocsSettingsApiKeysCss; }
 }, [0, "verdocs-settings-api-keys", {
     "endpoint": [16],
-    "keys": [32]
+    "keys": [32],
+    "creatingKey": [32],
+    "createdKey": [32],
+    "deletingKey": [32],
+    "rotatingKey": [32],
+    "newApiKeyName": [32],
+    "newApiKeyProfileId": [32],
+    "members": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-settings-api-keys", "verdocs-button", "verdocs-table"];
+  const components = ["verdocs-settings-api-keys", "verdocs-button", "verdocs-dialog", "verdocs-help-icon", "verdocs-select-input", "verdocs-table", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-settings-api-keys":
       if (!customElements.get(tagName)) {
@@ -93,10 +247,30 @@ function defineCustomElement() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
       }
       break;
     case "verdocs-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

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

@@ -1,23 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getMembers, c as capitalize } from './Strings.js';
 import './Types.js';
 import { 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>`;

package/dist/components/verdocs-settings.js

@@ -2,7 +2,8 @@ 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$b } from './verdocs-button2.js';
+import { d as defineCustomElement$c } from './verdocs-button2.js';
+import { d as defineCustomElement$b } from './verdocs-dialog2.js';
 import { d as defineCustomElement$a } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$9 } from './verdocs-loader2.js';
 import { d as defineCustomElement$8 } from './verdocs-select-input2.js';
@@ -52,7 +53,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-api-keys", "verdocs-settings-members", "verdocs-settings-organization", "verdocs-settings-profile", "verdocs-table", "verdocs-text-input"];
+  const components = ["verdocs-settings", "verdocs-button", "verdocs-dialog", "verdocs-help-icon", "verdocs-loader", "verdocs-select-input", "verdocs-settings-api-keys", "verdocs-settings-members", "verdocs-settings-organization", "verdocs-settings-profile", "verdocs-table", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-settings":
       if (!customElements.get(tagName)) {
@@ -60,6 +61,11 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "verdocs-dialog":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }

package/dist/components/verdocs-table2.js

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

package/dist/components/verdocs-text-input2.js

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { V as VerdocsToast } from './Toast.js';
 import { d as defineCustomElement$1 } from './verdocs-help-icon2.js';
 
-const verdocsTextInputCss = "verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}";
+const verdocsTextInputCss = "verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}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}";
 
 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>`;
 const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -14,12 +16,20 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     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(() => {
@@ -33,7 +43,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
             (_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 }))));
   }
   get hostEl() { return this; }
   static get style() { return verdocsTextInputCss; }
@@ -44,6 +54,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "autocomplete": [1],
     "helpText": [1, "help-text"],
     "clearable": [4],
+    "copyable": [4],
     "type": [1],
     "disabled": [4],
     "required": [4]

package/dist/components/verdocs-view2.js

@@ -58,7 +58,13 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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));
@@ -142,11 +148,12 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     // 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/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-22T20:15:57",
+  "timestamp": "2023-09-26T00:04:40",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -1261,9 +1261,15 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "verdocs-settings-api-keys"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "verdocs-settings-api-keys": [
+          "verdocs-dialog"
+        ]
+      }
     },
     {
       "filePath": "./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx",
@@ -6655,6 +6661,7 @@
       "parts": [],
       "dependents": [
         "verdocs-auth",
+        "verdocs-settings-api-keys",
         "verdocs-settings-organization",
         "verdocs-template-field-properties",
         "verdocs-template-fields",
@@ -6665,6 +6672,9 @@
         "verdocs-auth": [
           "verdocs-select-input"
         ],
+        "verdocs-settings-api-keys": [
+          "verdocs-select-input"
+        ],
         "verdocs-settings-organization": [
           "verdocs-select-input"
         ],
@@ -6867,7 +6877,10 @@
         ],
         "verdocs-settings-api-keys": [
           "verdocs-table",
-          "verdocs-button"
+          "verdocs-button",
+          "verdocs-dialog",
+          "verdocs-text-input",
+          "verdocs-select-input"
         ]
       }
     },
@@ -6944,12 +6957,21 @@
       ],
       "dependencies": [
         "verdocs-table",
-        "verdocs-button"
+        "verdocs-button",
+        "verdocs-dialog",
+        "verdocs-text-input",
+        "verdocs-select-input"
       ],
       "dependencyGraph": {
         "verdocs-settings-api-keys": [
           "verdocs-table",
-          "verdocs-button"
+          "verdocs-button",
+          "verdocs-dialog",
+          "verdocs-text-input",
+          "verdocs-select-input"
+        ],
+        "verdocs-text-input": [
+          "verdocs-help-icon"
         ],
         "verdocs-settings": [
           "verdocs-settings-api-keys"
@@ -9496,6 +9518,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "copyable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "copyable",
+          "reflectToAttr": false,
+          "docs": "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.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -9651,6 +9690,7 @@
         "verdocs-auth",
         "verdocs-envelopes-list",
         "verdocs-initial-dialog",
+        "verdocs-settings-api-keys",
         "verdocs-settings-organization",
         "verdocs-settings-profile",
         "verdocs-signature-dialog",
@@ -9676,6 +9716,9 @@
         "verdocs-initial-dialog": [
           "verdocs-text-input"
         ],
+        "verdocs-settings-api-keys": [
+          "verdocs-text-input"
+        ],
         "verdocs-settings-organization": [
           "verdocs-text-input"
         ],