@verdocs/web-sdk 1.15.1 → 1.15.3

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

@@ -1,134 +1,94 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 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 {getRecipientsWithActions, userCanAct, userCanCancelEnvelope} from '@verdocs/js-sdk/Envelopes/Permissions';
-// import {saveEnvelopesAsZip} from '../../../utils/utils';
 import { VerdocsToast } from '../../../utils/Toast';
 import { SDKError } from '../../../utils/errors';
-import { canPerformTemplateAction } from '@verdocs/js-sdk/Templates/Actions';
-const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><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 ViewFilters: [string, string][] = [
-//   ['all', 'All'],
-//   ['inbox', 'Inbox'],
-//   ['sent', 'Sent'],
-//   ['completed', 'Completed'],
-//   ['action', 'Action Required'],
-//   ['waiting', 'Waiting on Others'],
-// ];
-//
-// const StatusFilters: [string, string][] = [
-//   ['all', 'All'],
-//   ['pending', 'Pending'],
-//   ['in progress', 'In Progress'],
-//   ['complete', 'Completed'],
-//   ['declined', 'Declined'],
-//   ['canceled', 'Canceled'],
-// ];
-//
-// const SortFilters: [string, string][] = [
-//   ['created_at', 'Created'],
-//   ['updated_at', 'Updated'],
-//   ['canceled_at', 'Canceled'],
-//   ['envelope_name', 'Name'],
-//   ['envelope_status', 'Status'],
-// ];
+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 list of envelopes matching specified conditions.
  */
 export class VerdocsTemplatesList {
   constructor() {
-    this.handleOptionSelected = (id, summary) => {
-      console.log('option selected', id, summary);
-      if (id === 'createdoc') {
-        // Create a document from this template
-        // navigate(URLS.TEMPLATE_DETAIL.build(summary.id, 'preview'));
-        // navigate('/' + URLS.SEND(summary.id));
+    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 (id === 'createlink') {
-        // Create a link to this template
-        VerdocsToast('Link creation is coming soon!');
+      else if (option === 'createlink') {
+        VerdocsToast('This feature is coming soon!');
       }
-      else if (id === 'signnow') {
-        // Create a document and start signing it now
-        // TODO: Need to complete this
-        // navigate(URLS.TEMPLATE_DETAIL.build(summary.id, 'edit'));
-        //     if (this.canSendEnvelope && this.canSignNow) {
-        //       const roles = JSON.parse(JSON.stringify(this.template.roles));
-        //       if (this.numberOfUnknownRoles === 1) {
-        //         const emptyRoleIndex = findIndex(roles, (role) => !role['email']);
-        //         if (emptyRoleIndex > -1) {
-        //           roles[emptyRoleIndex].email = this.currentProfile.email;
-        //           roles[emptyRoleIndex].full_name = this.currentProfile.first_name + ' ' + this.currentProfile.last_name;
-        //         }
-        //       }
-        //       const body = {
-        //         template_id: this.template.id,
-        //         roles: roles,
-        //       };
-        //       this.envelopeService.sendInvite(body).subscribe(
-        //         (envelope) => {
-        //           this.goToEnvelopeView(envelope);
-        //         },
-        //         (err) => {
-        //           console.error({
-        //             message: 'Failed to create Envelope',
-        //             detail: err,
-        //           });
-        //           if (err && err.error && err.error.code && err.error.code === 'E000020') {
-        //             const userId = this.vTokenObject.getProfileID();
-        //             this._redirectUrl = `${environment.rAccount_frontend_url}/rAccount/user/${userId}/billing`;
-        //             const plansDialog = this.dialog.open(PlansDialog, {
-        //               panelClass: 'confirmation',
-        //             });
-        //             plansDialog.componentInstance.type = 'free';
-        //             plansDialog.componentInstance.redirectUrl = this._redirectUrl;
-        //           }
-        //         },
-        //       );
-        //     }
+      else if (option === 'signnow') {
+        VerdocsToast('This feature is coming soon!');
       }
-      else if (id === 'submitted') {
-        // Submitted Data
-        // navigate(URLS.SUBMITTED_DATA.build(summary.id));
+      else if (option === 'submitted') {
+        VerdocsToast('This feature is coming soon!');
       }
-      else if (id === 'link') {
-        // Create a signable link to the template
-        // setPreviewTemplateLink(summary);
+      else if (option === 'link') {
+        VerdocsToast('This feature is coming soon!');
       }
-      else if (id === 'edit') {
-        // Edit the template
-        // navigate(URLS.TEMPLATE_DETAIL.build(summary.id, 'edit'));
+      else if (option === 'edit') {
+        (_b = this.editTemplate) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: template });
       }
-      else if (id === 'delete') {
-        // Delete the template
-        // setConfirmDeleteTemplateId(summary.id);
+      else if (option === 'delete') {
+        this.confirmDelete = template;
       }
     };
     this.endpoint = VerdocsEndpoint.getDefault();
-    this.items = 5;
-    this.view = undefined;
-    this.page = 0;
-    this.count = 0;
-    this.loading = true;
-    this.name = '';
-    this.containing = '';
     this.sharing = 'all';
     this.starred = 'all';
     this.sort = 'updated_at';
-    this.selectedTemplates = [];
+    this.name = '';
+    this.selectedPage = 0;
+    this.count = 0;
+    this.loading = true;
+    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('[ENVELOPES] Must be authenticated');
+        console.log('[TEMPLATES] Must be authenticated');
         return;
       }
       let queryParams = {
-        page: this.page,
+        page: this.selectedPage,
         ascending: this.sort === 'name' || this.sort === 'star_counter',
         sort_by: this.sort,
       };
@@ -137,20 +97,20 @@ export class VerdocsTemplatesList {
         queryParams.is_public = this.sharing === 'public';
       }
       if (this.starred !== 'all') {
-        // TODO: Update the js-sdk type
-        queryParams['is_starred'] = this.starred === 'starred';
+        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 envelopes', response);
+      console.log('[TEMPLATES] Got templates', response);
       this.templates = response.result;
       this.count = response.total;
       this.loading = false;
     }
     catch (e) {
-      console.log('[ENVELOPES] 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));
     }
   }
@@ -174,15 +134,35 @@ export class VerdocsTemplatesList {
     // 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' } }, 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) => {
-        this.containing = e.target.value;
-      } }))), h("div", { class: "flex flex-1" })), this.templates.slice(0, this.items || 100).map(summary => {
+        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) },
@@ -198,80 +178,14 @@ export class VerdocsTemplatesList {
         { label: 'Edit', id: 'edit', disabled: !this.canEdit(summary) },
         { label: 'Delete', id: 'delete', disabled: !this.canDelete(summary) },
       ];
-      return (h("div", { class: "template", onClick: () => { } }, h("span", { innerHTML: TemplateIcon }), h("div", { class: "name" }, summary.name), h("div", { class: "spacer" }), h("div", { style: { marginTop: '12px' } }, h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, summary) })))
-      //
-      // <div class="envelope" key={envelope.id} onClick={() => this.viewEnvelope?.emit({endpoint: this.endpoint, envelope})}>
-      //   <div class="inner">
-      //     <verdocs-checkbox
-      //       checked={this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1}
-      //       onClick={e => e.stopPropagation()} // So this doesn't trigger navigation
-      //       onInput={(e: any) => {
-      //         if (e.target.checked) {
-      //           this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];
-      //         } else {
-      //           this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
-      //         }
-      //       }}
-      //     />
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <span innerHTML={DocumentIcon} />
-      //
-      //     <div class="envelope-name">
-      //       {envelope.name}:&nbsp; <div class="envelope-recipients">{envelope.recipients.map(r => r.full_name).join(', ')}</div>
-      //     </div>
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <verdocs-status-indicator envelope={envelope} style={{width: '125px'}} />
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <div class="last-modified">{new Date(envelope.updated_at).toLocaleString()}</div>
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <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 => {
-      //         switch (e.detail.id) {
-      //           case 'view':
-      //             this.viewEnvelope?.emit({endpoint: this.endpoint, envelope});
-      //             break;
-      //           case 'finish':
-      //             this.finishLater?.emit({endpoint: this.endpoint, envelope});
-      //             break;
-      //           case 'download':
-      //             this.downloadEnvelope(envelope);
-      //             break;
-      //           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'});
-      //                 });
-      //             }
-      //             break;
-      //         }
-      //       }}
-      //     />
-      //   </div>
-      // </div>
-      );
-    }), !this.templates.length ? (h("div", { class: "mt-4 border-2 px-20 py-20 text-center" }, "No matching templates found. Please adjust your filters and try again.")) : (h("div", null)
-    // <Pagination page={this.page} total={this.count} onSelectPage={setPage} />
-    )));
+      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() {
@@ -307,45 +221,86 @@ 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": true,
+        "docs": {
+          "tags": [],
+          "text": "The sharing settings to filter by."
+        },
+        "attribute": "sharing",
+        "reflect": true,
+        "defaultValue": "'all'"
+      },
+      "starred": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'all' | 'starred' | 'unstarred'",
+          "resolved": "\"all\" | \"starred\" | \"unstarred\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The number of items to display."
+          "text": "The starred settings to filter by."
         },
