@verdocs/web-sdk 1.15.0 → 1.15.1

package/dist/esm/verdocs-envelopes-list.entry.js

@@ -2,8 +2,8 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-b
 import { s as searchEnvelopes, c as cancelEnvelope } from './Envelopes-e69b678a.js';
 import { a as getRecipientsWithActions, b as userCanAct, c as userCanCancelEnvelope } from './Permissions-2ac18553.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-5b92f115.js';
-import { s as saveEnvelopesAsZip } from './utils-8ae39b63.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-45286fc7.js';
+import { s as saveEnvelopesAsZip } from './utils-a8284581.js';
 import { V as VerdocsToast } from './Toast-f3b8fd46.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './_commonjsHelpers-5ec8f9b7.js';
@@ -11,9 +11,32 @@ import './Files-70a192df.js';
 import './Types-de18e225.js';
 import './index-914ed6f7.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{margin:0;width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#ffffff;border:1px solid #cccccc}verdocs-envelopes-list .envelope .inner{gap:20px;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;background:#f9f9f9;border:1px solid #e3e3e3}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 .last-modified svg{width:32px;height:32px;margin-right:8px}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;font-size:18px;line-height:28px}verdocs-envelopes-list .envelope-recipients{font-weight:700;color:#4b5563}";
+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 DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" 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 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' },
+];
+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' },
+];
+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' },
+];
 const VerdocsEnvelopesList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -22,11 +45,11 @@ const VerdocsEnvelopesList = class {
     this.finishLater = createEvent(this, "finishLater", 7);
     this.viewAll = createEvent(this, "viewAll", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
-    this.items = 5;
+    this.maxItems = 40;
     this.view = undefined;
     this.status = 'all';
     this.sortBy = 'updated_at';
-    this.page = 0;
+    this.selectedPage = 0;
     this.count = 0;
     this.loading = true;
     this.name = '';
@@ -34,26 +57,36 @@ const VerdocsEnvelopesList = class {
     this.selectedEnvelopes = [];
     this.envelopes = [];
   }
-  async componentWillLoad() {
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[ENVELOPES] Must be authenticated');
+      return;
+    }
+    return this.queryEnvelopes();
+  }
+  async queryEnvelopes() {
     var _a, _b, _c;
     try {
-      this.endpoint.loadSession();
-      if (!this.endpoint.session) {
-        console.log('[ENVELOPES] Must be authenticated');
-        return;
-      }
+      this.loading = true;
       let queryParams = {
-        page: this.page,
-        limit: Math.min(Math.max(this.items, 1), 50),
-        ascending: false,
-        sort_by: 'updated_at',
+        page: this.selectedPage + 1,
+        limit: 10,
       };
       switch (this.view) {
+        case 'all':
+          queryParams = {
+            ...queryParams,
+            sort_by: this.sortBy,
+            ascending: this.sortBy === 'envelope_name',
+            envelope_status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
+          };
+          break;
         case 'inbox':
           queryParams = {
             ...queryParams,
             is_recipient: true,
-            sort_by: 'created_at',
+            sort_by: 'updated_at',
             recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],
           };
           break;
@@ -61,12 +94,13 @@ const VerdocsEnvelopesList = class {
           queryParams = {
             ...queryParams,
             is_owner: true,
-            sort_by: 'created_at',
+            sort_by: 'updated_at',
           };
           break;
         case 'action':
           queryParams = {
             ...queryParams,
+            sort_by: 'updated_at',
             is_recipient: true,
             envelope_status: ['pending', 'in progress'],
             recipient_status: ['invited', 'opened', 'signed'],
@@ -76,18 +110,24 @@ const VerdocsEnvelopesList = class {
           queryParams = {
             ...queryParams,
             is_owner: true,
+            sort_by: 'updated_at',
+            ascending: false,
             envelope_status: ['pending', 'in progress'],
           };
           break;
         case 'completed':
           queryParams = {
             ...queryParams,
+            sort_by: 'updated_at',
+            ascending: false,
             envelope_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]),
           };
       }
@@ -99,6 +139,10 @@ const VerdocsEnvelopesList = class {
           queryParams.envelope_status = [this.status];
         }
       }
+      if (this.sortBy !== 'updated_at') {
+        queryParams.sort_by = this.sortBy;
+        queryParams.ascending = this.sortBy === 'envelope_name';
+      }
       if (this.name.trim()) {
         queryParams.name = this.name.trim();
       }
@@ -106,52 +150,18 @@ const VerdocsEnvelopesList = class {
         queryParams.text_field_value = this.containing.trim();
       }
       const response = await searchEnvelopes(this.endpoint, queryParams);
-      console.log('[ACTIVITIES] Got envelopes', response);
       this.envelopes = response.result;
       this.count = response.total;
       this.loading = false;
-      // let queryParams: IEnvelopeSearchParams = {
-      //   page: 0,
-      //   ascending: false,
-      //   sort_by: 'updated_at',
-      //   limit: Math.max(Math.min(this.items, 30), 1),
-      // };
-      //
-      // let defaultHeader;
-      // switch (this.view) {
-      //   case 'action':
-      //     queryParams = {...queryParams, is_recipient: true, envelope_status: ['pending', 'in progress'], recipient_status: ['invited', 'opened', 'signed']};
-      //     defaultHeader = 'Action Required';
-      //
-      //     break;
-      //
-      //   case 'waiting':
-      //     queryParams = {...queryParams, is_owner: true, ascending: false, envelope_status: ['pending', 'in progress']};
-      //     defaultHeader = 'Waiting on Others';
-      //     break;
-      //
-      //   case 'completed':
-      //   default:
-      //     queryParams = {...queryParams, envelope_status: ['complete']};
-      //     defaultHeader = 'Completed';
-      //     break;
-      // }
-      //
-      // this.title = this.header !== undefined ? this.header : defaultHeader;
-      //
-      // const response = await Envelopes.searchEnvelopes(this.endpoint, queryParams);
-      // console.log('[ENVELOPES] Got envelopes', response);
-      // this.envelopes = response.result;
-      // this.count = response.total;
-      // this.loading = false;
     }
     catch (e) {
       console.log('[ENVELOPES] Error with preview session', e);
+      this.loading = true;
       (_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));
     }
   }
   handleDownload() {
-    saveEnvelopesAsZip(VerdocsEndpoint.getDefault(), this.selectedEnvelopes)
+    saveEnvelopesAsZip(this.endpoint, this.selectedEnvelopes)
       .then(() => {
       this.selectedEnvelopes = [];
     })
@@ -161,25 +171,39 @@ const VerdocsEnvelopesList = class {
     });
   }
   downloadEnvelope(envelope) {
-    saveEnvelopesAsZip(VerdocsEndpoint.getDefault(), [envelope]).catch(e => {
+    saveEnvelopesAsZip(this.endpoint, [envelope]).catch(e => {
       console.log('Download error', e);
       VerdocsToast('Download error: ' + e.message, { style: 'error' });
     });
   }
   render() {
-    if (this.loading) {
-      return (h(Host, { style: { minHeight: '300px' } }, h("verdocs-loader", null)));
-    }
-    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...", onInput: (e) => {
+    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;
-      } })), h("div", { class: "flex flex-row gap-3 items-center" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-containing", value: this.containing, autocomplete: "off", placeholder: "Fields Containing...", onInput: (e) => {
+        return this.queryEnvelopes();
+      } })), 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.sortBy, options: SortFilters, onOptionSelected: e => {
+        this.sortBy = 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;
-      } }))), h("div", { class: "flex flex-1" }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
+        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 => {
       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];
@@ -187,12 +211,7 @@ const VerdocsEnvelopesList = class {
           else {
             this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
           }
-        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon }), 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: [
-          { label: 'View Envelope', id: 'view' },
-          { label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish },
-          { label: 'Download', id: 'download' },
-          { label: 'Cancel', id: 'cancel', disabled: !userCanCancel },
-        ], onOptionSelected: e => {
+        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon }), 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':
@@ -207,21 +226,16 @@ const VerdocsEnvelopesList = class {
             case 'cancel':
               if (window.confirm('Are you sure you want to cancel this envelope?')) {
                 cancelEnvelope(this.endpoint, envelope.id)
-                  .then(r => {
-                  console.log('Cancel result', r);
-                  VerdocsToast('Envelope canceled');
-                })
-                  .catch(e => {
-                  console.log('cxl error', e);
-                  VerdocsToast('Unable to cancel envelope: ' + e.messabge, { style: 'error' });
-                });
+                  .then(() => VerdocsToast('Envelope canceled'))
+                  .catch(e => VerdocsToast('Unable to cancel envelope: ' + e.messabge, { style: 'error' }));
               }
               break;
           }
         } }))));
