@verdocs/web-sdk 1.14.11 → 1.15.0

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

@@ -0,0 +1,246 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Envelopes } from '@verdocs/js-sdk/Envelopes';
+import { formatShortTimeAgo } from '@verdocs/js-sdk/Utils/DateTime';
+import { getNextRecipient } from '@verdocs/js-sdk/Envelopes/Permissions';
+import { Host, h } from '@stencil/core';
+import { SDKError } from '../../../utils/errors';
+import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
+const EmptyImage = 'https://verdocs-public-assets.s3.amazonaws.com/no-verdocs.png';
+/**
+ * Displays a box showing summaries of envelopes matching specified conditions. Activity Boxes show a fixed number
+ * of items because they are meant to be laid out horizontally (if the user's screen is large enough) and this helps
+ * them appear more visually balanced.
+ */
+export class VerdocsTemplatesList {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.items = 5;
+    this.view = undefined;
+    this.header = undefined;
+    this.title = '';
+    this.count = 0;
+    this.loading = true;
+    this.envelopes = [];
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.endpoint.session) {
+        console.log('[ACTIVITIES] Must be authenticated');
+        return;
+      }
+      let queryParams = {
+        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('[ACTIVITIES] Got envelopes', response);
+      this.envelopes = response.result;
+      this.count = response.total;
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[ACTIVITIES] Error with preview session', 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));
+    }
+  }
+  getNextRecipientName(envelope) {
+    var _a;
+    const nextRecipient = getNextRecipient(envelope) || ((_a = envelope.recipients) === null || _a === void 0 ? void 0 : _a[0]);
+    return (nextRecipient === null || nextRecipient === void 0 ? void 0 : nextRecipient.full_name) || 'N/A';
+  }
+  render() {
+    if (this.loading) {
+      return (h(Host, { style: { minHeight: '300px' } }, this.title && (h("div", { class: "box-title" }, this.title, " ", h("span", { class: "count" }, "(0)"))), integerSequence(0, this.items).map(() => (h("div", { class: "loading-placeholder" }, h("div", { class: "loading-placeholder-bg" }))))));
+    }
+    return (h(Host, null, this.title && (h("div", { class: "box-title" }, this.title, " ", h("span", { class: "count" }, "(", this.count, ")"), h("div", { class: "spacer" }), h("verdocs-button", { label: "View All", size: "small", onClick: () => { var _a; return (_a = this.viewAll) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, view: this.view }); } }))), this.count > 0 ? (this.envelopes.slice(0, Math.max(this.items, 1)).map(envelope => (h("div", { class: "activity-entry", onClick: () => {
+        var _a;
+        (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope });
+      } }, h("div", { class: "title" }, envelope.name, h("br", null), " ", h("strong", null, this.getNextRecipientName(envelope))), h("div", { class: "time-ago" }, formatShortTimeAgo(envelope.updated_at)))))) : (h("img", { src: EmptyImage, alt: "No documents to show", style: { width: '190px', margin: '0 auto' } }))));
+  }
+  static get is() { return "verdocs-templates-list"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-templates-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-templates-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "items": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of items to display."
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "view": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'completed' | 'action' | 'waiting'",
+          "resolved": "\"action\" | \"completed\" | \"waiting\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "view",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The title to display on the box (\"title\" is a reserved word). This is optional, and if not set, the title\nwill be derived from the view. Set this to an empty string to hide the header."
+        },
+        "attribute": "header",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "title": {},
+      "count": {},
+      "loading": {},
+      "envelopes": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }, {
+        "method": "viewEnvelope",
+        "name": "viewEnvelope",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks an activity entry. Typically the host application will use this to navigate\nto the envelope detail view."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        }
+      }, {
+        "method": "viewAll",
+        "name": "viewAll",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks View All in the title bar. The current view will be included in the event\ndetails to help the host application navigate the user to the appropriate screen for the request. Note that\nthe verdocs-envelopes-list control uses the same \"view\" parameter, so host applications can typically pass\nthis value through directly. This button is not visible if the header is hidden."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; view: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; view: string; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Templates/Templates List',
+  component: 'verdocs-templates-list',
+  args: {
+    templateId: '',
+  },
+  argTypes: {
+    onClose: { action: 'close' },
+  },
+};
+export const TemplateList = ({ onClose, templateId }) => html `
+    <div style="width: 360px; background: #ffffff; padding: 20px; box-sizing: border-box">
+      <verdocs-templates-list .templateId=${templateId} @close=${onClose} />
+    </div>
+  `;

