@verdocs/web-sdk 2.0.22 → 2.0.25

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

@@ -315,10 +315,10 @@ export class VerdocsSign {
         this.isDone = true;
         // TODO: This is a temporary hack. After submitting, if we immediately show the View component it won't have re-renedered the
         //  pages yet with our submitted data.
-        setTimeout(() => {
-          console.log('[SIGN] Reloading');
-          window.location.reload();
-        }, 1000);
+        // setTimeout(() => {
+        //   console.log('[SIGN] Reloading');
+        //   window.location.reload();
+        // }, 250);
       }
       catch (e) {
         console.log('[SIGN] Error submitting', e);
@@ -454,7 +454,7 @@ export class VerdocsSign {
           this.isDone = true;
         } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
     }
-    return (h(Host, { class: { agreed: this.agreed } }, !this.agreed && !this.finishLater && (h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents."))), h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '70px' : '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+    return (h(Host, { class: { agreed: this.agreed } }, !this.agreed && !this.finishLater && (h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents."))), h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.agreed && h("div", { class: "cover" }), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '70px' : '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
       const pageNumbers = integerSequence(1, envelopeDocument.page_numbers);
       return (h(Fragment, null, pageNumbers.map(pageNumber => {
         // In signing mode we show the original template page with all the recipient fields so we can show source formatting and

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.stories.js

@@ -3,9 +3,9 @@ export default {
   title: 'Embeds/Sign',
   component: 'verdocs-sign',
   args: {
-    envelopeId: '1dbb69bd-5d0d-4678-978d-962dd0775aaa',
-    roleId: 'Recipient 1',
-    inviteCode: '203d4d671b40db359e92a14fa54c1c3a',
+    envelopeId: '',
+    roleId: '',
+    inviteCode: '',
   },
   argTypes: {
     envelopeId: {

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

@@ -5,10 +5,16 @@ verdocs-envelopes-list {
   flex-wrap: nowrap;
   border-radius: 6px;
   color: #33364b;
-  align-items: center;
   flex-direction: column;
   font-family: "Inter", "Barlow", sans-serif;
 }
+verdocs-envelopes-list .envelope-placeholder {
+  height: 48px;
+  flex: 0 0 48px;
+  margin: 5px 0;
+  border-radius: 5px;
+  background: #f5f5fa;
+}
 verdocs-envelopes-list .header {
   width: 100%;
   row-gap: 4px;
@@ -20,7 +26,7 @@ verdocs-envelopes-list .header {
   flex-direction: row;
 }
 verdocs-envelopes-list .header .filter {
-  width: 150px;
+  width: 300px;
 }
 verdocs-envelopes-list .header verdocs-text-input {
   margin: 0;

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

@@ -1,7 +1,8 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
-import { Host, h } from '@stencil/core';
+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';
@@ -38,11 +39,13 @@ export class VerdocsEnvelopesList {
     this.endpoint = VerdocsEndpoint.getDefault();
     this.view = undefined;
     this.status = 'all';
-    this.sort = 'updated_at';
-    this.name = '';
-    this.containing = '';
+    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 = [];
@@ -56,12 +59,13 @@ export class VerdocsEnvelopesList {
   handleSortUpdated() {
     return this.queryEnvelopes();
   }
-  handleNameUpdated() {
-    return this.queryEnvelopes();
-  }
-  handleContainingUpdated() {
+  handleMatchUpdated() {
     return this.queryEnvelopes();
   }
+  // @Watch('containing')
+  // handleContainingUpdated() {
+  //   return this.queryEnvelopes();
+  // }
   handlePageUpdated() {
     return this.queryEnvelopes();
   }
@@ -71,30 +75,34 @@ export class VerdocsEnvelopesList {
       console.log('[ENVELOPES] Must be authenticated');
       return;
     }
-    return this.queryEnvelopes();
+  }
+  async componentDidLoad() {
+    await this.queryEnvelopes();
+    this.initiallyLoaded = true;
   }
   async queryEnvelopes() {
     var _a, _b, _c;
     try {
       this.loading = true;
       let queryParams = {
-        page: this.selectedPage + 1,
-        limit: 10,
+        page: this.selectedPage,
+        sort: this.sort,
+        rows: this.rowsPerPage,
       };
       switch (this.view) {
         case 'all':
           queryParams = {
             ...queryParams,
-            sort_by: this.sort,
-            ascending: this.sort === 'envelope_name',
-            envelope_status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
+            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_by: 'updated_at',
+            sort: 'updated_at',
             recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],
           };
           break;
@@ -102,15 +110,15 @@ export class VerdocsEnvelopesList {
           queryParams = {
             ...queryParams,
             is_owner: true,
-            sort_by: 'updated_at',
+            sort: 'updated_at',
           };
           break;
         case 'action':
           queryParams = {
             ...queryParams,
-            sort_by: 'updated_at',
+            sort: 'updated_at',
             is_recipient: true,
-            envelope_status: ['pending', 'in progress'],
+            status: ['pending', 'in progress'],
             recipient_status: ['invited', 'opened', 'signed'],
           };
           break;
@@ -118,25 +126,25 @@ export class VerdocsEnvelopesList {
           queryParams = {
             ...queryParams,
             is_owner: true,
-            sort_by: 'updated_at',
-            ascending: false,
-            envelope_status: ['pending', 'in progress'],
+            sort: 'updated_at',
+            direction: 'desc',
+            status: ['pending', 'in progress'],
           };
           break;
         case 'completed':
           queryParams = {
             ...queryParams,
-            sort_by: 'updated_at',
-            ascending: false,
-            envelope_status: ['complete'],
+            sort: 'updated_at',
+            direction: 'desc',
+            status: ['complete'],
           };
           break;
         default:
           queryParams = {
             ...queryParams,
-            sort_by: 'updated_at',
-            ascending: false,
-            envelope_status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
+            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
@@ -144,27 +152,27 @@ export class VerdocsEnvelopesList {
       // would never return anything).
       if (this.view === 'all') {
         if (this.status !== 'all') {
-          queryParams.envelope_status = [this.status];
+          queryParams.status = [this.status];
         }
       }
       if (this.sort !== 'updated_at') {
-        queryParams.sort_by = this.sort;
-        queryParams.ascending = this.sort === 'envelope_name';
+        queryParams.sort = this.sort;
+        queryParams.direction = this.sort === 'name' ? 'asc' : 'desc';
       }
-      if (this.name.trim()) {
-        queryParams.name = this.name.trim();
+      if (this.match.trim()) {
+        queryParams.match = this.match.trim();
       }
-      if (this.containing.trim()) {
-        queryParams.text_field_value = this.containing.trim();
-      }
-      const response = await Envelopes.searchEnvelopes(this.endpoint, queryParams);
-      this.envelopes = response.result;
+      // if (this.containing.trim()) {
+      //   queryParams.field_value = this.containing.trim();
+      // }
+      const response = await Envelopes.listEnvelopes(this.endpoint, queryParams);
+      this.envelopes = response.records;
       this.count = response.total;
       this.loading = false;
     }
     catch (e) {
-      console.log('[ENVELOPES] Error with preview session', e);
-      this.loading = true;
+      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));
     }
   }
@@ -185,22 +193,18 @@ export class VerdocsEnvelopesList {
     });
   }
   render() {
-    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onFocusout: (e) => {
-        this.name = e.target.value;
-        return this.queryEnvelopes();
+    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;
-        return this.queryEnvelopes();
       } }), this.view === 'all' && (h("verdocs-quick-filter", { label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
         this.status = e.detail.value;
-        return this.queryEnvelopes();
       } })), this.view === 'all' && (h("verdocs-quick-filter", { label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
         this.sort = e.detail.value;
-        return this.queryEnvelopes();
-      } })), h("div", { class: "containing" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-containing", value: this.containing, autocomplete: "off", placeholder: "Fields Containing...", onInput: (e) => {
-        this.containing = e.target.value;
-        return this.queryEnvelopes();
-      } }))), 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 => {
+      } })), 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);
@@ -240,10 +244,9 @@ export class VerdocsEnvelopesList {
               break;
           }
         } }))));