-    }), !this.envelopes.length ? (h("div", { class: "mt-4 border-2 px-20 py-20 text-center" }, "No matching envelopes found. Please adjust your filters and try again.")) : (h("div", null)
-    // <Pagination page={this.page} total={this.count} onSelectPage={setPage} />
-    )));
+    }), !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.selectedPage = e.detail.selectedPage;
+        return this.queryEnvelopes();
+      } })))));
   }
 };
 VerdocsEnvelopesList.style = verdocsEnvelopesListCss;

package/dist/esm/verdocs-field-checkbox.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Types-5f31149e.js';

package/dist/esm/verdocs-field-date.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { a as FORMAT_DATE } from './Types-de18e225.js';
 import { f as format } from './index-914ed6f7.js';

package/dist/esm/verdocs-field-dropdown.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Types-5f31149e.js';

package/dist/esm/verdocs-field-initial.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Types-5f31149e.js';

package/dist/esm/verdocs-field-payment.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Types-5f31149e.js';

package/dist/esm/verdocs-field-radio-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Types-5f31149e.js';

package/dist/esm/verdocs-field-signature.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Types-5f31149e.js';

package/dist/esm/verdocs-field-textarea.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b18c0348.js';
 import { i as interact } from './interact.min-cf83fa88.js';
 import './Types-5f31149e.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-45286fc7.js';
 import { u as updateField } from './Fields-c82e6df3.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-5b92f115.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Files-70a192df.js';

