@verdocs/web-sdk 1.9.9 → 1.9.10

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

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import Paperclip from './paperclip.svg';
+const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 /**
  * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
  * input types like text and checkbox.
@@ -30,7 +30,7 @@ export class VerdocsFieldAttachment {
       settings = this.field.setting;
     }
     const disabled = (_d = (_c = this.disabled) !== null && _c !== void 0 ? _c : settings.disabled) !== null && _d !== void 0 ? _d : false;
-    return (h(Host, { class: { required: settings.required, disabled } }, h("span", { innerHTML: Paperclip, onClick: () => !disabled && this.handleShow() })));
+    return (h(Host, { class: { required: settings.required, disabled } }, h("span", { innerHTML: PaperclipIcon, onClick: () => !disabled && this.handleShow() })));
   }
   static get is() { return "verdocs-field-attachment"; }
   static get originalStyleUrls() {
@@ -110,24 +110,6 @@ export class VerdocsFieldAttachment {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "fieldChange",
-        "name": "fieldChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
   static get methods() {
     return {
       "focusField": {

package/dist/collection/components/elements/verdocs-field-attachment/verdocs-field-attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-attachment.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAC,MAAM,eAAe,CAAC;AAGpF,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC;;;GAGG;AAMH,MAAM,OAAO,sBAAsB;;iBAIuB,IAAI;;oBAU/B,KAAK;;EASxB,KAAK,CAAC,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAID,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IACpE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACpC,CAAC;EAED,MAAM;;IACJ,IAAI,QAAQ,GAAmD,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;IAC5E,IAAI,UAAU,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,EAAE;MACpD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;KAChC;SAAM,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAA,EAAE;MACzD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;KAC/B;IAED,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC;MAClD,YAAM,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAI,CACxE,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport {ITemplateField, ITemplateFieldSetting} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IDocumentFieldSettings, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport Paperclip from './paperclip.svg';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() disabled?: boolean = false;\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  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  private dialog?: any;\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-upload-dialog');\n    this.dialog.open = true;\n    this.dialog.addEventListener('cancel', () => this.dialog?.remove());\n    document.addEventListener('done', () => this.dialog?.remove());\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    let settings: IDocumentFieldSettings | ITemplateFieldSetting = {x: 0, y: 0};\n    if ('settings' in this.field && this.field?.settings) {\n      settings = this.field.settings;\n    } else if ('setting' in this.field && this.field?.setting) {\n      settings = this.field.setting;\n    }\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <span innerHTML={Paperclip} onClick={() => !disabled && this.handleShow()} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-attachment.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAI/D,MAAM,aAAa,GAAG,uSAAuS,CAAC;AAE9T;;;GAGG;AAMH,MAAM,OAAO,sBAAsB;;iBAIuB,IAAI;;oBAU/B,KAAK;;EAExB,KAAK,CAAC,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAID,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IACpE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACpC,CAAC;EAED,MAAM;;IACJ,IAAI,QAAQ,GAAmD,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;IAC5E,IAAI,UAAU,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,EAAE;MACpD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;KAChC;SAAM,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAA,EAAE;MACzD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;KAC/B;IAED,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC;MAClD,YAAM,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAI,CAC5E,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {ITemplateField, ITemplateFieldSetting} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IDocumentFieldSettings, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() disabled?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  private dialog?: any;\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-upload-dialog');\n    this.dialog.open = true;\n    this.dialog.addEventListener('cancel', () => this.dialog?.remove());\n    document.addEventListener('done', () => this.dialog?.remove());\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    let settings: IDocumentFieldSettings | ITemplateFieldSetting = {x: 0, y: 0};\n    if ('settings' in this.field && this.field?.settings) {\n      settings = this.field.settings;\n    } else if ('setting' in this.field && this.field?.setting) {\n      settings = this.field.setting;\n    }\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <span innerHTML={PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.js

@@ -1,8 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 /**
- * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
- * input types like text and checkbox.
+ * Displays a checkbox.
  */
 export class VerdocsFieldCheckbox {
   constructor() {
@@ -11,15 +10,12 @@ export class VerdocsFieldCheckbox {
     this.option = 0;
     this.disabled = false;
   }
-  handleChange(e) {
-    this.fieldChange.emit({ option: this.option, value: e.target.checked });
-  }
   render() {
     var _a, _b, _c, _d;
     const settings = getFieldSettings(this.field);
     const option = (_b = (_a = settings.options) === null || _a === void 0 ? void 0 : _a[this.option]) !== null && _b !== void 0 ? _b : { checked: false };
     const disabled = (_d = (_c = this.disabled) !== null && _c !== void 0 ? _c : settings.disabled) !== null && _d !== void 0 ? _d : false;
-    return (h(Host, { class: { required: settings.required, disabled } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, onChange: e => this.handleChange(e) }), h("span", null))));
+    return (h(Host, { class: { required: settings.required, disabled } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required }), h("span", null))));
   }
   static get is() { return "verdocs-field-checkbox"; }
   static get originalStyleUrls() {
@@ -117,23 +113,5 @@ export class VerdocsFieldCheckbox {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "fieldChange",
-        "name": "fieldChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
-        },
-        "complexType": {
-          "original": "{option: number; value: boolean}",
-          "resolved": "{ option: number; value: boolean; }",
-          "references": {}
-        }
-      }];
-  }
 }
 //# sourceMappingURL=verdocs-field-checkbox.js.map

