@verdocs/web-sdk 1.14.11 → 1.15.0

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

@@ -0,0 +1,474 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Envelopes } from '@verdocs/js-sdk/Envelopes';
+import { Host, h } from '@stencil/core';
+import { cancelEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
+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';
+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'],
+// ];
+/**
+ * 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.selectedEnvelopes = [];
+    this.envelopes = [];
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.endpoint.session) {
+        console.log('[ENVELOPES] Must be authenticated');
+        return;
+      }
+      let queryParams = {
+        page: this.page,
+        limit: Math.min(Math.max(this.items, 1), 50),
+        ascending: false,
+        sort_by: 'updated_at',
+      };
+      switch (this.view) {
+        case 'inbox':
+          queryParams = {
+            ...queryParams,
+            is_recipient: true,
+            sort_by: 'created_at',
+            recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],
+          };
+          break;
+        case 'sent':
+          queryParams = {
+            ...queryParams,
+            is_owner: true,
+            sort_by: 'created_at',
+          };
+          break;
+        case 'action':
+          queryParams = {
+            ...queryParams,
+            is_recipient: true,
+            envelope_status: ['pending', 'in progress'],
+            recipient_status: ['invited', 'opened', 'signed'],
+          };
+          break;
+        case 'waiting':
+          queryParams = {
+            ...queryParams,
+            is_owner: true,
+            envelope_status: ['pending', 'in progress'],
+          };
+          break;
+        case 'completed':
+          queryParams = {
+            ...queryParams,
+            envelope_status: ['complete'],
+          };
+          break;
+        default:
+          queryParams = {
+            ...queryParams,
+            envelope_status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]),
+          };
+      }
+      // These filters should only be applied in "View All" mode. Otherwise the user could have set them to something
+      // then changed the view e.g. to Inbox and the filter could break the view (e.g. View:Inbox, Status:Declined
+      // would never return anything).
+      if (this.view === 'all') {
+        if (this.status !== 'all') {
+          queryParams.envelope_status = [this.status];
+        }
+      }
+      if (this.name.trim()) {
+        queryParams.name = this.name.trim();
+      }
+      if (this.containing.trim()) {
+        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);
+      (_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)
+      .then(() => {
+      this.selectedEnvelopes = [];
+    })
+      .catch(e => {
+      console.log('Download error', e);
+      VerdocsToast('Download error: ' + e.message, { style: 'error' });
+    });
+  }
+  downloadEnvelope(envelope) {
+    saveEnvelopesAsZip(VerdocsEndpoint.getDefault(), [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) => {
+        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.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);
+      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];
+          }
+          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 => {
+          var _a, _b;
+          switch (e.detail.id) {
+            case 'view':
+              (_a = this.viewEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope });
+              break;
+            case 'finish':
+              (_b = this.finishLater) === null || _b === void 0 ? void 0 : _b.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;
+          }
+        } }))));
+    }), !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} />
+    )));
+  }
+  static get is() { return "verdocs-envelopes-list"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-envelopes-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-envelopes-list.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()"
+      },
+      "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,
+        "complexType": {
+          "original": "'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'",
+          "resolved": "\"action\" | \"all\" | \"completed\" | \"inbox\" | \"sent\" | \"waiting\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "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."
+        },
+        "attribute": "view",
+        "reflect": true,
+        "defaultValue": "undefined"
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TEnvelopeStatus | 'all'",
+          "resolved": "\"all\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
+          "references": {
+            "TEnvelopeStatus": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The status value to filter by"
+        },
+        "attribute": "status",
+        "reflect": true,
+        "defaultValue": "'all'"
+      },
+      "sortBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'created_at' | 'updated_at' | 'envelope_name' | 'canceled_at' | 'envelope_status'",
+          "resolved": "\"canceled_at\" | \"created_at\" | \"envelope_name\" | \"envelope_status\" | \"updated_at\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The sort field to use"
+        },
+        "attribute": "sort-by",
+        "reflect": true,
+        "defaultValue": "'updated_at'"
+      },
+      "page": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The first page nymbver to display (0-based)"
+        },
+        "attribute": "page",
+        "reflect": true,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "count": {},
+      "loading": {},
+      "name": {},
+      "containing": {},
+      "selectedEnvelopes": {},
+      "envelopes": {}
+    };
+  }
+  static get events() {
+    return [{
+        "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"
+            }
+          }
+        }
+      }, {
+        "method": "viewEnvelope",
+        "name": "viewEnvelope",
+        "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."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        }
+      }, {
+        "method": "finishLater",
+        "name": "finishLater",
+        "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."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        }
+      }, {
+        "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-envelopes-list/verdocs-envelopes-list.stories.js

@@ -0,0 +1,18 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Envelopes/Envelopes List',
+  component: 'verdocs-envelopes-list',
+  args: {
+    items: 10,
+    view: 'all',
+    sortBy: 'updated_at',
+  },
+  argTypes: {
+    onViewEnvelope: { action: 'viewEnvelope' },
+    onFinishLater: { action: 'finishLater' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const EnvelopesList = ({ items, view, sortBy, onViewEnvelope, onFinishLater }) => html `<verdocs-envelopes-list .items="${items}" .view="${view}" .sortBy="${sortBy}" @viewEnvelope=${onViewEnvelope} @finishlater=${onFinishLater} />`;

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -7,7 +7,6 @@ import { SDKError } from '../../../utils/errors';
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
-// const PlusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`;
 /**
  * Displays an edit form that allows the user to adjust a field's settings.
  */
@@ -29,11 +28,12 @@ export class VerdocsTemplateFieldProperties {
     this.required = false;
     this.options = [];
     this.placeholder = '';
-    this.defaultValue = '';
+    this.value = '';
+    this.leading = 0;
     this.showingHelp = false;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
@@ -59,32 +59,36 @@ export class VerdocsTemplateFieldProperties {
       this.roleName = field.role_name;
       this.required = field.required;
       this.fieldType = field.type;
-      this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
-      this.defaultValue = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.value) || '';
+      // TODO: Talk about how we want to handle labels/placeholders
+      this.placeholder = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
+      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
+      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
       this.setting = field.setting || {};
-      this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
+      this.options = ((_f = field.setting) === null || _f === void 0 ? void 0 : _f.options) || [];
       this.dirty = false;
       this.loading = false;
     }
     catch (e) {
       console.log('[FIELD PROPERTIES] Error loading template', e);
       this.loading = false;
-      (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+      (_g = this.sdkError) === null || _g === void 0 ? void 0 : _g.emit(new SDKError(e.message, (_h = e.response) === null || _h === void 0 ? void 0 : _h.status, (_j = e.response) === null || _j === void 0 ? void 0 : _j.data));
     }
   }
   handleCancel(e) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     e.stopPropagation();
     const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
     if (field) {
       this.name = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
-      this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
-      this.defaultValue = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.result) || '';
+      // TODO: Talk about how we want to handle labels/placeholders
+      this.placeholder = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
+      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
+      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
     }
     this.dirty = false;
