@verdocs/web-sdk 1.14.8 → 1.14.9

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js

@@ -1,6 +1,7 @@
 import { Auth } from '@verdocs/js-sdk/Users';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { h } from '@stencil/core';
+import { VerdocsToast } from '../../../utils/Toast';
 import { SDKError } from '../../../utils/errors';
 /**
  * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
@@ -42,7 +43,6 @@ export class VerdocsAuth {
     this.password = '';
     this.loggingIn = false;
     this.activeSession = null;
-    this.loginError = null;
   }
   componentWillLoad() {
     var _a, _b;
@@ -70,15 +70,13 @@ export class VerdocsAuth {
       (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: true, session: this.endpoint.session });
     })
       .catch(e => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d;
       console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));
       this.loggingIn = false;
       this.activeSession = null;
       (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
       (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
-      if (((_e = e === null || e === void 0 ? void 0 : e.response) === null || _e === void 0 ? void 0 : _e.status) === 403) {
-        this.loginError = 'Please check your username and password and try again.';
-      }
+      VerdocsToast('Login failed. Please check your username and password and try again.', { style: 'error' });
     });
   }
   handleLogout() {
@@ -87,20 +85,17 @@ export class VerdocsAuth {
     this.isAuthenticated = false;
     (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
   }
-  handleClearError() {
-    this.loginError = null;
-  }
   render() {
     if (!this.visible) {
       return h("div", { style: { display: 'none' } }, "Authenticated");
     }
     if (this.isAuthenticated) {
-      return h("div", { class: "status-result" }, "Authenticated");
+      return (h("verdocs-button", { label: "Sign Out", disabled: this.loggingIn, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
     }
     if (this.displayMode === 'signup') {
       return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
     }
-    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { heading: "Login Error", message: this.loginError, onNext: () => this.handleClearError() }) : h("div", null)));
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
   }
   static get is() { return "verdocs-auth"; }
   static get originalStyleUrls() {
@@ -181,8 +176,7 @@ export class VerdocsAuth {
       "username": {},
       "password": {},
       "loggingIn": {},
-      "activeSession": {},
-      "loginError": {}
+      "activeSession": {}
     };
   }
   static get events() {

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

@@ -2,7 +2,6 @@ verdocs-status-indicator {
   display: flex;
   font-size: 18px;
   flex-wrap: nowrap;
-  padding: 4px 12px;
   border-radius: 6px;
   color: #33364b;
   align-items: center;
@@ -16,7 +15,7 @@ verdocs-status-indicator.has-document:hover {
 verdocs-status-indicator .icon {
   width: 25px;
   height: 25px;
-  margin: 0 10px -4px 0;
+  margin: 0 10px 0 0;
 }
 verdocs-status-indicator.dark {
   color: #ffffff;
@@ -27,7 +26,7 @@ verdocs-status-indicator.small {
 verdocs-status-indicator.small .icon {
   width: 20px;
   height: 20px;
-  margin: 0 8px -4px 0;
+  margin: 0 8px 0 0;
 }
 verdocs-status-indicator .detail-panel {
   display: none;

package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.css

@@ -1,26 +1,31 @@
 verdocs-field-textarea {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   width: 150px;
   height: 15px;
   display: block;
   font-size: 11px;
   position: relative;
+  box-sizing: border-box;
   background-color: transparent;
   transform-origin: bottom left;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 verdocs-field-textarea.disabled {
   opacity: 0.5;
 }
 verdocs-field-textarea textarea {
-  box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.87);
-  font-weight: 500;
-  transform-origin: 0 0;
-  height: 100%;
   width: 100%;
-  background: none;
+  height: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 0 3px;
   font-size: 11px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background: none;
+  font-weight: 500;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
 }
 verdocs-field-textarea textarea.hide {
   display: none;

package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js

@@ -1,12 +1,16 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
+import interact from 'interactjs';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Display a multi-line text input field.
  */
 export class VerdocsFieldTextarea {
   constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
     this.disabled = false;
@@ -17,7 +21,7 @@ export class VerdocsFieldTextarea {
     this.rerender = 0;
   }
   async focusField() {
-    this.el.focus();
+    this.inputEl.focus();
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
@@ -32,6 +36,45 @@ export class VerdocsFieldTextarea {
     }
     // TemplateStore.updateCount++;
   }
+  componentDidRender() {
+    interact.dynamicDrop(true);
+    if (this.editable) {
+      interact(this.el).resizable({
+        edges: { top: true, bottom: true, left: true, right: true },
+        listeners: {
+          start: this.handleResizeStart.bind(this),
+          move: this.handleResize.bind(this),
+          end: this.handleResizeEnd.bind(this),
+        },
+      });
+    }
+  }
+  handleResizeStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleResize(e) {
+    const oldX = +(e.target.getAttribute('resizeX') || 0);
+    const oldY = +(e.target.getAttribute('resizeY') || 0);
+    const newX = e.dx + oldX;
+    const newY = e.dy + oldY;
+    this.el.style.width = `${parseFloat(this.el.style.width || '0') + e.dx}px`;
+    this.el.style.height = `${parseFloat(this.el.style.height || '0') + e.dy}px`;
+    e.target.setAttribute('resizeX', newX);
+    e.target.setAttribute('resizeY', newY);
+  }
+  handleResizeEnd(e) {
+    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
+    const resizeHeight = +(e.target.getAttribute('resizeY') || 0);
+    const settings = getFieldSettings(this.field);
+    const newWidth = (settings.width || 150) + resizeWidth;
+    const newHeight = (settings.height || 41) + resizeHeight;
+    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth), height: Math.round(newHeight) };
+    delete newSettings['result'];
+    updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
+      .then(() => { var _a; return (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings }); })
+      .catch(e => console.log('Field update failed', e));
+  }
   render() {
     var _a, _b;
     const settings = getFieldSettings(this.field);
@@ -40,7 +83,7 @@ export class VerdocsFieldTextarea {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.inputEl = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -63,6 +106,27 @@ export class VerdocsFieldTextarea {
   }
   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.\nThis component self-manages its resize (width) behavior when in edit-template mode, and uses\nthis endpoint to save changes."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
       "templateid": {
         "type": "string",
         "mutable": false,
@@ -306,4 +370,5 @@ export class VerdocsFieldTextarea {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js

@@ -1,9 +1,9 @@
 import interact from 'interactjs';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import { updateField } from '@verdocs/js-sdk/Templates/Fields';
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Display a text input field.
@@ -54,7 +54,6 @@ export class VerdocsFieldTextbox {
     e.stopPropagation();
   }
   handleResize(e) {
-    console.log('resize', e);
     const oldX = +(e.target.getAttribute('resizeX') || 0);
     const oldY = +(e.target.getAttribute('resizeY') || 0);
     const newX = e.dx + oldX;
@@ -66,7 +65,6 @@ export class VerdocsFieldTextbox {
     e.target.setAttribute('resizeY', newY);
   }
   handleResizeEnd(e) {
-    console.log('resizeEnd', e);
     const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
     const settings = getFieldSettings(this.field);
     const newWidth = (settings.width || 150) + resizeWidth;

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: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
+    templateId: '8337af06-3b5a-4e1b-98be-67d82bc7ecd1',
   },
   argTypes: {},
   parameters: {

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

@@ -3,6 +3,7 @@ import { h, Host } from '@stencil/core';
 import { createReminder, updateReminder, deleteReminder } from '@verdocs/js-sdk/Templates/Reminders';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
+import { VerdocsToast } from '../../../utils/Toast';
 /**
  * Displays an edit form that allows the user to adjust a template's reminders.
  */
@@ -17,6 +18,9 @@ export class VerdocsTemplateReminders {
     this.reminderDays = '1';
     this.dirty = false;
   }
+  // POST https://api.verdocs.com/templates/8337af06-3b5a-4e1b-98be-67d82bc7ecd1/reminder
+  // interval_time: 1,
+  // setup_time:1,
   async componentWillLoad() {
     var _a, _b, _c, _d, _e;
     try {
@@ -46,25 +50,35 @@ export class VerdocsTemplateReminders {
     (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   async handleSave(e) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     e.stopPropagation();
-    if (this.sendReminders) {
-      const params = {
-        setup_time: 86400000 * +this.firstReminderDays,
-        interval_time: 86400000 * +this.reminderDays,
-      };
-      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id)) {
-        await createReminder(this.endpoint, this.templateId, params);
+    try {
+      if (this.sendReminders) {
+        const params = {
+          setup_time: +this.firstReminderDays,
+          interval_time: +this.reminderDays,
+        };
+        if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id)) {
+          await createReminder(this.endpoint, this.templateId, params);
+          this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+        }
+        else {
+          await updateReminder(this.endpoint, this.templateId, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.reminder_id, params);
+          this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+        }
       }
       else {
-        await updateReminder(this.endpoint, this.templateId, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.reminder_id, params);
+        await deleteReminder(this.endpoint, this.templateId, (_d = this.store) === null || _d === void 0 ? void 0 : _d.state.reminder_id);
+        this.store = await getTemplateStore(this.endpoint, this.templateId, true);
       }
     }
-    else {
-      await deleteReminder(this.endpoint, this.templateId, (_d = this.store) === null || _d === void 0 ? void 0 : _d.state.reminder_id);
+    catch (e) {
+      console.log('[TEMPLATE REMINDERS] Unable to update reminders', e);
+      VerdocsToast(e.message);
+      (_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));
     }
     this.dirty = false;
-    (_e = this.close) === null || _e === void 0 ? void 0 : _e.emit();
+    (_h = this.close) === null || _h === void 0 ? void 0 : _h.emit();
   }
   render() {
     var _a, _b;
@@ -76,11 +90,17 @@ export class VerdocsTemplateReminders {
       return h(Host, { class: "empty" });
     }
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Reminders"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-send-reminders" }, "Send Automatic Reminders"), h("verdocs-checkbox", { id: "verdocs-send-reminders", name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => {
-        this.showPlanBlocker = true;
-        e.target.checked = false;
-        // this.sendReminders = e.target.checked;
-        // this.dirty = true;
-      } })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-first-reminder-days" }, "Days Before First Reminder"), h("verdocs-text-input", { id: "verdocs-first-reminder-days", type: "number", value: this.firstReminderDays, onInput: (e) => (this.firstReminderDays = e.target.value), disabled: !this.sendReminders })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-days-between-reminders" }, "Days Between Reminders"), h("verdocs-text-input", { id: "verdocs-days-between-reminders", type: "number", value: this.reminderDays, onInput: (e) => (this.reminderDays = e.target.value), disabled: !this.sendReminders })), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) }))), this.showPlanBlocker && (h("verdocs-ok-dialog", { heading: "Upgrade to access this feature", message: "Please upgrade your plan to access this feature.", onNext: () => (this.showPlanBlocker = false) }))));
+        // this.showPlanBlocker = true;
+        // e.target.checked = false;
+        this.sendReminders = e.target.checked;
+        this.dirty = true;
+      } })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-first-reminder-days" }, "Days Before First Reminder"), h("verdocs-text-input", { id: "verdocs-first-reminder-days", type: "number", value: this.firstReminderDays, onInput: (e) => {
+        this.firstReminderDays = e.target.value;
+        this.dirty = true;
+      }, disabled: !this.sendReminders })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-days-between-reminders" }, "Days Between Reminders"), h("verdocs-text-input", { id: "verdocs-days-between-reminders", type: "number", value: this.reminderDays, onInput: (e) => {
+        this.reminderDays = e.target.value;
+        this.dirty = true;
+      }, disabled: !this.sendReminders })), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) }))), this.showPlanBlocker && (h("verdocs-ok-dialog", { heading: "Upgrade to access this feature", message: "Please upgrade your plan to access this feature.", onNext: () => (this.showPlanBlocker = false) }))));
   }
   static get is() { return "verdocs-template-reminders"; }
   static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Reminders',
   component: 'verdocs-template-reminders',
   args: {
-    templateId: '',
+    templateId: '8337af06-3b5a-4e1b-98be-67d82bc7ecd1',
   },
   argTypes: {
     onClose: { action: 'close' },

package/dist/components/Recipients.js

@@ -0,0 +1,74 @@
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Update a recipient's status block
+ */
+var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), params)
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.
+ */
+var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });
+};
+/**
+ * Decline to complete an envelope (signing will not terminated).
+ */
+var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });
+};
+/**
+ * Agree to electronic signing.
+ */
+var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {
+    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });
+};
+/**
+ * Get an in-person signing link.
+ */
+var getInPersonLink = function (endpoint, envelopeId, roleName) {
+    return endpoint.api //
+        .get("/envelopes/".concat(envelopeId, "/recipients/").concat(encodeURIComponent(roleName), "?in_person_link=true"))
+        .then(function (r) { return r.data; });
+};
+
+export { envelopeRecipientDecline as a, envelopeRecipientSubmit as b, envelopeRecipientAgree as e, getInPersonLink as g };

