@verdocs/web-sdk 2.3.15 → 2.3.18

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

@@ -1,62 +1,77 @@
 import { format } from 'date-fns';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
-import { h, Host } from '@stencil/core';
+import { h, Host, Fragment } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 import { FORMAT_TIMESTAMP } from '../../../utils/Types';
+import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 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 timestamp field.
  */
 export class VerdocsFieldTimestamp {
   constructor() {
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
   }
   async focusField() {
     this.el.focus();
   }
   async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }
   }
   async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
     // TemplateStore.updateCount++;
   }
+  async componentWillLoad() {
+    this.fieldStore = getTemplateFieldStore(this.templateid);
+  }
   render() {
-    var _a, _b, _c;
-    const settings = getFieldSettings(this.field);
+    var _a, _b;
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
+    const settings = getFieldSettings(field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
     const formatted = format(dt, FORMAT_TIMESTAMP);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
+    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, 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: () => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
+        e.stopPropagation();
+        this.showingProperties = !this.showingProperties;
+      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
         var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      } })))));
+      }, helpText: 'Time stamps are automatically set when the recipient signs the document.' })))))));
   }
   static get is() { return "verdocs-field-timestamp"; }
   static get originalStyleUrls() {
@@ -89,30 +104,23 @@ export class VerdocsFieldTimestamp {
         "reflect": false,
         "defaultValue": "''"
       },
-      "field": {
-        "type": "unknown",
+      "fieldname": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IEnvelopeField | ITemplateField | null",
-          "resolved": "IEnvelopeField | ITemplateField",
-          "references": {
-            "IEnvelopeField": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
-            },
-            "ITemplateField": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The document or template field to display."
+          "text": "The name of the field to display."
         },
-        "defaultValue": "null"
+        "attribute": "fieldname",
+        "reflect": false,
+        "defaultValue": "''"
       },
       "disabled": {
         "type": "boolean",
@@ -221,9 +229,50 @@ export class VerdocsFieldTimestamp {
         "attribute": "rerender",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "xscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled horizontally by this factor."
+        },
+        "attribute": "xscale",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "yscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled vertically by this factor."
+        },
+        "attribute": "yscale",
+        "reflect": false,
+        "defaultValue": "1"
       }
     };
   }
