@verdocs/web-sdk 1.9.14 → 1.9.16

package/dist/esm/verdocs-field-dropdown.entry.js

@@ -1,31 +1,19 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
-import { g as getFieldSettings } from './utils-99a3c1f0.js';
+import { g as getRGBA } from './Colors-1b298092.js';
+import { g as getFieldSettings } from './utils-2e6beff8.js';
 
 const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.fieldFocus = createEvent(this, "fieldFocus", 7);
-    this.fieldBlur = createEvent(this, "fieldBlur", 7);
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.field = null;
-    this.recipient = undefined;
     this.disabled = false;
-    this.focused = false;
+    this.roleindex = 0;
   }
   async focusField() {
-    this.focused = true;
     this.el.focus();
-    this.fieldFocus.emit(true);
-  }
-  handleBlur() {
-    this.focused = false;
-    this.fieldBlur.emit(true);
-  }
-  handleFocus() {
-    this.focused = true;
-    this.fieldFocus.emit(true);
   }
   handleChange(e) {
     this.fieldChange.emit(e.target.value);
@@ -34,7 +22,8 @@ const VerdocsFieldDropdown = class {
     var _a, _b;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    return (h(Host, { class: { focused: this.focused, required: settings.required, disabled } }, h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === settings.value }, option.value))))));
+    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === settings.value }, option.value))))));
   }
 };
 VerdocsFieldDropdown.style = verdocsFieldDropdownCss;

