@verdocs/web-sdk 1.15.0 → 1.15.2

package/dist/collection/components/templates/verdocs-template-star/verdocs-template-star.stories.js

@@ -0,0 +1,27 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Templates/Template Star',
+  component: 'verdocs-template-star',
+  args: {
+    template: {
+      id: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
+      name: 'Bill of Sale Test',
+      sender: 'creator',
+      counter: 7,
+      description: null,
+      created_at: '2023-05-08T12:57:30.112Z',
+      updated_at: '2023-06-06T15:49:01.268Z',
+      is_personal: true,
+      is_public: false,
+      profile_id: 'a44a0fa0-04ca-409d-a5d6-2b12ce893b60',
+      organization_id: 'eae89e66-83bc-44f7-bb35-a8ef55958b3e',
+      last_used_at: '2023-05-30T12:13:34.216Z',
+      document_name: 'billofsale.pdf',
+      star_counter: 0,
+      tag_name: null,
+      is_starred: false,
+    },
+  },
+  argTypes: {},
+};
+export const TemplateStar = ({ template }) => html `<verdocs-template-star .template="${template}" />`;

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

@@ -1,3 +1,129 @@
 verdocs-templates-list {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: flex;
+  padding: 10px;
+  font-size: 18px;
+  flex-wrap: nowrap;
+  border-radius: 6px;
+  color: #33364b;
+  align-items: center;
+  flex-direction: column;
+  font-family: "Inter", "Barlow", sans-serif;
+}
+verdocs-templates-list .header {
+  width: 100%;
+  row-gap: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 12px;
+  margin: 0 0 10px 0;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-templates-list .header .filter {
+  width: 150px;
+}
+verdocs-templates-list .header verdocs-text-input {
+  margin: 0;
+}
+verdocs-templates-list .header verdocs-text-input input {
+  height: 32px;
+}
+verdocs-templates-list .filter {
+  align-items: center;
+}
+verdocs-templates-list .template {
+  width: 100%;
+  margin: 3px 0;
+  background: #ffffff;
+}
+verdocs-templates-list .template:hover {
+  cursor: pointer;
+  background: #f5f5fa;
+}
+verdocs-templates-list .template .inner {
+  gap: 10px;
+  display: flex;
+  padding: 8px 14px;
+  border-radius: 5px;
+  flex-direction: row;
+  align-items: center;
+}
+verdocs-templates-list .template .inner svg {
+  width: 24px;
+  height: 24px;
+}
+verdocs-templates-list .name {
+  flex: 1;
+  display: flex;
+  color: black;
+  font-size: 18px;
+  margin-left: 10px;
+}
+@media screen and (max-width: 1300px) {
+  verdocs-templates-list .name {
+    font-size: 16px;
+  }
+}
+verdocs-templates-list .spacer {
+  margin: 0;
+  height: 30px;
+  flex: 0 0 1px;
+  display: flex;
+  border-right: 1px solid #dad8dd;
+}
+@media screen and (max-width: 800px) {
+  verdocs-templates-list .spacer {
+    margin: 12px 0;
+    border-top: 1px solid #dad8dd;
+    border-right: none;
+  }
+}
+verdocs-templates-list .empty-text {
+  font-size: 20px;
+  text-align: center;
+  margin: 16px 0 0 0;
+  padding: 80px 80px;
+  border: 2px solid #ccc;
+}
+verdocs-templates-list .ownership {
+  color: #444;
+  display: flex;
+  flex: 0 0 100px;
+  font-size: 16px;
+  margin: 0 0 0 10px;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-templates-list .ownership svg {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+verdocs-templates-list .last-used {
+  color: #444;
+  display: flex;
+  flex: 0 0 280px;
+  font-size: 16px;
+  margin: 0 0 0 10px;
+  flex-direction: row;
+  align-items: center;
+}
+verdocs-templates-list .last-used svg {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+verdocs-templates-list .usage {
+  color: #444;
+  display: flex;
+  flex: 0 0 60px;
+  font-size: 16px;
+  margin: 0 0 0 10px;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-templates-list .usage svg {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
 }

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

@@ -1,82 +1,191 @@
 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 { Templates } from '@verdocs/js-sdk/Templates';
+import { canPerformTemplateAction } from '@verdocs/js-sdk/Templates/Actions';
+import { userCanCreateTemplate } from '@verdocs/js-sdk/Templates/Permissions';
 import { Host, h } from '@stencil/core';
+import { VerdocsToast } from '../../../utils/Toast';
 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';
+import { formatDistance } from 'date-fns';
+const TemplateIcon = `<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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>`;
+const GlobeAltIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /></svg>`;
+const LockClosedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>`;
+const BuildingOfficeIcon = `<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="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" /></svg>`;
+const CalendarIcon = `<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="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>`;
+const EnvelopeIcon = `<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="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>`;
+const SharingFilters = [
+  { value: 'all', label: 'All' },
+  { value: 'personal', label: 'Personal' },
+  { value: 'shared', label: 'Shared' },
+  { value: 'public', label: 'Public' },
+];
+const StarredFilters = [
+  { value: 'all', label: 'All' },
+  { value: 'starred', label: 'Starred' },
+  { value: 'unstarred', label: 'Not Starred' },
+];
+const SortOptions = [
+  { value: 'name', label: 'Name' },
+  { value: 'created_at', label: 'Created' },
+  { value: 'updated_at', label: 'Last Updated' },
+  { value: 'last_used_at', label: 'Last Used' },
+  { value: 'counter', label: 'Most Used' },
+  { value: 'star_counter', label: 'Most Starred' },
+];
 /**
- * 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.
+ * Displays a list of envelopes matching specified conditions.
  */
 export class VerdocsTemplatesList {
   constructor() {
+    this.handleOptionSelected = (option, template) => {
+      var _a, _b;
+      if (option === 'createdoc') {
+        (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: template });
+      }
+      else if (option === 'createlink') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'signnow') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'submitted') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'link') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'edit') {
+        (_b = this.editTemplate) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: template });
+      }
+      else if (option === 'delete') {
+        this.confirmDelete = template;
+      }
+    };
     this.endpoint = VerdocsEndpoint.getDefault();
