@verdocs/web-sdk 1.9.14 → 1.9.15

package/dist/cjs/verdocs-field-textarea.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-textarea.entry.cjs.js","mappings":"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","names":["getFieldSettings","getRGBA","h","Host"],"sources":["./src/components/elements/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","./src/components/elements/verdocs-field-textarea/verdocs-field-textarea.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\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  textarea {\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    background: none;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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","import {Component, h, Host, Prop, Event, EventEmitter, State, Method} from '@stencil/core';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getFieldSettings} from '../../../utils/utils';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a multi-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  private el: HTMLTextAreaElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @State() focused = false;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, required: settings.required, disabled}} style={{backgroundColor}}>\n        <textarea\n          placeholder={settings.placeholder || ''}\n          tabIndex={settings.order}\n          value={settings.value}\n          disabled={disabled}\n          required={settings.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n                onChange={e => {\n                  console.log('select changed', e);\n                }}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-textarea.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,uBAAuB,GAAG,kzBAAkzB;;ACMl1B,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAU9qC,oBAAoB;;;iBAMyB,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;qBAKL,CAAC;;EAEpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAGA,sBAAgB,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,IAAIC,cAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5ED,sBACE,WAAW,EAAE,QAAQ,CAAC,WAAW,IAAI,EAAE,EACvC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB,EAED,IAAI,CAAC,QAAQ,KACZA,kCAAsB,IAAI,EAAE,YAAY,IACtCA,qCAAuB,EACvBA,sBACEA,kCACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE;QACP,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;QAChC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;OACnC,EACD,QAAQ,EAAE,CAAC;QACT,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;OAClC,GACD,EAEFA,gCAAoB,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,sBAAsB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,EAC1HA,gCAAoB,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,CACrH,CACc,CACxB,CACI,EACP;GACH;;;;;;","names":["getFieldSettings","getRGBA","h","Host"],"sources":["./src/components/elements/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","./src/components/elements/verdocs-field-textarea/verdocs-field-textarea.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\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  textarea {\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    background: none;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\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 * Display a multi-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  private el: HTMLTextAreaElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * 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  @Method() async focusField() {\n    this.el.focus();\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        <textarea\n          placeholder={settings.placeholder || ''}\n          tabIndex={settings.order}\n          value={settings.value}\n          disabled={disabled}\n          required={settings.required}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n                onChange={e => {\n                  console.log('select changed', e);\n                }}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-field-textbox.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-e0f38696.js');
-const templateStore = require('./templateStore-974781a8.js');
+const templateStore = require('./templateStore-42a49905.js');
+const utils = require('./utils-beee79a1.js');
 require('./index-eb130f52.js');
 
 const verdocsFieldTextboxCss = "verdocs-field-textbox{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-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input:focus{outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox 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-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
@@ -14,50 +14,32 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
 const VerdocsFieldTextbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.fieldFocus = index.createEvent(this, "fieldFocus", 7);
-    this.fieldBlur = index.createEvent(this, "fieldBlur", 7);
-    this.fieldChange = index.createEvent(this, "fieldChange", 7);
-    this.fieldInput = index.createEvent(this, "fieldInput", 7);
     this.recipientChanged = index.createEvent(this, "recipientChanged", 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);
   }
   handleChangeRecipient(e) {
     var _a;
-    console.log('recipient changed', e.detail);
     (_a = this.recipientChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
   }
   render() {
     var _a, _b, _c, _d;
     const settings = utils.getFieldSettings(this.field);
     let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    // this.roleindex
-    const backgroundColor = this.field['rgba'] || Colors.getRGBA(utils.getRoleIndex(templateStore.state.roleNames, ''));
-    return (index.h(index.Host, { class: { focused: this.focused, required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: settings === null || settings === void 0 ? void 0 : settings.result, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon }, index.h("h6", null, "Field Settings"), index.h("form", null, index.h("verdocs-select-input", { label: "Recipient", value: templateStore.state.roleNames[this.roleindex], options: templateStore.state.roleNames.map(role => ({ label: role, value: role })), onChange: e => this.handleChangeRecipient(e) }), index.h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), index.h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
+    const backgroundColor = this.field['rgba'] || Colors.getRGBA(this.roleindex);
+    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: settings === null || settings === void 0 ? void 0 : settings.result, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon }, index.h("h6", null, "Field Settings"), index.h("form", null, index.h("verdocs-select-input", { label: "Recipient", value: templateStore.state.roleNames[this.roleindex], options: templateStore.state.roleNames.map(role => ({ label: role, value: role })), onChange: e => this.handleChangeRecipient(e) }), index.h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => {
+        e.stopPropagation();
+        console.log('ipt', e);
+      } }), index.h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => {
+        e.stopPropagation();
+        console.log('ipt', e);
+      } }))))));
   }
 };
 VerdocsFieldTextbox.style = verdocsFieldTextboxCss;