package/dist/components/Toast.js

@@ -1,76 +1,3 @@
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-/**
- * Update a recipient's status block
- */
-var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, endpoint.api //
-                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), params)
-                .then(function (r) { return r.data; })];
-    });
-}); };
-/**
- * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.
- */
-var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });
-};
-/**
- * Decline to complete an envelope (signing will not terminated).
- */
-var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });
-};
-/**
- * Agree to electronic signing.
- */
-var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });
-};
-/**
- * Get an in-person signing link.
- */
-var getInPersonLink = function (endpoint, envelopeId, roleName) {
-    return endpoint.api //
-        .get("/envelopes/".concat(envelopeId, "/recipients/").concat(encodeURIComponent(roleName), "?in_person_link=true"))
-        .then(function (r) { return r.data; });
-};
-
 /**
  * Simple helper to display basic toast messages. These toasts do not stack, and
  * because of this are meant to be used only for infrequent notifications (those
@@ -135,4 +62,4 @@ box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232
   setTimeout(removeToasts, duration);
 };
 
-export { VerdocsToast as V, envelopeRecipientDecline as a, envelopeRecipientSubmit as b, envelopeRecipientAgree as e, getInPersonLink as g };
+export { VerdocsToast as V };

package/dist/components/index.d.ts

@@ -50,7 +50,6 @@ export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../t
 export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from '../types/components/templates/verdocs-template-field-properties/verdocs-template-field-properties';
 export { VerdocsTemplateFields as VerdocsTemplateFields } from '../types/components/templates/verdocs-template-fields/verdocs-template-fields';
 export { VerdocsTemplateName as VerdocsTemplateName } from '../types/components/templates/verdocs-template-name/verdocs-template-name';
-export { VerdocsTemplateProperties as VerdocsTemplateProperties } from '../types/components/templates/verdocs-template-properties/verdocs-template-properties';
 export { VerdocsTemplateReminders as VerdocsTemplateReminders } from '../types/components/templates/verdocs-template-reminders/verdocs-template-reminders';
 export { VerdocsTemplateRoleProperties as VerdocsTemplateRoleProperties } from '../types/components/templates/verdocs-template-role-properties/verdocs-template-role-properties';
 export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/components/templates/verdocs-template-roles/verdocs-template-roles';

package/dist/components/index.js

@@ -50,7 +50,6 @@ export { VerdocsTemplateDocumentPage, defineCustomElement as defineCustomElement
 export { VerdocsTemplateFieldProperties, defineCustomElement as defineCustomElementVerdocsTemplateFieldProperties } from './verdocs-template-field-properties.js';
 export { VerdocsTemplateFields, defineCustomElement as defineCustomElementVerdocsTemplateFields } from './verdocs-template-fields.js';
 export { VerdocsTemplateName, defineCustomElement as defineCustomElementVerdocsTemplateName } from './verdocs-template-name.js';
-export { VerdocsTemplateProperties, defineCustomElement as defineCustomElementVerdocsTemplateProperties } from './verdocs-template-properties.js';
 export { VerdocsTemplateReminders, defineCustomElement as defineCustomElementVerdocsTemplateReminders } from './verdocs-template-reminders.js';
 export { VerdocsTemplateRoleProperties, defineCustomElement as defineCustomElementVerdocsTemplateRoleProperties } from './verdocs-template-role-properties.js';
 export { VerdocsTemplateRoles, defineCustomElement as defineCustomElementVerdocsTemplateRoles } from './verdocs-template-roles.js';