package/dist/collection/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-checkbox.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAEtD;;;GAGG;AAMH,MAAM,OAAO,oBAAoB;;iBAIyB,IAAI;;kBAUnC,CAAC;oBAKG,KAAK;;EASlC,YAAY,CAAC,CAAM;IACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAC,CAAC,CAAC;EACxE,CAAC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAG,IAAI,CAAC,MAAM,CAAC,mCAAI,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC;IAEnE,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC;MAClD;QACE,aAAO,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI;QAClK,eAAQ,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\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<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} onChange={e => this.handleChange(e)} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-checkbox.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAGvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,oBAAoB;;iBAIyB,IAAI;;kBAUnC,CAAC;oBAKG,KAAK;;EAElC,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAG,IAAI,CAAC,MAAM,CAAC,mCAAI,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC;IAEnE,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC;MAClD;QACE,aAAO,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,GAAI;QAC7H,eAAQ,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -20,7 +20,6 @@ export class VerdocsFieldDate {
   async focusField() {
     this.focused = true;
     this.el.focus();
-    this.fieldFocus.emit(true);
   }
   componentDidLoad() {
     flatpickr('#' + this.containerId, {
@@ -35,17 +34,9 @@ export class VerdocsFieldDate {
   }
   handleBlur() {
     this.focused = false;
-    this.fieldBlur.emit(true);
   }
   handleFocus() {
     this.focused = true;
-    this.fieldFocus.emit(true);
-  }
-  handleChange(e) {
-    this.fieldChange.emit(e.target.value);
-  }
-  handleInput(e) {
-    this.fieldInput.emit(e.target.value);
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
@@ -53,7 +44,7 @@ export class VerdocsFieldDate {
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
-    return (h(Host, { class: { focused: this.focused, required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
+    return (h(Host, { class: { focused: this.focused, required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
         { label: 'Buyer', value: 'Buyer' },
         { label: 'Seller', value: 'Seller' },
       ] }), h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
@@ -198,66 +189,6 @@ export class VerdocsFieldDate {
   }
   static get events() {
     return [{
-        "method": "fieldFocus",
-        "name": "fieldFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the input field loses focus."
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "fieldBlur",
-        "name": "fieldBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the input field gains focus."
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "fieldChange",
-        "name": "fieldChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "fieldInput",
-        "name": "fieldInput",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired on every character entered into / deleted from the field."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
         "method": "settingsPress",
         "name": "settingsPress",
         "bubbles": true,

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-date.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-date/verdocs-field-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import flatpickr from 'flatpickr';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\nimport { getRGBA } from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\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  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() 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() 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() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\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 on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @State() focused = false;\n  @State() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  componentDidLoad() {\n    flatpickr('#' + this.containerId, {\n      positionElement: this.el,\n      onChange: (selectedDate, dateStr, instance) => {\n        console.log('Selected', selectedDate, dateStr, instance);\n      },\n    });\n\n    // this.el.addEventListener('changeDate', (e: any) => {\n    //   console.log('changeDate', e.detail.date.toISOString());\n    // });\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, required: settings.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          value=\"\"\n          id={this.containerId}\n          disabled={disabled}\n          placeholder={settings.placeholder}\n          required={settings.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-date.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-date/verdocs-field-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import flatpickr from 'flatpickr';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\nimport { getRGBA } from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\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  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() 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() 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() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @State() focused = false;\n  @State() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n  }\n\n  componentDidLoad() {\n    flatpickr('#' + this.containerId, {\n      positionElement: this.el,\n      onChange: (selectedDate, dateStr, instance) => {\n        console.log('Selected', selectedDate, dateStr, instance);\n      },\n    });\n\n    // this.el.addEventListener('changeDate', (e: any) => {\n    //   console.log('changeDate', e.detail.date.toISOString());\n    // });\n  }\n\n  handleBlur() {\n    this.focused = false;\n  }\n\n  handleFocus() {\n    this.focused = true;\n  }\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, required: settings.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          value=\"\"\n          id={this.containerId}\n          disabled={disabled}\n          placeholder={settings.placeholder}\n          required={settings.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-field-textarea/verdocs-field-textarea.js

@@ -42,7 +42,7 @@ export class VerdocsFieldTextarea {
     return (h(Host, { class: { focused: this.focused, required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
         { label: 'Buyer', value: 'Buyer' },
         { label: 'Seller', value: 'Seller' },
-      ], onFieldChange: e => {
+      ], onChange: e => {
         console.log('select changed', e);
       } }), h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
   }

package/dist/collection/components/elements/verdocs-field-textarea/verdocs-field-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-textarea.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-textarea/verdocs-field-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Host, Prop, Event, EventEmitter, State, Method} from '@stencil/core';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getFieldSettings} from '../../../utils/utils';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a multi-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  private el: HTMLTextAreaElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() 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() 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() moveable?: boolean = false;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\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 on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @State() focused = false;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, required: settings.required, disabled}} style={{backgroundColor}}>\n        <textarea\n          placeholder={settings.placeholder || ''}\n          tabIndex={settings.order}\n          value={settings.value}\n          disabled={disabled}\n          required={settings.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n                onFieldChange={e => {\n                  console.log('select changed', e);\n                }}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-textarea.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-textarea/verdocs-field-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Host, Prop, Event, EventEmitter, State, Method} from '@stencil/core';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getFieldSettings} from '../../../utils/utils';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a multi-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  private el: HTMLTextAreaElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() 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() 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() moveable?: boolean = false;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\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 on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @State() focused = false;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, required: settings.required, disabled}} style={{backgroundColor}}>\n        <textarea\n          placeholder={settings.placeholder || ''}\n          tabIndex={settings.order}\n          value={settings.value}\n          disabled={disabled}\n          required={settings.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n                onChange={e => {\n                  console.log('select changed', e);\n                }}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -46,7 +46,7 @@ export class VerdocsFieldTextbox {
     let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     // this.roleindex
     const backgroundColor = this.field['rgba'] || getRGBA(getRoleIndex(TemplateStore.roleNames, ''));
-    return (h(Host, { class: { focused: this.focused, required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: settings === null || settings === void 0 ? void 0 : settings.result, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", value: TemplateStore.roleNames[this.roleindex], options: TemplateStore.roleNames.map(role => ({ label: role, value: role })), onFieldChange: e => this.handleChangeRecipient(e) }), h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
+    return (h(Host, { class: { focused: this.focused, required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: settings === null || settings === void 0 ? void 0 : settings.result, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", value: TemplateStore.roleNames[this.roleindex], options: TemplateStore.roleNames.map(role => ({ label: role, value: role })), onChange: e => this.handleChangeRecipient(e) }), h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
   }
   static get is() { return "verdocs-field-textbox"; }
   static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Method} from '@stencil/core';\nimport {getFieldSettings, getRoleIndex} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a 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  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() 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() 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() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\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 on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * Event fired if the field is configurable when the recipient has changed.\n   */\n  @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n  @State() focused = false;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  handleChangeRecipient(e: any) {\n    console.log('recipient changed', e.detail);\n    this.recipientChanged?.emit(e.detail);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    let disabled = this.disabled ?? settings.disabled ?? false;\n    // this.roleindex\n    const backgroundColor = this.field['rgba'] || getRGBA(getRoleIndex(TemplateStore.roleNames, ''));\n\n    return (\n      <Host class={{focused: this.focused, required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.result}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                value={TemplateStore.roleNames[this.roleindex]}\n                options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n                onFieldChange={e => this.handleChangeRecipient(e)}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Method} from '@stencil/core';\nimport {getFieldSettings, getRoleIndex} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a 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  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() 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() 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() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\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 on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * Event fired if the field is configurable when the recipient has changed.\n   */\n  @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n  @State() focused = false;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  handleChangeRecipient(e: any) {\n    console.log('recipient changed', e.detail);\n    this.recipientChanged?.emit(e.detail);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    let disabled = this.disabled ?? settings.disabled ?? false;\n    // this.roleindex\n    const backgroundColor = this.field['rgba'] || getRGBA(getRoleIndex(TemplateStore.roleNames, ''));\n\n    return (\n      <Host class={{focused: this.focused, required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.result}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                value={TemplateStore.roleNames[this.roleindex]}\n                options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n                onChange={e => this.handleChangeRecipient(e)}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-template-create/verdocs-template-create.js

@@ -1,12 +1,14 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { h } from '@stencil/core';
-import { createTemplate } from '@verdocs/js-sdk/Templates/Templates';
-import { SDKError } from '../../../utils/errors';
 import { createTemplateDocument } from '@verdocs/js-sdk/Templates/TemplateDocuments';
-import { createPage } from '@verdocs/js-sdk/Templates/Pages';
+import { createTemplate, getTemplate } from '@verdocs/js-sdk/Templates/Templates';
+import { SDKError } from '../../../utils/errors';
+// import {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';
+// import {createPage} from '@verdocs/js-sdk/Templates/Pages';
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
 /**
  * Displays a file upload mechanism suitable for the first step of creating a template.
+ * This is typically the first step in a template creation workflow.
  */
 export class VerdocsTemplateCreate {
   constructor() {
@@ -43,13 +45,14 @@ export class VerdocsTemplateCreate {
       console.log('created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
       console.log('created document', template_document);
-      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
-        console.log('Updating page', pageNumber);
-        const page = await createPage(this.endpoint, template.id, { sequence: pageNumber, page_number: pageNumber, document_id: template_document.id });
-        console.log('Created page', page);
-      }
-      (_a = this.templateCreated) === null || _a === void 0 ? void 0 : _a.emit({ template, template_document });
-      // this.fileUploaded?.emit({filePath: this.filePath});
+      const finalTemplate = await getTemplate(this.endpoint, template.id);
+      console.log('[CREATE] Created template', finalTemplate);
+      // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
+      //   console.log('Updating page', pageNumber);
+      //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});
+      //   console.log('Created page', page);
+      // }
+      (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
     }
     catch (e) {
       console.log('[TEMPLATE-CREATE] Error creating template', e);
@@ -57,7 +60,7 @@ export class VerdocsTemplateCreate {
     }
   }
   render() {
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, "Drag a file here"), h("div", { style: { marginTop: '20px', marginBottom: '20px', fontSize: '16px' } }, "Or, if you prefer..."), h("verdocs-button", { label: "Select a file from your computer", size: "small", onPress: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "Next", size: "small", onPress: e => this.handleSubmit(e), disabled: !this.file }))));
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, "Drag a file here"), h("div", { style: { marginTop: '20px', marginBottom: '20px', fontSize: '16px' } }, "Or, if you prefer..."), h("verdocs-button", { label: "Select a file from your computer", size: "small", onClick: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file }))));
   }
   static get is() { return "verdocs-template-create"; }
   static get originalStyleUrls() {
@@ -117,8 +120,8 @@ export class VerdocsTemplateCreate {
           "references": {}
         }
       }, {
-        "method": "templateCreated",
-        "name": "templateCreated",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -127,16 +130,12 @@ export class VerdocsTemplateCreate {
           "text": "Event fired when the user changes the type."
         },
         "complexType": {
-          "original": "{template: ITemplate; template_document: ITemplateDocument}",
-          "resolved": "{ template: ITemplate; template_document: ITemplateDocument; }",
+          "original": "ITemplate",
+          "resolved": "ITemplate",
           "references": {
             "ITemplate": {
               "location": "import",
               "path": "@verdocs/js-sdk/Templates/Types"
-            },
-            "ITemplateDocument": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
             }
           }
         }

package/dist/collection/components/elements/verdocs-template-create/verdocs-template-create.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-create.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-create/verdocs-template-create.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {createTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {SDKError} from '../../../utils/errors';\nimport {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';\nimport {createTemplateDocument} from '@verdocs/js-sdk/Templates/TemplateDocuments';\nimport {createPage} from '@verdocs/js-sdk/Templates/Pages';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{template: ITemplate; template_document: ITemplateDocument}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() file: File | null;\n\n  componentWillLoad() {}\n\n  handleFileChanged(e: any) {\n    console.log('files', e.target.files);\n    this.file = e.target.files?.[0] || null;\n    console.log('Selected file', this.file);\n    // this.filePath = e.target.files?.[0]?.name;\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    try {\n      const template = await createTemplate(this.endpoint, {name: this.file.name});\n      console.log('created template', template);\n\n      const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);\n      console.log('created document', template_document);\n\n      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {\n        console.log('Updating page', pageNumber);\n        const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});\n        console.log('Created page', page);\n      }\n\n      this.templateCreated?.emit({template, template_document});\n      // this.fileUploaded?.emit({filePath: this.filePath});\n    } catch (e) {\n      console.log('[TEMPLATE-CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <input type=\"file\" id=\"verdocs-template-create-file\" multiple accept=\"application/pdf\" style={{display: 'none'}} onChange={e => this.handleFileChanged(e)} />\n\n        <div class=\"upload-box\">\n          <div>\n            <span innerHTML={FileIcon} />\n          </div>\n          <div style={{marginTop: '20px', fontSize: '20px', fontWeight: 'bold'}}>Drag a file here</div>\n          <div style={{marginTop: '20px', marginBottom: '20px', fontSize: '16px'}}>Or, if you prefer...</div>\n          <verdocs-button label=\"Select a file from your computer\" size=\"small\" onPress={e => this.handleUpload(e)} />\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Next\" size=\"small\" onPress={e => this.handleSubmit(e)} disabled={!this.file} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-template-create.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-create/verdocs-template-create.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,sBAAsB,EAAC,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAC/C,gFAAgF;AAChF,8DAA8D;AAE9D,MAAM,QAAQ,GACZ,uLAAuL,CAAC;AAE1L;;;GAGG;AAMH,MAAM,OAAO,qBAAqB;;oBAII,eAAe,CAAC,UAAU,EAAE;;;EAoBhE,iBAAiB,KAAI,CAAC;EAEtB,iBAAiB,CAAC,CAAM;;IACtB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAG,CAAC,CAAC,KAAI,IAAI,CAAC;IACxC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,6CAA6C;EAC/C,CAAC;EAED,YAAY,CAAC,CAAC;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,8BAA8B,CAAC,CAAC;IACzE,QAAQ,CAAC,KAAK,EAAE,CAAC;EACnB,CAAC;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,KAAK,CAAC,YAAY,CAAC,CAAC;;IAClB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,8GAA8G;IAC9G,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,OAAO;KACR;IAED,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;MAC7E,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;MAE1C,MAAM,iBAAiB,GAAG,MAAM,sBAAsB,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;MAC9F,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;MAEnD,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;MACpE,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,aAAa,CAAC,CAAC;MAExD,uGAAuG;MACvG,8CAA8C;MAC9C,mJAAmJ;MACnJ,uCAAuC;MACvC,IAAI;MAEJ,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAChC;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,2CAA2C,EAAE,CAAC,CAAC,CAAC;MAC5D,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK;MAC5F,aAAO,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,8BAA8B,EAAC,QAAQ,QAAC,MAAM,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAI;MAE7J,WAAK,KAAK,EAAC,YAAY;QACrB;UACE,YAAM,SAAS,EAAE,QAAQ,GAAI,CACzB;QACN,WAAK,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAC,uBAAwB;QAC7F,WAAK,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAC,2BAA4B;QACnG,sBAAgB,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CACxG;MAEN,WAAK,KAAK,EAAC,SAAS;QAClB,sBAAgB,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI;QACpG,sBAAgB,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,GAAI,CAClG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {createTemplateDocument} from '@verdocs/js-sdk/Templates/TemplateDocuments';\nimport {createTemplate, getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {SDKError} from '../../../utils/errors';\n// import {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';\n// import {createPage} from '@verdocs/js-sdk/Templates/Pages';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n * This is typically the first step in a template creation workflow.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<ITemplate>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() file: File | null;\n\n  componentWillLoad() {}\n\n  handleFileChanged(e: any) {\n    console.log('files', e.target.files);\n    this.file = e.target.files?.[0] || null;\n    console.log('Selected file', this.file);\n    // this.filePath = e.target.files?.[0]?.name;\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    try {\n      const template = await createTemplate(this.endpoint, {name: this.file.name});\n      console.log('created template', template);\n\n      const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);\n      console.log('created document', template_document);\n\n      const finalTemplate = await getTemplate(this.endpoint, template.id);\n      console.log('[CREATE] Created template', finalTemplate);\n\n      // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {\n      //   console.log('Updating page', pageNumber);\n      //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});\n      //   console.log('Created page', page);\n      // }\n\n      this.next?.emit(finalTemplate);\n    } catch (e) {\n      console.log('[TEMPLATE-CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <input type=\"file\" id=\"verdocs-template-create-file\" multiple accept=\"application/pdf\" style={{display: 'none'}} onChange={e => this.handleFileChanged(e)} />\n\n        <div class=\"upload-box\">\n          <div>\n            <span innerHTML={FileIcon} />\n          </div>\n          <div style={{marginTop: '20px', fontSize: '20px', fontWeight: 'bold'}}>Drag a file here</div>\n          <div style={{marginTop: '20px', marginBottom: '20px', fontSize: '16px'}}>Or, if you prefer...</div>\n          <verdocs-button label=\"Select a file from your computer\" size=\"small\" onClick={e => this.handleUpload(e)} />\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Next\" size=\"small\" onClick={e => this.handleSubmit(e)} disabled={!this.file} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}

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

@@ -133,7 +133,7 @@ export class VerdocsTemplateFields {
     if (TemplateStore.loading) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, null, TemplateStore.template ? (h(Fragment, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onPress: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onPress: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onPress: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onPress: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onPress: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onPress: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onPress: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => console.log('save'), disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => console.log('close'), class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
+    return (h(Host, null, TemplateStore.template ? (h(Fragment, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onClick: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onClick: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onClick: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onClick: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onClick: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onClick: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onClick: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => { var _a; return (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(TemplateStore.template); }, disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => { var _a; return (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit(); }, class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
         { name: 'page', type: 'canvas' },
         { name: 'controls', type: 'div' },
       ] }))) : (h("div", null, "Error loading Template. Please try again later."))));
@@ -194,8 +194,8 @@ export class VerdocsTemplateFields {
   }
   static get events() {
     return [{
-        "method": "settingsUpdated",
-        "name": "settingsUpdated",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -204,9 +204,14 @@ export class VerdocsTemplateFields {
           "text": "Event fired when the user completes the step."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "ITemplate",
+          "resolved": "ITemplate",
+          "references": {
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "cancel",