-    }), !this.loading && !this.envelopes.length ? (h("div", { class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again.")) : (h("div", { style: { marginTop: '10px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: 10, itemCount: this.count, onSelectPage: e => {
+    }), !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;
-        return this.queryEnvelopes();
-      } })))));
+      } }))) : (h("div", null))));
   }
   static get is() { return "verdocs-envelopes-list"; }
   static get originalStyleUrls() {
@@ -324,8 +327,8 @@ export class VerdocsEnvelopesList {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'created_at' | 'updated_at' | 'envelope_name' | 'canceled_at' | 'envelope_status'",
-          "resolved": "\"canceled_at\" | \"created_at\" | \"envelope_name\" | \"envelope_status\" | \"updated_at\"",
+          "original": "'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'",
+          "resolved": "\"canceled_at\" | \"created_at\" | \"name\" | \"status\" | \"updated_at\"",
           "references": {}
         },
         "required": false,
@@ -336,9 +339,9 @@ export class VerdocsEnvelopesList {
         },
         "attribute": "sort",
         "reflect": true,
-        "defaultValue": "'updated_at'"
+        "defaultValue": "'created_at'"
       },
-      "name": {
+      "match": {
         "type": "string",
         "mutable": true,
         "complexType": {
@@ -350,33 +353,51 @@ export class VerdocsEnvelopesList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If set, filter envelopes by the specified name."
+          "text": "If set, filter envelopes by the specified string."
         },
-        "attribute": "name",
+        "attribute": "match",
         "reflect": true,
         "defaultValue": "''"
       },
-      "containing": {
-        "type": "string",
-        "mutable": true,
+      "showPagination": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If set, filter envelopes by the specified \"containing\" value."
+          "text": "Whether or not pagination should be enabled."
         },
-        "attribute": "containing",
-        "reflect": true,
-        "defaultValue": "''"
+        "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": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -389,7 +410,7 @@ export class VerdocsEnvelopesList {
           "text": "The initial page number to select. Pagination is internally controlled but may be overriden by the\nhost applicaiton."
         },
         "attribute": "selected-page",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "0"
       }
     };