-    this.items = 5;
-    this.view = undefined;
-    this.header = undefined;
-    this.title = '';
+    this.sharing = 'all';
+    this.starred = 'all';
+    this.sort = 'updated_at';
+    this.name = '';
+    this.selectedPage = 0;
     this.count = 0;
     this.loading = true;
-    this.envelopes = [];
+    this.confirmDelete = null;
+    this.templates = [];
   }
   async componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[TEMPLATES] Must be authenticated');
+      return;
+    }
+    return this.queryTemplates();
+  }
+  async queryTemplates() {
     var _a, _b, _c;
     try {
       this.endpoint.loadSession();
       if (!this.endpoint.session) {
-        console.log('[ACTIVITIES] Must be authenticated');
+        console.log('[TEMPLATES] Must be authenticated');
         return;
       }
       let queryParams = {
-        page: 0,
-        ascending: false,
-        sort_by: 'updated_at',
-        limit: Math.max(Math.min(this.items, 30), 1),
+        page: this.selectedPage,
+        ascending: this.sort === 'name' || this.sort === 'star_counter',
+        sort_by: this.sort,
       };
-      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;
+      if (this.sharing !== 'all') {
+        queryParams.is_personal = this.sharing === 'personal';
+        queryParams.is_public = this.sharing === 'public';
       }
-      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;
+      if (this.starred !== 'all') {
+        queryParams.is_starred = this.starred === 'starred';
+      }
+      if (this.name.trim() !== '') {
+        queryParams.name = this.name.trim();
+      }
+      console.log('qp', queryParams, this.name);
+      const response = await Templates.getSummary(this.endpoint, queryParams);
+      console.log('[TEMPLATES] Got templates', response);
+      this.templates = response.result;
       this.count = response.total;
       this.loading = false;
     }
     catch (e) {
-      console.log('[ACTIVITIES] Error with preview session', e);
+      console.log('[TEMPLATES] 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';
+  canCreate() {
+    return userCanCreateTemplate(this.endpoint.session);
+  }
+  canDelete(summary) {
+    return canPerformTemplateAction(this.endpoint.session, 'delete', summary);
+  }
+  canEdit(summary) {
+    return canPerformTemplateAction(this.endpoint.session, 'write', summary);
+  }
+  canPreview(summary) {
+    const hasPermission = canPerformTemplateAction(this.endpoint.session, 'read', summary);
+    // let canPreview;
+    // const signers = filter(template.roles, {type: 'signer'});
+    // canPreview = signers && signers.length > 0;
+    // for (const signer of signers) {
+    //   canPreview = signer['fields'] && signer['fields'].length > 0;
+    // }
+    // return hasPermission && canPreview;
+    return hasPermission;
+  }
+  deleteTemplate(template) {
+    this.confirmDelete = null;
+    Templates.deleteTemplate(this.endpoint, template.id)
+      .then(() => {
+      var _a;
+      console.log('[TEMPLATES] Deleted template', template);
+      (_a = this.templateDeleted) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: template });
+      return this.queryTemplates();
+    })
+      .catch(e => {
+      var _a, _b, _c;
+      console.log('[TEMPLATES] Error deleting template', template);
+      (_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));
+    });
   }
   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' } }))));
