@verdocs/web-sdk 2.0.22 → 2.0.25

package/dist/components/Envelopes.js

@@ -52,22 +52,6 @@ var getSummary = function (endpoint, page) { return __awaiter(void 0, void 0, vo
                 .then(function (r) { return r.data; })];
     });
 }); };
-/**
- * Search for envelopes matching various criteria.
- *
- * ```typescript
- * import {Envelopes} from '@verdocs/js-sdk/Envelopes';
- *
- * const {result, page, total} = await Envelopes.search(VerdocsEndpoint.getDefault(), { ... });
- * ```
- */
-var searchEnvelopes = function (endpoint, params) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, endpoint.api //
-                .post('/envelopes/search', params)
-                .then(function (r) { return r.data; })];
-    });
-}); };
 /**
  * Get a signing session for an Envelope.
  */
@@ -214,5 +198,19 @@ var throttledGetEnvelope = function (endpoint, envelopeId) {
         return envelope;
     });
 };
+/**
+ * Lists all templates accessible by the caller, with optional filters.
+ *
+ * ```typescript
+ * import {Envelopes} from '@verdocs/js-sdk/Templates';
+ *
+ * await Envelopes.listEnvelopes((VerdocsEndpoint.getDefault(), { name: 'test', sort: 'updated_at' });
+ * ```
+ */
+var listEnvelopes = function (endpoint, params) {
+    return endpoint.api //
+        .post('/envelopes/list', params, { baseURL: endpoint.getBaseURLv2() })
+        .then(function (r) { return r.data; });
+};
 
-export { getSigningSession as a, updateEnvelopeFieldSignature as b, cancelEnvelope as c, updateEnvelopeFieldInitials as d, uploadEnvelopeFieldAttachment as e, getEnvelopeDocumentPageDisplayUri as f, getSummary as g, getEnvelopeFile as h, getFieldAttachment as i, getEnvelope as j, searchEnvelopes as s, throttledGetEnvelope as t, updateEnvelopeField as u };
+export { getSigningSession as a, updateEnvelopeFieldSignature as b, cancelEnvelope as c, updateEnvelopeFieldInitials as d, uploadEnvelopeFieldAttachment as e, getEnvelopeDocumentPageDisplayUri as f, getSummary as g, getEnvelopeFile as h, getFieldAttachment as i, getEnvelope as j, listEnvelopes as l, throttledGetEnvelope as t, updateEnvelopeField as u };

package/dist/components/Permissions.js

@@ -8,7 +8,9 @@ import { E as EnvelopeStates } from './Types.js';
 /**
  * Check to see if the user owns the envelope.
  */
-var userIsEnvelopeOwner = function (session, envelope) { return envelope.profile_id === (session === null || session === void 0 ? void 0 : session.profile_id); };
+var userIsEnvelopeOwner = function (session, envelope) {
+    return envelope.profile_id === (session === null || session === void 0 ? void 0 : session.profile_id);
+};
 /**
  * Check to see if the user owns the envelope.
  */

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as searchEnvelopes, c as cancelEnvelope } from './Envelopes.js';
+import { l as listEnvelopes, c as cancelEnvelope } from './Envelopes.js';
 import { g as getRecipientsWithActions, a as userCanAct, b as userCanCancelEnvelope } from './Permissions.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { i as integerSequence } from './Primitives.js';
 import { s as saveEnvelopesAsZip } from './utils.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
@@ -16,7 +17,7 @@ import { d as defineCustomElement$4 } from './verdocs-spinner2.js';
 import { d as defineCustomElement$3 } from './verdocs-status-indicator2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsEnvelopesListCss = "verdocs-envelopes-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-envelopes-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .header .filter{width:150px}verdocs-envelopes-list .header verdocs-text-input{margin:0}verdocs-envelopes-list .header verdocs-text-input input{height:32px}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0;background:#ffffff}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#f5f5fa}verdocs-envelopes-list .envelope .inner{gap:14px;display:-ms-flexbox;display:flex;padding:8px 20px;border-radius:6px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope .inner svg{width:24px;height:24px}verdocs-envelopes-list .vert-spacer{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;border-right:1px solid #dad8dd}verdocs-envelopes-list .last-modified{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 180px;flex:0 0 180px;font-size:16px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;white-space:nowrap}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;font-size:18px;overflow:hidden;line-height:28px;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .envelope-recipients{color:#4b5563;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .empty-text{font-size:20px;text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-envelopes-list .containing{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}";