-    (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
+    (_f = this.close) === null || _f === void 0 ? void 0 : _f.emit();
   }
   handleSave(e) {
     e.stopPropagation();
@@ -98,6 +102,10 @@ export class VerdocsTemplateFieldProperties {
       newProperties.setting = this.setting;
       newProperties.setting.options = this.options;
     }
+    else if (this.type === 'textarea' || this.type === 'textbox') {
+      newProperties.setting = { ...this.setting };
+      newProperties.setting.result = (this.value || '').trim();
+    }
     else if (this.type === 'dropdown') {
       newProperties.setting = {
         x: this.setting.x,
@@ -105,6 +113,7 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
+    console.log('will', newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
@@ -209,12 +218,15 @@ export class VerdocsTemplateFieldProperties {
       } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
-      } })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off",
+      } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
+        this.value = e.target.value;
+        this.dirty = true;
+      } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
       // helpText="Placeholder to display if the field is empty."
       placeholder: "Placeholder...", onInput: (e) => {
         this.placeholder = e.target.value;
         this.dirty = true;
-      } })), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
+      } }))), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
         this.required = e.target.checked;
         this.dirty = true;
       } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && h("verdocs-button", { size: "small", onClick: e => this.handleAddOption(e), label: "Add Option" }), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
@@ -344,7 +356,8 @@ export class VerdocsTemplateFieldProperties {
       "required": {},
       "options": {},
       "placeholder": {},
-      "defaultValue": {},
+      "value": {},
+      "leading": {},
       "showingHelp": {}
     };
   }

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

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: '',
+    templateId: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
   },
   argTypes: {},
   parameters: {

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

@@ -0,0 +1,3 @@
+verdocs-templates-list {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+}