package/dist/components/DateTime.js

@@ -0,0 +1,43 @@
+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");
+};
+
+export { formatShortTimeAgo as f };

package/dist/components/Envelopes.js

@@ -36,6 +36,22 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+/**
+ * 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.
  */
@@ -163,4 +179,4 @@ var throttledGetEnvelope = function (endpoint, envelopeId) {
     });
 };
 
-export { updateEnvelopeFieldSignature as a, updateEnvelopeFieldInitials as b, cancelEnvelope as c, getEnvelopeDocumentPageDisplayUri as d, getEnvelope as e, getEnvelopeFile as f, getSigningSession as g, getFieldAttachment as h, throttledGetEnvelope as t, updateEnvelopeField as u };
+export { updateEnvelopeFieldSignature as a, updateEnvelopeFieldInitials as b, cancelEnvelope as c, getEnvelopeDocumentPageDisplayUri as d, getEnvelope as e, getEnvelopeFile as f, getSigningSession as g, getFieldAttachment as h, searchEnvelopes as s, throttledGetEnvelope as t, updateEnvelopeField as u };

package/dist/components/Permissions.js

@@ -30,5 +30,17 @@ var getRecipientsWithActions = function (envelope) { return ((envelope === null
  * Returns true if the recipient can act.
  */
 var recipientCanAct = function (recipient, recipientsWithActions) { var _a; return recipient.sequence === ((_a = recipientsWithActions === null || recipientsWithActions === void 0 ? void 0 : recipientsWithActions[0]) === null || _a === void 0 ? void 0 : _a.sequence); };
+/**
+ * Returns true if the user can act.
+ */
+var userCanAct = function (email, recipientsWithActions) {
+    var _a;
+    var recipient = recipientsWithActions.find(function (r) { return r.email === email; });
+    return recipient && recipient.sequence === ((_a = recipientsWithActions === null || recipientsWithActions === void 0 ? void 0 : recipientsWithActions[0]) === null || _a === void 0 ? void 0 : _a.sequence);
+};
+var getNextRecipient = function (envelope) {
+    var recipientsWithActions = getRecipientsWithActions(envelope);
+    return recipientsWithActions === null || recipientsWithActions === void 0 ? void 0 : recipientsWithActions[0];
+};
 
-export { userCanCancelEnvelope as a, getRecipientsWithActions as g, recipientCanAct as r, userIsEnvelopeOwner as u };
+export { getRecipientsWithActions as a, userCanAct as b, userCanCancelEnvelope as c, getNextRecipient as g, recipientCanAct as r, userIsEnvelopeOwner as u };

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 /* VerdocsWebSdk custom elements */
 export { IpcTest as IpcTest } from '../types/components/other/ipctest/ipc-test';
+export { VerdocsActivityBox as VerdocsActivityBox } from '../types/components/envelopes/verdocs-activity-box/verdocs-activity-box';
 export { VerdocsAuth as VerdocsAuth } from '../types/components/embeds/verdocs-auth/verdocs-auth';
 export { VerdocsBuild as VerdocsBuild } from '../types/components/embeds/verdocs-build/verdocs-build';
 export { VerdocsButton as VerdocsButton } from '../types/components/controls/verdocs-button/verdocs-button';
@@ -11,6 +12,7 @@ export { VerdocsDropdown as VerdocsDropdown } from '../types/components/controls
 export { VerdocsEnvelopeDocumentPage as VerdocsEnvelopeDocumentPage } from '../types/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page';
 export { VerdocsEnvelopeRecipientSummary as VerdocsEnvelopeRecipientSummary } from '../types/components/envelopes/verdocs-envelope-recipient-summary/verdocs-envelope-recipient-summary';
 export { VerdocsEnvelopeSidebar as VerdocsEnvelopeSidebar } from '../types/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar';
+export { VerdocsEnvelopesList as VerdocsEnvelopesList } from '../types/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list';
 export { VerdocsFieldAttachment as VerdocsFieldAttachment } from '../types/components/fields/verdocs-field-attachment/verdocs-field-attachment';
 export { VerdocsFieldCheckbox as VerdocsFieldCheckbox } from '../types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox';
 export { VerdocsFieldDate as VerdocsFieldDate } from '../types/components/fields/verdocs-field-date/verdocs-field-date';
@@ -56,6 +58,7 @@ export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/component
 export { VerdocsTemplateSender as VerdocsTemplateSender } from '../types/components/templates/verdocs-template-sender/verdocs-template-sender';
 export { VerdocsTemplateTags as VerdocsTemplateTags } from '../types/components/templates/verdocs-template-tags/verdocs-template-tags';
 export { VerdocsTemplateVisibility as VerdocsTemplateVisibility } from '../types/components/templates/verdocs-template-visibillity/verdocs-template-visibility';
+export { VerdocsTemplatesList as VerdocsTemplatesList } from '../types/components/templates/verdocs-templates-list/verdocs-templates-list';
 export { VerdocsTextInput as VerdocsTextInput } from '../types/components/controls/verdocs-text-input/verdocs-text-input';
 export { VerdocsToggle as VerdocsToggle } from '../types/components/controls/verdocs-toggle/verdocs-toggle';
 export { VerdocsToggleButton as VerdocsToggleButton } from '../types/components/controls/verdocs-toggle-button/verdocs-toggle-button';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 export { IpcTest, defineCustomElement as defineCustomElementIpcTest } from './ipc-test.js';
+export { VerdocsActivityBox, defineCustomElement as defineCustomElementVerdocsActivityBox } from './verdocs-activity-box.js';
 export { VerdocsAuth, defineCustomElement as defineCustomElementVerdocsAuth } from './verdocs-auth.js';
 export { VerdocsBuild, defineCustomElement as defineCustomElementVerdocsBuild } from './verdocs-build.js';
 export { VerdocsButton, defineCustomElement as defineCustomElementVerdocsButton } from './verdocs-button.js';
@@ -11,6 +12,7 @@ export { VerdocsDropdown, defineCustomElement as defineCustomElementVerdocsDropd
 export { VerdocsEnvelopeDocumentPage, defineCustomElement as defineCustomElementVerdocsEnvelopeDocumentPage } from './verdocs-envelope-document-page.js';
 export { VerdocsEnvelopeRecipientSummary, defineCustomElement as defineCustomElementVerdocsEnvelopeRecipientSummary } from './verdocs-envelope-recipient-summary.js';
 export { VerdocsEnvelopeSidebar, defineCustomElement as defineCustomElementVerdocsEnvelopeSidebar } from './verdocs-envelope-sidebar.js';
+export { VerdocsEnvelopesList, defineCustomElement as defineCustomElementVerdocsEnvelopesList } from './verdocs-envelopes-list.js';
 export { VerdocsFieldAttachment, defineCustomElement as defineCustomElementVerdocsFieldAttachment } from './verdocs-field-attachment.js';
 export { VerdocsFieldCheckbox, defineCustomElement as defineCustomElementVerdocsFieldCheckbox } from './verdocs-field-checkbox.js';
 export { VerdocsFieldDate, defineCustomElement as defineCustomElementVerdocsFieldDate } from './verdocs-field-date.js';
@@ -56,6 +58,7 @@ export { VerdocsTemplateRoles, defineCustomElement as defineCustomElementVerdocs
 export { VerdocsTemplateSender, defineCustomElement as defineCustomElementVerdocsTemplateSender } from './verdocs-template-sender.js';
 export { VerdocsTemplateTags, defineCustomElement as defineCustomElementVerdocsTemplateTags } from './verdocs-template-tags.js';
 export { VerdocsTemplateVisibility, defineCustomElement as defineCustomElementVerdocsTemplateVisibility } from './verdocs-template-visibility.js';
+export { VerdocsTemplatesList, defineCustomElement as defineCustomElementVerdocsTemplatesList } from './verdocs-templates-list.js';
 export { VerdocsTextInput, defineCustomElement as defineCustomElementVerdocsTextInput } from './verdocs-text-input.js';
 export { VerdocsToggle, defineCustomElement as defineCustomElementVerdocsToggle } from './verdocs-toggle.js';
 export { VerdocsToggleButton, defineCustomElement as defineCustomElementVerdocsToggleButton } from './verdocs-toggle-button.js';

package/dist/components/utils.js

@@ -353,4 +353,4 @@ const throttle = (f, delay) => {
   };
 };
 
-export { getRoleIndex as a, getFieldId as b, updateCssTransform as c, defaultWidth as d, defaultHeight as e, saveEnvelopesAsZip as f, getFieldSettings as g, saveCertificate as h, renderDocumentField as r, saveAttachment as s, throttle as t, updateDocumentFieldValue as u };
+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 };

package/dist/components/verdocs-activity-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsActivityBox extends Components.VerdocsActivityBox, HTMLElement {}
+export const VerdocsActivityBox: {
+  prototype: VerdocsActivityBox;
+  new (): VerdocsActivityBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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';
+
+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';
+const VerdocsActivityBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.viewEnvelope = createEvent(this, "viewEnvelope", 7);
+    this.viewAll = createEvent(this, "viewAll", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.items = 5;
+    this.view = undefined;
+    this.header = undefined;
+    this.title = '';
+    this.count = 0;
+    this.loading = true;
+    this.envelopes = [];
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.endpoint.session) {
+        console.log('[ACTIVITIES] Must be authenticated');
+        return;
+      }
+      let queryParams = {
+        page: 0,
+        ascending: false,
+        sort_by: 'updated_at',
+        limit: Math.max(Math.min(this.items, 50), 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 searchEnvelopes(this.endpoint, queryParams);
+      console.log('[ACTIVITIES] Got envelopes', response);
+      this.envelopes = response.result;
+      this.count = response.total;
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[ACTIVITIES] Error with preview session', 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));
+    }
+  }
+  getNextRecipientName(envelope) {
+    var _a;
+    const nextRecipient = getNextRecipient(envelope) || ((_a = envelope.recipients) === null || _a === void 0 ? void 0 : _a[0]);
+    return (nextRecipient === null || nextRecipient === void 0 ? void 0 : nextRecipient.full_name) || 'N/A';
+  }
+  render() {
+    if (this.loading) {
+      return (h(Host, { style: { minHeight: '300px' } }, this.title && (h("div", { class: "box-title" }, this.title, " ", h("span", { class: "count" }, "(0)"))), integerSequence(0, this.items).map(() => (h("div", { class: "loading-placeholder" }, h("div", { class: "loading-placeholder-bg" }))))));
+    }
+    return (h(Host, null, this.title && (h("div", { class: "box-title" }, this.title, " ", h("span", { class: "count" }, "(", this.count, ")"), h("div", { class: "spacer" }), h("verdocs-button", { label: "View All", size: "small", onClick: () => { var _a; return (_a = this.viewAll) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, view: this.view }); } }))), this.count > 0 ? (this.envelopes.slice(0, Math.max(this.items, 1)).map(envelope => (h("div", { class: "activity-entry", onClick: () => {
+        var _a;
+        (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope });
+      } }, h("div", { class: "title" }, envelope.name, h("br", null), " ", h("strong", null, this.getNextRecipientName(envelope))), h("div", { class: "time-ago" }, formatShortTimeAgo(envelope.updated_at)))))) : (h("img", { src: EmptyImage, alt: "No documents to show", style: { width: '190px', margin: '0 auto' } }))));
+  }
+  static get style() { return verdocsActivityBoxCss; }
+}, [0, "verdocs-activity-box", {
+    "endpoint": [16],
+    "items": [2],
+    "view": [1],
+    "header": [1],
+    "title": [32],
+    "count": [32],
+    "loading": [32],
+    "envelopes": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-activity-box", "verdocs-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-activity-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsActivityBox$1);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsActivityBox = VerdocsActivityBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsActivityBox, defineCustomElement };

package/dist/components/verdocs-envelope-recipient-summary2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getRecipientsWithActions, r as recipientCanAct } from './Permissions.js';
+import { a as getRecipientsWithActions, r as recipientCanAct } from './Permissions.js';
 import { g as getInPersonLink } from './Recipients.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';

package/dist/components/verdocs-envelopes-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsEnvelopesList extends Components.VerdocsEnvelopesList, HTMLElement {}
+export const VerdocsEnvelopesList: {
+  prototype: VerdocsEnvelopesList;
+  new (): VerdocsEnvelopesList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;