@verdocs/web-sdk 1.15.0 → 1.15.1

package/dist/components/VerdocsEndpoint.js

@@ -1,5 +1,110 @@
 import { d as decodeAccessTokenBody } from './Types.js';
 
+var TemplateSenderTypes$1;
+(function (TemplateSenderTypes) {
+    TemplateSenderTypes["CREATOR"] = "creator";
+    TemplateSenderTypes["ORGANIZATION_MEMBER"] = "organization_member";
+    TemplateSenderTypes["ORGANIZATION_MEMBER_AS_CREATOR"] = "organization_member_as_creator";
+    TemplateSenderTypes["EVERYONE"] = "everyone";
+    TemplateSenderTypes["EVERYONE_AS_CREATOR"] = "everyone_as_creator";
+})(TemplateSenderTypes$1 || (TemplateSenderTypes$1 = {}));
+var TemplatePermissions;
+(function (TemplatePermissions) {
+    TemplatePermissions["TEMPLATE_CREATOR_CREATE_PUBLIC"] = "template:creator:create:public";
+    TemplatePermissions["TEMPLATE_CREATOR_CREATE_ORG"] = "template:creator:create:org";
+    TemplatePermissions["TEMPLATE_CREATOR_CREATE_PERSONAL"] = "template:creator:create:personal";
+    TemplatePermissions["TEMPLATE_CREATOR_DELETE"] = "template:creator:delete";
+    TemplatePermissions["TEMPLATE_CREATOR_VISIBILITY"] = "template:creator:visibility";
+    TemplatePermissions["TEMPLATE_MEMBER_READ"] = "template:member:read";
+    TemplatePermissions["TEMPLATE_MEMBER_WRITE"] = "template:member:write";
+    TemplatePermissions["TEMPLATE_MEMBER_DELETE"] = "template:member:delete";
+    TemplatePermissions["TEMPLATE_MEMBER_VISIBILITY"] = "template:member:visibility";
+})(TemplatePermissions || (TemplatePermissions = {}));
+var canPerformTemplateAction = function (session, action, template) {
+    var _a, _b;
+    if (!template && !action.includes('create')) {
+        return { canPerform: false, message: 'Missing required template object' };
+    }
+    // We use BOGUS here to force the option-chain in things like template?.profile_id to NOT match profile?.profile_id because if both
+    // were undefined, they would actually match.
+    var profile_id = (session === null || session === void 0 ? void 0 : session.profile_id) || 'BOGUS';
+    var organization_id = (session === null || session === void 0 ? void 0 : session.organization_id) || 'BOGUS';
+    if (!profile_id) {
+        return { canPerform: false, message: 'Active session required' };
+    }
+    var isCreator = (template === null || template === void 0 ? void 0 : template.profile_id) === profile_id;
+    var isSameOrg = (template === null || template === void 0 ? void 0 : template.organization_id) === organization_id;
+    var isPersonal = (_a = template === null || template === void 0 ? void 0 : template.is_personal) !== null && _a !== void 0 ? _a : false;
+    var isPublic = (_b = template === null || template === void 0 ? void 0 : template.is_public) !== null && _b !== void 0 ? _b : false;
+    var permissionsRequired = [];
+    switch (action) {
+        case 'create_personal':
+            permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_CREATE_PERSONAL);
+            break;
+        case 'create_org':
+            permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_CREATE_ORG);
+            break;
+        case 'create_public':
+            permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_CREATE_PUBLIC);
+            break;
+        case 'read':
+            if (!isCreator) {
+                if ((!isPersonal && isSameOrg) || !isPublic) {
+                    permissionsRequired.push(TemplatePermissions.TEMPLATE_MEMBER_READ);
+                }
+            }
+            break;
+        case 'write':
+            if (!isCreator) {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_MEMBER_READ);
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_MEMBER_WRITE);
+            }
+            break;
+        case 'change_visibility_personal':
+            if (isCreator) {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_CREATE_PERSONAL);
+            }
+            else {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_MEMBER_VISIBILITY);
+            }
+            break;
+        case 'change_visibility_org':
+            if (isCreator) {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_CREATE_ORG);
+            }
+            else {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_MEMBER_VISIBILITY);
+            }
+            break;
+        case 'change_visibility_public':
+            if (isCreator) {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_CREATE_PUBLIC);
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_VISIBILITY);
+            }
+            else {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_MEMBER_VISIBILITY);
+            }
+            break;
+        case 'delete':
+            if (isCreator) {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_CREATOR_DELETE);
+            }
+            else {
+                permissionsRequired.push(TemplatePermissions.TEMPLATE_MEMBER_DELETE);
+            }
+            break;
+        default:
+            return { canPerform: false, message: 'Action is not defined' };
+    }
+    if (hasRequiredPermissions(session, permissionsRequired)) {
+        return { canPerform: true, message: '' };
+    }
+    return { canPerform: false, message: "Insufficient access to perform '".concat(action, "'. Needed permissions: ").concat(permissionsRequired.toString()) };
+};
+var hasRequiredPermissions = function (session, permissions) {
+    return permissions.every(function (perm) { return ((session === null || session === void 0 ? void 0 : session.permissions) || []).includes(perm); });
+};
+
 var TemplateSenderTypes;
 (function (TemplateSenderTypes) {
     TemplateSenderTypes["CREATOR"] = "creator";
@@ -3956,4 +4061,4 @@ var VerdocsEndpoint = /** @class */ (function () {
     return VerdocsEndpoint;
 }());
 
-export { TemplateSenderTypes as T, VerdocsEndpoint as V };
+export { Permissions as P, TemplateSenderTypes as T, VerdocsEndpoint as V, canPerformTemplateAction as c };

package/dist/components/index.d.ts

@@ -32,8 +32,10 @@ export { VerdocsKbaDialog as VerdocsKbaDialog } from '../types/components/dialog
 export { VerdocsLoader as VerdocsLoader } from '../types/components/controls/verdocs-loader/verdocs-loader';
 export { VerdocsOkDialog as VerdocsOkDialog } from '../types/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog';
 export { VerdocsOrganizationCard as VerdocsOrganizationCard } from '../types/components/controls/verdocs-organization-card/verdocs-organization-card';
+export { VerdocsQuickFilter as VerdocsPagination } from '../types/components/controls/verdocs-pagination/verdocs-pagination';
 export { VerdocsPreview as VerdocsPreview } from '../types/components/embeds/verdocs-preview/verdocs-preview';
 export { VerdocsProgressBar as VerdocsProgressBar } from '../types/components/controls/verdocs-progress-bar/verdocs-progress-bar';
+export { VerdocsQuickFilter as VerdocsQuickFilter } from '../types/components/controls/verdocs-quick-filter/verdocs-quick-filter';
 export { VerdocsQuickFunctions as VerdocsQuickFunctions } from '../types/components/elements/verdocs-quick-functions/verdocs-quick-functions';
 export { VerdocsRadioButton as VerdocsRadioButton } from '../types/components/controls/verdocs-radio-button/verdocs-radio-button';
 export { VerdocsSearch as VerdocsSearch } from '../types/components/embeds/verdocs-search/verdocs-search';
@@ -44,6 +46,7 @@ export { VerdocsSelectInput as VerdocsSelectInput } from '../types/components/co
 export { VerdocsSend as VerdocsSend } from '../types/components/embeds/verdocs-send/verdocs-send';
 export { VerdocsSign as VerdocsSign } from '../types/components/embeds/verdocs-sign/verdocs-sign';
 export { VerdocsSignatureDialog as VerdocsSignatureDialog } from '../types/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog';
+export { VerdocsQuickFilter as VerdocsSpinner } from '../types/components/controls/verdocs-spinner/verdocs-spinner';
 export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/components/envelopes/verdocs-status-indicator/verdocs-status-indicator';
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/templates/verdocs-template-card/verdocs-template-card';

package/dist/components/index.js

@@ -32,8 +32,10 @@ export { VerdocsKbaDialog, defineCustomElement as defineCustomElementVerdocsKbaD
 export { VerdocsLoader, defineCustomElement as defineCustomElementVerdocsLoader } from './verdocs-loader.js';
 export { VerdocsOkDialog, defineCustomElement as defineCustomElementVerdocsOkDialog } from './verdocs-ok-dialog.js';
 export { VerdocsOrganizationCard, defineCustomElement as defineCustomElementVerdocsOrganizationCard } from './verdocs-organization-card.js';
+export { VerdocsPagination, defineCustomElement as defineCustomElementVerdocsPagination } from './verdocs-pagination.js';
 export { VerdocsPreview, defineCustomElement as defineCustomElementVerdocsPreview } from './verdocs-preview.js';
 export { VerdocsProgressBar, defineCustomElement as defineCustomElementVerdocsProgressBar } from './verdocs-progress-bar.js';
+export { VerdocsQuickFilter, defineCustomElement as defineCustomElementVerdocsQuickFilter } from './verdocs-quick-filter.js';
 export { VerdocsQuickFunctions, defineCustomElement as defineCustomElementVerdocsQuickFunctions } from './verdocs-quick-functions.js';
 export { VerdocsRadioButton, defineCustomElement as defineCustomElementVerdocsRadioButton } from './verdocs-radio-button.js';
 export { VerdocsSearch, defineCustomElement as defineCustomElementVerdocsSearch } from './verdocs-search.js';
@@ -44,6 +46,7 @@ export { VerdocsSelectInput, defineCustomElement as defineCustomElementVerdocsSe
 export { VerdocsSend, defineCustomElement as defineCustomElementVerdocsSend } from './verdocs-send.js';
 export { VerdocsSign, defineCustomElement as defineCustomElementVerdocsSign } from './verdocs-sign.js';
 export { VerdocsSignatureDialog, defineCustomElement as defineCustomElementVerdocsSignatureDialog } from './verdocs-signature-dialog.js';
+export { VerdocsSpinner, defineCustomElement as defineCustomElementVerdocsSpinner } from './verdocs-spinner.js';
 export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdocsStatusIndicator } from './verdocs-status-indicator.js';
 export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
 export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';

package/dist/components/utils.js

@@ -311,9 +311,9 @@ const saveCertificate = async (endpoint, envelope, documentId) => {
   downloadBlob(data, fileName);
 };
 const saveEnvelopesAsZip = async (endpoint, envelopes) => {
+  var _a;
   const zip = new jszip_min();
   for await (let envelope of envelopes) {
-    // e.g. "98a13bc0-8861-4408-86fc-8f9af51e867a-TheSwanBrothers Phase 1 Agreement - 11-02-22"
     const date = format(new Date(envelope.updated_at), FORMAT_DATE);
     const subFolder = envelopes.length > 0 ? zip.folder(`${envelope.id} - ${envelope.name} - ${date}`) : null;
     for await (let document of envelope.documents) {
@@ -326,7 +326,8 @@ const saveEnvelopesAsZip = async (endpoint, envelopes) => {
       else {
         zip.file(documentFileName, data, { compression: 'DEFLATE' });
       }
-      const attachFields = envelope.fields.filter(field => field.type === 'attachment' && field.settings['name']);
+      // TODO: fields needs to be added to envelope search result entries
+      const attachFields = ((_a = envelope.fields) === null || _a === void 0 ? void 0 : _a.filter(field => field.type === 'attachment' && field.settings['name'])) || [];
       if (attachFields.length > 0) {
         const attachmentsFolder = subFolder ? subFolder.folder('attachments') : zip.folder('attachments');
         for await (let attachField of attachFields) {
@@ -352,5 +353,14 @@ const throttle = (f, delay) => {
     timer = setTimeout(() => f.apply(this, args), delay);
   };
 };
+/**
+ * Compute the rendered width of a given text string, using a given font.
+ */
+const renderedTextWidth = (text, font = '16px Arial') => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.font = font;
+  return ctx.measureText(text).width;
+};
 
-export { getRoleIndex as a, saveAttachment as b, getFieldId as c, updateCssTransform as d, defaultWidth as e, defaultHeight as f, getFieldSettings as g, saveCertificate as h, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { getRoleIndex as a, saveAttachment as b, getFieldId as c, renderedTextWidth as d, updateCssTransform as e, defaultWidth as f, getFieldSettings as g, defaultHeight as h, saveCertificate as i, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };

package/dist/components/verdocs-activity-box.js

@@ -3,11 +3,52 @@ import { s as searchEnvelopes } from './Envelopes.js';
 import { g as getNextRecipient } from './Permissions.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { f as formatShortTimeAgo } from './DateTime.js';
 import { i as integerSequence } from './Primitives.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$2 } from './verdocs-button2.js';
 
+var YEAR = 365 * 24 * 60 * 60;
+var MONTH = 30 * 24 * 60 * 60;
+var WEEK = 7 * 24 * 60 * 60;
+var DAY = 24 * 60 * 60;
+var HOUR = 60 * 60;
+var MINUTE = 60;
+var formatShortTimeAgo = function (val) {
+    if (val === undefined || val === null) {
+        return '';
+    }
+    var dateInput;
+    if (typeof val === 'string' || typeof val === 'number') {
+        dateInput = new Date(val);
+    }
+    else if (typeof val === 'object') {
+        dateInput = val;
+    }
+    else {
+        return '';
+    }
+    var timeDiff = Math.floor((new Date().getTime() - dateInput.getTime()) / 1000);
+    if (timeDiff >= YEAR) {
+        return Math.floor(timeDiff / YEAR) + 'Y';
+    }
+    if (timeDiff >= MONTH) {
+        return Math.floor(timeDiff / MONTH) + 'M';
+    }
+    if (timeDiff >= WEEK) {
+        return Math.floor(timeDiff / WEEK) + 'W';
+    }
+    if (timeDiff >= DAY) {
+        return Math.floor(timeDiff / DAY) + 'Y';
+    }
+    if (timeDiff >= HOUR) {
+        return Math.floor(timeDiff / HOUR) + 'Y';
+    }
+    if (timeDiff >= MINUTE) {
+        return Math.floor(timeDiff / MINUTE) + 'Y';
+    }
+    return "".concat(timeDiff, "S");
+};
+
 const verdocsActivityBoxCss = "verdocs-activity-box{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:18px;min-width:300px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:#33364b;-ms-flex-align:center;align-items:center;border:1px solid #ccc;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif;background:#ffffff;padding:20px 20px 8px 20px}verdocs-activity-box .box-title{width:100%;display:-ms-flexbox;display:flex;color:#33364b;font-size:20px;font-weight:600;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin:0 0 20px 0;-ms-flex-align:center;align-items:center}verdocs-activity-box .box-title .count{margin:0 0 0 6px;font-weight:300}verdocs-activity-box .box-title verdocs-loader{margin:0 0 20px 0}@media screen and (max-width: 1200px){verdocs-activity-box .box-title{font-size:18px}verdocs-activity-box .box-title .count{display:none}}verdocs-activity-box .spacer{-ms-flex:1;flex:1}verdocs-activity-box .loading-placeholder{width:100%;height:62px;display:block;-ms-flex:0 0 62px;flex:0 0 62px;margin:0 0 10px 0;border-radius:6px;background-color:#f5f8f9}verdocs-activity-box .loading-placeholder .loading-placeholder-bg{height:62px;position:relative;background:#f5f8f9;-webkit-animation-duration:1.25s;animation-duration:1.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:loadingPlaceholderSwoop;animation-name:loadingPlaceholderSwoop;background:-webkit-gradient(linear, left top, right top, color-stop(10%, #f5f8f9), color-stop(18%, #eeeeee), color-stop(33%, #f5f8f9));background:linear-gradient(to right, #f5f8f9 10%, #eeeeee 18%, #f5f8f9 33%);background-size:800px 62px}verdocs-activity-box .activity-entry{width:100%;display:-ms-flexbox;display:flex;-ms-flex:0 0 62px;flex:0 0 62px;border-radius:6px;margin-bottom:10px;-ms-flex-direction:row;flex-direction:row;padding:0 16px 0 0;background:#f5f8f9;-ms-flex-align:center;align-items:center;border:1px solid #f5f8f9}verdocs-activity-box .activity-entry:hover{cursor:pointer;background:#f2f4f5;border:1px solid #ddd}verdocs-activity-box .activity-entry svg{width:32px;height:32px;margin-right:20px}@media screen and (max-width: 1300px){verdocs-activity-box .activity-entry svg{width:24px;height:24px;margin-right:15px}}verdocs-activity-box .activity-entry .title{-ms-flex:1;flex:1;color:black;font-size:16px;font-weight:500;margin-left:12px}@media screen and (max-width: 1300px){verdocs-activity-box .activity-entry .title{font-size:14px}}verdocs-activity-box .activity-entry .time-ago{height:24px;display:-ms-flexbox;display:flex;-ms-flex:0 0 24px;flex:0 0 24px;color:#7f8e92;font-size:16px;font-weight:500;padding-left:14px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-left:1px solid #d8e3e6}@media screen and (max-width: 1300px){verdocs-activity-box .activity-entry .time-ago{font-size:14px}}@-webkit-keyframes loadingPlaceholderSwoop{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes loadingPlaceholderSwoop{0%{background-position:-468px 0}100%{background-position:468px 0}}";
 
 const EmptyImage = 'https://verdocs-public-assets.s3.amazonaws.com/no-verdocs.png';

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

@@ -6,17 +6,42 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as saveEnvelopesAsZip } from './utils.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$8 } from './verdocs-button2.js';
-import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$6 } from './verdocs-dropdown2.js';
-import { d as defineCustomElement$5 } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$4 } from './verdocs-loader2.js';
+import { d as defineCustomElement$a } from './verdocs-button2.js';
+import { d as defineCustomElement$9 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$8 } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$7 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$6 } from './verdocs-pagination2.js';
+import { d as defineCustomElement$5 } from './verdocs-quick-filter2.js';
+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{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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -26,11 +51,11 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     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 = '';
@@ -38,26 +63,36 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     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;
@@ -65,12 +100,13 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           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'],
@@ -80,18 +116,24 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           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]),
           };
       }
@@ -103,6 +145,10 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           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();
       }