package/dist/cjs/verdocs-field-textbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-textbox.entry.cjs.js","mappings":"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","names":["getFieldSettings","getRGBA","getRoleIndex","TemplateStore","h","Host"],"sources":["./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\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  input {\n    width: 100%;\n    height: 100%;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\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  &.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  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Method} from '@stencil/core';\nimport {getFieldSettings, getRoleIndex} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * Event fired if the field is configurable when the recipient has changed.\n   */\n  @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n  @State() focused = false;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  handleChangeRecipient(e: any) {\n    console.log('recipient changed', e.detail);\n    this.recipientChanged?.emit(e.detail);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    let disabled = this.disabled ?? settings.disabled ?? false;\n    // this.roleindex\n    const backgroundColor = this.field['rgba'] || getRGBA(getRoleIndex(TemplateStore.roleNames, ''));\n\n    return (\n      <Host class={{focused: this.focused, required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.result}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                value={TemplateStore.roleNames[this.roleindex]}\n                options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n                onChange={e => this.handleChangeRecipient(e)}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-textbox.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,o0CAAo0C;;ACOn2C,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAU9qC,mBAAmB;;;;iBAM0B,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;qBAKL,CAAC;;EAOpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,qBAAqB,CAAC,CAAM;;IAC1B,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;GACvC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAGA,sBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,IAAI,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC3D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAIC,cAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC/ED,mBACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EACzB,KAAK,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,EACvB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAC9B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB,EAED,IAAI,CAAC,QAAQ,KACZA,kCAAsB,IAAI,EAAE,YAAY,IACtCA,qCAAuB,EACvBA,sBACEA,kCACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAEE,mBAAa,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAC9C,OAAO,EAAEA,mBAAa,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAAK,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC,EAC1E,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAC5C,EAEFF,gCACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,EAAE,EACR,WAAW,EAAC,sBAAsB,EAClC,OAAO,EAAE,CAAC;QACR,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;OACvB,GACD,EACFA,gCACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,EAAE,EACR,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,CAAC;QACR,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;OACvB,GACD,CACG,CACc,CACxB,CACI,EACP;GACH;;;;;;","names":["getFieldSettings","getRGBA","h","Host","TemplateStore"],"sources":["./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\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  input {\n    width: 100%;\n    height: 100%;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\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  &.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  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\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} from '@stencil/core';\nimport TemplateStore from '../../../utils/templateStore';\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 * Display a text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired if the field is configurable when the recipient has changed.\n   */\n  @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  handleChangeRecipient(e: any) {\n    this.recipientChanged?.emit(e.detail);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    let disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.result}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                value={TemplateStore.roleNames[this.roleindex]}\n                options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n                onChange={e => this.handleChangeRecipient(e)}\n              />\n\n              <verdocs-text-input\n                label=\"Field Name\"\n                value=\"\"\n                placeholder=\"Stored field name...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n              <verdocs-text-input\n                label=\"Placeholder\"\n                value=\"\"\n                placeholder=\"Placeholder text...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-field-timestamp.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const utils = require('./utils-e0f38696.js');
+const utils = require('./utils-beee79a1.js');
 const Colors = require('./Colors-e809dcc9.js');
 
 const verdocsFieldTimestampCss = "verdocs-field-timestamp{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-timestamp.disabled{opacity:0.5}verdocs-field-timestamp input{-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-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp 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-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
@@ -12,44 +12,21 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
 const VerdocsFieldTimestamp = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.fieldFocus = index.createEvent(this, "fieldFocus", 7);
-    this.fieldBlur = index.createEvent(this, "fieldBlur", 7);
-    this.fieldChange = index.createEvent(this, "fieldChange", 7);
-    this.fieldInput = index.createEvent(this, "fieldInput", 7);
-    this.settingsPress = index.createEvent(this, "settingsPress", 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, _c, _d;
     const settings = utils.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'] || Colors.getRGBA(this.roleindex);
-    return (index.h(index.Host, { class: { focused: this.focused, required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: (settings === null || settings === void 0 ? void 0 : settings.value) || new Date().toLocaleDateString(), disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon }, index.h("h6", null, "Field Settings"), index.h("form", null, index.h("verdocs-select-input", { label: "Recipient", options: [
+    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: (settings === null || settings === void 0 ? void 0 : settings.value) || new Date().toLocaleDateString(), disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon }, index.h("h6", null, "Field Settings"), index.h("form", null, index.h("verdocs-select-input", { label: "Recipient", options: [
         { label: 'Buyer', value: 'Buyer' },
         { label: 'Seller', value: 'Seller' },
       ] }), index.h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), index.h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));

package/dist/cjs/verdocs-field-timestamp.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-timestamp.entry.cjs.js","mappings":"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","names":["getFieldSettings","getRGBA","h","Host"],"sources":["./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\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  input {\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    background: none;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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, State, Method} 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 * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired when the input field loses focus.\n   */\n  @Event({composed: true}) fieldFocus: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field gains focus.\n   */\n  @Event({composed: true}) fieldBlur: EventEmitter<boolean>;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) fieldInput: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @State() focused = false;\n\n  @Method() async focusField() {\n    this.focused = true;\n    this.el.focus();\n    this.fieldFocus.emit(true);\n  }\n\n  handleBlur() {\n    this.focused = false;\n    this.fieldBlur.emit(true);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    this.fieldFocus.emit(true);\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  handleInput(e: any) {\n    this.fieldInput.emit(e.target.value);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.value || new Date().toLocaleDateString()}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n          onBlur={() => this.handleBlur()}\n          onFocus={() => this.handleFocus()}\n          onChange={e => this.handleChange(e)}\n          onInput={e => this.handleInput(e)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                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-timestamp.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,wBAAwB,GAAG,muCAAmuC;;ACMpwC,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAU9qC,qBAAqB;;;iBAMwB,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;qBAKL,CAAC;;EAEpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAGA,sBAAgB,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,IAAIC,cAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC/ED,mBACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EACzB,KAAK,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,KAAI,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,EACzD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAC9B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB,EAED,IAAI,CAAC,QAAQ,KACZA,kCAAsB,IAAI,EAAE,YAAY,IACtCA,qCAAuB,EACvBA,sBACEA,kCACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE;QACP,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;QAChC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;OACnC,GACD,EAEFA,gCAAoB,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,sBAAsB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,EAC1HA,gCAAoB,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,CACrH,CACc,CACxB,CACI,EACP;GACH;;;;;;","names":["getFieldSettings","getRGBA","h","Host"],"sources":["./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\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  input {\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    background: none;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Method} 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 * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * 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, 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  @Method() async focusField() {\n    this.el.focus();\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: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.value || new Date().toLocaleDateString()}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\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/cjs/verdocs-initial-dialog.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 
-const verdocsInitialDialogCss = "verdocs-initial-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;display:none}verdocs-initial-dialog.open{display:block}verdocs-initial-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-initial-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-initial-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-initial-dialog .content{font-size:14px;padding:20px}verdocs-initial-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-initial-dialog .buttons verdocs-button{margin-left:16px}verdocs-initial-dialog canvas{background:#fff;-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-initial-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-initial-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-initial-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-initial-dialog .tabs .tab:hover{color:#55bc81}";
+const verdocsInitialDialogCss = "verdocs-initial-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-initial-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-initial-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-initial-dialog .content{font-size:14px;padding:20px}verdocs-initial-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-initial-dialog .buttons verdocs-button{margin-left:16px}verdocs-initial-dialog canvas{background:#fff;-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-initial-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-initial-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-initial-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-initial-dialog .tabs .tab:hover{color:#55bc81}";
 
 const VerdocsInitialDialog = class {
   constructor(hostRef) {
@@ -47,23 +47,20 @@ const VerdocsInitialDialog = class {
     context.font = `${fontSize}px Dancing Script`;
     context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);
   }
-  // We need a separate event handler for clicking the background because it can receive events "through" other child components
-  handleDismiss(e) {
-    e.stopPropagation();
-    if (e.target.className === 'background-overlay') {
-      this.handleCancel();
-    }
-  }
   handleNameChange(e) {
     this.enteredInitials = e.target.value;
   }
-  handleAdopt() {
+  handleCancel(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.cancel.emit();
+  }
+  handleAdopt(e) {
+    e.stopPropagation();
+    e.preventDefault();
     const data = this.canvasElement.toDataURL('image/png');
     this.next.emit(data);
   }
-  handleCancel() {
-    this.cancel.emit();
-  }
   /*
   selColor(hex: string) {
     this.color = hex;
@@ -222,7 +219,7 @@ const VerdocsInitialDialog = class {
   }
    */
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Create Your Initial"), index.h("div", { class: "content" }, index.h("verdocs-text-input", { placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), index.h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? index.h("canvas", { ref: el => (this.canvasElement = el) }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "disclaimer" }, "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, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }), index.h("verdocs-button", { label: "Adopt & Sign", onClick: () => this.handleAdopt() })))))));
+    return (index.h(index.Host, { onClick: e => this.handleCancel(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Create Your Initial"), index.h("div", { class: "content" }, index.h("verdocs-text-input", { placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), index.h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? index.h("canvas", { ref: el => (this.canvasElement = el) }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "disclaimer" }, "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, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "Adopt & Sign", onClick: e => this.handleAdopt(e) }))))));
   }
 };
 VerdocsInitialDialog.style = verdocsInitialDialogCss;

