@verdocs/web-sdk 1.15.0 → 1.15.1

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

@@ -10,36 +10,47 @@ verdocs-envelopes-list {
   font-family: "Inter", "Barlow", sans-serif;
 }
 verdocs-envelopes-list .header {
-  margin: 0;
   width: 100%;
   row-gap: 4px;
   display: flex;
   flex-wrap: wrap;
-  column-gap: 16px;
+  column-gap: 12px;
+  margin: 0 0 10px 0;
   align-items: center;
   flex-direction: row;
 }
+verdocs-envelopes-list .header .filter {
+  width: 150px;
+}
+verdocs-envelopes-list .header verdocs-text-input {
+  margin: 0;
+}
+verdocs-envelopes-list .header verdocs-text-input input {
+  height: 32px;
+}
 verdocs-envelopes-list .filter {
   align-items: center;
 }
 verdocs-envelopes-list .envelope {
   width: 100%;
   margin: 3px 0;
+  background: #ffffff;
 }
 verdocs-envelopes-list .envelope:hover {
   cursor: pointer;
-  background: #ffffff;
-  border: 1px solid #cccccc;
+  background: #f5f5fa;
 }
 verdocs-envelopes-list .envelope .inner {
-  gap: 20px;
+  gap: 14px;
   display: flex;
   padding: 8px 20px;
   border-radius: 6px;
   flex-direction: row;
   align-items: center;
-  background: #f9f9f9;
-  border: 1px solid #e3e3e3;
+}
+verdocs-envelopes-list .envelope .inner svg {
+  width: 24px;
+  height: 24px;
 }
 verdocs-envelopes-list .vert-spacer {
   height: 50px;
@@ -56,19 +67,33 @@ verdocs-envelopes-list .last-modified {
   align-items: center;
   white-space: nowrap;
 }
-verdocs-envelopes-list .last-modified svg {
-  width: 32px;
-  height: 32px;
-  margin-right: 8px;
-}
 verdocs-envelopes-list .envelope-name {
   flex: 1;
   display: flex;
   color: #000000;
   font-size: 18px;
+  overflow: hidden;
   line-height: 28px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 verdocs-envelopes-list .envelope-recipients {
-  font-weight: 700;
   color: #4b5563;
+  font-weight: 700;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+verdocs-envelopes-list .empty-text {
+  font-size: 20px;
+  text-align: center;
+  margin: 16px 0 0 0;
+  padding: 80px 80px;
+  border: 2px solid #ccc;
+}
+verdocs-envelopes-list .containing {
+  gap: 12px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 }

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

@@ -6,43 +6,41 @@ import { getRecipientsWithActions, userCanAct, userCanCancelEnvelope } from '@ve
 import { saveEnvelopesAsZip } from '../../../utils/utils';
 import { VerdocsToast } from '../../../utils/Toast';
 import { SDKError } from '../../../utils/errors';
-const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>`;
-// const 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'],
-// ];
+const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>`;
+const ViewFilters = [
+  { value: 'all', label: 'All' },
+  { value: 'inbox', label: 'Inbox' },
+  { value: 'sent', label: 'Sent' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'action', label: 'Action Required' },
+  { value: 'waiting', label: 'Waiting on Others' },
+];
+const StatusFilters = [
+  { value: 'all', label: 'All' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'in progress', label: 'In Progress' },
+  { value: 'complete', label: 'Completed' },
+  { value: 'declined', label: 'Declined' },
+  { value: 'canceled', label: 'Canceled' },
+];
+const SortFilters = [
+  { value: 'created_at', label: 'Created' },
+  { value: 'updated_at', label: 'Updated' },
+  { value: 'canceled_at', label: 'Canceled' },
+  { value: 'envelope_name', label: 'Name' },
+  { value: 'envelope_status', label: 'Status' },
+];
 /**
  * Displays a list of envelopes matching specified conditions.
  */
 export class VerdocsEnvelopesList {
   constructor() {
     this.endpoint = VerdocsEndpoint.getDefault();
-    this.items = 5;
+    this.maxItems = 40;
     this.view = undefined;
     this.status = 'all';
     this.sortBy = 'updated_at';
-    this.page = 0;
+    this.selectedPage = 0;
     this.count = 0;
     this.loading = true;
     this.name = '';
@@ -50,26 +48,36 @@ export class VerdocsEnvelopesList {
     this.selectedEnvelopes = [];
     this.envelopes = [];
   }
-  async componentWillLoad() {
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[ENVELOPES] Must be authenticated');
+      return;
+    }
+    return this.queryEnvelopes();
+  }
+  async queryEnvelopes() {
     var _a, _b, _c;
     try {
-      this.endpoint.loadSession();
-      if (!this.endpoint.session) {
-        console.log('[ENVELOPES] Must be authenticated');
-        return;
-      }
+      this.loading = true;
       let queryParams = {
-        page: this.page,
-        limit: Math.min(Math.max(this.items, 1), 50),
-        ascending: false,
-        sort_by: 'updated_at',
+        page: this.selectedPage + 1,
+        limit: 10,
       };
       switch (this.view) {
+        case 'all':
+          queryParams = {
+            ...queryParams,
+            sort_by: this.sortBy,
+            ascending: this.sortBy === 'envelope_name',
+            envelope_status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
+          };
+          break;
         case 'inbox':
           queryParams = {
             ...queryParams,
             is_recipient: true,
-            sort_by: 'created_at',
+            sort_by: 'updated_at',
             recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],
           };
           break;
@@ -77,12 +85,13 @@ export class VerdocsEnvelopesList {
           queryParams = {
             ...queryParams,
             is_owner: true,
-            sort_by: 'created_at',
+            sort_by: 'updated_at',
           };
           break;
         case 'action':
           queryParams = {
             ...queryParams,
+            sort_by: 'updated_at',
             is_recipient: true,
             envelope_status: ['pending', 'in progress'],
             recipient_status: ['invited', 'opened', 'signed'],
@@ -92,18 +101,24 @@ export class VerdocsEnvelopesList {
           queryParams = {
             ...queryParams,
             is_owner: true,
+            sort_by: 'updated_at',
+            ascending: false,
             envelope_status: ['pending', 'in progress'],
           };
           break;
         case 'completed':
           queryParams = {
             ...queryParams,
+            sort_by: 'updated_at',
+            ascending: false,
             envelope_status: ['complete'],
           };
           break;
         default:
           queryParams = {
             ...queryParams,
+            sort_by: 'updated_at',
+            ascending: false,
             envelope_status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
           };
       }
@@ -115,6 +130,10 @@ export class VerdocsEnvelopesList {
           queryParams.envelope_status = [this.status];
         }
       }
+      if (this.sortBy !== 'updated_at') {
+        queryParams.sort_by = this.sortBy;
+        queryParams.ascending = this.sortBy === 'envelope_name';
+      }
       if (this.name.trim()) {
         queryParams.name = this.name.trim();
       }
@@ -122,52 +141,18 @@ export class VerdocsEnvelopesList {
         queryParams.text_field_value = this.containing.trim();
       }
       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;
-      // let queryParams: IEnvelopeSearchParams = {
-      //   page: 0,
-      //   ascending: false,
-      //   sort_by: 'updated_at',
-      //   limit: Math.max(Math.min(this.items, 30), 1),
-      // };
-      //
-      // let defaultHeader;
-      // switch (this.view) {
-      //   case 'action':
-      //     queryParams = {...queryParams, is_recipient: true, envelope_status: ['pending', 'in progress'], recipient_status: ['invited', 'opened', 'signed']};
-      //     defaultHeader = 'Action Required';
-      //
-      //     break;
-      //
-      //   case 'waiting':
-      //     queryParams = {...queryParams, is_owner: true, ascending: false, envelope_status: ['pending', 'in progress']};
-      //     defaultHeader = 'Waiting on Others';
-      //     break;
-      //
-      //   case 'completed':
-      //   default:
-      //     queryParams = {...queryParams, envelope_status: ['complete']};
-      //     defaultHeader = 'Completed';
-      //     break;
-      // }
-      //
-      // this.title = this.header !== undefined ? this.header : defaultHeader;
-      //
-      // const response = await Envelopes.searchEnvelopes(this.endpoint, queryParams);
-      // console.log('[ENVELOPES] Got envelopes', response);
-      // this.envelopes = response.result;
-      // this.count = response.total;
-      // this.loading = false;
     }
     catch (e) {
       console.log('[ENVELOPES] Error with preview session', e);
+      this.loading = true;
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
   handleDownload() {
-    saveEnvelopesAsZip(VerdocsEndpoint.getDefault(), this.selectedEnvelopes)
+    saveEnvelopesAsZip(this.endpoint, this.selectedEnvelopes)
       .then(() => {
       this.selectedEnvelopes = [];
     })
@@ -177,25 +162,39 @@ export class VerdocsEnvelopesList {
     });
   }
   downloadEnvelope(envelope) {
-    saveEnvelopesAsZip(VerdocsEndpoint.getDefault(), [envelope]).catch(e => {
+    saveEnvelopesAsZip(this.endpoint, [envelope]).catch(e => {
       console.log('Download error', e);
       VerdocsToast('Download error: ' + e.message, { style: 'error' });
     });
   }
   render() {
-    if (this.loading) {
-      return (h(Host, { style: { minHeight: '300px' } }, h("verdocs-loader", null)));
-    }
-    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => {
+    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onFocusout: (e) => {
         this.name = e.target.value;
-      } })), h("div", { class: "flex flex-row gap-3 items-center" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-containing", value: this.containing, autocomplete: "off", placeholder: "Fields Containing...", onInput: (e) => {
+        return this.queryEnvelopes();
+      } })), h("verdocs-quick-filter", { label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
+        this.view = e.detail.value;
+        return this.queryEnvelopes();
+      } }), this.view === 'all' && (h("verdocs-quick-filter", { label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
+        this.status = e.detail.value;
+        return this.queryEnvelopes();
+      } })), this.view === 'all' && (h("verdocs-quick-filter", { label: "Sort By", value: this.sortBy, options: SortFilters, onOptionSelected: e => {
+        this.sortBy = e.detail.value;
+        return this.queryEnvelopes();
+      } })), h("div", { class: "containing" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-containing", value: this.containing, autocomplete: "off", placeholder: "Fields Containing...", onInput: (e) => {
         this.containing = e.target.value;
-      } }))), h("div", { class: "flex flex-1" }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
+        return this.queryEnvelopes();
+      } }))), this.loading && h("verdocs-spinner", { mode: "dark", size: 24 }), h("div", { style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
       var _a;
       const recipientsWithActions = getRecipientsWithActions(envelope);
       const userCanCancel = userCanCancelEnvelope(this.endpoint.session, envelope);
       const userRole = recipientsWithActions.find(recipient => { var _a; return recipient.email === ((_a = this.endpoint.session) === null || _a === void 0 ? void 0 : _a.email) || ''; });
       const userCanFinish = userRole && userCanCancel && userCanAct(((_a = this.endpoint.session) === null || _a === void 0 ? void 0 : _a.email) || '', recipientsWithActions);
+      const menuOptions = [
+        { label: 'View Envelope', id: 'view' },
+        { label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish },
+        { label: 'Download', id: 'download' },
+        { label: 'Cancel', id: 'cancel', disabled: !userCanCancel },
+      ];
       return (h("div", { class: "envelope", key: envelope.id, onClick: () => { var _a; return (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope }); } }, h("div", { class: "inner" }, h("verdocs-checkbox", { checked: this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1, onClick: e => e.stopPropagation(), onInput: (e) => {
           if (e.target.checked) {
             this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];
@@ -203,12 +202,7 @@ export class VerdocsEnvelopesList {
           else {
             this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
           }
-        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: [
-          { label: 'View Envelope', id: 'view' },
-          { label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish },
-          { label: 'Download', id: 'download' },
-          { label: 'Cancel', id: 'cancel', disabled: !userCanCancel },
-        ], onOptionSelected: e => {
+        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
           var _a, _b;
           switch (e.detail.id) {
             case 'view':
@@ -223,21 +217,16 @@ export class VerdocsEnvelopesList {
             case 'cancel':
               if (window.confirm('Are you sure you want to cancel this envelope?')) {
                 cancelEnvelope(this.endpoint, envelope.id)
-                  .then(r => {
-                  console.log('Cancel result', r);
-                  VerdocsToast('Envelope canceled');
-                })
-                  .catch(e => {
-                  console.log('cxl error', e);
-                  VerdocsToast('Unable to cancel envelope: ' + e.messabge, { style: 'error' });
-                });
+                  .then(() => VerdocsToast('Envelope canceled'))
+                  .catch(e => VerdocsToast('Unable to cancel envelope: ' + e.messabge, { style: 'error' }));
               }
               break;
           }
         } }))));
-    }), !this.envelopes.length ? (h("div", { class: "mt-4 border-2 px-20 py-20 text-center" }, "No matching envelopes found. Please adjust your filters and try again.")) : (h("div", null)
-    // <Pagination page={this.page} total={this.count} onSelectPage={setPage} />
-    )));
+    }), !this.loading && !this.envelopes.length ? (h("div", { class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again.")) : (h("div", { style: { marginTop: '10px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: 10, itemCount: this.count, onSelectPage: e => {
+        this.selectedPage = e.detail.selectedPage;
+        return this.queryEnvelopes();
+      } })))));
   }
   static get is() { return "verdocs-envelopes-list"; }
   static get originalStyleUrls() {
@@ -273,7 +262,7 @@ export class VerdocsEnvelopesList {
         },
         "defaultValue": "VerdocsEndpoint.getDefault()"
       },
-      "items": {
+      "maxItems": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -285,15 +274,15 @@ export class VerdocsEnvelopesList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The number of items to display."
+          "text": "The max number of items to display."
         },
-        "attribute": "items",
+        "attribute": "max-items",
         "reflect": false,
-        "defaultValue": "5"
+        "defaultValue": "40"
       },
       "view": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
           "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
@@ -311,7 +300,7 @@ export class VerdocsEnvelopesList {
       },
       "status": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "TEnvelopeStatus | 'all'",
           "resolved": "\"all\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
@@ -334,7 +323,7 @@ export class VerdocsEnvelopesList {
       },
       "sortBy": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "'created_at' | 'updated_at' | 'envelope_name' | 'canceled_at' | 'envelope_status'",
           "resolved": "\"canceled_at\" | \"created_at\" | \"envelope_name\" | \"envelope_status\" | \"updated_at\"",
@@ -350,9 +339,9 @@ export class VerdocsEnvelopesList {
         "reflect": true,
         "defaultValue": "'updated_at'"
       },
-      "page": {
+      "selectedPage": {
         "type": "number",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -362,9 +351,9 @@ export class VerdocsEnvelopesList {
         "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"
       }

package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.js

@@ -35,12 +35,12 @@ const ENTRY_PADDING = 40;
  */
 export class VerdocsStatusIndicator {
   constructor() {
+    this.recipientStatusIcons = [];
     this.size = 'normal';
     this.theme = 'light';
     this.status = undefined;
     this.envelope = undefined;
     this.isOpen = undefined;
-    this.recipientStatusIcons = [];
     this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
@@ -344,7 +344,6 @@ export class VerdocsStatusIndicator {
   static get states() {
     return {
       "isOpen": {},
-      "recipientStatusIcons": {},
       "containerId": {}
     };
   }

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

@@ -1,3 +1,48 @@
 verdocs-templates-list {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+}
+verdocs-templates-list .template {
+  display: flex;
+  margin: 3px 0;
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid #eee;
+  background: #fff;
+  padding: 8px 20px;
+}
+verdocs-templates-list .template svg {
+  width: 32px;
+  height: 32px;
+}
+@media screen and (max-width: 1300px) {
+  verdocs-templates-list .template 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 {
+  display: flex;
+  flex: 0 0 1px;
+  height: 50px;
+  margin: 0 12px;
+  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;
+  }
 }