@@ -110,52 +156,18 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         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 = [];
     })
@@ -165,25 +177,39 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     });
   }
   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];
@@ -191,12 +217,7 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           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':
@@ -211,30 +232,25 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
             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();
+      } })))));
   }
   static get style() { return verdocsEnvelopesListCss; }
 }, [0, "verdocs-envelopes-list", {
     "endpoint": [16],
-    "items": [2],
-    "view": [513],
-    "status": [513],
-    "sortBy": [513, "sort-by"],
-    "page": [514],
+    "maxItems": [2, "max-items"],
+    "view": [1537],
+    "status": [1537],
+    "sortBy": [1537, "sort-by"],
+    "selectedPage": [1538, "selected-page"],
     "count": [32],
     "loading": [32],
     "name": [32],
@@ -246,7 +262,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-envelopes-list", "verdocs-button", "verdocs-checkbox", "verdocs-dropdown", "verdocs-help-icon", "verdocs-loader", "verdocs-status-indicator", "verdocs-text-input"];
+  const components = ["verdocs-envelopes-list", "verdocs-button", "verdocs-checkbox", "verdocs-dropdown", "verdocs-help-icon", "verdocs-pagination", "verdocs-quick-filter", "verdocs-spinner", "verdocs-status-indicator", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-envelopes-list":
       if (!customElements.get(tagName)) {
@@ -255,25 +271,35 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "verdocs-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-pagination":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-quick-filter":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "verdocs-loader":
+    case "verdocs-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/verdocs-field-textarea.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as interact } from './interact.min.js';
 import './Types.js';
-import { u as updateField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { u as updateField } from './Fields.js';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';