-        "attribute": "items",
-        "reflect": false,
-        "defaultValue": "5"
+        "attribute": "starred",
+        "reflect": true,
+        "defaultValue": "'all'"
       },
-      "view": {
+      "sort": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
-          "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
+          "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 filtered view to display. \"completed\" will show envelopes that have been submitted. \"action\" will\nshow envelopes where the user is a recipient and the envelope is not completed. \"waiting\" will show\nonly envelopes where the user is the sender and the envelope is not completed."
+          "text": "If set, filter templates by the specified name."
         },
-        "attribute": "view",
+        "attribute": "name",
         "reflect": true,
-        "defaultValue": "undefined"
+        "defaultValue": "''"
       },
-      "page": {
+      "selectedPage": {
         "type": "number",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -355,9 +310,9 @@ export class VerdocsTemplatesList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The first page nymbver to display (0-based)"
+          "text": "The initial page number to select. Pagination is internally controlled but may be overriden by the\nhost applicaiton."
         },
-        "attribute": "page",
+        "attribute": "selected-page",
         "reflect": true,
         "defaultValue": "0"
       }
@@ -367,12 +322,7 @@ export class VerdocsTemplatesList {
     return {
       "count": {},
       "loading": {},
-      "name": {},
-      "containing": {},
-      "sharing": {},
-      "starred": {},
-      "sort": {},
-      "selectedTemplates": {},
+      "confirmDelete": {},
       "templates": {}
     };
   }
