@verdocs/web-sdk 2.3.88 → 4.0.5

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

@@ -1,13 +1,11 @@
-import interact from 'interactjs';
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
-import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
-import { getTemplateFieldStore, updateStoreField } from '../../../utils/TemplateFieldStore';
-import { defaultHeight, defaultWidth, getFieldId, getFieldOptionId, removeCssTransform, updateCssTransform } from '../../../utils/utils';
-import { h, Host } from '@stencil/core';
-import { getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
-import { getTemplateStore } from '../../../utils/TemplateStore';
-import { SDKError } from '../../../utils/errors';
+import interact from "interactjs";
+import { createField, integerSequence, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
+import { defaultHeight, defaultWidth, getFieldId, getFieldOptionId, removeCssTransform, updateCssTransform } from "../../../utils/utils";
+import { h, Host } from "@stencil/core";
+import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
+import { getTemplateStore } from "../../../utils/TemplateStore";
+import { SDKError } from "../../../utils/errors";
 const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconTextarea = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
 const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
@@ -19,532 +17,541 @@ const iconTimestamp = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width
 const iconDropdown = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
 const separator = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';
 const menuOptions = [
-  { id: 'signature', tooltip: 'Signature', icon: iconSignature },
-  { id: 'initial', tooltip: 'Initials', icon: iconInitial },
-  { id: 'sep1', tooltip: '', icon: separator },
-  { id: 'textbox', tooltip: 'Text Box', icon: iconTextbox },
-  { id: 'textarea', tooltip: 'Text Area', icon: iconTextarea },
-  { id: 'checkbox_group', tooltip: 'Check Box', icon: iconCheck },
-  { id: 'radio_button_group', tooltip: 'Radio Button', icon: iconRadio },
-  { id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown },
-  { id: 'sep2', tooltip: '', icon: separator },
-  { id: 'date', tooltip: 'Date', icon: iconDatepicker },
-  { id: 'timestamp', tooltip: 'Timestamp', icon: iconTimestamp },
-  // {id: 'sep3', tooltip: '', icon: separator},
-  // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
-  // {id: 'payment', tooltip: 'Payment', icon: 'P'},
+    { id: 'signature', tooltip: 'Signature', icon: iconSignature },
+    { id: 'initial', tooltip: 'Initials', icon: iconInitial },
+    { id: 'sep1', tooltip: '', icon: separator },
+    { id: 'textbox', tooltip: 'Text Box', icon: iconTextbox },
+    { id: 'textarea', tooltip: 'Text Area', icon: iconTextarea },
+    { id: 'checkbox_group', tooltip: 'Check Box', icon: iconCheck },
+    { id: 'radio_button_group', tooltip: 'Radio Button', icon: iconRadio },
+    { id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown },
+    { id: 'sep2', tooltip: '', icon: separator },
+    { id: 'date', tooltip: 'Date', icon: iconDatepicker },
+    { id: 'timestamp', tooltip: 'Timestamp', icon: iconTimestamp },
+    // {id: 'sep3', tooltip: '', icon: separator},
+    // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
+    // {id: 'payment', tooltip: 'Payment', icon: 'P'},
 ];
 /**
  * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to
  * present all of the required controls, so it is primarily intended to be used in desktop environments.
  */
 export class VerdocsTemplateFields {
-  constructor() {
-    this.pageHeights = {};
-    this.templateStore = null;
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.cachedPageInfo = {};
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = null;
-    this.toolbarTargetId = null;
-    this.placing = null;
-    this.showMustSelectRole = false;
-    this.selectedRoleName = '';
-    this.loading = true;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[FIELDS] Unable to start builder session, must be authenticated');
-        return;
-      }
-      getTemplateStore(this.endpoint, this.templateId, true)
-        .then(ts => {
-        var _a, _b;
-        this.templateStore = ts;
-        this.fieldStore = getTemplateFieldStore(this.templateId);
-        this.roleStore = getTemplateRoleStore(this.templateId);
-        this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
-        this.loading = false;
-        this.fieldStore.onChange('fields', fields => {
-          var _a;
-          console.log('[FIELDS] Fields changed', { fields });
-          (_a = this.fieldsUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields });
-        });
-      })
-        .catch(e => {
-        console.log(e);
-      });
+    constructor() {
+        this.pageHeights = {};
+        this.templateStore = null;
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.cachedPageInfo = {};
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = null;
+        this.toolbarTargetId = null;
+        this.placing = null;
+        this.showMustSelectRole = false;
+        this.selectedRoleName = '';
+        this.loading = true;
     }
-    catch (e) {
-      console.log('[FIELDS] 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));
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[FIELDS] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[FIELDS] Unable to start builder session, must be authenticated');
+                return;
+            }
+            getTemplateStore(this.endpoint, this.templateId, true)
+                .then(ts => {
+                var _a, _b;
+                this.templateStore = ts;
+                this.fieldStore = getTemplateFieldStore(this.templateId);
+                this.roleStore = getTemplateRoleStore(this.templateId);
+                this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
+                this.loading = false;
+                this.fieldStore.onChange('fields', fields => {
+                    var _a;
+                    console.log('[FIELDS] Fields changed', { fields });
+                    (_a = this.fieldsUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields });
+                });
+            })
+                .catch(e => {
+                console.log(e);
+            });
+        }
+        catch (e) {
+            console.log('[FIELDS] 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));
+        }
     }
-  }
-  componentDidRender() {
-    interact.dynamicDrop(true);
-    const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;
-    const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');
-    if (toolbarTarget && toolbarEl) {
-      console.log('[FIELDS] Moving toolbar');
-      toolbarEl.remove();
-      toolbarTarget.append(toolbarEl);
+    componentDidRender() {
+        interact.dynamicDrop(true);
+        const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;
+        const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');
+        if (toolbarTarget && toolbarEl) {
+            console.log('[FIELDS] Moving toolbar');
+            toolbarEl.remove();
+            toolbarTarget.append(toolbarEl);
+        }
     }
-  }
-  componentWillUpdate() {
-    var _a;
-    // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
-    const roles = this.roleStore.get('roles');
-    if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
-      this.selectedRoleName = ((_a = roles[0]) === null || _a === void 0 ? void 0 : _a.name) || '';
-      console.log('[FIELDS] Selected new role', this.selectedRoleName);
+    componentWillUpdate() {
+        var _a;
+        // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
+        const roles = this.roleStore.get('roles');
+        if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
+            this.selectedRoleName = ((_a = roles[0]) === null || _a === void 0 ? void 0 : _a.name) || '';
+            console.log('[FIELDS] Selected new role', this.selectedRoleName);
+        }
     }
-  }
-  // Stop field-placement mode if ESC is pressed
-  handleKeyDown(ev) {
-    if (ev.key === 'Escape') {
-      this.placing = null;
+    // Stop field-placement mode if ESC is pressed
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.placing = null;
+        }
     }