package/dist/cjs/verdocs-initial-dialog.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-initial-dialog.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,y1DAAy1D;;MCU52D,oBAAoB;;;;;oBAMJ,EAAE;sBAYP,KAAK;2BAEQ,EAAE;gBAEb,MAAM;;EAE9B,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAEnD,MAAM,EAAE,GAAG,IAAI,QAAQ,CAAC,gBAAgB,EAAE,kHAAkH,CAAC,CAAC;IAC9J,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;MACjB,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;MACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,kBAAkB;IAChB,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,eAAe;IACb,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACvB,OAAO;KACR;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAE7C,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7E,IAAI,QAAQ,GAAG,GAAG,CAAC;IACnB,GAAG;MACD,QAAQ,IAAI,CAAC,CAAC;MACd,OAAO,CAAC,IAAI,GAAG,GAAG,QAAQ,mBAAmB,CAAC;KAC/C,QAAQ,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,GAAG,WAAW,GAAG,EAAE,EAAE;IAE7E,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,YAAY,GAAG,QAAQ,CAAC;IAChC,OAAO,CAAC,IAAI,GAAG,GAAG,QAAQ,mBAAmB,CAAC;IAC9C,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;GACrG;;EAGD,aAAa,CAAC,CAAM;IAClB,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;EAED,gBAAgB,CAAC,CAAM;IACrB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;GACvC;EAED,WAAW;IACT,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACtB;EAED,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgKD,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjEA,iBAAK,KAAK,EAAC,QAAQ,IACjBA,iBAAK,KAAK,EAAC,SAAS,0BAA0B,EAE9CA,iBAAK,KAAK,EAAC,SAAS,IAClBA,gCAAoB,WAAW,EAAC,aAAa,EAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,EACtIA,iBAAK,KAAK,EAAC,UAAU,qDAAqD,EAWzE,IAAI,CAAC,UAAU,GAAGA,oBAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,GAAI,GAAGA,iBAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAE5HA,iBAAK,KAAK,EAAC,YAAY,yQAGjB,EAENA,iBAAK,KAAK,EAAC,SAAS,IAClBA,4BAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,EACvFA,4BAAgB,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,GAAI,CACtE,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.scss?tag=verdocs-initial-dialog","./src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-initial-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  display: none;\n\n  &.open {\n    display: block;\n  }\n\n  .background-overlay {\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\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: #fff;\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, Host, h, Event, EventEmitter, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their initials with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-initial-dialog',\n  styleUrl: 'verdocs-initial-dialog.scss',\n})\nexport class VerdocsInitialDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() initials: string = '';\n\n  /**\n   * Event fired when the initials are adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredInitials: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredInitials = this.initials.toUpperCase();\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.enteredInitials).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.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    e.stopPropagation();\n    if (e.target.className === 'background-overlay') {\n      this.handleCancel();\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.enteredInitials = e.target.value;\n  }\n\n  handleAdopt() {\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  handleCancel() {\n    this.cancel.emit();\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>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Create Your Initial</div>\n\n            <div class=\"content\">\n              <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\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\" variant=\"outline\" onClick={() => this.handleCancel()} />\n                <verdocs-button label=\"Adopt & Sign\" onClick={() => this.handleAdopt()} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-initial-dialog.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.scss?tag=verdocs-initial-dialog","./src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-initial-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: #fff;\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, Host, h, Event, EventEmitter, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their initials with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-initial-dialog',\n  styleUrl: 'verdocs-initial-dialog.scss',\n})\nexport class VerdocsInitialDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() initials: string = '';\n\n  /**\n   * Event fired when the initials are adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredInitials: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredInitials = this.initials.toUpperCase();\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.enteredInitials).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.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredInitials = 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 Initial</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\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\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-ok-dialog.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 
-const verdocsOkDialogCss = "verdocs-ok-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-ok-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-ok-dialog .dialog{max-width:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;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)}verdocs-ok-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-direction:row;flex-direction:row;background:#444444;padding:8px 16px;color:#ffffff}verdocs-ok-dialog .content{font-size:16px;background:#ffffff;padding:20px}verdocs-ok-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-ok-dialog .buttons verdocs-button{margin-left:16px}";
+const verdocsOkDialogCss = "verdocs-ok-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-ok-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-ok-dialog .dialog{max-width:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;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)}verdocs-ok-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-direction:row;flex-direction:row;padding:8px 16px;color:#ffffff;background:#46497d}verdocs-ok-dialog .content{font-size:16px;background:#ffffff;padding:20px}verdocs-ok-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-ok-dialog .buttons verdocs-button{margin-left:16px}";
 
 const VerdocsOkDialog = class {
   constructor(hostRef) {

package/dist/cjs/verdocs-ok-dialog.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-ok-dialog.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,ulCAAulC;;MCWrmC,eAAe;;;;;mBAIA,EAAE;mBAKF,EAAE;sBAME,KAAK;;EAYnC,QAAQ;IACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;GAClB;EAED,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjEA,iBAAK,KAAK,EAAC,QAAQ,IACjBA,iBAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzCA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,EAEbA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,GAAGA,4BAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,GAAGA,iBAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAC9IA,4BAAgB,KAAK,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAI,CACzD,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  .background-overlay {\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\n  .dialog {\n    max-width: 50%;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 16px;\n    flex-direction: row;\n    background: #444444;\n    padding: 8px 16px;\n    color: $verdocs-grey-4;\n  }\n\n  .content {\n    font-size: 16px;\n    background: $verdocs-grey-4;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-ok-dialog',\n  styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n  /**\n   * The title of the dialog. \"title\" is a reserved word, so we use heading.\n   */\n  @Prop() heading: string = '';\n\n  /**\n   * The message content to display.\n   */\n  @Prop() message: string = '';\n\n  /**\n   * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n   * overlay to dismiss it.\n   */\n  @Prop() showCancel: boolean = false;\n\n  /**\n   * Event fired when the user clicks the OK button.\n   */\n  @Event({composed: true}) next: EventEmitter;\n\n  /**\n   * Event fired when the user clicks the background overlay or Cancel button.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  handleOk() {\n    this.next.emit();\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.cancel.emit();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"content\">\n              {this.message}\n\n              <div class=\"buttons\">\n                {this.showCancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} /> : <div style={{display: 'none'}} />}\n                <verdocs-button label=\"OK\" onClick={() => this.handleOk()} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-ok-dialog.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,ulCAAulC;;MCWrmC,eAAe;;;;;mBAIA,EAAE;mBAKF,EAAE;sBAME,KAAK;;EAYnC,QAAQ;IACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;GAClB;EAED,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjEA,iBAAK,KAAK,EAAC,QAAQ,IACjBA,iBAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzCA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,EAEbA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,GAAGA,4BAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,GAAGA,iBAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAC9IA,4BAAgB,KAAK,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAI,CACzD,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  .background-overlay {\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\n  .dialog {\n    max-width: 50%;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 16px;\n    flex-direction: row;\n    padding: 8px 16px;\n    color: $verdocs-grey-4;\n    background: $verdocs-grey-blue;\n  }\n\n  .content {\n    font-size: 16px;\n    background: $verdocs-grey-4;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-ok-dialog',\n  styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n  /**\n   * The title of the dialog. \"title\" is a reserved word, so we use heading.\n   */\n  @Prop() heading: string = '';\n\n  /**\n   * The message content to display.\n   */\n  @Prop() message: string = '';\n\n  /**\n   * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n   * overlay to dismiss it.\n   */\n  @Prop() showCancel: boolean = false;\n\n  /**\n   * Event fired when the user clicks the OK button.\n   */\n  @Event({composed: true}) next: EventEmitter;\n\n  /**\n   * Event fired when the user clicks the background overlay or Cancel button.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  handleOk() {\n    this.next.emit();\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.cancel.emit();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"content\">\n              {this.message}\n\n              <div class=\"buttons\">\n                {this.showCancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} /> : <div style={{display: 'none'}} />}\n                <verdocs-button label=\"OK\" onClick={() => this.handleOk()} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-preview.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1329d89c.js');
 require('./Types-da57ce69.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8c408e5b.js');
-const utils = require('./utils-e0f38696.js');
-const templateStore = require('./templateStore-974781a8.js');
-const Templates = require('./Templates-0051d647.js');
+const utils = require('./utils-beee79a1.js');
+const templateStore = require('./templateStore-42a49905.js');
+const Templates = require('./Templates-acde16f2.js');
 const errors = require('./errors-0396da3d.js');
 require('./index-eb130f52.js');
 require('./Templates-eb100ab3.js');
@@ -44,9 +44,9 @@ const VerdocsPreview = class {
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[PREVIEW] Page rendered', pageInfo);
-    const fields = templateStore.state.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+    const fields = templateStore.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     console.log('[PREVIEW] Fields on page', fields);
-    fields.forEach(field => utils.renderDocumentField(field, pageInfo.renderedPage, utils.getRoleIndex(templateStore.state.roleNames, field.role_name), this.handleFieldChange, true));
+    fields.forEach(field => utils.renderDocumentField(field, pageInfo, utils.getRoleIndex(templateStore.state.roleNames, field.role_name), { disabled: true, editable: false, draggable: false }));
   }
   render() {
     // TODO: Render a better error

package/dist/cjs/verdocs-preview.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-preview.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,2bAA2b;;MCoBxc,cAAc;;;;oBAIWA,+BAAe,CAAC,UAAU,EAAE;sBAK5B,IAAI;;;EASxC,MAAM,gBAAgB;;IACpB,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAE5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,OAAO,CAAC,GAAG,CAAC,0CAA0C,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MACzE,OAAO;KACR;IAED,IAAI;MACF,OAAO,CAAC,GAAG,CAAC,8BAA8B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MAC7D,MAAMC,sBAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACpD;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,kCAAkC,EAAE,CAAC,CAAC,CAAC;MACnD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAIC,eAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;GACF;EAED,MAAM,iBAAiB,CAAC,KAAqB,EAAE,CAAM,EAAE,QAAiB;IACtE,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;GAChE;EAED,kBAAkB,CAAC,CAAC;IAClB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,QAAQ,CAAC,CAAC;IAEjD,MAAM,MAAM,GAAGC,mBAAa,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,aAAa,KAAK,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC9G,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,KAAK,IAAIC,yBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,EAAEC,kBAAY,CAACF,mBAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC;GAClK;EAED,MAAM;;IAEJ,IAAIA,mBAAa,CAAC,OAAO,IAAI,CAACA,mBAAa,CAAC,QAAQ,EAAE;MACpD,QACEG,QAACC,UAAI,QACHD,+BAAkB,CACb,EACP;KACH;IAED,MAAM,KAAK,GAAG,CAAC,GAAGH,mBAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;IAE9C,QACEG,QAACC,UAAI,QACF,KAAK,CAAC,GAAG,CAAC,IAAI;MACb,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;MACpC,QACED,mCACE,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,YAAY,EAAE,GAAG,EACjB,aAAa,EAAE,GAAG,EAClB,UAAU,EAAE,IAAI,CAAC,QAAQ,EACzB,cAAc,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC/C,MAAM,EAAE;UACN,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAC;UAC9B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC;SAChC,GACD,EACF;KACH,CAAC,CACG,EACP;GACH;;;;;;","names":["VerdocsEndpoint","loadTemplate","SDKError","TemplateStore","renderDocumentField","getRoleIndex","h","Host"],"sources":["./src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","./src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-preview {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  padding: 15px;\n  row-gap: 15px;\n  min-height: 200px;\n  position: relative;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h} from '@stencil/core';\nimport {Event, EventEmitter, Host} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {IPageRenderEvent} from '../verdocs-view/verdocs-view';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Display a template preview experience. This will display the template's attached\n * documents with signing fields overlaid on each page. Fields will be color-coded\n * by recipient, and will be read-only (cannot be filled, moved, or altered).\n */\n@Component({\n  tag: 'verdocs-preview',\n  styleUrl: 'verdocs-preview.scss',\n  shadow: false,\n})\nexport class VerdocsPreview {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  // TODO: Move to state store so we can load this one time\n  async componentDidLoad() {\n    this.endpoint.loadSession();\n\n    if (!this.templateId) {\n      console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n      return;\n    }\n\n    try {\n      console.log(`[PREVIEW] Loading template ${this.templateId}`);\n      await loadTemplate(this.endpoint, this.templateId);\n    } catch (e) {\n      console.log('[PREVIEW] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[PREVIEW] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[PREVIEW] Fields on page', fields);\n    fields.forEach(field => renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true));\n  }\n\n  render() {\n    // TODO: Render a better error\n    if (TemplateStore.loading || !TemplateStore.template) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    const pages = [...TemplateStore.template.pages];\n    pages.sort((a, b) => a.sequence - b.sequence);\n\n    return (\n      <Host>\n        {pages.map(page => {\n          console.log('rendering page', page);\n          return (\n            <verdocs-document-page\n              pageImageUri={page.display_uri}\n              virtualWidth={612}\n              virtualHeight={792}\n              pageNumber={page.sequence}\n              onPageRendered={e => this.handlePageRendered(e)}\n              layers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-preview.entry.cjs.js","mappings":"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","names":["VerdocsEndpoint","loadTemplate","SDKError","TemplateStore","renderDocumentField","getRoleIndex","h","Host"],"sources":["./src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","./src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-preview {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  padding: 15px;\n  row-gap: 15px;\n  min-height: 200px;\n  position: relative;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h} from '@stencil/core';\nimport {Event, EventEmitter, Host} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Display a template preview experience. This will display the template's attached\n * documents with signing fields overlaid on each page. Fields will be color-coded\n * by recipient, and will be read-only (cannot be filled, moved, or altered).\n */\n@Component({\n  tag: 'verdocs-preview',\n  styleUrl: 'verdocs-preview.scss',\n  shadow: false,\n})\nexport class VerdocsPreview {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  // TODO: Move to state store so we can load this one time\n  async componentDidLoad() {\n    this.endpoint.loadSession();\n\n    if (!this.templateId) {\n      console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n      return;\n    }\n\n    try {\n      console.log(`[PREVIEW] Loading template ${this.templateId}`);\n      await loadTemplate(this.endpoint, this.templateId);\n    } catch (e) {\n      console.log('[PREVIEW] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[PREVIEW] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.pageNumber);\n    console.log('[PREVIEW] Fields on page', fields);\n    fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(TemplateStore.roleNames, field.role_name), {disabled: true, editable: false, draggable: false}));\n  }\n\n  render() {\n    // TODO: Render a better error\n    if (TemplateStore.loading || !TemplateStore.template) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    const pages = [...TemplateStore.template.pages];\n    pages.sort((a, b) => a.sequence - b.sequence);\n\n    return (\n      <Host>\n        {pages.map(page => {\n          console.log('rendering page', page);\n          return (\n            <verdocs-document-page\n              pageImageUri={page.display_uri}\n              virtualWidth={612}\n              virtualHeight={792}\n              pageNumber={page.sequence}\n              onPageRendered={e => this.handlePageRendered(e)}\n              layers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-send.cjs.entry.js

@@ -8,7 +8,7 @@ require('./Types-da57ce69.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8c408e5b.js');
-const utils = require('./utils-e0f38696.js');
+const utils = require('./utils-beee79a1.js');
 
 const verdocsSendCss = "verdocs-send{display:-ms-flexbox;display:flex;padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";