+const verdocsEnvelopesListCss = "verdocs-envelopes-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-envelopes-list .envelope-placeholder{height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin:5px 0;border-radius:5px;background:#f5f5fa}verdocs-envelopes-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .header .filter{width:300px}verdocs-envelopes-list .header verdocs-text-input{margin:0}verdocs-envelopes-list .header verdocs-text-input input{height:32px}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0;background:#ffffff}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#f5f5fa}verdocs-envelopes-list .envelope .inner{gap:14px;display:-ms-flexbox;display:flex;padding:8px 20px;border-radius:6px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope .inner svg{width:24px;height:24px}verdocs-envelopes-list .vert-spacer{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;border-right:1px solid #dad8dd}verdocs-envelopes-list .last-modified{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 180px;flex:0 0 180px;font-size:16px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;white-space:nowrap}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;font-size:18px;overflow:hidden;line-height:28px;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .envelope-recipients{color:#4b5563;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .empty-text{font-size:20px;text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-envelopes-list .containing{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}";
 
 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 = [
@@ -46,17 +47,23 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   constructor() {
     super();
     this.__registerHost();
+    this.changeView = createEvent(this, "changeView", 7);
+    this.changeStatus = createEvent(this, "changeStatus", 7);
+    this.changeSort = createEvent(this, "changeSort", 7);
+    this.changeMatch = createEvent(this, "changeMatch", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.viewEnvelope = createEvent(this, "viewEnvelope", 7);
     this.finishLater = createEvent(this, "finishLater", 7);
     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 = [];
@@ -70,12 +77,13 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   handleSortUpdated() {
     return this.queryEnvelopes();
   }
-  handleNameUpdated() {
-    return this.queryEnvelopes();
-  }
-  handleContainingUpdated() {
+  handleMatchUpdated() {
     return this.queryEnvelopes();
   }
+  // @Watch('containing')
+  // handleContainingUpdated() {
+  //   return this.queryEnvelopes();
+  // }
   handlePageUpdated() {
     return this.queryEnvelopes();
   }
@@ -85,30 +93,34 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       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;
@@ -116,15 +128,15 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           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;
@@ -132,25 +144,25 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           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
@@ -158,27 +170,27 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       // 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 searchEnvelopes(this.endpoint, queryParams);
-      this.envelopes = response.result;
+      // if (this.containing.trim()) {
+      //   queryParams.field_value = this.containing.trim();
+      // }
+      const response = await 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));
     }
   }
@@ -199,22 +211,18 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     });
   }
   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);
@@ -254,17 +262,15 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
               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 watchers() { return {
     "view": ["handleViewUpdated"],
     "status": ["handleStatusUpdated"],
     "sort": ["handleSortUpdated"],
-    "name": ["handleNameUpdated"],
-    "containing": ["handleContainingUpdated"],
+    "match": ["handleMatchUpdated"],
     "selectedPage": ["handlePageUpdated"]
   }; }
   static get style() { return verdocsEnvelopesListCss; }
@@ -273,10 +279,12 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "view": [1537],
     "status": [1537],
     "sort": [1537],
-    "name": [1537],
-    "containing": [1537],
-    "selectedPage": [1538, "selected-page"],
+    "match": [1537],
+    "showPagination": [4, "show-pagination"],
+    "rowsPerPage": [2, "rows-per-page"],
+    "selectedPage": [2, "selected-page"],
     "count": [32],
+    "initiallyLoaded": [32],
     "loading": [32],
     "selectedEnvelopes": [32],
     "envelopes": [32]

package/dist/components/verdocs-pagination2.js

@@ -5,6 +5,7 @@ const verdocsPaginationCss = "verdocs-pagination{gap:8px;display:-ms-flexbox;dis
 
 const ChevronDoubleLeft = `<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="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>`;
 const ChevronDoubleRight = `<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="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>`;