package/dist/esm/verdocs-field-textbox.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b18c0348.js';
 import { i as interact } from './interact.min-cf83fa88.js';
 import './Types-5f31149e.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-45286fc7.js';
 import { u as updateField } from './Fields-c82e6df3.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-5b92f115.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
 import './Files-70a192df.js';

package/dist/esm/verdocs-field-timestamp.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-8ae39b63.js';
+import { g as getFieldSettings } from './utils-a8284581.js';
 import { F as FORMAT_TIMESTAMP } from './Types-de18e225.js';
 import { f as format } from './index-914ed6f7.js';
 import './_commonjsHelpers-5ec8f9b7.js';

package/dist/esm/verdocs-file-chooser_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-5b92f115.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-45286fc7.js';
 import { u as unicodeNBSP } from './Icons-c29eb0fa.js';
 
 const verdocsFileChooserCss = "verdocs-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";

package/dist/esm/{verdocs-status-indicator.entry.js → verdocs-pagination_4.entry.js}

@@ -1,5 +1,163 @@
-import { r as registerInstance, h, H as Host } from './index-b18c0348.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b18c0348.js';
+import { i as integerSequence } from './Primitives-054bc6e5.js';
+import { d as renderedTextWidth } from './utils-a8284581.js';
 import { c as createPopper } from './popper-bfa25c7f.js';