@@ -398,14 +348,14 @@ 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; template: ITemplate}",
@@ -422,14 +372,14 @@ export class VerdocsTemplatesList {
           }
         }
       }, {
-        "method": "finishLater",
-        "name": "finishLater",
+        "method": "editTemplate",
+        "name": "editTemplate",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the user clicks to finish signing later. Typically the host application should redirect\nthe user to another page."
+          "text": "Event fired when the user chooses the Edit option from the dropdown menu."
         },
         "complexType": {
           "original": "{endpoint: VerdocsEndpoint; template: ITemplate}",
@@ -446,22 +396,26 @@ export class VerdocsTemplatesList {
           }
         }
       }, {
-        "method": "viewAll",
-        "name": "viewAll",
+        "method": "templateDeleted",
+        "name": "templateDeleted",
         "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 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; 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"
             }
           }
         }

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 TemplatesList = ({ 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} /> `;

package/dist/components/Templates.js

@@ -131,6 +131,20 @@ var updateTemplate = function (endpoint, templateId, params) {
         .put("/templates/".concat(templateId), params)
         .then(function (r) { return r.data; });
 };
+/**
+ * Delete a template.
+ *
+ * ```typescript
+ * import {Templates} from '@verdocs/js-sdk/Templates';
+ *
+ * await Templates.deleteTemplate((VerdocsEndpoint.getDefault(), '83da3d70-7857-4392-b876-c4592a304bc9');
+ * ```
+ */
+var deleteTemplate = function (endpoint, templateId) {
+    return endpoint.api //
+        .delete("/templates/".concat(templateId))
+        .then(function (r) { return r.data; });
+};
 /**
  * Get a summary of template data, typically used to populate admin panel dashboard pages.
  *
@@ -151,4 +165,4 @@ var getSummary = function (endpoint, params) {
     });
 };
 
-export { getTemplates as a, getTemplate as b, createTemplate as c, getSummary as g, updateTemplate as u };
+export { getTemplates as a, getTemplate as b, createTemplate as c, deleteTemplate as d, getSummary as g, updateTemplate as u };

package/dist/components/index.d.ts

@@ -59,6 +59,7 @@ export { VerdocsTemplateReminders as VerdocsTemplateReminders } from '../types/c
 export { VerdocsTemplateRoleProperties as VerdocsTemplateRoleProperties } from '../types/components/templates/verdocs-template-role-properties/verdocs-template-role-properties';
 export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/components/templates/verdocs-template-roles/verdocs-template-roles';
 export { VerdocsTemplateSender as VerdocsTemplateSender } from '../types/components/templates/verdocs-template-sender/verdocs-template-sender';
+export { VerdocsTemplateStar as VerdocsTemplateStar } from '../types/components/templates/verdocs-template-star/verdocs-template-star';
 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';

package/dist/components/index.js

@@ -59,6 +59,7 @@ export { VerdocsTemplateReminders, defineCustomElement as defineCustomElementVer
 export { VerdocsTemplateRoleProperties, defineCustomElement as defineCustomElementVerdocsTemplateRoleProperties } from './verdocs-template-role-properties.js';
 export { VerdocsTemplateRoles, defineCustomElement as defineCustomElementVerdocsTemplateRoles } from './verdocs-template-roles.js';
 export { VerdocsTemplateSender, defineCustomElement as defineCustomElementVerdocsTemplateSender } from './verdocs-template-sender.js';
+export { VerdocsTemplateStar, defineCustomElement as defineCustomElementVerdocsTemplateStar } from './verdocs-template-star.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';

package/dist/components/index2.js

@@ -2185,4 +2185,4 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
-export { format as f };
+export { getDefaultOptions as a, format as f, getTimezoneOffsetInMilliseconds as g, locale as l, requiredArgs as r, toDate as t };