@verdocs/web-sdk 2.0.16 → 2.0.19

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

@@ -1,9 +1,11 @@
 verdocs-field-attachment {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  box-sizing: border-box;
   width: 24px;
   height: 24px;
   display: block;
   font-size: 11px;
+  position: relative;
   background-color: transparent;
   transform-origin: bottom left;
 }
@@ -22,4 +24,22 @@ verdocs-field-attachment.required span {
 }
 verdocs-field-attachment.focused {
   animation: verdocs-field-pulse 0.75s 2;
+}
+verdocs-field-attachment verdocs-button-panel {
+  top: 1px;
+  left: -19px;
+  opacity: 0.5;
+  z-index: 1000;
+  cursor: pointer;
+  position: absolute;
+  transform: scale(0.6);
+}
+verdocs-field-attachment verdocs-button-panel[data-active], verdocs-field-attachment verdocs-button-panel:hover {
+  opacity: 1;
+}
+verdocs-field-attachment verdocs-button-panel .icon svg {
+  fill: #333333;
+}
+verdocs-field-attachment verdocs-button-panel .icon:hover svg {
+  fill: #000000;
 }

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

@@ -1,16 +1,23 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
+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>`;
+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 signature field. Various field types are supported, including traditional Signature and Initials types as well as
- * input types like text and checkbox.
+ * Displays an attachment field.
  */
 export class VerdocsFieldAttachment {
   constructor() {
     this.templateid = '';
     this.field = null;
     this.disabled = false;
-    this.roleIndex = 0;
+    this.editable = false;
+    this.moveable = false;
+    this.done = false;
+    this.roleindex = 0;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
   }
   async focusField() {
@@ -20,7 +27,16 @@ export class VerdocsFieldAttachment {
     this.dialog = document.createElement('verdocs-upload-dialog');
     this.dialog.open = true;
     this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
-    document.addEventListener('done', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
+    document.addEventListener('done', e => {
+      var _a;
+      console.log('Attachment done', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('next', e => {
+      var _a;
+      console.log('Attachment next', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
     document.body.append(this.dialog);
   }
   async showSettingsPanel() {
@@ -34,20 +50,24 @@ export class VerdocsFieldAttachment {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   render() {
-    var _a, _b, _c, _d;
-    let settings = { x: 0, y: 0 };
-    if ('settings' in this.field && ((_a = this.field) === null || _a === void 0 ? void 0 : _a.settings)) {
-      settings = this.field.settings;
-    }
-    else if ('setting' in this.field && ((_b = this.field) === null || _b === void 0 ? void 0 : _b.setting)) {
-      settings = this.field.setting;
-    }
-    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);
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: PaperclipIcon, onClick: () => !disabled && this.handleShow() })));
+    var _a, _b;
+    const settings = getFieldSettings(this.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 { 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: () => {
+        var _a;
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.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.' })))));
   }
   static get is() { return "verdocs-field-attachment"; }
   static get originalStyleUrls() {
@@ -123,7 +143,61 @@ export class VerdocsFieldAttachment {
         "reflect": false,
         "defaultValue": "false"
       },
-      "roleIndex": {
+      "editable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
+        },
+        "attribute": "editable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "moveable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
+        },
+        "attribute": "moveable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "done": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
+        },
+        "attribute": "done",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "roleindex": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -137,10 +211,46 @@ export class VerdocsFieldAttachment {
           "tags": [],
           "text": "If set, the field will be colored using this index value to select the background color."
         },
-        "attribute": "role-index",
+        "attribute": "roleindex",
         "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"
+      },
       "rerender": {
         "type": "number",
         "mutable": false,
@@ -186,6 +296,21 @@ export class VerdocsFieldAttachment {
             }
           }
         }
+      }, {
+        "method": "deleted",
+        "name": "deleted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the field is deleted."
+        },
+        "complexType": {
+          "original": "{fieldName: string}",
+          "resolved": "{ fieldName: string; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {

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

@@ -36,7 +36,6 @@ export class VerdocsFieldTextbox {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   componentDidRender() {
     interact.dynamicDrop(true);

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

@@ -15,4 +15,4 @@ export const Attachments = ({ onClose, templateId }) => templateId
           <verdocs-template-attachments .templateId=${templateId} @close=${onClose} />
         </div>
       `
