@verdocs/web-sdk 1.10.3 → 1.10.4

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

@@ -0,0 +1,293 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { deleteField, updateField } from '@verdocs/js-sdk/Templates/Fields';
+import { h, Host } from '@stencil/core';
+import TemplateStore from '../../../utils/templateStore';
+import { loadTemplate } from '../../../utils/Templates';
+import { SDKError } from '../../../utils/errors';
+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>`;
+/**
+ * Displays an edit form that allows the user to adjust a field's settings.
+ */
+export class VerdocsTemplateFieldProperties {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.fieldName = '';
+    this.dirty = false;
+    this.loading = true;
+    this.type = 'signature';
+    this.name = '';
+    this.roleName = '';
+    this.required = false;
+    this.placeholder = '';
+    this.defaultValue = '';
+  }
+  async componentWillLoad() {
+    var _a, _b, _c, _d;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.error(`[FIELD PROPERTIES] Missing required template ID`);
+        return;
+      }
+      if (!this.fieldName) {
+        console.error(`[FIELD PROPERTIES] Missing required field name`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.error('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      await loadTemplate(this.endpoint, this.templateId);
+      const field = TemplateStore.fields.find(field => field.name === this.fieldName);
+      if (!field) {
+        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
+      }
+      this.type = field.type;
+      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 = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+      this.dirty = false;
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[FIELD PROPERTIES] Error loading template', e);
+      this.loading = false;
+      (_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));
+    }
+  }
+  handleCancel(e) {
+    var _a, _b;
+    e.stopPropagation();
+    const field = TemplateStore.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 = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+    }
+    this.dirty = false;
+    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+  }
+  handleSave(e) {
+    e.stopPropagation();
+    updateField(this.endpoint, this.templateId, this.fieldName, {
+      name: this.name,
+      required: this.required,
+      role_name: this.roleName,
+      // TODO: Default value in setting?
+    })
+      .then(() => {
+      var _a, _b;
+      this.dirty = false;
+      TemplateStore.fields.forEach(field => {
+        field.name = this.name;
+        field.role_name = this.roleName;
+        field.required = this.required;
+        field.label = this.placeholder;
+        field.setting.result = this.defaultValue;
+      });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    })
+      .catch(() => {
+      console.log('Field update failed', e);
+    });
+  }
+  async handleDelete(e) {
+    e.stopPropagation();
+    if (window.confirm('Are you sure you wish to remove this field? This action cannot be undone.')) {
+      deleteField(this.endpoint, this.templateId, this.fieldName)
+        .then(r => {
+        var _a;
+        console.log('Field deleted', r);
+        TemplateStore.fields = [...TemplateStore.fields.filter(field => field.name !== this.fieldName)];
+        TemplateStore.template.roles.forEach(role => {
+          role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
+        });
+        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+      })
+        .catch(e => {
+        console.log('Deletion error', e);
+      });
+    }
+  }
+  render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+    if (!this.endpoint.session || !TemplateStore.template) {
+      return h(Host, { class: "empty" });
+    }
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off", helpText: "The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key.", placeholder: "Field Name...", onInput: (e) => {
+        this.name = e.target.value;
+        this.dirty = true;
+      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: TemplateStore.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+        this.roleName = e.target.value;
+        this.dirty = true;
+      } }), h("verdocs-help-icon", { text: "The participant who will complete this field." })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off", helpText: "Placeholder to display if the field is empty.", placeholder: "Placeholder...", onInput: (e) => {
+        this.placeholder = e.target.value;
+        this.dirty = true;
+      } })), ['signature', 'initial'].includes(this.type) && (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;
+      } }))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), 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) })))));
+  }
+  static get is() { return "verdocs-template-field-properties"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-field-properties.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-field-properties.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()"
+      },
+      "templateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template ID to edit."
+        },
+        "attribute": "template-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "fieldName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The field to configure."
+        },
+        "attribute": "field-name",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dirty": {},
+      "loading": {},
+      "type": {},
+      "name": {},
+      "roleName": {},
+      "required": {},
+      "placeholder": {},
+      "defaultValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user cancels the dialog."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "delete",
+        "name": "delete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted,\nthe role will have already been deleted server-side."
+        },
+        "complexType": {
+          "original": "{templateId: string; roleName: string}",
+          "resolved": "{ templateId: string; roleName: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "settingsChanged",
+        "name": "settingsChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the field's settings are changed."
+        },
+        "complexType": {
+          "original": "{fieldName: string}",
+          "resolved": "{ fieldName: string; }",
+          "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"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,19 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Templates/Field Properties',
+  component: 'verdocs-template-field-properties',
+  args: {
+    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+    fieldName: 'textboxP1-2',
+  },
+  argTypes: {
+    onClose: { action: 'close' },
+  },
+};
+export const FieldProperties = ({ onClose, templateId, fieldName }) => templateId
+  ? html `
+        <div style="width: 360px; background: #ffffff; padding: 20px; box-sizing: border-box">
+          <verdocs-template-field-properties .templateId=${templateId} .fieldName=${fieldName} @close=${onClose} />
+        </div>
+      `
+  : html `<img src="https://verdocs-public-assets.s3.amazonaws.com/storybook-placeholders/template-name.png" alt="Placeholder" />`;

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

@@ -1,6 +1,6 @@
 import interact from 'interactjs';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { createField, editField } from '@verdocs/js-sdk/Templates/Fields';
+import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { defaultHeight, defaultWidth, getRoleIndex, renderDocumentField, updateCssTransform } from '../../../utils/utils';
 import TemplateStore from '../../../utils/templateStore';
@@ -75,6 +75,9 @@ export class VerdocsTemplateFields {
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
+    el.addEventListener('settingsChanged', () => {
+      el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, field.role_name));
+    });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -86,7 +89,6 @@ export class VerdocsTemplateFields {
     console.log('[FIELDS] Page rendered', pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    console.log('tsf', pageInfo.pageNumber, TemplateStore.fields);
     const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     console.log('[FIELDS] Fields on page', fields);
@@ -140,8 +142,7 @@ export class VerdocsTemplateFields {
     if (field) {
       field.setting.x = x;
       field.setting.y = y;
-      const edited = await editField(this.endpoint, this.templateId, name, field);
-      console.log('edited field', edited);
+      await updateField(this.endpoint, this.templateId, name, field);
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
@@ -163,8 +164,8 @@ export class VerdocsTemplateFields {
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
-      const width = defaultWidth({ type: this.placing });
-      const height = defaultHeight({ type: this.placing });
+      const width = defaultWidth(this.placing);
+      const height = defaultHeight(this.placing);
       const { naturalWidth = 612, naturalHeight = 792 } = this.cachedPageInfo[pageNumber];
       const { x, y } = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const field = {
@@ -191,6 +192,7 @@ export class VerdocsTemplateFields {
     }
   }
   render() {
+    console.log('rendering', TemplateStore.updateCount);
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -200,7 +202,9 @@ export class VerdocsTemplateFields {
     }
     const pages = [...TemplateStore.template.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
-    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {} }, h("div", { class: "pages" }, pages.map(page => {
+    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-updated": TemplateStore.updateCount, onSubmit: () => {
+        console.log('onSubmit');
+      } }, h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);
       return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },

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

@@ -7,7 +7,7 @@ import { loadTemplate } from '../../../utils/Templates';
 import { SDKError } from '../../../utils/errors';
 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>`;
 /**
- * Display a dialog that allows a template sender to be selected.
+ * Display an edit form that allows the user to adjust a role's setitngs.
  */
 export class VerdocsTemplateRoleProperties {
   constructor() {

package/dist/collection/components/templates/verdocs-template-visibillity/verdocs-template-visibility.js

@@ -57,10 +57,10 @@ export class VerdocsTemplateVisibility {
     if (!this.endpoint.session || !TemplateStore.template) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Visibility"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-personal" }, "Personal"), h("verdocs-checkbox", { id: "verdocs-is-personal", name: "is-personal", checked: this.personal, value: "on", onInput: (e) => {
-        this.personal = e.target.checked;
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Visibility"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-shared" }, "Shared"), h("verdocs-checkbox", { id: "verdocs-is-shared", name: "is-shared", checked: !this.personal, value: "on", onInput: (e) => {
+        this.personal = !e.target.checked;
         this.dirty = true;
-      } })), h("div", { class: "description" }, "Personal templates are hidden from other members of your Organization (if any)."), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-public" }, "Public"), h("verdocs-checkbox", { id: "verdocs-is-public", name: "is-public", checked: this.public, value: "on", onInput: (e) => {
+      } })), h("div", { class: "description" }, "Shared templates are visible to other members of your Organization (if any)."), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-public" }, "Public"), h("verdocs-checkbox", { id: "verdocs-is-public", name: "is-public", checked: this.public, value: "on", onInput: (e) => {
         this.public = e.target.checked;
         this.dirty = true;
       } })), h("div", { class: "description" }, "Public templates may appear in results when any other user searches for templates. Note that a template may be both Personal and Public, which may be useful if you want your template to be found via search but not otherwise displayed to other members of your Organization (if any)."), 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) })))));

