@verdocs/web-sdk 6.2.0-beta.11 → 6.2.0-beta.13

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-date.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-date/verdocs-field-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport type {ITemplateField} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a date field. When tapped or clicked, the input element will display a date picker component.\n */\n@Component({\n  tag: 'verdocs-field-date',\n  styleUrl: 'verdocs-field-date.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDate {\n  @Element()\n  private hostEl: 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   * 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({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop() field?: ITemplateField;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\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() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.picker?.show();\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  picker: AirDatepicker<HTMLElement> | null = null;\n\n  componentDidLoad() {\n    this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n      locale: localeEn,\n      isMobile: true,\n      autoClose: true,\n      onShow: () => (this.focused = true),\n      onHide: () => (this.focused = false),\n      onSelect: ({date, formattedDate}) => {\n        const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n        this.hostEl.dispatchEvent(event);\n      },\n    });\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  }\n\n  @State() focused?: boolean = false;\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\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 = 'Date...', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n    if (this.done) {\n      return <Host class={{done}}>{formattedValue}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <input\n          name={fieldname}\n          class=\"input-el\"\n          type=\"text\"\n          value={formattedValue}\n          id={this.containerId}\n          disabled={disabled}\n          placeholder={placeholder}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\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-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\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={'Date fields allow the user to select a date.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-date.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-date/verdocs-field-date.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,OAAO,EAAC,MAAM,iBAAiB,CAAC;AACxC,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAC3C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAC,WAAW,EAAC,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAE/C;;GAEG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QASE;;WAEG;QACoB,WAAM,GAA4B,UAAU,CAAC;QAEpE;;WAEG;QACoB,aAAQ,GAAW,EAAE,CAAC;QAE7C;;WAEG;QACoB,cAAS,GAAW,EAAE,CAAC;QAE9C;;WAEG;QACoB,aAAQ,GAAa,KAAK,CAAC;QAElD;;;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;QAsBtC,gBAAW,GAAG,uBAAuB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;QAEnF,sBAAiB,GAAa,KAAK,CAAC;QAY7C,WAAM,GAAsC,IAAI,CAAC;QAgCxC,YAAO,GAAa,KAAK,CAAC;KAoEpC;IA7GC,KAAK,CAAC,UAAU;;QACd,oDAAoD;QACpD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;QACpB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAID,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAAc,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACnE,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACnC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACpC,QAAQ,EAAE,CAAC,EAAC,IAAI,EAAE,aAAa,EAAC,EAAE,EAAE;gBAClC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,aAAa,EAAC,EAAC,CAAC,CAAC;gBAC9E,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;SACF,CAAC,CAAC;IACL,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;IACH,CAAC;IAID,iGAAiG;IACjG,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;QAE9H,MAAM,EAAC,KAAK,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/E,MAAM,EAAC,QAAQ,GAAG,KAAK,EAAE,WAAW,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAC,GAAG,KAAK,IAAI,EAAE,CAAC;QAC1G,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAEvC,MAAM,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAC,IAAG,cAAc,CAAQ,CAAC;QACtD,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC;YACvE,KAAK,IAAI,iBAAQ,KAAK,CAAS;YAEhC,aACE,IAAI,EAAE,SAAS,EACf,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,cAAc,EACrB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,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;YAED,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,KAAK,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;oBACzH,yCACE,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,EAC/C,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,EAAE,8CAA8C,GACxD,CACa,CAClB,CACQ,CACZ,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport type {ITemplateField} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a date field. When tapped or clicked, the input element will display a date picker component.\n */\n@Component({\n  tag: 'verdocs-field-date',\n  styleUrl: 'verdocs-field-date.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDate {\n  @Element()\n  private hostEl: 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   * 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({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop() field?: ITemplateField;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\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() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.picker?.show();\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  picker: AirDatepicker<HTMLElement> | null = null;\n\n  componentDidLoad() {\n    this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n      locale: localeEn,\n      isMobile: true,\n      autoClose: true,\n      onShow: () => (this.focused = true),\n      onHide: () => (this.focused = false),\n      onSelect: ({date, formattedDate}) => {\n        const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n        this.hostEl.dispatchEvent(event);\n      },\n    });\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  }\n\n  @State() focused?: boolean = false;\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\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 = 'Date...', value = '', label = '', readonly = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n    if (this.done) {\n      return <Host class={{done}}>{formattedValue}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <input\n          name={fieldname}\n          class=\"input-el\"\n          type=\"text\"\n          value={formattedValue}\n          id={this.containerId}\n          placeholder={placeholder}\n          disabled={readonly || disabled}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\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-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\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={'Date fields allow the user to select a date.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -83,7 +83,7 @@ export class VerdocsFieldDropdown {
     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);
-        let { required = false, value = '', label = '', options } = field || {};
+        let { required = false, value = '', label = '', options, readonly = false } = field || {};
         const backgroundColor = getRGBA(index);
         // TODO: Consolidate value/defaultValue handling between template and envelope fields.
         if (field === null || field === void 0 ? void 0 : field.value) {
@@ -95,8 +95,7 @@ export class VerdocsFieldDropdown {
         // TODO: Look for other places this mistaken assumption was made.
         // Defaults only apply in destructuring if undefined. null doesn't trigger it.
         options || (options = []);
-        console.log('Dropdown value', this.fieldname, value, options);
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: disabled, onChange: e => this.handleChange(e), ref: el => (this.selectEl = el) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.id === value }, option.label))), !options.length && (h("option", { value: "NA", selected: 'NA' === value }, "N/A"))), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: readonly || disabled, onChange: e => this.handleChange(e), ref: el => (this.selectEl = el) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.id === value }, option.label))), !options.length && (h("option", { value: "NA", selected: 'NA' === value }, "N/A"))), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -124,7 +123,6 @@ export class VerdocsFieldDropdown {
         return {
             "source": {
                 "type": "string",
-                "attribute": "source",
                 "mutable": false,
                 "complexType": {
                     "original": "'template' | 'envelope'",
@@ -140,11 +138,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "source",
                 "defaultValue": "'template'"
             },
             "sourceid": {
                 "type": "string",
-                "attribute": "sourceid",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -160,11 +158,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "sourceid",
                 "defaultValue": "''"
             },
             "fieldname": {
                 "type": "string",
-                "attribute": "fieldname",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -180,11 +178,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "fieldname",
                 "defaultValue": "''"
             },
             "field": {
                 "type": "unknown",
-                "attribute": "field",
                 "mutable": false,
                 "complexType": {
                     "original": "IEnvelopeField | null | undefined",
@@ -209,7 +207,6 @@ export class VerdocsFieldDropdown {
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -225,11 +222,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "editable": {
                 "type": "boolean",
-                "attribute": "editable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -245,11 +242,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "editable",
                 "defaultValue": "false"
             },
             "moveable": {
                 "type": "boolean",
-                "attribute": "moveable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -265,11 +262,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "moveable",
                 "defaultValue": "false"
             },
             "done": {
                 "type": "boolean",
-                "attribute": "done",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -285,11 +282,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "done",
                 "defaultValue": "false"
             },
             "xscale": {
                 "type": "number",
-                "attribute": "xscale",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -305,11 +302,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "xscale",
                 "defaultValue": "1"
             },
             "yscale": {
                 "type": "number",
-                "attribute": "yscale",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -325,11 +322,11 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "yscale",
                 "defaultValue": "1"
             },
             "pagenumber": {
                 "type": "number",
-                "attribute": "pagenumber",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -345,6 +342,7 @@ export class VerdocsFieldDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "pagenumber",
                 "defaultValue": "1"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-dropdown.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a dropdown field that allows the user to choose one of a list of options.\n */\n@Component({\n  tag: 'verdocs-field-dropdown',\n  styleUrl: 'verdocs-field-dropdown.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDropdown {\n  selectEl: HTMLSelectElement;\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({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\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  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n\n    this.selectEl?.showPicker();\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\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  }\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    let {required = false, value = '', label = '', options} = field || {};\n    const backgroundColor = getRGBA(index);\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    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    // TODO: Look for other places this mistaken assumption was made.\n    // Defaults only apply in destructuring if undefined. null doesn't trigger it.\n    options ||= [];\n\n    console.log('Dropdown value', this.fieldname, value, options);\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <select disabled={disabled} onChange={e => this.handleChange(e)} ref={el => (this.selectEl = el as HTMLSelectElement)}>\n          <option value=\"\">Select...</option>\n          {options.map(option => (\n            <option value={option.id} selected={option.id === value}>\n              {option.label}\n            </option>\n          ))}\n          {!options.length && (\n            <option value=\"NA\" selected={'NA' === value}>\n              N/A\n            </option>\n          )}\n        </select>\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.showingProperties = false)}\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={\"Dropdowns are used to capture a recipient's selection of one of several options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-dropdown.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a dropdown field that allows the user to choose one of a list of options.\n */\n@Component({\n  tag: 'verdocs-field-dropdown',\n  styleUrl: 'verdocs-field-dropdown.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDropdown {\n  selectEl: HTMLSelectElement;\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({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\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  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n\n    this.selectEl?.showPicker();\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\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  }\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    let {required = false, value = '', label = '', options, readonly = false} = field || {};\n    const backgroundColor = getRGBA(index);\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    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    // TODO: Look for other places this mistaken assumption was made.\n    // Defaults only apply in destructuring if undefined. null doesn't trigger it.\n    options ||= [];\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <select disabled={readonly || disabled} onChange={e => this.handleChange(e)} ref={el => (this.selectEl = el as HTMLSelectElement)}>\n          <option value=\"\">Select...</option>\n          {options.map(option => (\n            <option value={option.id} selected={option.id === value}>\n              {option.label}\n            </option>\n          ))}\n          {!options.length && (\n            <option value=\"NA\" selected={'NA' === value}>\n              N/A\n            </option>\n          )}\n        </select>\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.showingProperties = false)}\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={\"Dropdowns are used to capture a recipient's selection of one of several options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -100,6 +100,37 @@ verdocs-field-initial .settings-icon svg {
 verdocs-field-initial .settings-icon:hover {
   opacity: 1;
 }
+verdocs-field-initial .edge-top,
+verdocs-field-initial .edge-right,
+verdocs-field-initial .edge-left,
+verdocs-field-initial .edge-bottom {
+  position: absolute;
+  z-index: 10;
+}
+verdocs-field-initial .edge-top {
+  top: -2px;
+  left: 0;
+  right: 0;
+  height: 5px;
+}
+verdocs-field-initial .edge-right {
+  top: 0;
+  bottom: 0;
+  right: -2px;
+  width: 5px;
+}
+verdocs-field-initial .edge-left {
+  top: 0;
+  left: -2px;
+  bottom: 0;
+  width: 5px;
+}
+verdocs-field-initial .edge-bottom {
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 5px;
+}
 
 @keyframes verdocs-field-pulse {
   0% {

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

@@ -1,7 +1,8 @@
-import { getRGBA } from "@verdocs/js-sdk";
+import { getRGBA, VerdocsEndpoint, updateField } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { SettingsIcon } from "../../../utils/Icons";
 import { Store } from "../../../utils/Datastore";
+import interact from "interactjs";
 /**
  * Displays an initial field. If an initial already exists, it will be displayed and the field
  * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
@@ -70,6 +71,76 @@ export class VerdocsFieldInitial {
     async focusField() {
         this.handleShow();
     }
+    componentDidRender() {
+        interact.dynamicDrop(true);
+        if (this.editable) {
+            interact(this.el).resizable({
+                edges: {
+                    top: '.edge-top',
+                    left: '.edge-left',
+                    bottom: '.edge-bottom',
+                    right: '.edge-right',
+                },
+                modifiers: [
+                    interact.modifiers.restrictSize({
+                        min: { width: 71, height: 36 },
+                    }),
+                ],
+                listeners: {
+                    start: this.handleResizeStart.bind(this),
+                    move: this.handleResize.bind(this),
+                    end: this.handleResizeEnd.bind(this),
+                },
+            });
+        }
+    }
+    handleResizeStart(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.dataset.originalBottom = e.target.style.bottom;
+    }
+    handleResize(e) {
+        let { width, height } = e.rect;
+        const dX = e.deltaRect.left;
+        const dY = e.deltaRect.bottom;
+        const currentLeft = parseFloat(e.target.style.left);
+        const currentBottom = parseFloat(e.target.style.bottom);
+        width /= this.xscale;
+        height /= this.yscale;
+        Object.assign(e.target.style, {
+            width: `${width}px`,
+            height: `${height}px`,
+            left: `${currentLeft + dX}px`,
+            bottom: `${currentBottom - dY}px`,
+        });
+    }
+    async handleResizeEnd(e) {
+        const { sourceid, fieldname } = this;
+        const width = Math.round(parseFloat(e.target.style.width));
+        let height = Math.round(parseFloat(e.target.style.height));
+        if (height < 20) {
+            height = 15;
+        }
+        const newBottom = parseFloat(e.target.style.bottom);
+        const originalBottom = parseFloat(e.target.dataset.originalBottom);
+        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);
+        const oldField = template.fields.find(f => f.name === fieldname);
+        const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField === null || oldField === void 0 ? void 0 : oldField.y;
+        updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, { width, height, y })
+            .then(async (updatedField) => {
+            var _a;
+            const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);
+            const newTemplate = JSON.parse(JSON.stringify(template));
+            const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);
+            if (fieldIndex > -1) {
+                newTemplate.fields[fieldIndex] = updatedField;
+            }
+            Store.updateTemplate(this.sourceid, newTemplate);
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, field: updatedField });
+            Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
+        })
+            .catch(e => console.log('Field update failed', e));
+    }
     hideDialog() {
         var _a;
         (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
@@ -113,7 +184,7 @@ export class VerdocsFieldInitial {
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Initial" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, editable && h("div", { class: "edge-right" }), editable && h("div", { class: "edge-left" }), editable && h("div", { class: "edge-top" }), editable && h("div", { class: "edge-bottom" }), label && h("label", null, label), base64 ? h("img", { src: base64, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -141,7 +212,6 @@ export class VerdocsFieldInitial {
         return {
             "source": {
                 "type": "string",
-                "attribute": "source",
                 "mutable": false,
                 "complexType": {
                     "original": "'template' | 'envelope'",
@@ -157,11 +227,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "source",
                 "defaultValue": "'template'"
             },
             "sourceid": {
                 "type": "string",
-                "attribute": "sourceid",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -177,11 +247,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "sourceid",
                 "defaultValue": "''"
             },
             "fieldname": {
                 "type": "string",
-                "attribute": "fieldname",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -197,11 +267,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "fieldname",
                 "defaultValue": "''"
             },
             "field": {
                 "type": "unknown",
-                "attribute": "field",
                 "mutable": false,
                 "complexType": {
                     "original": "IEnvelopeField | null | undefined",
@@ -226,7 +296,6 @@ export class VerdocsFieldInitial {
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -242,11 +311,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "initials": {
                 "type": "string",
-                "attribute": "initials",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -262,11 +331,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "initials",
                 "defaultValue": "''"
             },
             "editable": {
                 "type": "boolean",
-                "attribute": "editable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -282,11 +351,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "editable",
                 "defaultValue": "false"
             },
             "moveable": {
                 "type": "boolean",
-                "attribute": "moveable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -302,11 +371,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "moveable",
                 "defaultValue": "false"
             },
             "done": {
                 "type": "boolean",
-                "attribute": "done",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,11 +391,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "done",
                 "defaultValue": "false"
             },
             "xscale": {
                 "type": "number",
-                "attribute": "xscale",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -342,11 +411,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "xscale",
                 "defaultValue": "1"
             },
             "yscale": {
                 "type": "number",
-                "attribute": "yscale",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -362,11 +431,11 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "yscale",
                 "defaultValue": "1"
             },
             "pagenumber": {
                 "type": "number",
-                "attribute": "pagenumber",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -382,6 +451,7 @@ export class VerdocsFieldInitial {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "pagenumber",
                 "defaultValue": "1"
             }
         };
@@ -547,5 +617,6 @@ export class VerdocsFieldInitial {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=verdocs-field-initial.js.map