@@ -397,6 +418,7 @@ export class VerdocsEnvelopesList {
   static get states() {
     return {
       "count": {},
+      "initiallyLoaded": {},
       "loading": {},
       "selectedEnvelopes": {},
       "envelopes": {}
@@ -404,6 +426,71 @@ export class VerdocsEnvelopesList {
   }
   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"
+            }
+          }
+        }
+      }, {
+        "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,
@@ -434,14 +521,14 @@ export class VerdocsEnvelopesList {
           "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; }",
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelopeSummary}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelopeSummary; }",
           "references": {
             "VerdocsEndpoint": {
               "location": "import",
               "path": "@verdocs/js-sdk"
             },
-            "IEnvelope": {
+            "IEnvelopeSummary": {
               "location": "import",
               "path": "@verdocs/js-sdk/Envelopes/Types"
             }
@@ -458,14 +545,14 @@ export class VerdocsEnvelopesList {
           "text": "Event fired when the user clicks to finish signing later. Typically the host application should redirect\nthe user to another page."
         },
         "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
-          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelopeSummary}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelopeSummary; }",
           "references": {
             "VerdocsEndpoint": {
               "location": "import",
               "path": "@verdocs/js-sdk"
             },
-            "IEnvelope": {
+            "IEnvelopeSummary": {
               "location": "import",
               "path": "@verdocs/js-sdk/Envelopes/Types"
             }
@@ -484,11 +571,8 @@ export class VerdocsEnvelopesList {
         "propName": "sort",
         "methodName": "handleSortUpdated"
       }, {
-        "propName": "name",
-        "methodName": "handleNameUpdated"
-      }, {
-        "propName": "containing",
-        "methodName": "handleContainingUpdated"
+        "propName": "match",
+        "methodName": "handleMatchUpdated"
       }, {
         "propName": "selectedPage",
         "methodName": "handlePageUpdated"

package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.js

@@ -323,12 +323,16 @@ export class VerdocsStatusIndicator {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "IEnvelope",
-          "resolved": "IEnvelope",
+          "original": "IEnvelope | IEnvelopeSummary",
+          "resolved": "IEnvelope | IEnvelopeSummary",
           "references": {
             "IEnvelope": {
               "location": "import",
               "path": "@verdocs/js-sdk/Envelopes/Types"
+            },
+            "IEnvelopeSummary": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             }
           }
         },

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

@@ -2,8 +2,8 @@ import { format } from 'date-fns';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { Templates } from '@verdocs/js-sdk/Templates';
 import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
-import { TemplateActions } from '@verdocs/js-sdk/Templates/Types';
 import { h, Host } from '@stencil/core';
+import { TemplateActions } from '@verdocs/js-sdk/Templates/Types';
 import { SDKError } from '../../../utils/errors';
 const GlobeAltIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /></svg>`;
 const LockClosedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>`;
@@ -72,6 +72,7 @@ export class VerdocsTemplatesList {
     this.loading = true;
     this.confirmDelete = null;
     this.templates = [];
+    this.localNameFilter = '';
   }
   handleSharingUpdated() {
     return this.queryTemplates();
@@ -85,6 +86,9 @@ export class VerdocsTemplatesList {
   handleNameUpdated() {
     return this.queryTemplates();
   }
+  handlePageUpdated() {
+    return this.queryTemplates();
+  }
   componentWillLoad() {
     this.endpoint.loadSession();
     if (!this.endpoint.session) {
@@ -118,7 +122,8 @@ export class VerdocsTemplatesList {
       this.loading = false;
     }
     catch (e) {
-      console.log('[TEMPLATES] Error with preview session', e);
+      this.loading = false;
+      console.log('[TEMPLATES] Error listing templates', 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));
     }
   }
@@ -138,9 +143,13 @@ export class VerdocsTemplatesList {
     });
   }
   render() {
-    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onFocusout: (e) => {
+    // In addition to the server query we also filter locally. This provides a faster UI update
+    // while the onBlur re-queries the server for any new records that now qualify by the filter.
+    const locallyFilteredTemplates = !this.localNameFilter ? this.templates : this.templates.filter(t => t.name.toLowerCase().includes(this.localNameFilter.toLowerCase()));
+    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, clearable: true, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => (this.localNameFilter = e.target.value.trim()), onFocusout: (e) => {
         var _a;
-        this.name = e.target.value;
+        this.name = e.target.value.trim();
+        this.localNameFilter = e.target.value.trim();
         (_a = this.changeName) === null || _a === void 0 ? void 0 : _a.emit(this.name);
       } })), h("verdocs-quick-filter", { label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
         var _a;
@@ -154,7 +163,7 @@ export class VerdocsTemplatesList {
         var _a;
         this.sort = e.detail.value;
         (_a = this.changeSort) === null || _a === void 0 ? void 0 : _a.emit(this.sort);
-      } }), this.loading && h("verdocs-spinner", { mode: "dark", size: 24 }), h("div", { style: { display: 'flex', flex: '1' } })), this.templates.map(template => {
+      } }), this.loading && h("verdocs-spinner", { mode: "dark", size: 24 }), h("div", { style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
       const dateToShow = this.sort === 'created_at' ? 'created_at' : this.sort === 'updated_at' ? 'updated_at' : 'last_used_at';
       const date = template[dateToShow];
       const MENU_OPTIONS = [];
@@ -192,7 +201,6 @@ export class VerdocsTemplatesList {
         } }, h("div", { class: "inner" }, h("verdocs-template-star", { template: template, endpoint: this.endpoint }), h("div", { class: "spacer icon-spacer" }), h("div", { class: "name" }, template.name), h("div", { class: "spacer usage-spacer" }), h("div", { class: "usage" }, h("span", { innerHTML: EnvelopeIcon, title: "Usage Counter" }), template.counter || '--'), h("div", { class: "spacer last-used-spacer" }), h("div", { class: "last-used" }, dateToShow === 'created_at' && h("span", { innerHTML: CreatedIcon, title: "Created" }), dateToShow === 'updated_at' && h("span", { innerHTML: UpdatedIcon, title: "Last Updated" }), dateToShow === 'last_used_at' && h("span", { innerHTML: LastUsedIcon, title: "Last Used" }), date ? format(new Date(date), 'P') : 'Never'), h("div", { class: "spacer ownership-spacer" }), template.is_public && (h("div", { class: "ownership" }, h("span", { innerHTML: GlobeAltIcon }), " Public")), !template.is_public && !template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: LockClosedIcon }), " Private")), !template.is_public && template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, template) }))));
     }), !this.initiallyLoaded && (h("div", null, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && h("div", { class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.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;
-        return this.queryTemplates();
       } }))) : (h("div", null)), this.confirmDelete && (h("verdocs-ok-dialog", { heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
   }
   static get is() { return "verdocs-templates-list"; }
@@ -388,7 +396,8 @@ export class VerdocsTemplatesList {
       "initiallyLoaded": {},
       "loading": {},
       "confirmDelete": {},
-      "templates": {}
+      "templates": {},
+      "localNameFilter": {}
     };
   }
   static get events() {
@@ -612,6 +621,9 @@ export class VerdocsTemplatesList {
       }, {
         "propName": "name",
         "methodName": "handleNameUpdated"
+      }, {
+        "propName": "selectedPage",
+        "methodName": "handlePageUpdated"
       }];
   }
 }