-  : html `<img src="https://verdocs-public-assets.s3.amazonaws.com/storybook-placeholders/template-name.png" alt="Placeholder" />`;
+  : html `<img src="https://verdocs-public-assets.s3.amazonaws.com/storybook-placeholders/template-attachments.png" alt="Placeholder" />`;

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

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+    templateId: '',
   },
   argTypes: {},
   parameters: {

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

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

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

@@ -3,8 +3,7 @@ export default {
   title: 'Dialogs/Sender',
   component: 'verdocs-template-sender',
   args: {
-    templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
-    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+    templateId: '',
   },
   argTypes: {
     onClose: { action: 'close' },

package/dist/collection/utils/utils.js

@@ -97,6 +97,7 @@ export const updateDocumentFieldValue = (field) => {
 export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
   var _a, _b;
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
+  // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);

package/dist/components/utils.js

@@ -118,6 +118,7 @@ const updateDocumentFieldValue = (field) => {
 const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
   var _a, _b;
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
+  // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);

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

@@ -1,20 +1,36 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
-import { d as defineCustomElement$3 } from './verdocs-button2.js';
+import { g as getFieldSettings } from './utils.js';
+import { d as defineCustomElement$a } from './verdocs-button2.js';
+import { d as defineCustomElement$9 } from './verdocs-button-panel2.js';
+import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$6 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$4 } from './verdocs-template-field-properties2.js';
+import { d as defineCustomElement$3 } from './verdocs-text-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-upload-dialog2.js';
 
-const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{cursor:inherit;width:20px}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{cursor:inherit;width:20px}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}";
 
 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>`;
+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>';
 const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.templateid = '';
     this.field = null;
     this.disabled = false;
-    this.roleIndex = 0;
+    this.editable = false;
+    this.moveable = false;
+    this.done = false;
+    this.roleindex = 0;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
   }
   async focusField() {
@@ -24,7 +40,16 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.dialog = document.createElement('verdocs-upload-dialog');
     this.dialog.open = true;
     this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
-    document.addEventListener('done', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
+    document.addEventListener('done', e => {
+      var _a;
+      console.log('Attachment done', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('next', e => {
+      var _a;
+      console.log('Attachment next', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
     document.body.append(this.dialog);
   }
   async showSettingsPanel() {
@@ -38,27 +63,36 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   render() {
-    var _a, _b, _c, _d;
-    let settings = { x: 0, y: 0 };
-    if ('settings' in this.field && ((_a = this.field) === null || _a === void 0 ? void 0 : _a.settings)) {
-      settings = this.field.settings;
-    }
-    else if ('setting' in this.field && ((_b = this.field) === null || _b === void 0 ? void 0 : _b.setting)) {
-      settings = this.field.setting;
-    }
-    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);
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: PaperclipIcon, onClick: () => !disabled && this.handleShow() })));
+    var _a, _b;
+    const settings = getFieldSettings(this.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 { 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: () => {
+        var _a;
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.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.' })))));
   }
   static get style() { return verdocsFieldAttachmentCss; }
 }, [0, "verdocs-field-attachment", {
     "templateid": [1],
     "field": [16],
     "disabled": [4],
-    "roleIndex": [2, "role-index"],
+    "editable": [4],
+    "moveable": [4],
+    "done": [4],
+    "roleindex": [2],
+    "xscale": [2],
+    "yscale": [2],
     "rerender": [2],
     "focusField": [64],
     "showSettingsPanel": [64],
@@ -68,7 +102,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-field-attachment", "verdocs-button", "verdocs-upload-dialog"];
+  const components = ["verdocs-field-attachment", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-field-attachment":
       if (!customElements.get(tagName)) {
@@ -76,6 +110,41 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "verdocs-button-panel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-template-field-properties":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-text-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

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

@@ -49,7 +49,6 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   componentDidRender() {
     interact.dynamicDrop(true);

package/dist/components/verdocs-sign.js

@@ -419,7 +419,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const pageInfo = e.detail;
     const roleIndex = getRoleIndex(this.roleNames, this.recipient.role_name);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
-    console.log('[SIGN] Page rendered, updating fields', { pageInfo, roleIndex, recipientFields });
+    // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
     // First render the fields for the signer
     recipientFields
       .filter(field => field.page === pageInfo.pageNumber)
@@ -440,7 +440,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       .filter(r => r.role_name !== this.recipient.role_name && (r.status === RecipientStates.INVITED || r.status === RecipientStates.OPENED || r.status === RecipientStates.PENDING))
       .forEach(recipient => {
       const otherIndex = getRoleIndex(this.roleNames, recipient.role_name);
-      recipient.fields.forEach(field => {
+      recipient.fields
+        .filter(field => field.page === pageInfo.pageNumber)
+        .forEach(field => {
         const el = renderDocumentField(field, pageInfo, otherIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
         if (!el) {
           return;

package/dist/components/verdocs-upload-dialog2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { f as fileToDataUrl } from './Files.js';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 
-const verdocsUploadDialogCss = "verdocs-upload-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}";
+const verdocsUploadDialogCss = "verdocs-upload-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-upload-dialog .dialog{width:320px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}";
 
 const TrashIcon = `<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
 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>`;