+    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onFocusout: (e) => {
+        this.name = e.target.value;
+        return this.queryTemplates();
+      } })), h("verdocs-quick-filter", { label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
+        this.sharing = e.detail.value;
+        return this.queryTemplates();
+      } }), h("verdocs-quick-filter", { label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
+        this.starred = e.detail.value;
+        return this.queryTemplates();
+      } }), h("verdocs-quick-filter", { label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
+        this.sort = e.detail.value;
+        return this.queryTemplates();
+      } }), this.loading && h("verdocs-spinner", { mode: "dark", size: 24 }), h("div", { style: { display: 'flex', flex: '1' } })), this.templates.map(summary => {
+      const MENU_OPTIONS = [
+        //  [disabled]="!canSendEnvelope"
+        { label: 'Preview / Send', id: 'createdoc', disabled: !this.canPreview(summary) },
+        //  [disabled]="!(canSendEnvelope && canHaveLiveView)"
+        { label: 'Create Link', id: 'createlink', disabled: true },
+        // [disabled]="!(canSendEnvelope && canSignNow)"
+        { label: 'Sign Now', id: 'signnow', disabled: true },
+        // (click)="gotoEnvelope()"
+        { label: '' },
+        { label: 'Submissions', id: 'submitted' },
+        { label: '' },
+        { label: 'Get Preview Link', id: 'link', disabled: !this.canPreview(summary) },
+        { label: 'Edit', id: 'edit', disabled: !this.canEdit(summary) },
+        { label: 'Delete', id: 'delete', disabled: !this.canDelete(summary) },
+      ];
+      return (h("div", { class: "template", onClick: () => {
+          var _a;
+          (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: summary });
+        } }, h("div", { class: "inner" }, h("verdocs-template-star", { template: summary, endpoint: this.endpoint }), h("div", { class: "spacer icon-spacer" }), h("span", { innerHTML: TemplateIcon }), h("div", { class: "name" }, summary.name), h("div", { class: "spacer usage-spacer" }), h("div", { class: "usage" }, h("span", { innerHTML: EnvelopeIcon }), summary.counter || '--'), h("div", { class: "spacer last-used-spacer" }), h("div", { class: "last-used" }, h("span", { innerHTML: CalendarIcon }), h("span", { style: { marginRight: '5px' } }, "Last Used:"), summary.last_used_at ? formatDistance(new Date(summary.last_used_at), new Date()) : 'Never'), h("div", { class: "spacer ownership-spacer" }), summary.is_public && (h("div", { class: "ownership" }, h("span", { innerHTML: GlobeAltIcon }), " Public")), !summary.is_public && !summary.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: LockClosedIcon }), " Private")), !summary.is_public && summary.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, summary) }))));
+    }), !this.templates.length ? (h("div", { class: "empty-text" }, "No matching templates 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.queryTemplates();
+      } }))), this.confirmDelete && (h("verdocs-ok-dialog", { heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
   }
   static get is() { return "verdocs-templates-list"; }
   static get originalStyleUrls() {
@@ -112,68 +221,109 @@ export class VerdocsTemplatesList {
         },
         "defaultValue": "VerdocsEndpoint.getDefault()"
       },
-      "items": {
-        "type": "number",
-        "mutable": false,
+      "sharing": {
+        "type": "string",
+        "mutable": true,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "'all' | 'personal' | 'shared' | 'public'",
+          "resolved": "\"all\" | \"personal\" | \"public\" | \"shared\"",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The number of items to display."
+          "text": "The sharing settings to filter by."
         },
-        "attribute": "items",
-        "reflect": false,
-        "defaultValue": "5"
+        "attribute": "sharing",
+        "reflect": true,
+        "defaultValue": "'all'"
       },
-      "view": {
+      "starred": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "'completed' | 'action' | 'waiting'",
-          "resolved": "\"action\" | \"completed\" | \"waiting\"",
+          "original": "'all' | 'starred' | 'unstarred'",
+          "resolved": "\"all\" | \"starred\" | \"unstarred\"",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The starred settings to filter by."
         },
-        "attribute": "view",
-        "reflect": false,
-        "defaultValue": "undefined"
+        "attribute": "starred",
+        "reflect": true,
+        "defaultValue": "'all'"
       },
-      "header": {
+      "sort": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "string | undefined",
+          "original": "IGetTemplateSummarySortBy",
+          "resolved": "\"counter\" | \"created_at\" | \"last_used_at\" | \"name\" | \"star_counter\" | \"updated_at\"",
+          "references": {
+            "IGetTemplateSummarySortBy": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Templates"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The sort order to display."
+        },
+        "attribute": "sort",
+        "reflect": true,
+        "defaultValue": "'updated_at'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "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."
+          "text": "If set, filter templates by the specified name."
         },
-        "attribute": "header",
-        "reflect": false,
-        "defaultValue": "undefined"
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "selectedPage": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The initial page number to select. Pagination is internally controlled but may be overriden by the\nhost applicaiton."
+        },
+        "attribute": "selected-page",
+        "reflect": true,
+        "defaultValue": "0"
       }
     };
   }
   static get states() {
     return {
-      "title": {},
       "count": {},
       "loading": {},
-      "envelopes": {}
+      "confirmDelete": {},
+      "templates": {}
     };
   }
   static get events() {
@@ -198,46 +348,74 @@ export class VerdocsTemplatesList {
           }
         }
       }, {
-        "method": "viewEnvelope",
-        "name": "viewEnvelope",
+        "method": "viewTemplate",
+        "name": "viewTemplate",
         "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."
+          "text": "Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\nto the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu."
         },
         "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
