@verdocs/web-sdk 2.3.16 → 2.3.18

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

@@ -1,5 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
-import { h, Host } from '@stencil/core';
+import { h, Host, Fragment } from '@stencil/core';
+import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
@@ -9,8 +10,9 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldAttachment {
   constructor() {
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
@@ -19,6 +21,7 @@ export class VerdocsFieldAttachment {
     this.xscale = 1;
     this.yscale = 1;
     this.rerender = 0;
+    this.showingProperties = false;
   }
   async focusField() {
     this.handleShow();
@@ -36,34 +39,43 @@ export class VerdocsFieldAttachment {
     document.body.append(this.dialog);
   }
   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();
     }
   }
+  async componentWillLoad() {
+    this.fieldStore = getTemplateFieldStore(this.templateid);
+  }
   render() {
     var _a, _b;
-    const settings = getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
+    const settings = getFieldSettings(field);
     let 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 { url } = settings;
     console.log('Attachment settings', url, settings);
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), 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;
-        console.log('here');
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      }, helpText: 'Attachment fields allow files to be uploaded during signing. Files will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must attach a file before proceeding.' })))));
+      }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' })))))));
   }
   static get is() { return "verdocs-field-attachment"; }
   static get originalStyleUrls() {
@@ -96,30 +108,23 @@ export class VerdocsFieldAttachment {
         "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",
@@ -267,6 +272,11 @@ export class VerdocsFieldAttachment {
       }
     };
   }
+  static get states() {
+    return {
+      "showingProperties": {}
+    };
+  }
   static get events() {
     return [{
         "method": "settingsChanged",

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

@@ -56,4 +56,18 @@ verdocs-field-checkbox verdocs-button-panel {
   margin-left: -20px;
   margin-top: -17px;
   transform: scale(0.7);
+}
+verdocs-field-checkbox .settings-icon {
+  position: absolute;
+  top: -3px;
+  left: -20px;
+  display: inline-block;
+  cursor: pointer;
+  opacity: 0.6;
+}
+verdocs-field-checkbox .settings-icon svg {
+  fill: #707ae5;
+}
+verdocs-field-checkbox .settings-icon:hover {
+  opacity: 1;
 }

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

@@ -1,5 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
-import { h, Host } from '@stencil/core';
+import { Fragment, h, Host } from '@stencil/core';
+import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
 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>';
 /**
@@ -7,8 +8,9 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldCheckbox {
   constructor() {
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.option = 0;
     this.disabled = false;
     this.done = false;
@@ -16,38 +18,51 @@ export class VerdocsFieldCheckbox {
     this.editable = false;
     this.moveable = false;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
   }
   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, _d;
-    const settings = getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
+    const settings = getFieldSettings(field);
     const option = (_b = (_a = settings.options) === null || _a === void 0 ? void 0 : _a[this.option]) !== null && _b !== void 0 ? _b : { checked: false };
     const disabled = (_d = (_c = this.disabled) !== null && _c !== void 0 ? _c : settings.disabled) !== null && _d !== void 0 ? _d : false;
-    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: this.field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), 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: 'Check boxes allow the user to select one or more (non-exclusive) options.' }))))))));
   }
   static get is() { return "verdocs-field-checkbox"; }
   static get originalStyleUrls() {
@@ -80,30 +95,23 @@ export class VerdocsFieldCheckbox {
         "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": "''"
       },
       "option": {
         "type": "number",
@@ -230,9 +238,50 @@ export class VerdocsFieldCheckbox {
         "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/fields/verdocs-field-date/verdocs-field-date.css

@@ -863,6 +863,20 @@ verdocs-field-date verdocs-button-panel .icon svg {
 verdocs-field-date verdocs-button-panel .icon:hover svg {
   fill: #000000;
 }
+verdocs-field-date .settings-icon {
+  position: absolute;
+  top: -3px;
+  left: -20px;
+  display: inline-block;
+  cursor: pointer;
+  opacity: 0.6;
+}
+verdocs-field-date .settings-icon svg {
+  fill: #707ae5;
+}
+verdocs-field-date .settings-icon:hover {
+  opacity: 1;
+}
 
 .flatpickr-calendar {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;

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

@@ -1,30 +1,39 @@
 import { format } from 'date-fns';
 import flatpickr from 'flatpickr';
-import { h, Host } from '@stencil/core';
-import { getFieldSettings } from '../../../utils/utils';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { h, Host, Fragment } from '@stencil/core';
+import { getFieldSettings } from '../../../utils/utils';
 import { FORMAT_DATE } 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>';
 /**
  * Displays a date field. When tapped or clicked, the input element will display a date picker component.
  */
 export class VerdocsFieldDate {
   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.containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;
+    this.showingProperties = false;
   }
   async focusField() {
     this.el.focus();
   }
+  async componentWillLoad() {
+    this.fieldStore = getTemplateFieldStore(this.templateid);
+  }
   componentDidLoad() {
-    const { result } = getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    const { result } = getFieldSettings(field);
     flatpickr('#' + this.containerId, {
       positionElement: this.el,
       // NOTE: This uses different tokens from date-fns::format().
@@ -43,36 +52,43 @@ export class VerdocsFieldDate {
     // });
   }
   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();
     }
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   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);
     if (this.done) {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), FORMAT_DATE) : '';
       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", { name: this.field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { name: field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, 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: 'Date fields allow the user to select a date.' })))))));
   }
   static get is() { return "verdocs-field-date"; }
   static get originalStyleUrls() {
@@ -105,30 +121,23 @@ export class VerdocsFieldDate {
         "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",
@@ -237,12 +246,49 @@ export class VerdocsFieldDate {
         "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 {
-      "containerId": {}
+      "containerId": {},
+      "showingProperties": {}
     };
   }
   static get events() {

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

@@ -46,4 +46,18 @@ verdocs-field-dropdown verdocs-button-panel {
   margin-left: -33px;
   margin-top: -1px;
   transform: scale(0.7);
+}
+verdocs-field-dropdown .settings-icon {
+  position: absolute;
+  top: -2px;
+  left: -20px;
+  display: inline-block;
+  cursor: pointer;
+  opacity: 0.6;
+}
+verdocs-field-dropdown .settings-icon svg {
+  fill: #707ae5;
+}
+verdocs-field-dropdown .settings-icon:hover {
+  opacity: 1;
 }