@verdocs/web-sdk 2.0.9 → 2.0.11

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

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import './Types.js';
 import { V as VerdocsEndpoint, c as canPerformTemplateAction } from './VerdocsEndpoint.js';
 import { l as listTemplates, d as deleteTemplate } from './Templates.js';
-import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
 import { d as defineCustomElement$9 } from './verdocs-dropdown2.js';
@@ -15,7 +14,7 @@ import { d as defineCustomElement$3 } from './verdocs-template-star2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 import { f as format } from './index2.js';
 
-const verdocsTemplatesListCss = "verdocs-templates-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-templates-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-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{-ms-flex-align:center;align-items:center}verdocs-templates-list .template{width:100%;margin:3px 0;border:1px solid #ffffff;background:#ffffff}verdocs-templates-list .template:hover{cursor:pointer;background:#ededff;border:1px solid #a7a7f5}verdocs-templates-list .template .inner{gap:10px;display:-ms-flexbox;display:flex;padding:8px 14px;border-radius:5px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-templates-list .template .inner svg{width:24px;height:24px}verdocs-templates-list .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:black;font-size:16px;margin-left:10px}@media screen and (max-width: 1300px){verdocs-templates-list .name{font-size:16px}}verdocs-templates-list .spacer{margin:0;height:30px;-ms-flex:0 0 1px;flex:0 0 1px;display:-ms-flexbox;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 .usage,verdocs-templates-list .ownership,verdocs-templates-list .last-used{gap:10px;color:#444;display:-ms-flexbox;display:flex;font-size:16px;margin:0 0 0 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-templates-list .usage span,verdocs-templates-list .usage svg,verdocs-templates-list .ownership span,verdocs-templates-list .ownership svg,verdocs-templates-list .last-used span,verdocs-templates-list .last-used svg{width:24px;height:24px}verdocs-templates-list .usage span,verdocs-templates-list .ownership span,verdocs-templates-list .last-used span{display:block}verdocs-templates-list .ownership{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-templates-list .last-used{-ms-flex:0 0 130px;flex:0 0 130px}verdocs-templates-list .usage{-ms-flex:0 0 60px;flex:0 0 60px}";
+const verdocsTemplatesListCss = "verdocs-templates-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-templates-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-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{-ms-flex-align:center;align-items:center}verdocs-templates-list .template{width:100%;margin:3px 0;border:1px solid #ffffff;background:#ffffff}verdocs-templates-list .template:hover{cursor:pointer;background:#ededff;border:1px solid #a7a7f5}verdocs-templates-list .template .inner{gap:10px;display:-ms-flexbox;display:flex;padding:8px 14px;border-radius:5px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-templates-list .template .inner svg{width:24px;height:24px}verdocs-templates-list .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:black;font-size:16px;margin-left:10px}@media screen and (max-width: 1300px){verdocs-templates-list .name{font-size:16px}}verdocs-templates-list .spacer{margin:0;height:30px;-ms-flex:0 0 1px;flex:0 0 1px;display:-ms-flexbox;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 .usage,verdocs-templates-list .ownership,verdocs-templates-list .last-used{gap:10px;color:#444;display:-ms-flexbox;display:flex;font-size:16px;margin:0 0 0 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-templates-list .usage span,verdocs-templates-list .usage svg,verdocs-templates-list .ownership span,verdocs-templates-list .ownership svg,verdocs-templates-list .last-used span,verdocs-templates-list .last-used svg{width:24px;height:24px}verdocs-templates-list .usage span,verdocs-templates-list .ownership span,verdocs-templates-list .last-used span{display:block}verdocs-templates-list .ownership{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-templates-list .last-used{-ms-flex:0 0 130px;flex:0 0 130px}verdocs-templates-list .usage{-ms-flex:0 0 60px;flex:0 0 60px}";
 
 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>`;
@@ -49,6 +48,8 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.sdkError = createEvent(this, "sdkError", 7);
     this.viewTemplate = createEvent(this, "viewTemplate", 7);
+    this.signNow = createEvent(this, "signNow", 7);
+    this.submittedData = createEvent(this, "submittedData", 7);
     this.editTemplate = createEvent(this, "editTemplate", 7);
     this.templateDeleted = createEvent(this, "templateDeleted", 7);
     this.changeSort = createEvent(this, "changeSort", 7);
@@ -56,24 +57,22 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.changeStarred = createEvent(this, "changeStarred", 7);
     this.changeName = createEvent(this, "changeName", 7);
     this.handleOptionSelected = (option, template) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       if (option === 'send') {
         (_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 === 'createlink') {
+        //   VerdocsToast('This feature is coming soon!');
       }
       else if (option === 'signnow') {
-        VerdocsToast('This feature is coming soon!');
+        (_b = this.signNow) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: template });
       }
       else if (option === 'submitted') {
-        VerdocsToast('This feature is coming soon!');
-      }
-      else if (option === 'link') {
-        VerdocsToast('This feature is coming soon!');
+        (_c = this.submittedData) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: template });
+        // } 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 });
+        (_d = this.editTemplate) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, template: template });
       }
       else if (option === 'delete') {
         this.confirmDelete = template;
@@ -84,7 +83,9 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.starred = 'all';
     this.sort = 'updated_at';
     this.name = '';
-    this.allowedActions = ['send', 'createlink', 'signnow', 'submitted', 'link', 'edit', 'delete'];
+    this.allowedActions = ['send', 'submitted', 'link', 'edit', 'delete'];
+    this.showPagination = true;
+    this.rowsPerPage = 10;
     this.selectedPage = 0;
     this.count = 0;
     this.loading = true;
@@ -113,12 +114,15 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   async queryTemplates() {
     var _a, _b, _c;
+    console.log('[TEMPLATES] Querying templates');
+    this.loading = true;
     try {
       let queryParams = {
         sharing: this.sharing,
         starred: this.starred,
         page: this.selectedPage,
         sort: this.sort,
+        rows: this.rowsPerPage,
         // ascending: this.sort === 'name' || this.sort === 'star_counter',
       };
       if (this.name.trim() !== '') {
@@ -191,12 +195,12 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       const date = template[dateToShow];
       const MENU_OPTIONS = [];
       if (this.allowedActions.includes('send')) {
-        MENU_OPTIONS.push({ label: 'Send', id: 'send', disabled: !this.canPreview(template) });
+        MENU_OPTIONS.push({ label: 'Preview / Send', id: 'send', disabled: !this.canPreview(template) });
       }
-      if (this.allowedActions.includes('createlink')) {
-        MENU_OPTIONS.push({ label: 'Create Link', id: 'createlink', disabled: true });
-      }
-      if (this.allowedActions.includes('createlink')) {
+      // if (this.allowedActions.includes('createlink')) {
+      //   MENU_OPTIONS.push({label: 'Create Link', id: 'createlink', disabled: true});
+      // }
+      if (this.allowedActions.includes('signnow')) {
         MENU_OPTIONS.push({ label: 'Sign Now', id: 'signnow', disabled: true });
       }
       if (this.allowedActions.includes('submitted')) {
@@ -205,9 +209,12 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       }
       if (this.allowedActions.includes('link') || this.allowedActions.includes('edit') || this.allowedActions.includes('delete')) {
         MENU_OPTIONS.push({ label: '' });
-        if (this.allowedActions.includes('link') || this.allowedActions.includes('edit') || this.allowedActions.includes('delete')) {
-          MENU_OPTIONS.push({ label: 'Get Preview Link', id: 'link', disabled: !this.canPreview(template) });
-        }
+        // TODO: The preview link used to be just an internal route in the main Web application, but
+        // that's not suitable for embeddding. Disabling until this gets re-requested as a feature,
+        // in which case we'll want to move this to an API-driven function.
+        // if (this.allowedActions.includes('link') || this.allowedActions.includes('edit') || this.allowedActions.includes('delete')) {
+        //   MENU_OPTIONS.push({label: 'Get Preview Link', id: 'link', disabled: !this.canPreview(template)});
+        // }
         if (this.allowedActions.includes('link') || this.allowedActions.includes('edit') || this.allowedActions.includes('delete')) {
           MENU_OPTIONS.push({ label: 'Edit', id: 'edit', disabled: !this.canEdit(template) });
         }
@@ -219,10 +226,10 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           var _a;
           (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template });
         } }, h("div", { class: "inner" }, h("verdocs-template-star", { template: template, endpoint: this.endpoint }), h("div", { class: "spacer icon-spacer" }), h("div", { class: "name" }, template.name), h("div", { class: "spacer usage-spacer" }), h("div", { class: "usage" }, h("span", { innerHTML: EnvelopeIcon, title: "Usage Counter" }), template.counter || '--'), h("div", { class: "spacer last-used-spacer" }), h("div", { class: "last-used" }, dateToShow === 'created_at' && h("span", { innerHTML: CreatedIcon, title: "Created" }), dateToShow === 'updated_at' && h("span", { innerHTML: UpdatedIcon, title: "Last Updated" }), dateToShow === 'last_used_at' && h("span", { innerHTML: LastUsedIcon, title: "Last Used" }), date ? format(new Date(date), 'P') : 'Never'), h("div", { class: "spacer ownership-spacer" }), template.is_public && (h("div", { class: "ownership" }, h("span", { innerHTML: GlobeAltIcon }), " Public")), !template.is_public && !template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: LockClosedIcon }), " Private")), !template.is_public && template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, template) }))));
-    }), !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.templates.length ? (h("div", { class: "empty-text" }, "No matching templates found. Please adjust your filters and try again.")) : this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, 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 }))));
+      } }))) : (h("div", null)), 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 watchers() { return {
     "sharing": ["handleSharingUpdated"],
@@ -238,7 +245,9 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "sort": [1537],
     "name": [1537],
     "allowedActions": [1040],
-    "selectedPage": [1538, "selected-page"],
+    "showPagination": [4, "show-pagination"],
+    "rowsPerPage": [2, "rows-per-page"],
+    "selectedPage": [2, "selected-page"],
     "count": [32],
     "loading": [32],
     "confirmDelete": [32],