-  }
-  async handleFieldChange(field, e, optionId) {
-    console.log('[FIELDS] handleFieldChange', field, e, optionId);
-  }
-  attachFieldAttributes(pageInfo, field, el) {
-    el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', e => {
-      var _a, _b;
-      console.log('Settings changed', e.detail);
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
-    });
-    el.addEventListener('deleted', () => {
-      var _a, _b;
-      console.log('[FIELDS] Deleted', this, field);
-      el.remove();
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
-    });
-    el.setAttribute('templateid', this.templateId);
-    el.setAttribute('fieldname', field.name);
-    el.setAttribute('pageNumber', pageInfo.pageNumber);
-    el.setAttribute('xScale', pageInfo.xScale);
-    el.setAttribute('yScale', pageInfo.yScale);
-    el.setAttribute('name', field.name);
-  }
-  handlePageRendered(e) {
-    const pageInfo = e.detail;
-    // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo.xScale, pageInfo.yScale);
-    this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
-    this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    this.fieldStore
-      .get('fields')
-      .filter(field => field && field.page_sequence === pageInfo.pageNumber)
-      .forEach(field => {
-      // TODO: Why isn't the attr already on the element carrying through?
-      switch (field.type) {
-        case 'checkbox_group':
-        case 'radio_button_group':
-          (field.settings || field.setting || {}).options.map((_, index) => {
-            const id = getFieldOptionId(field, index);
-            const el = document.getElementById(id);
-            if (el) {
-              el.setAttribute('fieldname', field.name);
-              el.setAttribute('pagenumber', String(field.page_sequence));
-              this.makeDraggable(el);
-            }
-          });
-          break;
-        default:
-          const id = getFieldId(field);
-          const el = document.getElementById(id);
-          if (el) {
-            el.setAttribute('fieldname', field.name);
-            el.setAttribute('pagenumber', String(field.page_sequence));
-            this.makeDraggable(el);
-          }
-          break;
-      }
-    });
-  }
-  makeDraggable(el) {
-    interact(el).draggable({
-      listeners: {
-        move: this.handleMoveField.bind(this),
-        end: this.handleMoveEnd.bind(this),
-      },
-    });
-  }
-  async handleMoveField(event) {
-    const oldX = +(event.target.getAttribute('posX') || 0);
-    const oldY = +(event.target.getAttribute('posY') || 0);
-    const xScale = +(event.target.getAttribute('xScale') || 1);
-    const yScale = +(event.target.getAttribute('yScale') || 1);
-    const newX = event.dx / xScale + oldX;
-    const newY = event.dy / yScale + oldY;
-    event.target.setAttribute('posX', newX);
-    event.target.setAttribute('posy', newY);
-    updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-  }
-  async handleMoveEnd(event) {
-    var _a, _b;
-    const name = event.target.getAttribute('fieldname');
-    const option = +(event.target.getAttribute('option') || '0');
-    const field = this.fieldStore.get('fields').find(field => field.name === name);
-    if (!field) {
-      console.log('[FIELDS] Unable to find field', name, event.target);
-      return;
+    async handleFieldChange(field, e, optionId) {
+        console.log('[FIELDS] handleFieldChange', field, e, optionId);
     }
-    const pageNumber = event.target.getAttribute('pagenumber');
-    const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
-    const clientRect = event.target.getBoundingClientRect();
-    const parent = event.target.parentElement;
-    const parentRect = parent.getBoundingClientRect();
-    const width = field.setting.width || defaultWidth(field.type);
-    const height = field.setting.height || defaultHeight(field.type);
-    // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
-    // "up" from the bottom (negative displacement).
-    const newX = Math.max(clientRect.left - parentRect.left, 0);
-    const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
-    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
-    switch (field.type) {
-      case 'attachment':
-      case 'payment':
-      case 'initial':
-      case 'signature':
-      case 'date':
-      case 'dropdown':
-      case 'textarea':
-      case 'textbox':
-      case 'timestamp':
-        field.setting.x = x;
-        field.setting.y = y;
-        break;
-      case 'checkbox_group':
-      case 'radio_button_group':
-        {
-          const opt = field.setting.options[option];
-          if (opt) {
-            opt.x = x;
-            opt.y = y;
-          }
-        }
-        break;
+    attachFieldAttributes(pageInfo, field, el) {
+        el.addEventListener('input', e => this.handleFieldChange(field, e));
+        el.addEventListener('settingsChanged', e => {
+            var _a, _b;
+            console.log('Settings changed', e.detail);
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
+        });
+        el.addEventListener('deleted', () => {
+            var _a, _b;
+            console.log('[FIELDS] Deleted', this, field);
+            el.remove();
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+        });
+        el.setAttribute('templateid', this.templateId);
+        el.setAttribute('fieldname', field.name);
+        el.setAttribute('pageNumber', pageInfo.pageNumber);
+        el.setAttribute('xScale', pageInfo.xScale);
+        el.setAttribute('yScale', pageInfo.yScale);
+        el.setAttribute('name', field.name);
     }
-    console.log('[FIELDS] Will update', name, y, option, field);
-    const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
-    updateStoreField(this.fieldStore, name, newFieldData);
-    event.target.removeAttribute('posX');
-    event.target.removeAttribute('posY');
-    removeCssTransform(event.target);
-    (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
-  }
-  generateFieldName(type, pageNumber) {
-    let i = 1;
-    let fieldName;
-    do {
-      fieldName = `${type}P${pageNumber}-${i}`;
-      i++;
-    } while (this.fieldStore.get('fields').some(field => field && field.name === fieldName));
-    return fieldName;
-  }
-  // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
-  viewCoordinatesToPageCoordinates(viewX, viewY, pageNumber, xMax, yMax) {
-    const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
-    const x = Math.floor(Math.min(viewX / xScale, xMax));
-    const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
-    return { x, y };
-  }
-  async handleClickPage(e, pageNumber) {
-    var _a, _b;
-    if (this.placing) {
-      const clickedX = e.offsetX;
-      const clickedY = e.offsetY;
-      const width = defaultWidth(this.placing);
-      const height = defaultHeight(this.placing);
-      const cachedPage = this.cachedPageInfo[pageNumber];
-      const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
-      const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
-      const x = Math.floor(coords.x);
-      const y = Math.floor(coords.y);
-      const field = {
-        name: this.generateFieldName(this.placing, pageNumber),
-        role_name: this.selectedRoleName,
-        template_id: this.templateId,
-        document_id: cachedPage.documentId,
-        type: this.placing,
-        required: true,
-        page_sequence: pageNumber,
-        validator: null,
-        setting: { x, y },
-        x,
-        y,
-        tabindex: 0,
-        width,
-        height,
-      };
-      console.log('[FIELDS] Will save new field', field);
-      // TODO: Fix how the server validates all this. It uses a JSON schema and is very particular about shapes for each field type.
-      //  That makes it harder for third party developers to create fields via API calls. It would be better to always set X/Y and
-      //  let the server normalize the rest, discarding properties that are invalid and back-filling defaults as needed.
-      switch (field.type) {
-        case 'attachment':
-        case 'payment':
-          field.setting = { x, y };
-          break;
-        case 'initial':
-        case 'signature':
-          field.setting = { x, y, result: '' };
-          break;
-        case 'checkbox_group':
-          // @ts-ignore
-          field.setting = {
-            minimum_checked: 0,
-            maximum_checked: 1000,
-            options: [
-              {
-                id: `${field.name}-1`,
-                value: 'Option 1',
-                checked: false,
-                x,
-                y,
-              },
-            ],
-          };
-          break;
-        case 'date':
-          field.setting = { x, y, width, height, result: '' };
-          break;
-        case 'dropdown':
-          field.required = false;
-          field.setting = { x, y, width, height, value: null, placeholder: 'Choose', options: [{ id: 'option-1', value: 'Option 1' }] };
-          break;
-        case 'radio_button_group':
-          // @ts-ignore
-          field.setting = {
-            options: [
-              {
-                id: `${field.name}-1`,
-                value: 'Option 1',
-                selected: false,
-                x,
-                y,
-              },
-            ],
-          };
-          break;
-        // TODO: What about textareas?
-        case 'textarea':
-        case 'textbox':
-          field.setting = { x, y, width, height, result: '', leading: 0, alignment: 0, upperCase: false };
-          break;
-        case 'timestamp':
-          field.setting = { x, y, width, height };
-          break;
-      }
-      // TODO: We don't actually have a unique field type for multi-line text. Instead a "text area" is stored
-      // as a textbox with a leading>0 (typically 16).
-      if (field.type === 'textarea') {
-        field.setting.leading = 16;
-        field.type = 'textbox';
-      }
-      const saved = await createField(this.endpoint, this.templateId, field);
-      console.log('[FIELDS] Saved field', saved);
-      this.fieldStore.set('fields', [...this.fieldStore.get('fields'), saved]);
-      this.placing = null;
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
+    handlePageRendered(e) {
+        const pageInfo = e.detail;
+        // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo.xScale, pageInfo.yScale);
+        this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
+        this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
+        this.fieldStore
+            .get('fields')
+            .filter(field => field && field.page === pageInfo.pageNumber)
+            .forEach(field => {
+            // TODO: Why isn't the attr already on the element carrying through?
+            switch (field.type) {
+                case 'checkbox_group':
+                case 'radio_button_group':
+                    (field.settings || {}).options.map((_, index) => {
+                        const id = getFieldOptionId(field, index);
+                        const el = document.getElementById(id);
+                        if (el) {
+                            el.setAttribute('fieldname', field.name);
+                            el.setAttribute('pagenumber', String(field.page));
+                            this.makeDraggable(el);
+                        }
+                    });
+                    break;
+                default:
+                    const id = getFieldId(field);
+                    const el = document.getElementById(id);
+                    if (el) {
+                        el.setAttribute('fieldname', field.name);
+                        el.setAttribute('pagenumber', String(field.page));
+                        this.makeDraggable(el);
+                    }
+                    break;
+            }
+        });
     }
-  }
-  render() {
-    var _a, _b, _c;
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    makeDraggable(el) {
+        interact(el).draggable({
+            listeners: {
+                move: this.handleMoveField.bind(this),
+                end: this.handleMoveEnd.bind(this),
+            },
+        });
     }
-    if (this.loading || !((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
-      return (h(Host, null, h("verdocs-loader", null)));
+    async handleMoveField(event) {
+        const oldX = +(event.target.getAttribute('posX') || 0);
+        const oldY = +(event.target.getAttribute('posY') || 0);
+        const xScale = +(event.target.getAttribute('xScale') || 1);
+        const yScale = +(event.target.getAttribute('yScale') || 1);
+        const newX = event.dx / xScale + oldX;
+        const newY = event.dy / yScale + oldY;
+        event.target.setAttribute('posX', newX);
+        event.target.setAttribute('posy', newY);
+        updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
     }
-    const selectableRoles = this.roleStore.get('roles').map(role => ({ value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name }));
-    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, onSubmit: () => { } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
-        // We ignore empty-tooltip entries because they're separators
-        if (option.tooltip) {
-          // We require a role to be selected first
-          if (this.selectedRoleName) {
-            this.placing = option.id;
-          }
-          else {
-            this.showMustSelectRole = true;
-          }
+    async handleMoveEnd(event) {
+        var _a, _b;
+        const name = event.target.getAttribute('fieldname');
+        const option = +(event.target.getAttribute('option') || '0');
+        const field = this.fieldStore.get('fields').find(field => field.name === name);
+        if (!field) {
+            console.log('[FIELDS] Unable to find field', name, event.target);
+            return;
+        }
+        const pageNumber = event.target.getAttribute('pagenumber');
+        const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
+        const clientRect = event.target.getBoundingClientRect();
+        const parent = event.target.parentElement;
+        const parentRect = parent.getBoundingClientRect();
+        const width = field.settings.width || defaultWidth(field.type);
+        const height = field.settings.height || defaultHeight(field.type);
+        // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
+        // "up" from the bottom (negative displacement).
+        const newX = Math.max(clientRect.left - parentRect.left, 0);
+        const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
+        const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
+        switch (field.type) {
+            case 'attachment':
+            case 'payment':
+            case 'initial':
+            case 'signature':
+            case 'date':
+            case 'dropdown':
+            case 'textarea':
+            case 'textbox':
+            case 'timestamp':
+                field.settings.x = x;
+                field.settings.y = y;
+                break;
+            case 'checkbox_group':
+            case 'radio_button_group':
+                {
+                    const opt = field.settings.options[option];
+                    if (opt) {
+                        opt.x = x;
+                        opt.y = y;
+                    }
+                }
+                break;
         }
-      } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.template_documents) || []).map(document => {
-      const pageNumbers = integerSequence(1, document.page_numbers);
-      return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
-          { name: 'page', type: 'canvas' },
-          { name: 'controls', type: 'div' },
-        ] })));
-    })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
-  }
-  static get is() { return "verdocs-template-fields"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-template-fields.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-template-fields.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "endpoint": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "VerdocsEndpoint",
-          "resolved": "VerdocsEndpoint",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
+        console.log('[FIELDS] Will update', name, y, option, field);
+        const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
+        updateStoreField(this.fieldStore, name, newFieldData);
+        event.target.removeAttribute('posX');
+        event.target.removeAttribute('posY');
+        removeCssTransform(event.target);
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+    }
+    generateFieldName(type, pageNumber) {
+        let i = 1;
+        let fieldName;
+        do {
+            fieldName = `${type}P${pageNumber}-${i}`;
+            i++;
+        } while (this.fieldStore.get('fields').some(field => field && field.name === fieldName));
+        return fieldName;
+    }
+    // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
+    viewCoordinatesToPageCoordinates(viewX, viewY, pageNumber, xMax, yMax) {
+        const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
+        const x = Math.floor(Math.min(viewX / xScale, xMax));
+        const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
+        return { x, y };
+    }
+    async handleClickPage(e, pageNumber) {
+        var _a, _b;
+        if (this.placing) {
+            const clickedX = e.offsetX;
+            const clickedY = e.offsetY;
+            const width = defaultWidth(this.placing);
+            const height = defaultHeight(this.placing);
+            const cachedPage = this.cachedPageInfo[pageNumber];
+            const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
+            const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
+            const x = Math.floor(coords.x);
+            const y = Math.floor(coords.y);
+            const field = {
+                name: this.generateFieldName(this.placing, pageNumber), //  'textboxP1-22',
+                role_name: this.selectedRoleName,
+                template_id: this.templateId,
+                document_id: cachedPage.documentId,
+                type: this.placing,
+                required: true,
+                page: pageNumber,
+                validator: null,
+                label: null,
+                default: null,
+                placeholder: null,
+                group: null,
+                settings: { x, y }, // In the future, this is all we should send, see below
+                x,
+                y,
+                width,
+                height,
+            };
+            console.log('[FIELDS] Will save new field', field);
+            // TODO: Fix how the server validates all this. It uses a JSON schema and is very particular about shapes for each field type.
+            //  That makes it harder for third party developers to create fields via API calls. It would be better to always set X/Y and
+            //  let the server normalize the rest, discarding properties that are invalid and back-filling defaults as needed.
+            switch (field.type) {
+                case 'attachment':
+                case 'payment':
+                    field.settings = { x, y };
+                    break;
+                case 'initial':
+                case 'signature':
+                    field.settings = { x, y, result: '' };
+                    break;
+                case 'checkbox_group':
+                    // @ts-ignore
+                    field.setting = {
+                        minimum_checked: 0,
+                        maximum_checked: 1000,
+                        options: [
+                            {
+                                id: `${field.name}-1`,
+                                value: 'Option 1',
+                                checked: false,
+                                x,
+                                y,
+                            },
+                        ],
+                    };
+                    break;
+                case 'date':
+                    field.settings = { x, y, width, height, result: '' };
+                    break;
+                case 'dropdown':
+                    field.required = false;
+                    field.settings = { x, y, width, height, value: null, placeholder: 'Choose', options: [{ id: 'option-1', value: 'Option 1' }] };
+                    break;
+                case 'radio_button_group':
+                    // @ts-ignore
+                    field.setting = {
+                        options: [
+                            {
+                                id: `${field.name}-1`,
+                                value: 'Option 1',
+                                selected: false,
+                                x,
+                                y,
+                            },
+                        ],
+                    };
+                    break;
+                // TODO: What about textareas?
+                case 'textarea':
+                case 'textbox':
+                    field.settings = { x, y, width, height, result: '', leading: 0, alignment: 0, upperCase: false };
+                    break;
+                case 'timestamp':
+                    field.settings = { x, y, width, height };
+                    break;
             }
-          }
-        },
-        "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 | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The ID of the template to create the document from."
-        },
-        "attribute": "template-id",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "toolbarTargetId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the toolbar will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects.\n\nThe movement of the toolbar to the target container is not dynamic - it is performed only on the initial\nrender. Host applications should not conditionally render this container. If the toolbar's visibility must\nbe externally controlled, use CSS display options to hide/show it instead."
-        },
-        "attribute": "toolbar-target-id",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "placing": {},
-      "showMustSelectRole": {},
-      "selectedRoleName": {},
-      "loading": {}
-    };
-  }
-  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"
+            // TODO: We don't actually have a unique field type for multi-line text. Instead a "text area" is stored
+            // as a textbox with a leading>0 (typically 16).
+            if (field.type === 'textarea') {
+                field.settings.leading = 16;
+                field.type = 'textbox';
             }