-          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+          "original": "{endpoint: VerdocsEndpoint; template: ITemplate}",
+          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; }",
           "references": {
             "VerdocsEndpoint": {
               "location": "import",
               "path": "@verdocs/js-sdk"
             },
-            "IEnvelope": {
+            "ITemplate": {
               "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+              "path": "@verdocs/js-sdk/Templates/Types"
             }
           }
         }
       }, {
-        "method": "viewAll",
-        "name": "viewAll",
+        "method": "editTemplate",
+        "name": "editTemplate",
         "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."
+          "text": "Event fired when the user chooses the Edit option from the dropdown menu."
         },
         "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; view: string}",
-          "resolved": "{ endpoint: VerdocsEndpoint; view: string; }",
+          "original": "{endpoint: VerdocsEndpoint; template: ITemplate}",
+          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; }",
           "references": {
             "VerdocsEndpoint": {
               "location": "import",
               "path": "@verdocs/js-sdk"
+            },
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        }
+      }, {
+        "method": "templateDeleted",
+        "name": "templateDeleted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user chooses the Delete option from the dropdown menu. When this is fired, the template\nwill already have been deleted. The host application should remove it from the list or refresh the list."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; template: ITemplate}",
+          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
             }
           }
         }

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

@@ -3,14 +3,16 @@ export default {
   title: 'Templates/Templates List',
   component: 'verdocs-templates-list',
   args: {
-    templateId: '',
+    items: 10,
+    sharing: 'all',
+    starred: 'all',
+    sortBy: 'updated_at',
   },
   argTypes: {
     onClose: { action: 'close' },
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
-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>
-  `;
+export const TemplatesList = ({ onClose, templateId }) => html ` <verdocs-templates-list .templateId=${templateId} @close=${onClose} /> `;