@verdocs/web-sdk 6.7.8 → 6.8.2

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

@@ -81,12 +81,10 @@ export class VerdocsFieldTextbox {
         }
         this.showingProperties = false;
     }
-    disconnectedCallback() {
-        try {
+    componentDidUpdate() {
+        if (this.isPreview) {
             interact(this.el).unset();
-        }
-        catch (e) {
-            // Element may already be removed from the DOM
+            return;
         }
     }
     componentDidRender() {
@@ -285,6 +283,25 @@ export class VerdocsFieldTextbox {
                 "setter": false,
                 "defaultValue": "null"
             },
+            "isPreview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true, it will force interact to unset the el, resulting in no dragging the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-preview"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAA4C,WAAW,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AACxG,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AACtH,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAE/C;;GAEG;AAMH,MAAM,OAAO,mBAAmB;IALhC;QASE;;WAEG;QACoB,WAAM,GAA4B,UAAU,CAAC;QAEpE;;WAEG;QACoB,aAAQ,GAAW,EAAE,CAAC;QAE7C;;WAEG;QACoB,cAAS,GAAW,EAAE,CAAC;QAE9C;;;WAGG;QACK,UAAK,GAAsC,IAAI,CAAC;QAExD;;WAEG;QACoB,aAAQ,GAAa,KAAK,CAAC;QAElD;;WAEG;QACoB,cAAS,GAAa,KAAK,CAAC;QAEnD;;;WAGG;QACoB,aAAQ,GAAa,KAAK,CAAC;QAElD;;WAEG;QACoB,aAAQ,GAAa,KAAK,CAAC;QAElD;;WAEG;QACoB,SAAI,GAAa,KAAK,CAAC;QAE9C;;WAEG;QACoB,WAAM,GAAY,CAAC,CAAC;QAE3C;;WAEG;QACoB,WAAM,GAAY,CAAC,CAAC;QAE3C;;WAEG;QACoB,eAAU,GAAY,CAAC,CAAC;QAYtC,sBAAiB,GAAa,KAAK,CAAC;QACpC,YAAO,GAAG,KAAK,CAAC;KAqN1B;IAlNC,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAGD,KAAK,CAAC,UAAU;QACd,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAGD,KAAK,CAAC,iBAAiB;QACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,0BAA0B,IAAI,CAAC,SAAS,EAAE,CAAQ,CAAC;QACjG,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;YAC7C,aAAa,CAAC,SAAS,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,iBAAiB;QACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,0BAA0B,IAAI,CAAC,SAAS,EAAE,CAAQ,CAAC;QACjG,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;YAC7C,aAAa,CAAC,SAAS,EAAE,CAAC;QAC5B,CAAC;QACD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;IACjC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC;YACH,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,8CAA8C;QAChD,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC;gBAC1B,KAAK,EAAE;oBACL,GAAG,EAAE,WAAW;oBAChB,IAAI,EAAE,YAAY;oBAClB,MAAM,EAAE,cAAc;oBACtB,KAAK,EAAE,aAAa;iBACrB;gBACD,SAAS,EAAE;oBACT,QAAQ,CAAC,SAAS,CAAC,YAAY,CAAC;wBAC9B,GAAG,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAC;qBAC7B,CAAC;iBACH;gBACD,SAAS,EAAE;oBACT,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;oBACxC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;oBAClC,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;iBACrC;aACF,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,CAAc;QAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;IAC1D,CAAC;IAED,YAAY,CAAC,CAAM;QACjB,IAAI,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,CAAC,CAAC,IAAI,CAAC;QAE7B,MAAM,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5B,MAAM,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC;QAC9B,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACpD,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAExD,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC;QACrB,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAEtB,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAC5B,KAAK,EAAE,GAAG,KAAK,IAAI;YACnB,MAAM,EAAE,GAAG,MAAM,IAAI;YACrB,IAAI,EAAE,GAAG,WAAW,GAAG,EAAE,IAAI;YAC7B,MAAM,EAAE,GAAG,aAAa,GAAG,EAAE,IAAI;SAClC,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,CAAM;QAC1B,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC;QAEnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3D,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QAC3D,IAAI,MAAM,GAAG,EAAE,EAAE,CAAC;YAChB,MAAM,GAAG,EAAE,CAAC;QACd,CAAC;QACD,MAAM,SAAS,GAAG,MAAM,GAAG,EAAE,CAAC;QAE9B,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACpD,MAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QACnE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtF,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;QACjE,MAAM,CAAC,GAAG,SAAS,KAAK,cAAc,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,CAAC,CAAC;QAE/E,WAAW,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAC,CAAC;aAC1F,IAAI,CAAC,KAAK,EAAC,YAAY,EAAC,EAAE;;YACzB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACtF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAc,CAAC;YACtE,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;YACnF,IAAI,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC;gBACpB,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC;YAChD,CAAC;YACD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;YAEjD,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAC,CAAC,CAAC;YACxE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;QACtD,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAC,GAAG,IAAI,CAAC;QAC9H,MAAM,EAAC,KAAK,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/E,IAAI,EAAC,QAAQ,GAAG,KAAK,EAAE,WAAW,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,KAAK,EAAC,GAAG,KAAK,IAAI,EAAE,CAAC;QACvJ,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;QACjD,MAAM,KAAK,GAAG,MAAM,GAAG,EAAE,CAAC;QAE1B,sFAAsF;QACtF,IAAK,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,KAAK,EAAE,CAAC;YAC1B,KAAK,GAAI,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,KAAK,CAAC;QAChC,CAAC;QAED,iFAAiF;QACjF,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;QAE5B,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAC,IAAG,KAAK,CAAQ,CAAC;QAC7C,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,WAAW,CAAC,EAAE,IAAI,EAAC;YACzE,QAAQ,IAAI,WAAK,KAAK,EAAC,UAAU,GAAG;YACpC,QAAQ,IAAI,WAAK,KAAK,EAAC,YAAY,GAAG;YACtC,QAAQ,IAAI,WAAK,KAAK,EAAC,WAAW,GAAG;YACrC,QAAQ,IAAI,WAAK,KAAK,EAAC,aAAa,GAAG;YAEvC,KAAK,IAAI,iBAAQ,KAAK,CAAS;YAE/B,SAAS,CAAC,CAAC,CAAC,CACX,gBACE,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACpC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAEnC,KAAK,CACG,CACZ,CAAC,CAAC,CAAC,CACF,aACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACpC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GACpC,CACH;YAEA,QAAQ,IAAI,CACX,EAAC,QAAQ;gBACP,WACE,EAAE,EAAE,kCAAkC,SAAS,EAAE,EACjD,KAAK,EAAE,EAAC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,EAAC,EACjH,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE;wBAClB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;oBACnD,CAAC,GACD;gBAED,IAAI,CAAC,iBAAiB,IAAI,CACzB,sBAAgB,MAAM,EAAE,kCAAkC,SAAS,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;oBACxH,yCACE,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,EACvC,QAAQ,EAAE,GAAG,EAAE;;4BACb,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,CAAC,EAAC,SAAS,EAAE,SAAS,EAAC,CAAC,CAAC;4BAC3C,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;wBAClC,CAAC,EACD,iBAAiB,EAAE,CAAC,CAAC,EAAE;;4BACrB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;4BACrC,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;wBAClC,CAAC,EACD,QAAQ,EACN,oOAAoO,GAEtO,CACa,CAClB,CACQ,CACZ,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import interact from 'interactjs';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport {IEnvelopeField, ITemplate, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State, Listen} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) multiline?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  disconnectedCallback() {\n    try {\n      interact(this.el).unset();\n    } catch (e) {\n      // Element may already be removed from the DOM\n    }\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 30, height: 10},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 10) {\n      height = 10;\n    }\n    const multiline = height > 15;\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y, multiline})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, placeholder = '', label = '', width = 150, height = 15, readonly = false, default: value = '', multiline = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n    const small = height < 15;\n\n    // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n    if ((field as any)?.value) {\n      value = (field as any)?.value;\n    }\n\n    // TODO: This is an outdated technique from the old system. We should compute it.\n    const maxlength = width / 5;\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, small, [signerClass]: true}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {multiline ? (\n          <textarea\n            name={fieldname}\n            required={required}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          >\n            {value}\n          </textarea>\n        ) : (\n          <input\n            type=\"text\"\n            value={value}\n            name={fieldname}\n            required={required}\n            maxlength={maxlength}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          />\n        )}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\n                    'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n                  }\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport {IEnvelopeField, ITemplate, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State, Listen} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) multiline?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  componentDidUpdate() {\n    if (this.isPreview) {\n      interact(this.el).unset();\n      return;\n    }\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 30, height: 10},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 10) {\n      height = 10;\n    }\n    const multiline = height > 15;\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y, multiline})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, placeholder = '', label = '', width = 150, height = 15, readonly = false, default: value = '', multiline = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n    const small = height < 15;\n\n    // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n    if ((field as any)?.value) {\n      value = (field as any)?.value;\n    }\n\n    // TODO: This is an outdated technique from the old system. We should compute it.\n    const maxlength = width / 5;\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, small, [signerClass]: true}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {multiline ? (\n          <textarea\n            name={fieldname}\n            required={required}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          >\n            {value}\n          </textarea>\n        ) : (\n          <input\n            type=\"text\"\n            value={value}\n            name={fieldname}\n            required={required}\n            maxlength={maxlength}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          />\n        )}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\n                    'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n                  }\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
+import interact from "interactjs";
 import { format } from "date-fns/format";
 import { h, Host, Fragment } from "@stencil/core";
 import { FORMAT_TIMESTAMP } from "../../../utils/Types";
@@ -78,6 +79,12 @@ export class VerdocsFieldTimestamp {
         }
         this.showingProperties = false;
     }
+    componentDidUpdate() {
+        if (this.isPreview) {
+            interact(this.el).unset();
+            return;
+        }
+    }
     render() {
         const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
         const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
@@ -197,6 +204,25 @@ export class VerdocsFieldTimestamp {
                 "setter": false,
                 "defaultValue": "null"
             },
+            "isPreview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true, it will force interact to unset the el, resulting in no dragging the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-preview"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-timestamp.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":[],"mappings":"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","sourcesContent":["import {format} from 'date-fns/format';\nimport {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Fragment, State, Listen} from '@stencil/core';\nimport {FORMAT_TIMESTAMP} from '../../../utils/Types';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically\n * filled when the signer submits the document.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop() pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method() async focusField() {\n    this.el.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = '', value = '', label = ''} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);\n\n    if (done) {\n      return <Host class={{done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, [signerClass]: true}}>\n        {label && <label>{label}</label>}\n        <input type=\"text\" placeholder={placeholder} value={formatted} disabled={true} ref={el => (this.el = el)} onFocus={() => (this.focused = true)} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Time stamps are automatically set when the recipient signs the document.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-timestamp.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {format} from 'date-fns/format';\nimport {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Fragment, State, Listen} from '@stencil/core';\nimport {FORMAT_TIMESTAMP} from '../../../utils/Types';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically\n * filled when the signer submits the document.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop() pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method() async focusField() {\n    this.el.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  componentDidUpdate() {\n    if (this.isPreview) {\n      interact(this.el).unset();\n      return;\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = '', value = '', label = ''} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);\n\n    if (done) {\n      return <Host class={{done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, [signerClass]: true}}>\n        {label && <label>{label}</label>}\n        <input type=\"text\" placeholder={placeholder} value={formatted} disabled={true} ref={el => (this.el = el)} onFocus={() => (this.focused = true)} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Time stamps are automatically set when the recipient signs the document.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js

@@ -165,25 +165,25 @@ export class VerdocsTemplateDocumentPage {
                     }
                     switch (type) {
                         case 'textbox':
-                            return (h("verdocs-field-textbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-textbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'textarea':
-                            return (h("verdocs-field-textarea", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-textarea", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'date':
-                            return (h("verdocs-field-date", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-date", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'attachment':
-                            return (h("verdocs-field-attachment", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-attachment", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'dropdown':
-                            return (h("verdocs-field-dropdown", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-dropdown", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'initial':
-                            return (h("verdocs-field-initial", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-initial", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'signature':
-                            return (h("verdocs-field-signature", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale) }));
+                            return (h("verdocs-field-signature", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, this.xScale, this.yScale) }));
                         case 'timestamp':
-                            return (h("verdocs-field-timestamp", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-timestamp", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'checkbox':
-                            return (h("verdocs-field-checkbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-checkbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         case 'radio':
-                            return (h("verdocs-field-radio", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                            return (h("verdocs-field-radio", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, isPreview: true, style: getControlStyles(field, xScale, yScale) }));
                         default:
                             return h(Fragment, null, name);
                     }

package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-document-page.js","sourceRoot":"","sources":["../../../../src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-template-document-page',\n  styleUrl: 'verdocs-template-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n  private templateListenerId = null;\n  private resizeObserver: ResizeObserver;\n\n  @Element() container: HTMLElement;\n\n  /**\n   * The endpoint to load from.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Whether the fields should be editable (Builder)\n   */\n  @Prop() editable = false;\n\n  /**\n   * Whether the fields should be disabled (Builder)\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the field are interactable (done/submitted disables this)\n   */\n  @Prop() done = false;\n\n  /**\n   * The ID of the template the document is for.\n   */\n  @Prop({reflect: true}) templateId: string = '';\n\n  /**\n   * The ID of the document to display.\n   */\n  @Prop({reflect: true}) documentId: string = '';\n\n  /**\n   * The page number being rendered. (Reminder: page numbers are 1-based.)\n   */\n  @Prop({reflect: true}) pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n  @State() skipFirstNotification = true;\n  @State() pageDisplayUri = '';\n  @State() xScale = 1;\n  @State() yScale = 1;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n    this.listenToTemplate();\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  componentDidUpdate() {\n    // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n    this.notifyRenderedSize();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    const xScale = this.renderedWidth / this.virtualWidth;\n    if (this.xScale !== xScale) {\n      this.xScale = xScale;\n    }\n\n    const yScale = this.renderedHeight / this.virtualHeight;\n    if (this.yScale !== yScale) {\n      this.yScale = yScale;\n    }\n\n    this.pageRendered.emit({\n      // container: this.container,\n      containerId: this.containerId,\n      documentId: this.documentId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale,\n      yScale,\n    });\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n        </Host>\n      );\n    }\n\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n              {layer.name === 'controls' &&\n                (this.template?.fields || [])\n                  .filter(field => field && field.document_id === this.documentId && field.page === this.pageNumber)\n                  .map(field => {\n                    const id = getFieldId(field);\n                    let {name, type, multiline} = field;\n                    const {xScale, yScale, templateId, editable, disabled, done, pageNumber} = this;\n                    if (field['setting']?.leading > 0 || field['settings']?.leading > 0) {\n                      type = 'textarea';\n                      multiline = true;\n                    }\n                    switch (type as any) {\n                      case 'textbox':\n                        return (\n                          <verdocs-field-textbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            multiline={multiline}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'textarea':\n                        return (\n                          <verdocs-field-textarea\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'date':\n                        return (\n                          <verdocs-field-date\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'attachment':\n                        return (\n                          <verdocs-field-attachment\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'dropdown':\n                        return (\n                          <verdocs-field-dropdown\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'initial':\n                        return (\n                          <verdocs-field-initial\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'signature':\n                        return (\n                          <verdocs-field-signature\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, this.xScale, this.yScale)}\n                          />\n                        );\n                      case 'timestamp':\n                        return (\n                          <verdocs-field-timestamp\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'checkbox':\n                        return (\n                          <verdocs-field-checkbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'radio':\n                        return (\n                          <verdocs-field-radio\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      default:\n                        return <Fragment>{name}</Fragment>;\n                    }\n                  })}\n            </div>\n          ) : this.pageDisplayUri ? (\n            <img\n              class=\"verdocs-template-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageDisplayUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              loading=\"lazy\"\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n              }}\n            />\n          ) : (\n            <div></div>\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-template-document-page.js","sourceRoot":"","sources":["../../../../src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-template-document-page',\n  styleUrl: 'verdocs-template-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n  private templateListenerId = null;\n  private resizeObserver: ResizeObserver;\n\n  @Element() container: HTMLElement;\n\n  /**\n   * The endpoint to load from.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Whether the fields should be editable (Builder)\n   */\n  @Prop() editable = false;\n\n  /**\n   * Whether the fields should be disabled (Builder)\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the field are interactable (done/submitted disables this)\n   */\n  @Prop() done = false;\n\n  /**\n   * The ID of the template the document is for.\n   */\n  @Prop({reflect: true}) templateId: string = '';\n\n  /**\n   * The ID of the document to display.\n   */\n  @Prop({reflect: true}) documentId: string = '';\n\n  /**\n   * The page number being rendered. (Reminder: page numbers are 1-based.)\n   */\n  @Prop({reflect: true}) pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n  @State() skipFirstNotification = true;\n  @State() pageDisplayUri = '';\n  @State() xScale = 1;\n  @State() yScale = 1;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n    this.listenToTemplate();\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  componentDidUpdate() {\n    // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n    this.notifyRenderedSize();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    const xScale = this.renderedWidth / this.virtualWidth;\n    if (this.xScale !== xScale) {\n      this.xScale = xScale;\n    }\n\n    const yScale = this.renderedHeight / this.virtualHeight;\n    if (this.yScale !== yScale) {\n      this.yScale = yScale;\n    }\n\n    this.pageRendered.emit({\n      // container: this.container,\n      containerId: this.containerId,\n      documentId: this.documentId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale,\n      yScale,\n    });\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n        </Host>\n      );\n    }\n\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n              {layer.name === 'controls' &&\n                (this.template?.fields || [])\n                  .filter(field => field && field.document_id === this.documentId && field.page === this.pageNumber)\n                  .map(field => {\n                    const id = getFieldId(field);\n                    let {name, type, multiline} = field;\n                    const {xScale, yScale, templateId, editable, disabled, done, pageNumber} = this;\n                    if (field['setting']?.leading > 0 || field['settings']?.leading > 0) {\n                      type = 'textarea';\n                      multiline = true;\n                    }\n                    switch (type as any) {\n                      case 'textbox':\n                        return (\n                          <verdocs-field-textbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            multiline={multiline}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'textarea':\n                        return (\n                          <verdocs-field-textarea\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'date':\n                        return (\n                          <verdocs-field-date\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'attachment':\n                        return (\n                          <verdocs-field-attachment\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'dropdown':\n                        return (\n                          <verdocs-field-dropdown\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'initial':\n                        return (\n                          <verdocs-field-initial\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'signature':\n                        return (\n                          <verdocs-field-signature\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, this.xScale, this.yScale)}\n                          />\n                        );\n                      case 'timestamp':\n                        return (\n                          <verdocs-field-timestamp\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'checkbox':\n                        return (\n                          <verdocs-field-checkbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'radio':\n                        return (\n                          <verdocs-field-radio\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            isPreview\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      default:\n                        return <Fragment>{name}</Fragment>;\n                    }\n                  })}\n            </div>\n          ) : this.pageDisplayUri ? (\n            <img\n              class=\"verdocs-template-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageDisplayUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              loading=\"lazy\"\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n              }}\n            />\n          ) : (\n            <div></div>\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -39,7 +39,6 @@ const menuOptions = [
 export class VerdocsTemplateFields {
     constructor() {
         this.templateListenerId = null;
-        this.draggableEls = [];
         /**
          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
@@ -114,15 +113,6 @@ export class VerdocsTemplateFields {
     }
     disconnectedCallback() {
         this.unlistenToTemplate();
-        this.draggableEls.forEach(el => {
-            try {
-                interact(el).unset();
-            }
-            catch (e) {
-                // Element may already be removed from the DOM
-            }
-        });
-        this.draggableEls = [];
     }
     async listenToTemplate() {
         this.unlistenToTemplate();
@@ -189,9 +179,6 @@ export class VerdocsTemplateFields {
                 end: this.handleMoveEnd.bind(this),
             },
         });
-        if (!this.draggableEls.includes(el)) {
-            this.draggableEls.push(el);
-        }
     }
     async handleMoveField(event) {
         const oldX = +(event.target.getAttribute('posX') || 0);