+import './_commonjsHelpers-5ec8f9b7.js';
+import './Envelopes-e69b678a.js';
+import './Types-5f31149e.js';
+import './Files-70a192df.js';
+import './Types-de18e225.js';
+import './index-914ed6f7.js';
+
+const verdocsPaginationCss = "verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}";
+
+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 PageButton = ({ page, selected, onClick }) => {
+  let label;
+  if (page === 'first') {
+    label = ChevronDoubleLeft;
+  }
+  else if (page === 'last') {
+    label = ChevronDoubleRight;
+  }
+  else {
+    label = String(page + 1);
+  }
+  return h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
+};
+const VerdocsQuickFilter$2 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectPage = createEvent(this, "selectPage", 7);
+    this.selectedPage = 0;
+    this.itemCount = 1;
+    this.perPage = 10;
+  }
+  handleSelectPage(page) {
+    var _a;
+    this.selectedPage = page;
+    (_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) })));
+  }
+  get el() { return getElement(this); }
+};
+VerdocsQuickFilter$2.style = verdocsPaginationCss;
+
+const verdocsQuickFilterCss = "verdocs-quick-filter{position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-quick-filter .control{outline:0;height:34px;display:-ms-flexbox;display:flex;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;-webkit-transition:all 100ms ease 0s;transition:all 100ms ease 0s;border:1px solid #cccccc}verdocs-quick-filter .title{padding:0 8px;font-size:14px;max-width:100%;overflow:hidden;color:#33364b;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis}verdocs-quick-filter .title .prefix{display:inline;font-weight:700;margin:0 7px 0 0;color:#4c56cb}verdocs-quick-filter .arrow{width:32px;height:32px;border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#ffffff;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s}verdocs-quick-filter .arrow svg{-webkit-transition:0.3s;transition:0.3s;fill:#cccccc}verdocs-quick-filter .separator{width:1px;display:block;margin-top:8px;margin-bottom:8px;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#cccccc}verdocs-quick-filter .items{display:none;z-index:10000;position:absolute;border-radius:4px;background:#ffffff;-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px}verdocs-quick-filter .items[data-show]{display:block}verdocs-quick-filter .option{width:100%;border:none;display:block;font-size:14px;text-align:left;background:none;padding:10px 20px;color:#1e2031}verdocs-quick-filter .option:hover{cursor:pointer;background:#4c56cb3f}verdocs-quick-filter .option[disabled]{color:#aaaaaa}verdocs-quick-filter .option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}verdocs-quick-filter.open .items{display:block}verdocs-quick-filter.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1)}";
+
+const DropdownArrow = `<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>`;
+const VerdocsQuickFilter$1 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.optionSelected = createEvent(this, "optionSelected", 7);
+    // We need to do this to reliably disconnect the click-away listener
+    this.clickListenerSymbol = new AbortController();
+    this.options = [];
+    this.label = 'Filter';
+    this.value = '';
+    this.placeholder = 'Select...';
+    this.open = undefined;
+  }
+  componentDidLoad() {
+    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [-1, 14] } }] });
+    window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
+  }
+  disconnectedCallback() {
+    this.clickListenerSymbol.abort();
+  }
+  clickListener(e) {
+    const outside = !(e.target == this.el || this.el.contains(e.target));
+    if (outside) {
+      this.hide();
+    }
+  }
+  handleSelectOption(e, option) {
+    e.stopPropagation();
+    this.optionSelected.emit(option);
+    this.value = option.value;
+    this.hide();
+  }
+  // See https://popper.js.org/docs/v2/tutorial/
+  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
+  showDropdown() {
+    var _a, _b;
+    this.open = true;
+    this.dropdownMenu.setAttribute('data-show', '');
+    this.dropdownMenu.removeAttribute('aria-hidden');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
+    })).catch(() => { });
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+  }
+  handleHideDropdown(e) {
+    var _a, _b;
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
+      // This event is fired when a menu element is clicked because the button "loses focus" then too
+      return;
+    }
+    this.hide();
+  }
+  toggleDropdown(e) {
+    e.stopPropagation();
+    if (this.open) {
+      this.hide();
+    }
+    else {
+      this.showDropdown();
+    }
+  }
+  hide() {
+    var _a;
+    this.open = false;
+    this.dropdownMenu.removeAttribute('data-show');
+    this.dropdownMenu.setAttribute('aria-hidden', 'true');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
+    })).catch(() => { });
+  }
+  render() {
+    var _a, _b, _c;
+    const selectedOption = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(option => option.value === this.value);
+    const longestOption = (_b = this.options) === null || _b === void 0 ? void 0 : _b.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));
+    const longestLabelWidth = renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
+    const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
+    const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
+    return (h(Host, { class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, h("div", { class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, h("div", { class: "title", ref: el => (this.dropdownButton = el) }, h("span", { class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), h("div", { style: { flex: '1' } }), h("div", { class: "separator" }), h("div", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
+  }
+  get el() { return getElement(this); }
+};
+VerdocsQuickFilter$1.style = verdocsQuickFilterCss;
+
+const verdocsSpinnerCss = "verdocs-spinner{display:inline-block;border-radius:50%;-webkit-animation:spin 1s ease-in-out infinite;animation:spin 1s ease-in-out infinite}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+
+const LIGHT_STYLE = { border: '3px solid rgba(255, 255, 255, 0.3)', borderTopColor: '#fff' };
+const DARK_STYLE = { border: '3px solid rgba(0, 0, 0, 0.3)', borderTopColor: '#333' };
+const VerdocsQuickFilter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 32;
+    this.mode = 'light';
+  }
+  render() {
+    return (h(Host, { style: {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+        flex: `0 0 ${this.size}px`,
+        ...(this.mode === 'light' ? LIGHT_STYLE : DARK_STYLE),
+      } }));
+  }
+};
+VerdocsQuickFilter.style = verdocsSpinnerCss;
 
 const methods$1 = {};
 const names = [];
@@ -7227,12 +7385,12 @@ const ENTRY_PADDING = 40;
 const VerdocsStatusIndicator = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.recipientStatusIcons = [];
     this.size = 'normal';
     this.theme = 'light';
     this.status = undefined;
     this.envelope = undefined;
     this.isOpen = undefined;
-    this.recipientStatusIcons = [];
     this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
@@ -7439,4 +7597,4 @@ const VerdocsStatusIndicator = class {
 };
 VerdocsStatusIndicator.style = verdocsStatusIndicatorCss;
 
-export { VerdocsStatusIndicator as verdocs_status_indicator };
+export { VerdocsQuickFilter$2 as verdocs_pagination, VerdocsQuickFilter$1 as verdocs_quick_filter, VerdocsQuickFilter as verdocs_spinner, VerdocsStatusIndicator as verdocs_status_indicator };

package/dist/esm/verdocs-preview.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-5b92f115.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils-8ae39b63.js';
-import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-852097c3.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-45286fc7.js';
+import { r as renderDocumentField, a as getRoleIndex } from './utils-a8284581.js';
+import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-c15956ae.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-e69b678a.js';
@@ -10,7 +10,7 @@ import './Files-70a192df.js';
 import './Types-de18e225.js';
 import './index-914ed6f7.js';
 import './index-29123f30.js';
-import './Templates-67172396.js';
+import './Templates-3760f311.js';
 
 const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";