@verdocs/web-sdk 2.2.0 → 2.2.2

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

@@ -0,0 +1,71 @@
+import { Host, h } from '@stencil/core';
+/**
+ * Display a simple table of data. Columns and data cells may have custom renderers defined to
+ * support creating interactive table layouts.
+ */
+export class VerdocsTable {
+  constructor() {
+    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 is() { return "verdocs-table"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "columns": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IColumn[]",
+          "resolved": "IColumn[]",
+          "references": {
+            "IColumn": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The columns to display"
+        },
+        "defaultValue": "[]"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The rows to display"
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,25 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Table',
+  component: 'verdocs-table',
+  args: {
+    columns: [
+      { 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/dialogs/verdocs-dialog/verdocs-dialog.css

@@ -0,0 +1,35 @@
+verdocs-dialog {
+  font-family: "Inter", "Barlow", sans-serif;
+  box-sizing: border-box;
+}
+verdocs-dialog div {
+  box-sizing: border-box;
+}
+verdocs-dialog .background-overlay {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  z-index: 10000;
+  position: absolute;
+  align-items: center;
+  background: #0000007f;
+  justify-content: center;
+}
+verdocs-dialog .dialog {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  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-weight: 500;
+  flex-direction: row;
+}

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

@@ -0,0 +1,45 @@
+import { h, Host } from '@stencil/core';
+/**
+ * Display a simple dialog where the contents are provided via slots.
+ */
+export class VerdocsDialog {
+  // We need a separate event handler for clicking the background because it can receive events "through" other child components
+  handleDismiss(e) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.exit.emit();
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("slot", { name: "title" }, h("div", { class: "heading" }, "Please Confirm")), h("slot", null, h("p", null))))));
+  }
+  static get is() { return "verdocs-dialog"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-dialog.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-dialog.css"]
+    };
+  }
+  static get events() {
+    return [{
+        "method": "exit",
+        "name": "exit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the dialog is dismissed by clicking the background overlay."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,17 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/Default',
+  component: 'verdocs-dialog',
+  args: {},
+  argTypes: {
+    onExit: { action: 'exit', table: { disable: true } },
+    onNext: { action: 'next', table: { disable: true } },
+  },
+};
+export const Default = ({ onExit, onNext }) => html `<verdocs-dialog @exit=${onExit}>
+    <h1 slot="heading">Test Dialog</h1>
+    <p>Test dialog box.</p>
+    <div class="buttons">
+      <verdocs-button label="OK" size="small" onClick=${onNext} />
+    </div>
+  </verdocs-dialog>`;

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

@@ -29,7 +29,7 @@ export class VerdocsSettings {
     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 is() { return "verdocs-settings"; }
   static get originalStyleUrls() {

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

@@ -0,0 +1,38 @@
+verdocs-settings-api-keys {
+  display: flex;
+  padding: 10px;
+  font-size: 18px;
+  flex-wrap: nowrap;
+  border-radius: 6px;
+  color: #33364b;
+  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: flex;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-settings-api-keys .col.col-actions {
+  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;
+}

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

@@ -0,0 +1,179 @@
+import { ApiKeys } from '@verdocs/js-sdk/Organizations';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { VerdocsToast } from '../../../utils/Toast';
+import { SDKError } from '../../../utils/errors';
+import { capitalize } from '@verdocs/js-sdk/Utils/Strings';
+/**
+ * Displays a settings form that allows the user to manage their API keys.
+ */
+export class VerdocsSettingsApiKeys {
+  constructor() {
+    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 ApiKeys.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 is() { return "verdocs-settings-api-keys"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-settings-api-keys.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-settings-api-keys.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "keys": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }, {
+        "method": "memberInvited",
+        "name": "memberInvited",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user chooses to invite a new member."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
+          "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IProfile": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Users/Types"
+            }
+          }
+        }
+      }, {
+        "method": "memberUpdated",
+        "name": "memberUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user chooses to invite a new member."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
+          "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IProfile": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Users/Types"
+            }
+          }
+        }
+      }, {
+        "method": "memberRemoved",
+        "name": "memberRemoved",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user chooses to invite a new member."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; member: IProfile}",
+          "resolved": "{ endpoint: VerdocsEndpoint; member: IProfile; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IProfile": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Users/Types"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Settings/Api Keys',
+  component: 'verdocs-settings-api-keys',
+  args: {},
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const ApiKeys = () => html ` <verdocs-settings-api-keys /> `;

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

@@ -0,0 +1,38 @@
+verdocs-settings-members {
+  display: flex;
+  padding: 10px;
+  font-size: 18px;
+  flex-wrap: nowrap;
+  border-radius: 6px;
+  color: #33364b;
+  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: flex;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-settings-members .col.col-actions {
+  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;
+}