package/dist/esm/verdocs-field-dropdown.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-dropdown.entry.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,2tCAA2tC;;MCc9uC,oBAAoB;;;;;;iBAMyB,IAAI;;oBAU/B,KAAK;mBAmBf,KAAK;;EAEd,MAAM,UAAU;IACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;IAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAED,UAAU;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC3B;EAED,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAED,YAAY,CAAC,CAAM;IACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;GACvC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,IACzE,cACE,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,EACzB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACnC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjC,cAAQ,KAAK,EAAC,EAAE,gBAAmB,EAClC,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,EAAE,GAAG,CAAC,MAAM,KAClC,cAAQ,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,IAChE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-dropdown/verdocs-field-dropdown.scss?tag=verdocs-field-dropdown","./src/components/elements/verdocs-field-dropdown/verdocs-field-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-dropdown {\n  font-family: $verdocs-primary-font;\n  width: 85px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  select {\n    position: absolute;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  //select {\n  //  position: absolute;\n  //  font-family: Arial, sans-serif;\n  //  background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n  //  background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n  //  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n  //  background-repeat: no-repeat;\n  //  appearance: none;\n  //}\n\n  &.required {\n    select {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {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';\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-dropdown',\n  styleUrl: 'verdocs-field-dropdown.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDropdown {\n  private el: HTMLSelectElement;\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   * 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  @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  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{focused: this.focused, required: settings.required, disabled}}>\n        <select\n          tabIndex={settings.order}\n          disabled={disabled}\n          ref={el => (this.el = el)}\n          onChange={e => this.handleChange(e)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n        >\n          <option value=\"\">Select...</option>\n          {(settings.options || []).map(option => (\n            <option value={option.id} selected={option.value === settings.value}>\n              {option.value}\n            </option>\n          ))}\n        </select>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-dropdown.entry.js","mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,2tCAA2tC;;MCe9uC,oBAAoB;;;;iBAMyB,IAAI;oBAK/B,KAAK;qBAKL,CAAC;;EASpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,YAAY,CAAC,CAAM;IACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;GACvC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5E,cAAQ,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAClH,cAAQ,KAAK,EAAC,EAAE,gBAAmB,EAClC,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,EAAE,GAAG,CAAC,MAAM,KAClC,cAAQ,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,IAChE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-dropdown/verdocs-field-dropdown.scss?tag=verdocs-field-dropdown","./src/components/elements/verdocs-field-dropdown/verdocs-field-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-dropdown {\n  font-family: $verdocs-primary-font;\n  width: 85px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  select {\n    position: absolute;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  //select {\n  //  position: absolute;\n  //  font-family: Arial, sans-serif;\n  //  background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n  //  background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n  //  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n  //  background-repeat: no-repeat;\n  //  appearance: none;\n  //}\n\n  &.required {\n    select {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop} 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-dropdown',\n  styleUrl: 'verdocs-field-dropdown.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDropdown {\n  private el: HTMLSelectElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = 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() disabled?: 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 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.el.focus();\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.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={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <select tabIndex={settings.order} disabled={disabled} ref={el => (this.el = el)} onChange={e => this.handleChange(e)}>\n          <option value=\"\">Select...</option>\n          {(settings.options || []).map(option => (\n            <option value={option.id} selected={option.value === settings.value}>\n              {option.value}\n            </option>\n          ))}\n        </select>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/verdocs-field-initial.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
-import { f as fullNameToInitials, g as getFieldSettings } from './utils-99a3c1f0.js';
 import { g as getRGBA } from './Colors-1b298092.js';
+import { g as getFieldSettings } from './utils-2e6beff8.js';
 
 const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial.disabled{opacity:0.5}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}";
 
@@ -13,7 +13,6 @@ const VerdocsFieldInitial = class {
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.field = null;
-    this.recipient = undefined;
     this.disabled = false;
     this.initials = '';
     this.editable = false;
@@ -38,10 +37,10 @@ const VerdocsFieldInitial = class {
   }
   handleShow() {
     this.dialog = document.createElement('verdocs-initial-dialog');
-    this.dialog.open = true;
-    this.dialog.initials = this.recipient ? fullNameToInitials(this.recipient.full_name) : this.initials;
+    this.dialog.setAttribute('initials', this.initials);
+    this.dialog.setAttribute('roleindex', this.roleindex);
     this.dialog.addEventListener('cancel', () => this.hideDialog());
-    this.dialog.addEventListener('adopt', e => this.handleAdopt(e));
+    this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
   }
   render() {

package/dist/esm/verdocs-field-initial.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-initial.entry.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","./src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {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 {fullNameToInitials, 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 an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\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   * The document or template field to display.\n   */\n  @Prop() initials: string = '';\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 emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event emitted when the user cancels the process.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\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}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.open = true;\n    this.dialog.initials = this.recipient ? fullNameToInitials(this.recipient.full_name) : this.initials;\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('adopt', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempInitials || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        {value ? (\n          <img src={this.tempInitials || settings.base64} alt=\"Initials\" />\n        ) : (\n          <button class={{}} onClick={() => !disabled && this.handleShow()}>\n            Initials\n          </button>\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-initial.entry.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","./src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\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 an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = 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() disabled?: boolean = false;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() initials: string = '';\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 emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event emitted when the user cancels the process.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\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}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.setAttribute('initials', this.initials);\n    this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('next', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempInitials || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        {value ? (\n          <img src={this.tempInitials || settings.base64} alt=\"Initials\" />\n        ) : (\n          <button class={{}} onClick={() => !disabled && this.handleShow()}>\n            Initials\n          </button>\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}

package/dist/esm/verdocs-field-payment.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
-import { g as getFieldSettings } from './utils-99a3c1f0.js';
+import { g as getRGBA } from './Colors-1b298092.js';
+import { g as getFieldSettings } from './utils-2e6beff8.js';
 
 const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -28,7 +29,6 @@ const VerdocsFieldPayment = class {
     this.averageFontWidth = 5;
     this.requiredFields = [];
     this.field = null;
-    this.recipient = undefined;
     this.disabled = false;
     this.fields = undefined;
     this.pageNum = undefined;
@@ -45,6 +45,7 @@ const VerdocsFieldPayment = class {
     this.signed = false;
     this.preparedMessage = undefined;
     this.signatureUrl = '';
+    this.roleindex = 0;
   }
   componentWillLoad() {
     // Load validators
@@ -94,7 +95,8 @@ const VerdocsFieldPayment = class {
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     console.log('Payment field', settings);
-    return (h(Host, { class: { focused: this.focused, disabled } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl })));
+    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    return (h(Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl })));
   }
 };
 VerdocsFieldPayment.style = verdocsFieldPaymentCss;

package/dist/esm/verdocs-field-payment.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-payment.entry.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,o8CAAo8C;;MCct9C,mBAAmB;;;;;IAqC9B,YAAO,GAAU,EAAE,CAAC;;IAEpB,kBAAa,GAAQ,IAAI,CAAC;IAC1B,gBAAW,GAAQ,IAAI,CAAC;IAExB,qBAAgB,GAAG,CAAC,CAAC,CAAC;IACtB,mBAAc,GAAW,EAAE,CAAC;IAE5B,kBAAa,GAAG,IAAI,CAAC;IACrB,cAAS,GAAG;MACV,OAAO,EAAE,CAAC,CAAC;MACX,UAAU,EAAE,CAAC,CAAC;MACd,IAAI,EAAE,IAAI;KACX,CAAC;IACF,iBAAY,GAAG,KAAK,CAAC;IACrB,mBAAc,GAAG,KAAK,CAAC;IACvB,cAAS,GAAQ,EAAE,CAAC;IAGpB,2BAAsB,GAAU,EAAE,CAAC;IAGnC,aAAQ,GAAG,EAAE,CAAC;IACd,qBAAgB,GAAG,CAAC,CAAC;IACrB,mBAAc,GAAU,EAAE,CAAC;iBAzD6B,IAAI;;oBAU/B,KAAK;;;;;;;;;;;;mBAaP,KAAK;kBACN,KAAK;;wBAOC,EAAE;;EA4BlC,iBAAiB;;;;IAIf,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtC,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;MAClE,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;MACxC,IAAI,QAAQ,EAAE;QACZ,IAAI,CAAC,eAAe,GAAG,eAAe,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;OAC/D;KACF;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCD,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IACvC,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAC5C,cAAQ,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAC,QAAY,EAC7C,IAAI,CAAC,MAAM,GAAG,WAAK,KAAK,EAAC,OAAO,GAAG,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EACxE,WAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CACrD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","./src/components/elements/verdocs-field-payment/verdocs-field-payment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, State} 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-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\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  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() focused: boolean = false;\n  @Prop() signed: boolean = false;\n\n  @Event({composed: true}) signatureComplete: EventEmitter<string>;\n\n  @Event({composed: true}) initialComplete: EventEmitter<string>;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: string = '';\n\n  _fields: any[] = [];\n  // envelopeFieldsFormGroup: FormGroup;\n  signatureFile: any = null;\n  initialFile: any = null;\n  today: string;\n  focusOrderNumber = -1;\n  focusFieldName: string = '';\n  timer: any;\n  activeElement = null;\n  showError = {\n    pageNum: -1,\n    fieldIndex: -1,\n    type: null,\n  };\n  dialogOpened = false;\n  closeAllErrors = false;\n  fieldsMap: any = {};\n  mode: string;\n\n  fieldsForCurrentSigner: any[] = [];\n\n  validators;\n  fontSize = 11;\n  averageFontWidth = 5;\n  requiredFields: any[] = [];\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    console.log('sign field', this.field);\n\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find(r => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  // [tabIndex]=\"field.role !== roleName ? -1 : 1\"\n  // [ngStyle]=\"field.element_style\"\n  // [value]=\"field.value\"\n  // (click)=\"initiateSign(field)\"\n  // (blur)=\"validateChanges(field)\"\n  // [disabled]=\"field.role!==roleName\"\n  // [id]=\"field.key\"\n\n  // <button _ngcontent-app-root-c342=\"\" class=\"envelope__field\" tabindex=\"1\" ng-reflect-ng-style=\"[object Object]\"\n  // ng-reflect-ng-class=\"[object Object]\" value=\"\" id=\"signatureP5-1\"\n  // style=\"height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);\"> Signature </button>\n\n  //     bottom: 229.333\n  // px\n  // ;\n  //     left: 169.333\n  // px\n  // ;\n  //     height: 41\n  // px\n  // ;\n  //     width: 82\n  // px\n  // ;\n  //     background-color: rgba(156, 39, 176, 0.4);\n  //     transform: scale(1.33333, 1.33333);\n  // }\n  // <style>\n  // .envelope__item[_ngcontent-app-root-c342] {\n  //     position: absolute;\n  //     transform-origin: bottom left;\n  //     opacity: 1;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    console.log('Payment field', settings);\n    return (\n      <Host class={{focused: this.focused, disabled}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-payment.entry.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,o8CAAo8C;;MCet9C,mBAAmB;;;;;IAqC9B,YAAO,GAAU,EAAE,CAAC;;IAEpB,kBAAa,GAAQ,IAAI,CAAC;IAC1B,gBAAW,GAAQ,IAAI,CAAC;IAExB,qBAAgB,GAAG,CAAC,CAAC,CAAC;IACtB,mBAAc,GAAW,EAAE,CAAC;IAE5B,kBAAa,GAAG,IAAI,CAAC;IACrB,cAAS,GAAG;MACV,OAAO,EAAE,CAAC,CAAC;MACX,UAAU,EAAE,CAAC,CAAC;MACd,IAAI,EAAE,IAAI;KACX,CAAC;IACF,iBAAY,GAAG,KAAK,CAAC;IACrB,mBAAc,GAAG,KAAK,CAAC;IACvB,cAAS,GAAQ,EAAE,CAAC;IAGpB,2BAAsB,GAAU,EAAE,CAAC;IAGnC,aAAQ,GAAG,EAAE,CAAC;IACd,qBAAgB,GAAG,CAAC,CAAC;IACrB,mBAAc,GAAU,EAAE,CAAC;iBAzD6B,IAAI;oBAK/B,KAAK;;;;;;;;;;;;mBAaP,KAAK;kBACN,KAAK;;wBAOC,EAAE;qBAKL,CAAC;;EA4B9B,iBAAiB;;;;IAIf,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtC,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;MAClE,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;MACxC,IAAI,QAAQ,EAAE;QACZ,IAAI,CAAC,eAAe,GAAG,eAAe,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;OAC/D;KACF;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCD,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IACvC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IACtE,cAAQ,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAC,QAAY,EAC7C,IAAI,CAAC,MAAM,GAAG,WAAK,KAAK,EAAC,OAAO,GAAG,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EACxE,WAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CACrD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","./src/components/elements/verdocs-field-payment/verdocs-field-payment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, State} 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-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = 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() disabled?: boolean = false;\n\n  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() focused: boolean = false;\n  @Prop() signed: boolean = false;\n\n  @Event({composed: true}) signatureComplete: EventEmitter<string>;\n\n  @Event({composed: true}) initialComplete: EventEmitter<string>;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: 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  _fields: any[] = [];\n  // envelopeFieldsFormGroup: FormGroup;\n  signatureFile: any = null;\n  initialFile: any = null;\n  today: string;\n  focusOrderNumber = -1;\n  focusFieldName: string = '';\n  timer: any;\n  activeElement = null;\n  showError = {\n    pageNum: -1,\n    fieldIndex: -1,\n    type: null,\n  };\n  dialogOpened = false;\n  closeAllErrors = false;\n  fieldsMap: any = {};\n  mode: string;\n\n  fieldsForCurrentSigner: any[] = [];\n\n  validators;\n  fontSize = 11;\n  averageFontWidth = 5;\n  requiredFields: any[] = [];\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    console.log('sign field', this.field);\n\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find(r => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  // [tabIndex]=\"field.role !== roleName ? -1 : 1\"\n  // [ngStyle]=\"field.element_style\"\n  // [value]=\"field.value\"\n  // (click)=\"initiateSign(field)\"\n  // (blur)=\"validateChanges(field)\"\n  // [disabled]=\"field.role!==roleName\"\n  // [id]=\"field.key\"\n\n  // <button _ngcontent-app-root-c342=\"\" class=\"envelope__field\" tabindex=\"1\" ng-reflect-ng-style=\"[object Object]\"\n  // ng-reflect-ng-class=\"[object Object]\" value=\"\" id=\"signatureP5-1\"\n  // style=\"height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);\"> Signature </button>\n\n  //     bottom: 229.333\n  // px\n  // ;\n  //     left: 169.333\n  // px\n  // ;\n  //     height: 41\n  // px\n  // ;\n  //     width: 82\n  // px\n  // ;\n  //     background-color: rgba(156, 39, 176, 0.4);\n  //     transform: scale(1.33333, 1.33333);\n  // }\n  // <style>\n  // .envelope__item[_ngcontent-app-root-c342] {\n  //     position: absolute;\n  //     transform-origin: bottom left;\n  //     opacity: 1;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    console.log('Payment field', settings);\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, disabled}} style={{backgroundColor}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/verdocs-field-radio-button.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
+import { g as getRGBA } from './Colors-1b298092.js';
+import { g as getFieldSettings } from './utils-2e6beff8.js';
+
+const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldRadioButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fieldChange = createEvent(this, "fieldChange", 7);
+    this.field = null;
+    this.option = 0;
+    this.disabled = false;
+    this.roleindex = 0;
+  }
+  handleChange(e) {
+    console.log('changed', e);
+    this.fieldChange.emit({ option: this.option, value: e.target.checked });
+  }
+  render() {
+    var _a, _b;
+    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: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "radio", tabIndex: settings.order, value: settings.value, name: settings.name, id: `${settings.name}=${settings.value}`, checked: settings.checked, disabled: disabled, required: settings.required, onChange: e => this.handleChange(e) }), h("label", { htmlFor: `${settings.name}=${settings.value}` })));
+  }
+};
+VerdocsFieldRadioButton.style = verdocsFieldRadioButtonCss;
+
+export { VerdocsFieldRadioButton as verdocs_field_radio_button };
+
+//# sourceMappingURL=verdocs-field-radio-button.entry.js.map