package/dist/collection/utils/templateStore.js

@@ -7,6 +7,9 @@ const { state, onChange } = createStore({
   template: null,
   loadProgress: 0,
   loading: false,
+  // This can be used as a data field on components that need to force re-rendering when the underlying data has changed. Stencil stores
+  // are handy but not very sophisticated. They don't re-render on "deep" changes.
+  updateCount: 1,
   pageNumbers: [],
   pageUris: {},
   roleNames: [],
@@ -33,6 +36,7 @@ onChange('template', async (newTemplate) => {
   });
   console.log('[TEMPLATESTORE] Loaded fields', state.fields);
   state.pageNumbers = integerSequence(1, newTemplate.pages.length);
+  state.updateCount++;
 });
 onChange('fields', newField => {
   console.log('[TEMPLATESTORE] Field changed', newField);

package/dist/collection/utils/utils.js

@@ -1,8 +1,9 @@
 import { rescale } from '@verdocs/js-sdk/Utils/Fields';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
 import { downloadBlob } from '@verdocs/js-sdk/Utils/Files';
-export const defaultWidth = (field) => {
-  switch (field.type) {
+export const defaultWidth = (type) => {
+  // checkbox was a legacy field type
+  switch (type) {
     case 'textbox':
       return 150;
     case 'timestamp':
@@ -26,8 +27,8 @@ export const defaultWidth = (field) => {
   }
   return 150;
 };
-export const defaultHeight = (field) => {
-  switch (field.type) {
+export const defaultHeight = (type) => {
+  switch (type) {
     case 'textbox':
       return 15;
     case 'timestamp':
@@ -54,7 +55,7 @@ export const defaultHeight = (field) => {
 export const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
-  let { x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field) } = settings;
+  let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
   const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -152,6 +153,12 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
         if (done) {
           cbEl.setAttribute('done', true);
         }
+        if (editable) {
+          cbEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          cbEl.setAttribute('draggable', true);
+        }
         setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
         controlsDiv.appendChild(cbEl);
         return cbEl;
@@ -175,6 +182,12 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
         if (done) {
           radioEl.setAttribute('done', true);
         }
+        if (editable) {
+          radioEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          radioEl.setAttribute('draggable', true);
+        }
         setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
         controlsDiv.appendChild(radioEl);
         return radioEl;

package/dist/components/Fields.js

@@ -0,0 +1,26 @@
+/**
+ * Add a field to a template.
+ */
+var createField = function (endpoint, templateId, params) {
+    return endpoint.api //
+        .post("/templates/".concat(templateId, "/fields"), params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update a template field.
+ */
+var updateField = function (endpoint, templateId, fieldName, params) {
+    return endpoint.api //
+        .put("/templates/".concat(templateId, "/fields/").concat(fieldName), params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * REmove a field from a template.
+ */
+var deleteField = function (endpoint, templateId, fieldName) {
+    return endpoint.api //
+        .delete("/templates/".concat(templateId, "/fields/").concat(fieldName))
+        .then(function (r) { return r.data; });
+};
+
+export { createField as c, deleteField as d, updateField as u };

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/compo
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/controls/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
+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';

package/dist/components/index.js

@@ -42,6 +42,7 @@ export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdo
 export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
 export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';
 export { VerdocsTemplateCreate, defineCustomElement as defineCustomElementVerdocsTemplateCreate } from './verdocs-template-create.js';
+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';

package/dist/components/templateStore.js

@@ -7,6 +7,9 @@ const { state, onChange } = createStore({
   template: null,
   loadProgress: 0,
   loading: false,
+  // This can be used as a data field on components that need to force re-rendering when the underlying data has changed. Stencil stores
+  // are handy but not very sophisticated. They don't re-render on "deep" changes.
+  updateCount: 1,
   pageNumbers: [],
   pageUris: {},
   roleNames: [],
@@ -33,6 +36,7 @@ onChange('template', async (newTemplate) => {
   });
   console.log('[TEMPLATESTORE] Loaded fields', state.fields);
   state.pageNumbers = integerSequence(1, newTemplate.pages.length);
+  state.updateCount++;
 });
 onChange('fields', newField => {
   console.log('[TEMPLATESTORE] Field changed', newField);

package/dist/components/utils.js

@@ -5,8 +5,9 @@ function rescale(r, n) {
     return r * n;
 }
 
-const defaultWidth = (field) => {
-  switch (field.type) {
+const defaultWidth = (type) => {
+  // checkbox was a legacy field type
+  switch (type) {
     case 'textbox':
       return 150;
     case 'timestamp':
@@ -30,8 +31,8 @@ const defaultWidth = (field) => {
   }
   return 150;
 };
-const defaultHeight = (field) => {
-  switch (field.type) {
+const defaultHeight = (type) => {
+  switch (type) {
     case 'textbox':
       return 15;
     case 'timestamp':
@@ -58,7 +59,7 @@ const defaultHeight = (field) => {
 const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
-  let { x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field) } = settings;
+  let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
   const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -156,6 +157,12 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
         if (done) {
           cbEl.setAttribute('done', true);
         }
+        if (editable) {
+          cbEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          cbEl.setAttribute('draggable', true);
+        }
         setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
         controlsDiv.appendChild(cbEl);
         return cbEl;
@@ -179,6 +186,12 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
         if (done) {
           radioEl.setAttribute('done', true);
         }
+        if (editable) {
+          radioEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          radioEl.setAttribute('draggable', true);
+        }
         setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
         controlsDiv.appendChild(radioEl);
         return radioEl;