+  static get states() {
+    return {
+      "showingProperties": {}
+    };
+  }
   static get events() {
     return [{
         "method": "settingsChanged",

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

@@ -1,5 +1,11 @@
 verdocs-template-field-properties {
+  padding: 20px;
+  display: block;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #ccc;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  box-shadow: 2px 2px 10px 0px #0000001f;
 }
 verdocs-template-field-properties .buttons {
   display: flex;

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

@@ -2,6 +2,7 @@ import uuidv4 from 'uuid-browser';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { deleteField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
+import { createTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
@@ -12,21 +13,23 @@ const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"
  */
 export class VerdocsTemplateFieldProperties {
   constructor() {
-    this.store = null;
+    this.templateStore = null;
+    this.fieldStore = null;
+    this.watcher = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
     this.helpText = '';
     this.dirty = false;
     this.loading = true;
-    this.type = 'signature';
     this.setting = null;
     this.label = '';
+    this.type = 'textbox';
     this.name = '';
+    this.required = false;
     this.roleName = '';
     this.group = '';
     this.fieldType = '';
-    this.required = false;
     this.options = [];
     this.placeholder = '';
     this.value = '';
@@ -34,7 +37,7 @@ export class VerdocsTemplateFieldProperties {
     this.showingHelp = false;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
@@ -49,11 +52,37 @@ export class VerdocsTemplateFieldProperties {
         console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
+      this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
+      createTemplateFieldStore(this.templateStore.state);
+      this.fieldStore = await createTemplateFieldStore(this.templateStore.state);
+      // console.log('tfs', this.fieldStore?.state);
+      const field = this.fieldStore.get(this.fieldName);
+      // console.log('gf', field);
       if (!field) {
-        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
+        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
+      }
+      else {
+        console.log('props', field);
       }
+      this.watcher = this.fieldStore.onChange(this.fieldName, field => {
+        console.log('Field changed', field);
+        // this.type = field.type;
+        // this.name = field.name;
+        // this.label = field.label;
+        // this.group = field.name;
+        // this.roleName = field.role_name;
+        // this.required = field.required;
+        // this.fieldType = field.type;
+        // // TODO: Talk about how we want to handle labels/placeholders
+        // this.placeholder = field.setting?.placeholder || '';
+        // this.value = field.setting?.result || '';
+        // this.leading = field.setting?.leading || 0;
+        // this.setting = field.setting || {};
+        // this.options = field.setting?.options || [];
+        // this.dirty = false;
+        // this.loading = false;
+      });
+      console.log('watcher', this.watcher);
       this.type = field.type;
       this.name = field.name;
       this.label = field.label;
@@ -62,36 +91,37 @@ export class VerdocsTemplateFieldProperties {
       this.required = field.required;
       this.fieldType = field.type;
       // TODO: Talk about how we want to handle labels/placeholders
-      this.placeholder = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
-      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
-      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
+      this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+      this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
+      this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
       this.setting = field.setting || {};
-      this.options = ((_f = field.setting) === null || _f === void 0 ? void 0 : _f.options) || [];
+      this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
       this.dirty = false;
       this.loading = false;
+      console.log('Displaying settings for', this.setting);
     }
     catch (e) {
       console.log('[FIELD PROPERTIES] Error loading template', e);
       this.loading = false;
-      (_g = this.sdkError) === null || _g === void 0 ? void 0 : _g.emit(new SDKError(e.message, (_h = e.response) === null || _h === void 0 ? void 0 : _h.status, (_j = e.response) === null || _j === void 0 ? void 0 : _j.data));
+      (_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));
     }
   }
   handleCancel(e) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     e.stopPropagation();
-    const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
+    const field = this.fieldStore.get(this.fieldName);
     if (field) {
       this.name = field.name;
       this.label = field.label;
       this.roleName = field.role_name;
       this.required = field.required;
       // TODO: Talk about how we want to handle labels/placeholders
-      this.placeholder = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
-      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
-      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
+      this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+      this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
+      this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
     }
     this.dirty = false;
-    (_f = this.close) === null || _f === void 0 ? void 0 : _f.emit();
+    (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
   }
   handleSave(e) {
     e.stopPropagation();
@@ -117,6 +147,7 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
+    console.log('FP: Will update', this.fieldName, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(field => {
       var _a, _b;
@@ -168,33 +199,18 @@ export class VerdocsTemplateFieldProperties {
     });
   }
   updateField(newField) {
-    const newFields = [...this.store.state.fields];
-    newFields.forEach(field => {
-      if (field.name === this.fieldName) {
-        Object.assign(field, newField);
-        // field.name = this.name;
-        // field.role_name = this.roleName;
-        // field.required = this.required;
-        // field.label = this.placeholder;
-        // field.setting.result = this.defaultValue;
-        // if (field.setting.options) {
-        //   field.setting.options = this.options;
-        // }
-      }
-    });
-    this.store.state.fields = newFields;
+    const oldField = this.fieldStore.get(this.fieldName) || {};
+    console.log('Updating field', this.fieldName, newField);
+    Object.assign(oldField, newField);
   }
   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(() => {
-        var _a, _b, _c, _d, _e;
-        this.store.state.fields = [...(_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.name !== this.fieldName)];
-        (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.forEach(role => {
-          role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
-        });
-        (_e = this.delete) === null || _e === void 0 ? void 0 : _e.emit({ templateId: this.templateId, roleName: this.roleName });
+        var _a;
+        this.fieldStore.set(this.fieldName, undefined);
+        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
         console.log('[FIELD PROPERTIES] Deletion error', e);
@@ -202,17 +218,19 @@ export class VerdocsTemplateFieldProperties {
     }
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a;
+    // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
     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 || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
+    if (!this.endpoint.session || !this.fieldStore.get(this.fieldName)) {
       return h(Host, { class: "empty" });
     }
     if (this.helpText && this.showingHelp) {
       return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
     }
+    // console.log('tfp', this.templateId, this.fieldName);
     return (h(Host, null, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), 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) => {
@@ -223,7 +241,7 @@ export class VerdocsTemplateFieldProperties {
       placeholder: "Optional Label...", onInput: (e) => {
         this.label = e.target.value;
         this.dirty = true;
-      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.templateStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
       } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
@@ -355,14 +373,14 @@ export class VerdocsTemplateFieldProperties {
     return {
       "dirty": {},
       "loading": {},
-      "type": {},
       "setting": {},
       "label": {},
+      "type": {},
       "name": {},
+      "required": {},
       "roleName": {},
       "group": {},
       "fieldType": {},
-      "required": {},
       "options": {},
       "placeholder": {},
       "value": {},