+const VISIBLE_PAGES = 5;
 const PageButton = ({ page, selected, onClick }) => {
   let label;
   if (page === 'first') {
@@ -33,12 +34,10 @@ const VerdocsQuickFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     (_a = this.selectPage) === null || _a === void 0 ? void 0 : _a.emit({ selectedPage: page });
   }
   render() {
-    const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
-    // If there are 10 pages:
-    //   If page == 0 => firstPage: 0, numPagesToDisplay:
     const firstPage = Math.max(0, this.selectedPage - 2);
-    const numPagesToDisplay = Math.min(numPages, 5);
-    return (h(Host, null, this.selectedPage > 0 && h(PageButton, { page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { class: "ellipsis" }, "..."), integerSequence(firstPage, numPagesToDisplay - firstPage).map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), numPagesToDisplay < numPages && h("div", { class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+    const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
+    const pagesToDisplay = integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
+    return (h(Host, null, this.selectedPage > 0 && h(PageButton, { page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
   }
   get el() { return this; }
   static get style() { return verdocsPaginationCss; }

package/dist/components/verdocs-sign.js

@@ -338,10 +338,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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);
@@ -477,7 +477,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           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/components/verdocs-templates-list.js

@@ -93,6 +93,7 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.loading = true;
     this.confirmDelete = null;
     this.templates = [];
+    this.localNameFilter = '';
   }
   handleSharingUpdated() {
     return this.queryTemplates();
@@ -106,6 +107,9 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   handleNameUpdated() {
     return this.queryTemplates();
   }
+  handlePageUpdated() {
+    return this.queryTemplates();
+  }
   componentWillLoad() {
     this.endpoint.loadSession();
     if (!this.endpoint.session) {
@@ -139,7 +143,8 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       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));
     }
   }
@@ -159,9 +164,13 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     });
   }
   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;
@@ -175,7 +184,7 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         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 = [];
@@ -213,14 +222,14 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         } }, 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 watchers() { return {
     "sharing": ["handleSharingUpdated"],
     "starred": ["handleStarredUpdated"],
     "sort": ["handleSortUpdated"],
-    "name": ["handleNameUpdated"]
+    "name": ["handleNameUpdated"],
+    "selectedPage": ["handlePageUpdated"]
   }; }
   static get style() { return verdocsTemplatesListCss; }
 }, [0, "verdocs-templates-list", {
@@ -237,7 +246,8 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "initiallyLoaded": [32],
     "loading": [32],
     "confirmDelete": [32],
-    "templates": [32]
+    "templates": [32],
+    "localNameFilter": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './verdocs-help-icon2.js';
 
-const verdocsTextInputCss = "verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}";
+const verdocsTextInputCss = "verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}";
 
+const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
 const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -12,20 +13,37 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.placeholder = '';
     this.autocomplete = '';
     this.helpText = '';
+    this.clearable = false;
     this.type = 'text';
     this.disabled = false;
     this.required = false;
   }
   render() {
-    return (h(Host, { class: "input-field" }, h("label", null, this.label && (h("div", { class: "input-label" }, this.label + ':', this.required && h("span", { class: "required" }, "*"))), h("input", { type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
+    return (h(Host, { class: "input-field" }, h("label", null, this.label && (h("div", { class: "input-label" }, this.label + ':', this.required && h("span", { class: "required" }, "*"))), h("div", { class: "input-container" }, h("input", { type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { innerHTML: ClearIcon, class: "clear", onClick: () => {
+        // We need to allow the onInput event to fire first in case
+        // the user was focused on this field before clicking clear.
+        setTimeout(() => {
+          var _a;
+          this.value = '';
+          (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
+          // We need to allow the value to "settle"
+          setTimeout(() => {
+            var _a, _b;
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
+            (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
+          }, 50);
+        }, 50);
+      } }))), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
   }
+  get hostEl() { return this; }
   static get style() { return verdocsTextInputCss; }
 }, [0, "verdocs-text-input", {
-    "value": [1],
+    "value": [1537],
     "label": [1],
     "placeholder": [1],
     "autocomplete": [1],
     "helpText": [1, "help-text"],
+    "clearable": [4],
     "type": [1],
     "disabled": [4],
     "required": [4]