@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.js

@@ -1,582 +1,587 @@
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { Envelopes } from '@verdocs/js-sdk/Envelopes';
-import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
-import { cancelEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
-import { Host, h } from '@stencil/core';
-import { getRecipientsWithActions, userCanAct, userCanCancelEnvelope } from '@verdocs/js-sdk/Envelopes/Permissions';
-import { saveEnvelopesAsZip } from '../../../utils/utils';
-import { VerdocsToast } from '../../../utils/Toast';
-import { SDKError } from '../../../utils/errors';
+import { Host, h } from "@stencil/core";
+import { userCanCancelEnvelope, userCanAct, cancelEnvelope, integerSequence } from "@verdocs/js-sdk";
+import { VerdocsEndpoint, listEnvelopes, getRecipientsWithActions } from "@verdocs/js-sdk";
+import { saveEnvelopesAsZip } from "../../../utils/utils";
+import { VerdocsToast } from "../../../utils/Toast";
+import { SDKError } from "../../../utils/errors";
 const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>`;
 const ViewFilters = [
-  { value: 'all', label: 'All' },
-  { value: 'inbox', label: 'Inbox' },
-  { value: 'sent', label: 'Sent' },
-  { value: 'completed', label: 'Completed' },
-  { value: 'action', label: 'Action Required' },
-  { value: 'waiting', label: 'Waiting on Others' },
+    { value: 'all', label: 'All' },
+    { value: 'inbox', label: 'Inbox' },
+    { value: 'sent', label: 'Sent' },
+    { value: 'completed', label: 'Completed' },
+    { value: 'action', label: 'Action Required' },
+    { value: 'waiting', label: 'Waiting on Others' },
 ];
 const StatusFilters = [
-  { value: 'all', label: 'All' },
-  { value: 'pending', label: 'Pending' },
-  { value: 'in progress', label: 'In Progress' },
-  { value: 'complete', label: 'Completed' },
-  { value: 'declined', label: 'Declined' },
-  { value: 'canceled', label: 'Canceled' },
+    { value: 'all', label: 'All' },
+    { value: 'pending', label: 'Pending' },
+    { value: 'in progress', label: 'In Progress' },
+    { value: 'complete', label: 'Completed' },
+    { value: 'declined', label: 'Declined' },
+    { value: 'canceled', label: 'Canceled' },
 ];
 const SortFilters = [
-  { value: 'created_at', label: 'Created' },
-  { value: 'updated_at', label: 'Updated' },
-  { value: 'canceled_at', label: 'Canceled' },
-  { value: 'envelope_name', label: 'Name' },
-  { value: 'envelope_status', label: 'Status' },
+    { value: 'created_at', label: 'Created' },
+    { value: 'updated_at', label: 'Updated' },
+    { value: 'canceled_at', label: 'Canceled' },
+    { value: 'envelope_name', label: 'Name' },
+    { value: 'envelope_status', label: 'Status' },
 ];
 /**
  * Displays a list of envelopes matching specified conditions.
  */
 export class VerdocsEnvelopesList {
-  constructor() {
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.view = undefined;
-    this.status = 'all';
-    this.sort = 'created_at';
-    this.match = '';
-    this.showPagination = true;
-    this.rowsPerPage = 10;
-    this.selectedPage = 0;
-    this.count = 0;
-    this.initiallyLoaded = false;
-    this.loading = true;
-    this.selectedEnvelopes = [];
-    this.envelopes = [];
-  }
-  handleViewUpdated() {
-    return this.queryEnvelopes();
-  }
-  handleStatusUpdated() {
-    return this.queryEnvelopes();
-  }
-  handleSortUpdated() {
-    return this.queryEnvelopes();
-  }
-  handleMatchUpdated() {
-    return this.queryEnvelopes();
-  }
-  // @Watch('containing')
-  // handleContainingUpdated() {
-  //   return this.queryEnvelopes();
-  // }
-  handlePageUpdated() {
-    return this.queryEnvelopes();
-  }
-  componentWillLoad() {
-    this.endpoint.loadSession();
-    if (!this.endpoint.session) {
-      console.log('[ENVELOPES] Must be authenticated');
-      return;
+    constructor() {
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.view = undefined;
+        this.status = 'all';
+        this.sort = 'created_at';
+        this.match = '';
+        this.showPagination = true;
+        this.rowsPerPage = 10;
+        this.selectedPage = 0;
+        this.count = 0;
+        this.initiallyLoaded = false;
+        this.loading = true;
+        this.selectedEnvelopes = [];
+        this.envelopes = [];
     }
-  }
-  async componentDidLoad() {
-    await this.queryEnvelopes();
-    this.initiallyLoaded = true;
-  }
-  async queryEnvelopes() {
-    var _a, _b, _c;
-    try {
-      this.loading = true;
-      let queryParams = {
-        page: this.selectedPage,
-        // sort: this.sort,
-        rows: this.rowsPerPage,
-      };
-      switch (this.view) {
-        case 'all':
-          queryParams = {
-            ...queryParams,
-            // sort: this.sort,
-            // direction: this.sort === 'name' ? 'asc' : 'desc',
-            status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
-          };
-          break;
-        case 'inbox':
-          queryParams = {
-            ...queryParams,
-            // is_recipient: true,
-            // sort: 'updated_at',
-            // recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],
-          };
-          break;
-        case 'sent':
-          queryParams = {
-            ...queryParams,
-            is_owner: true,
-            // sort: 'updated_at',
-          };
-          break;
-        case 'action':
-          queryParams = {
-            ...queryParams,
-            // sort: 'updated_at',
-            // is_recipient: true,
-            status: ['pending', 'in progress'],
-            // recipient_status: ['invited', 'opened', 'signed'],
-          };
-          break;
-        case 'waiting':
-          queryParams = {
-            ...queryParams,
-            is_owner: true,
-            // sort: 'updated_at',
-            // direction: 'desc',
-            status: ['pending', 'in progress'],
-          };
-          break;
-        case 'completed':
-          queryParams = {
-            ...queryParams,
-            // sort: 'updated_at',
-            // direction: 'desc',
-            status: ['complete'],
-          };
-          break;
-        default:
-          queryParams = {
-            ...queryParams,
-            // sort: 'updated_at',
-            // direction: 'desc',
-            status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
-          };
-      }
-      // These filters should only be applied in "View All" mode. Otherwise the user could have set them to something
-      // then changed the view e.g. to Inbox and the filter could break the view (e.g. View:Inbox, Status:Declined
-      // would never return anything).
-      if (this.view === 'all') {
-        if (this.status !== 'all') {
-          queryParams.status = [this.status];
+    handleViewUpdated() {
+        return this.queryEnvelopes();
+    }
+    handleStatusUpdated() {
+        return this.queryEnvelopes();
+    }
+    handleSortUpdated() {
+        return this.queryEnvelopes();
+    }
+    handleMatchUpdated() {
+        return this.queryEnvelopes();
+    }
+    // @Watch('containing')
+    // handleContainingUpdated() {
+    //   return this.queryEnvelopes();
+    // }
+    handlePageUpdated() {
+        return this.queryEnvelopes();
+    }
+    componentWillLoad() {
+        this.endpoint.loadSession();
+        if (!this.endpoint.session) {
+            console.log('[ENVELOPES] Must be authenticated');
+            return;
         }
-      }
-      if (this.sort !== 'updated_at') {
-        // queryParams.sort = this.sort;
-        // queryParams.direction = this.sort === 'name' ? 'asc' : 'desc';
-      }
-      if (this.match.trim()) {
-        // queryParams.match = this.match.trim();
-      }
-      // if (this.containing.trim()) {
-      //   queryParams.field_value = this.containing.trim();
-      // }
-      const response = await Envelopes.listEnvelopes(this.endpoint, queryParams);
-      this.envelopes = response.envelopes;
-      this.count = response.total;
-      this.loading = false;
     }
-    catch (e) {
-      this.loading = false;
-      console.log('[ENVELOPES] Error listing envelopes', 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));
+    async componentDidLoad() {
+        await this.queryEnvelopes();
+        this.initiallyLoaded = true;
     }
-  }
-  handleDownload() {
-    saveEnvelopesAsZip(this.endpoint, this.selectedEnvelopes)
-      .then(() => {
-      this.selectedEnvelopes = [];
-    })
-      .catch(e => {
-      console.log('[ENVELOPES] Download error', e);
-      VerdocsToast('Download error: ' + e.message, { style: 'error' });
-    });
-  }
-  downloadEnvelope(envelope) {
-    saveEnvelopesAsZip(this.endpoint, [envelope]).catch(e => {
-      console.log('[ENVELOPES] Download error', e);
-      VerdocsToast('Download error: ' + e.message, { style: 'error' });
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
-        var _a;
-        // We don't locally filter envelopes because there are too many fields to match against efficiently.
-        this.match = e.target.value.trim();
-        (_a = this.changeMatch) === null || _a === void 0 ? void 0 : _a.emit(this.match);
-      } })), h("verdocs-quick-filter", { label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
-        this.view = e.detail.value;
-      } }), this.view === 'all' && (h("verdocs-quick-filter", { label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
-        this.status = e.detail.value;
-      } })), this.view === 'all' && (h("verdocs-quick-filter", { label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
-        this.sort = e.detail.value;
-      } })), this.loading && h("verdocs-spinner", { mode: "dark", size: 24 }), h("div", { style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
-      var _a;
-      const recipientsWithActions = getRecipientsWithActions(envelope);
-      const userCanCancel = userCanCancelEnvelope(this.endpoint.session, envelope);
-      const userRole = recipientsWithActions.find(recipient => { var _a; return recipient.email === ((_a = this.endpoint.session) === null || _a === void 0 ? void 0 : _a.email) || ''; });
-      const userCanFinish = userRole && userCanCancel && userCanAct(((_a = this.endpoint.session) === null || _a === void 0 ? void 0 : _a.email) || '', recipientsWithActions);
-      const menuOptions = [
-        { label: 'View Envelope', id: 'view' },
-        { label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish },
-        { label: 'Download', id: 'download' },
-        { label: 'Cancel', id: 'cancel', disabled: !userCanCancel },
-      ];
-      return (h("div", { class: "envelope", key: envelope.id, onClick: () => { var _a; return (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope }); } }, h("div", { class: "inner" }, h("verdocs-checkbox", { checked: this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1, onClick: e => e.stopPropagation(), onInput: (e) => {
-          if (e.target.checked) {
-            this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];
-          }
-          else {
-            this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
-          }
-        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon, class: "envelope-icon" }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
-          var _a, _b;
-          switch (e.detail.id) {
-            case 'view':
-              (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope });
-              break;
-            case 'finish':
-              (_b = this.finishEnvelope) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope });
-              break;
-            case 'download':
-              this.downloadEnvelope(envelope);
-              break;
-            case 'cancel':
-              if (window.confirm('Are you sure you want to cancel this envelope?')) {
-                cancelEnvelope(this.endpoint, envelope.id)
-                  .then(() => VerdocsToast('Envelope canceled'))
-                  .catch(e => VerdocsToast('Unable to cancel envelope: ' + e.messabge, { style: 'error' }));
-                this.queryEnvelopes().catch(() => { });
-              }
-              break;
-          }
-        } }))));
-    }), !this.initiallyLoaded && (h("div", { style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
-        this.selectedPage = e.detail.selectedPage;
-      } }))) : (h("div", null))));
-  }
-  static get is() { return "verdocs-envelopes-list"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-envelopes-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-envelopes-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "endpoint": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "VerdocsEndpoint",
-          "resolved": "VerdocsEndpoint",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
+    async queryEnvelopes() {
+        var _a, _b, _c;
+        try {
+            this.loading = true;
+            let queryParams = {
+                page: this.selectedPage,
+                // sort: this.sort,
+                rows: this.rowsPerPage,
+            };
+            switch (this.view) {
+                case 'all':
+                    queryParams = {
+                        ...queryParams,
+                        // sort: this.sort,
+                        // direction: this.sort === 'name' ? 'asc' : 'desc',
+                        status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
+                    };
+                    break;
+                case 'inbox':
+                    queryParams = {
+                        ...queryParams,
+                        // is_recipient: true,
+                        // sort: 'updated_at',
+                        // recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],
+                    };
+                    break;
+                case 'sent':
+                    queryParams = {
+                        ...queryParams,
+                        is_owner: true,
+                        // sort: 'updated_at',
+                    };
+                    break;
+                case 'action':
+                    queryParams = {
+                        ...queryParams,
+                        // sort: 'updated_at',
+                        // is_recipient: true,
+                        status: ['pending', 'in progress'],
+                        // recipient_status: ['invited', 'opened', 'signed'],
+                    };
+                    break;
+                case 'waiting':
+                    queryParams = {
+                        ...queryParams,
+                        is_owner: true,
+                        // sort: 'updated_at',
+                        // direction: 'desc',
+                        status: ['pending', 'in progress'],
+                    };
+                    break;
+                case 'completed':
+                    queryParams = {
+                        ...queryParams,
+                        // sort: 'updated_at',
+                        // direction: 'desc',
+                        status: ['complete'],
+                    };
+                    break;
+                default:
+                    queryParams = {
+                        ...queryParams,
+                        // sort: 'updated_at',
+                        // direction: 'desc',
+                        status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
+                    };
             }
-          }
-        },
-        "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()"
-      },
-      "view": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
-          "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The filtered view to display. \"completed\" will show envelopes that have been submitted. \"action\" will\nshow envelopes where the user is a recipient and the envelope is not completed. \"waiting\" will show\nonly envelopes where the user is the sender and the envelope is not completed."
-        },
-        "attribute": "view",
-        "reflect": true,
-        "defaultValue": "undefined"
-      },
-      "status": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "TEnvelopeStatus | 'all'",
-          "resolved": "\"all\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
-          "references": {
-            "TEnvelopeStatus": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+            // These filters should only be applied in "View All" mode. Otherwise the user could have set them to something
+            // then changed the view e.g. to Inbox and the filter could break the view (e.g. View:Inbox, Status:Declined
+            // would never return anything).
+            if (this.view === 'all') {
+                if (this.status !== 'all') {
+                    queryParams.status = [this.status];
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The status value to filter by"
-        },
-        "attribute": "status",
-        "reflect": true,
-        "defaultValue": "'all'"
-      },
-      "sort": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'",
-          "resolved": "\"canceled_at\" | \"created_at\" | \"name\" | \"status\" | \"updated_at\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The sort field to use"
-        },
-        "attribute": "sort",
-        "reflect": true,
-        "defaultValue": "'created_at'"
-      },
-      "match": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, filter envelopes by the specified string."
-        },
-        "attribute": "match",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "showPagination": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not pagination should be enabled."
-        },
-        "attribute": "show-pagination",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "rowsPerPage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The number of rows to display per page."
-        },
-        "attribute": "rows-per-page",
-        "reflect": false,
-        "defaultValue": "10"
-      },
-      "selectedPage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The initial page number to select. Pagination is internally controlled but may be overriden by the\nhost applicaiton."
-        },
-        "attribute": "selected-page",
-        "reflect": false,
-        "defaultValue": "0"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "count": {},
-      "initiallyLoaded": {},
-      "loading": {},
-      "selectedEnvelopes": {},
-      "envelopes": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "changeView",
-        "name": "changeView",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user changes their view. Host applications can use this to save the user's preferences."
-        },
-        "complexType": {
-          "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
-          "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
-          "references": {}
-        }
-      }, {
-        "method": "changeStatus",
-        "name": "changeStatus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user changes their status filter. Host applications can use this to save the user's preferences."
-        },
-        "complexType": {
-          "original": "TEnvelopeStatus | 'all'",
-          "resolved": "\"all\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
-          "references": {
-            "TEnvelopeStatus": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+            if (this.sort !== 'updated_at') {
+                // queryParams.sort = this.sort;
+                // queryParams.direction = this.sort === 'name' ? 'asc' : 'desc';
             }
-          }
-        }
-      }, {
-        "method": "changeSort",
-        "name": "changeSort",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user changes their sort order. Host applications can use this to save the user's preferences."
-        },
-        "complexType": {
-          "original": "'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'",
-          "resolved": "\"canceled_at\" | \"created_at\" | \"name\" | \"status\" | \"updated_at\"",
-          "references": {}
-        }
-      }, {
-        "method": "changeMatch",
-        "name": "changeMatch",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user changes the match filter. This is fired for every inputChange event (every character\ntyped). This event is provided for balance with the other events, but host applications should generally not\nsave this value. Users might appreciate applications remembering their sorting or filtering preferences, but\nprobably not their search terms."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "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"
+            if (this.match.trim()) {
+                // queryParams.match = this.match.trim();
             }
-          }
+            // if (this.containing.trim()) {
+            //   queryParams.field_value = this.containing.trim();
+            // }
+            const response = await listEnvelopes(this.endpoint, queryParams);
+            this.envelopes = response.envelopes;
+            this.count = response.total;
+            this.loading = false;
         }
-      }, {
-        "method": "viewEnvelope",
-        "name": "viewEnvelope",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user clicks an activity entry. Typically the host application will use this to navigate\nto the envelope detail view."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
-          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            },
-            "IEnvelope": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
-            }
-          }
+        catch (e) {
+            this.loading = false;
+            console.log('[ENVELOPES] Error listing envelopes', 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));
         }
-      }, {
-        "method": "finishEnvelope",
-        "name": "finishEnvelope",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user clicks to finish the envelope."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
-          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
+    }
+    handleDownload() {
+        saveEnvelopesAsZip(this.endpoint, this.selectedEnvelopes)
+            .then(() => {
+            this.selectedEnvelopes = [];
+        })
+            .catch(e => {
+            console.log('[ENVELOPES] Download error', e);
+            VerdocsToast('Download error: ' + e.message, { style: 'error' });
+        });
+    }
+    downloadEnvelope(envelope) {
+        saveEnvelopesAsZip(this.endpoint, [envelope]).catch(e => {
+            console.log('[ENVELOPES] Download error', e);
+            VerdocsToast('Download error: ' + e.message, { style: 'error' });
+        });
+    }
+    render() {
+        return (h(Host, { key: '4b7bda7f7615513f3e263d8dd0635733e069829d' }, h("div", { key: '2f8e6a7c99c0beba2ea5ca4b70f5547f6735d61e', class: "header" }, h("div", { key: '3be14d43f05437301237aef3ce5ea491f6e7747c', class: "filter" }, h("verdocs-text-input", { key: '3ec6f05183dbede1787c8f8eca98b5db9079b488', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
+                var _a;
+                // We don't locally filter envelopes because there are too many fields to match against efficiently.
+                this.match = e.target.value.trim();
+                (_a = this.changeMatch) === null || _a === void 0 ? void 0 : _a.emit(this.match);
+            } })), h("verdocs-quick-filter", { key: '7822828a8a7ebbb820ee689b09c9e0a5eb764edb', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
+                this.view = e.detail.value;
+            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: 'a181198baa609fd7e170635a2f9e5c567d9227eb', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
+                this.status = e.detail.value;
+            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '14a253295139825b43c20bafe8e56a253242f1f8', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
+                this.sort = e.detail.value;
+            } })), this.loading && h("verdocs-spinner", { key: '8e72be52c0dcf484761187c14ef99607b91ab9ca', mode: "dark", size: 24 }), h("div", { key: 'c31e47e5b85fff3841620bde02ecf71a177b769f', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: '4fc3bf3c3e04efd833f4dec4e09862969a30da2a', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
+            var _a;
+            const recipientsWithActions = getRecipientsWithActions(envelope);
+            const userCanCancel = userCanCancelEnvelope(this.endpoint.session, envelope);
+            const userRole = recipientsWithActions.find(recipient => { var _a; return recipient.email === ((_a = this.endpoint.session) === null || _a === void 0 ? void 0 : _a.email) || ''; });
+            const userCanFinish = userRole && userCanCancel && userCanAct(((_a = this.endpoint.session) === null || _a === void 0 ? void 0 : _a.email) || '', recipientsWithActions);
+            const menuOptions = [
+                { label: 'View Envelope', id: 'view' },
+                { label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish },
+                { label: 'Download', id: 'download' },
+                { label: 'Cancel', id: 'cancel', disabled: !userCanCancel },
+            ];
+            return (h("div", { class: "envelope", key: envelope.id, onClick: () => { var _a; return (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope }); } }, h("div", { class: "inner" }, h("verdocs-checkbox", { checked: this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1, onClick: e => e.stopPropagation(), onInput: (e) => {
+                    if (e.target.checked) {
+                        this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];
+                    }
+                    else {
+                        this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
+                    }
+                } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon, class: "envelope-icon" }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
+                    var _a, _b;
+                    switch (e.detail.id) {
+                        case 'view':
+                            (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope });
+                            break;
+                        case 'finish':
+                            (_b = this.finishEnvelope) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope });
+                            break;
+                        case 'download':
+                            this.downloadEnvelope(envelope);
+                            break;
+                        case 'cancel':
+                            if (window.confirm('Are you sure you want to cancel this envelope?')) {
+                                cancelEnvelope(this.endpoint, envelope.id)
+                                    .then(() => VerdocsToast('Envelope canceled'))
+                                    .catch(e => VerdocsToast('Unable to cancel envelope: ' + e.messabge, { style: 'error' }));
+                                this.queryEnvelopes().catch(() => { });
+                            }
+                            break;
+                    }
+                } }))));
+        }), !this.initiallyLoaded && (h("div", { key: 'cf943955958934d6bab489b04c6af5b026649998', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: 'e9c7b5ee1c2600ff9876624f3d61a830903f0345', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
+                this.selectedPage = e.detail.selectedPage;
+            } }))) : (h("div", null))));
+    }
+    static get is() { return "verdocs-envelopes-list"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-envelopes-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-envelopes-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerdocsEndpoint",
+                    "resolved": "VerdocsEndpoint",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "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()"
+            },
+            "view": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
+                    "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The filtered view to display. \"completed\" will show envelopes that have been submitted. \"action\" will\nshow envelopes where the user is a recipient and the envelope is not completed. \"waiting\" will show\nonly envelopes where the user is the sender and the envelope is not completed."
+                },
+                "attribute": "view",
+                "reflect": true,
+                "defaultValue": "undefined"
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "TEnvelopeStatus | 'all'",
+                    "resolved": "\"all\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
+                    "references": {
+                        "TEnvelopeStatus": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The status value to filter by"
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "'all'"
+            },
+            "sort": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'",
+                    "resolved": "\"canceled_at\" | \"created_at\" | \"name\" | \"status\" | \"updated_at\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The sort field to use"
+                },
+                "attribute": "sort",
+                "reflect": true,
+                "defaultValue": "'created_at'"
+            },
+            "match": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, filter envelopes by the specified string."
+                },
+                "attribute": "match",
+                "reflect": true,
+                "defaultValue": "''"
             },
-            "IEnvelope": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+            "showPagination": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not pagination should be enabled."
+                },
+                "attribute": "show-pagination",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "rowsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of rows to display per page."
+                },
+                "attribute": "rows-per-page",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "selectedPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial page number to select. Pagination is internally controlled but may be overriden by the\nhost applicaiton."
+                },
+                "attribute": "selected-page",
+                "reflect": false,
+                "defaultValue": "0"
             }
-          }
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "view",
-        "methodName": "handleViewUpdated"
-      }, {
-        "propName": "status",
-        "methodName": "handleStatusUpdated"
-      }, {
-        "propName": "sort",
-        "methodName": "handleSortUpdated"
-      }, {
-        "propName": "match",
-        "methodName": "handleMatchUpdated"
-      }, {
-        "propName": "selectedPage",
-        "methodName": "handlePageUpdated"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "count": {},
+            "initiallyLoaded": {},
+            "loading": {},
+            "selectedEnvelopes": {},
+            "envelopes": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeView",
+                "name": "changeView",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user changes their view. Host applications can use this to save the user's preferences."
+                },
+                "complexType": {
+                    "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
+                    "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
+                    "references": {}
+                }
+            }, {
+                "method": "changeStatus",
+                "name": "changeStatus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user changes their status filter. Host applications can use this to save the user's preferences."
+                },
+                "complexType": {
+                    "original": "TEnvelopeStatus | 'all'",
+                    "resolved": "\"all\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
+                    "references": {
+                        "TEnvelopeStatus": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }, {
+                "method": "changeSort",
+                "name": "changeSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user changes their sort order. Host applications can use this to save the user's preferences."
+                },
+                "complexType": {
+                    "original": "'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'",
+                    "resolved": "\"canceled_at\" | \"created_at\" | \"name\" | \"status\" | \"updated_at\"",
+                    "references": {}
+                }
+            }, {
+                "method": "changeMatch",
+                "name": "changeMatch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user changes the match filter. This is fired for every inputChange event (every character\ntyped). This event is provided for balance with the other events, but host applications should generally not\nsave this value. Users might appreciate applications remembering their sorting or filtering preferences, but\nprobably not their search terms."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "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",
+                            "id": "src/utils/errors.ts::SDKError"
+                        }
+                    }
+                }
+            }, {
+                "method": "viewEnvelope",
+                "name": "viewEnvelope",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user clicks an activity entry. Typically the host application will use this to navigate\nto the envelope detail view."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IEnvelope": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }, {
+                "method": "finishEnvelope",
+                "name": "finishEnvelope",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the user clicks to finish the envelope."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IEnvelope": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "view",
+                "methodName": "handleViewUpdated"
+            }, {
+                "propName": "status",
+                "methodName": "handleStatusUpdated"
+            }, {
+                "propName": "sort",
+                "methodName": "handleSortUpdated"
+            }, {
+                "propName": "match",
+                "methodName": "handleMatchUpdated"
+            }, {
+                "propName": "selectedPage",
+                "methodName": "handlePageUpdated"
+            }];
+    }
 }