-          }
+            const saved = await createField(this.endpoint, this.templateId, field);
+            console.log('[FIELDS] Saved field', saved);
+            this.fieldStore.set('fields', [...this.fieldStore.get('fields'), saved]);
+            this.placing = null;
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
         }
-      }, {
-        "method": "templateUpdated",
-        "name": "templateUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; template: ITemplate; event: string}",
-          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; event: string; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            },
-            "ITemplate": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
-            }
-          }
+    }
+    render() {
+        var _a, _b, _c;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-      }, {
-        "method": "fieldsUpdated",
-        "name": "fieldsUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; fields: ITemplateField[]}",
-          "resolved": "{ endpoint: VerdocsEndpoint; templateId: string; event: \"added\" | \"deleted\" | \"updated\"; fields: ITemplateField[]; }",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
+        if (this.loading || !((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
+        const selectableRoles = this.roleStore.get('roles').map(role => ({ value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name }));
+        return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, onSubmit: () => { } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
+                // We ignore empty-tooltip entries because they're separators
+                if (option.tooltip) {
+                    // We require a role to be selected first
+                    if (this.selectedRoleName) {
+                        this.placing = option.id;
+                    }
+                    else {
+                        this.showMustSelectRole = true;
+                    }
+                }
+            } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.documents) || []).map(document => {
+            const pageNumbers = integerSequence(1, document.pages);
+            return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
+                    { name: 'page', type: 'canvas' },
+                    { name: 'controls', type: 'div' },
+                ] })));
+        })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
+    }
+    static get is() { return "verdocs-template-fields"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-template-fields.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-template-fields.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerdocsEndpoint",
+                    "resolved": "VerdocsEndpoint",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "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 | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the template to create the document from."
+                },
+                "attribute": "template-id",
+                "reflect": false,
+                "defaultValue": "null"
             },
-            "ITemplateField": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
+            "toolbarTargetId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the toolbar will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects.\n\nThe movement of the toolbar to the target container is not dynamic - it is performed only on the initial\nrender. Host applications should not conditionally render this container. If the toolbar's visibility must\nbe externally controlled, use CSS display options to hide/show it instead."
+                },
+                "attribute": "toolbar-target-id",
+                "reflect": false,
+                "defaultValue": "null"
             }
-          }
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "placing": {},
+            "showMustSelectRole": {},
+            "selectedRoleName": {},
+            "loading": {}
+        };
+    }
+    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",
+                            "id": "src/utils/errors.ts::SDKError"
+                        }
+                    }
+                }
+            }, {
+                "method": "templateUpdated",
+                "name": "templateUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; template: ITemplate; event: string}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; event: string; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "ITemplate": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }, {
+                "method": "fieldsUpdated",
+                "name": "fieldsUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; fields: ITemplateField[]}",
+                    "resolved": "{ endpoint: VerdocsEndpoint; templateId: string; event: \"added\" | \"deleted\" | \"updated\"; fields: ITemplateField[]; }",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "ITemplateField": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }