@verdocs/web-sdk 1.15.0 → 1.15.2

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

@@ -6,70 +6,77 @@ 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.view = undefined;
     this.status = 'all';
     this.sortBy = 'updated_at';
-    this.page = 0;
-    this.count = 0;
-    this.loading = true;
     this.name = '';
     this.containing = '';
+    this.selectedPage = 0;
+    this.count = 0;
+    this.loading = true;
     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 +84,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 +100,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 +129,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 +140,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 +161,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 +201,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 +216,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,27 +261,9 @@ export class VerdocsEnvelopesList {
         },
         "defaultValue": "VerdocsEndpoint.getDefault()"
       },
-      "items": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The number of items to display."
-        },
-        "attribute": "items",
-        "reflect": false,
-        "defaultValue": "5"
-      },
       "view": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
           "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
@@ -311,7 +281,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 +304,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 +320,45 @@ export class VerdocsEnvelopesList {
         "reflect": true,
         "defaultValue": "'updated_at'"
       },
-      "page": {
+      "name": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set, filter envelopes by the specified name."
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "containing": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set, filter envelopes by the specified \"containing\" value."
+        },
+        "attribute": "containing",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "selectedPage": {
         "type": "number",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -362,9 +368,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"
       }
@@ -374,8 +380,6 @@ export class VerdocsEnvelopesList {
     return {
       "count": {},
       "loading": {},
-      "name": {},
-      "containing": {},
       "selectedEnvelopes": {},
       "envelopes": {}
     };
@@ -449,26 +453,6 @@ export class VerdocsEnvelopesList {
             }
           }
         }
-      }, {
-        "method": "viewAll",
-        "name": "viewAll",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user clicks View All in the title bar. The current view will be included in the event\ndetails to help the host application navigate the user to the appropriate screen for the request. Note that\nthe verdocs-envelopes-list control uses the same \"view\" parameter, so host applications can typically pass\nthis value through directly. This button is not visible if the header is hidden."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; view: string}",
-          "resolved": "{ endpoint: VerdocsEndpoint; view: string; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            }
-          }
-        }
       }];
   }
 }

package/dist/collection/components/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-template-star/verdocs-template-star.css

@@ -0,0 +1,31 @@
+verdocs-template-star {
+  display: flex;
+  flex: 0 0 60px;
+  align-items: center;
+  flex-direction: row;
+  font-family: "Inter", "Barlow", sans-serif;
+}
+verdocs-template-star .star {
+  line-height: 10px;
+}
+verdocs-template-star .star.updating {
+  animation: spinningStar 2s infinite linear;
+}
+verdocs-template-star .star svg {
+  width: 24px;
+  height: 24px;
+}
+verdocs-template-star .count {
+  color: #595c5d;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+@keyframes spinningStar {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}

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

@@ -0,0 +1,144 @@
+import { Stars } from '@verdocs/js-sdk/Templates';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+const OutlineStarIcon = `<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="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg>`;
+const SolidStarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>`;
+/**
+ * Displays a clickable star that allows users to mark frequently-used templates.
+ */
+export class VerdocsTemplateStar {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.template = undefined;
+    this.updating = false;
+  }
+  async componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[TEMPLATES] Must be authenticated');
+      return;
+    }
+  }
+  toggle(e) {
+    e.stopPropagation();
+    this.updating = true;
+    Stars.toggleStar(VerdocsEndpoint.getDefault(), this.template.id)
+      .then(r => {
+      this.updating = false;
+      this.template.is_starred = r.is_starred;
+      this.template.star_counter = r.star_counter;
+      this.starChange.emit({
+        templateId: this.template.id,
+        starred: r.is_starred,
+        count: r.star_counter,
+      });
+    })
+      .catch(e => {
+      this.updating = false;
+      console.log('[STAR] Error toggling template star', e.message);
+      this.sdkError.emit(e);
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.is_starred ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { class: "count" }, this.template.star_counter || '--')));
+  }
+  static get is() { return "verdocs-template-star"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-star.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-star.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "template": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ITemplateSummaryEntry",
+          "resolved": "ITemplateSummaryEntry",
+          "references": {
+            "ITemplateSummaryEntry": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template to display the star for."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "updating": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "starChange",
+        "name": "starChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user toggles the star on or off. The event detail will contain\nthe new \"starred\" status and count."
+        },
+        "complexType": {
+          "original": "{templateId: string; starred: boolean; count: number}",
+          "resolved": "{ templateId: string; starred: boolean; count: number; }",
+          "references": {}
+        }
+      }, {
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }];
+  }
+}