package/dist/esm/verdocs-field-radio-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-field-radio-button.entry.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,0+CAA0+C;;MCchgD,uBAAuB;;;;iBAIsB,IAAI;kBAKnC,CAAC;oBAKG,KAAK;qBAKL,CAAC;;EAS9B,YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAC,CAAC,CAAC;GACvE;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5E,aACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,EAAE,EAAE,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,KAAK,EAAE,EACxC,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACnC,EACF,aAAO,OAAO,EAAE,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,KAAK,EAAE,GAAI,CACnD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} 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 radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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   * 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 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    console.log('changed', e);\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\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={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"radio\"\n          tabIndex={settings.order}\n          value={settings.value}\n          name={settings.name}\n          id={`${settings.name}=${settings.value}`}\n          checked={settings.checked}\n          disabled={disabled}\n          required={settings.required}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`${settings.name}=${settings.value}`} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/verdocs-field-signature_3.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
-import { g as getFieldSettings } from './utils-99a3c1f0.js';
 import { g as getRGBA } from './Colors-1b298092.js';
+import { g as getFieldSettings } from './utils-2e6beff8.js';
 import { c as createPopper } from './popper-f860750c.js';
 
 const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}";
@@ -13,7 +13,6 @@ const VerdocsFieldSignature = class {
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.field = null;
     this.name = '';
-    this.recipient = undefined;
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
@@ -37,12 +36,11 @@ const VerdocsFieldSignature = class {
     this.hideDialog();
   }
   handleShow() {
-    var _a;
     this.dialog = document.createElement('verdocs-signature-dialog');
-    this.dialog.open = true;
-    this.dialog.fullName = ((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.full_name) || this.name;
+    this.dialog.setAttribute('name', this.name);
+    this.dialog.setAttribute('roleindex', this.roleindex);
     this.dialog.addEventListener('cancel', () => this.hideDialog());
-    this.dialog.addEventListener('adopt', e => this.handleAdopt(e));
+    this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
   }
   render() {
@@ -59,7 +57,7 @@ const VerdocsFieldSignature = class {
 };
 VerdocsFieldSignature.style = verdocsFieldSignatureCss;
 
-const verdocsSignatureDialogCss = "verdocs-signature-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f5f5fa}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}";
+const verdocsSignatureDialogCss = "verdocs-signature-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}";
 
 const VerdocsSignatureDialog = class {
   constructor(hostRef) {
@@ -102,14 +100,14 @@ const VerdocsSignatureDialog = class {
     context.font = `${fontSize}px Dancing Script`;
     context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);
   }
+  handleNameChange(e) {
+    this.enteredName = e.target.value;
+  }
   handleCancel(e) {
     e.stopPropagation();
     e.preventDefault();
     this.cancel.emit();
   }
-  handleNameChange(e) {
-    this.enteredName = e.target.value;
-  }
   handleAdopt(e) {
     e.stopPropagation();
     e.preventDefault();

package/dist/esm/verdocs-field-signature_3.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-signature.verdocs-signature-dialog.verdocs-toolbar-icon.entry.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","./src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, 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 signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop() name?: string = '';\n\n  /**\n   * If set, the signature creation dialog will be initialized from this object.\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 emitted when the field has changed.\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}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n    console.log('focused', this);\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.open = true;\n    this.dialog.fullName = this.recipient?.full_name || this.name;\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('adopt', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempSignature || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        {value ? <img src={this.tempSignature || settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\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","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $verdocs-grey-3;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Fired if the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.cancel.emit();\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-signature.verdocs-signature-dialog.verdocs-toolbar-icon.entry.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","./src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\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 signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop() name?: 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() 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 emitted when the field has changed.\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}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n    console.log('focused', this);\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('next', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempSignature || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        {value ? <img src={this.tempSignature || settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\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","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Fired if the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.cancel.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/verdocs-field-textarea.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
-import { g as getFieldSettings } from './utils-99a3c1f0.js';
+import { r as registerInstance, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
+import { g as getFieldSettings } from './utils-2e6beff8.js';
 
 const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -8,43 +8,21 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
 const VerdocsFieldTextarea = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.fieldFocus = createEvent(this, "fieldFocus", 7);
-    this.fieldBlur = createEvent(this, "fieldBlur", 7);
-    this.fieldChange = createEvent(this, "fieldChange", 7);
-    this.fieldInput = createEvent(this, "fieldInput", 7);
     this.field = null;
-    this.recipient = undefined;
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
     this.roleindex = 0;
-    this.focused = false;
   }
   async focusField() {
-    this.focused = true;
     this.el.focus();
-    this.fieldFocus.emit(true);
-  }
-  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);
   }
   render() {
     var _a, _b;
     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("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: [
+    return (h(Host, { class: { 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) }), 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' },
       ], onChange: e => {