npm - @verdocs/web-sdk - Versions diffs - 1.9.15 → 1.9.16 - Mend

@verdocs/web-sdk 1.9.15 → 1.9.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

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

@@ -100,14 +100,14 @@ const VerdocsSignatureDialog = class {
     context.font = `${fontSize}px Dancing Script`;
     context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);
   }
+  handleNameChange(e) {
+    this.enteredName = e.target.value;
+  }
   handleCancel(e) {
     e.stopPropagation();
     e.preventDefault();
     this.cancel.emit();
   }
-  handleNameChange(e) {
-    this.enteredName = e.target.value;
-  }
   handleAdopt(e) {
     e.stopPropagation();
     e.preventDefault();

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

	@@ -1 +1 @@
1	- {"file":"verdocs-field-signature.verdocs-signature-dialog.verdocs-toolbar-icon.entry.js","mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,80CAA80C;;ACM/2C,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAW9qC,qBAAqB;;;;;iBAIwB,IAAI;gBAKpC,EAAE;oBAKG,KAAK;oBAML,KAAK;oBAKL,KAAK;qBAKL,CAAC;yBAkBN,EAAE;;EANhB,MAAM,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;GAC9B;EAOD,UAAU;;IACR,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;IACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;EAED,WAAW,CAAC,CAAM;;IAChB,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAC7C,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC;IAC9B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACjE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;IAChE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,QAAQ,CAAC,MAAM,CAAC;IACpD,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC9E,KAAK,GAAG,WAAK,GAAG,EAAE,IAAI,CAAC,aAAa,IAAI,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAC,WAAW,GAAG,GAAG,cAAQ,OAAO,EAAE,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,gBAAoB,EAEvJ,IAAI,CAAC,QAAQ,KACZ,4BAAsB,IAAI,EAAE,YAAY,IACtC,+BAAuB,EACvB,gBACE,4BACE,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,EAEF,0BAAoB,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,EAC1H,0BAAoB,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;;;;ACxHH,MAAM,yBAAyB,GAAG,ixDAAixD;;MCUtyD,sBAAsB;;;;;gBAMV,EAAE;sBAaH,KAAK;uBAEI,EAAE;gBAET,MAAM;;EAE9B,iBAAiB;IACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;IAE7B,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,WAAW,CAAC,CAAC,KAAK,GAAG,WAAW,GAAG,EAAE,EAAE;IAEzE,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,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;GACjG;EAED,YAAY,CAAC,CAAM;IACjB,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;EAED,gBAAgB,CAAC,CAAM;IACrB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;GACnC;EAED,WAAW,CAAC,CAAM;IAChB,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgKD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACtC,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,4BAA4B,EAEhD,WAAK,KAAK,EAAC,SAAS,IAClB,0BAAoB,WAAW,EAAC,cAAc,EAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,GAAI,EACvK,WAAK,KAAK,EAAC,UAAU,qDAAqD,EAWzE,IAAI,CAAC,UAAU,GAAG,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,GAAI,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAE5H,WAAK,KAAK,EAAC,YAAY,yQAGjB,EAEN,WAAK,KAAK,EAAC,SAAS,IAClB,sBAAgB,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACrG,sBAAgB,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAI,CACpF,CACF,CACF,CACD,EACP;GACH;;;;AC5RH,MAAM,qBAAqB,GAAG,yrCAAyrC;;MCY1sC,kBAAkB;;;gBAQN,EAAE;gBAKF,EAAE;uBAOF,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;;EAE5F,gBAAgB;IACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;;;KAG7D,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;GACF;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,SAAQ,CAAC,CAAC;GAC/C;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;GAC5C;;;;EAMD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,IACb,+BACoB,IAAI,CAAC,WAAW,EAClC,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC1B,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,MAAM,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAoB,CAAC,GAC/C,EACF,WAAK,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,2BAAuB,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IACtI,IAAI,CAAC,IAAI,EACV,gCAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1C,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","./src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n position: relative;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n /\n@Component({\n tag: 'verdocs-field-signature',\n styleUrl: 'verdocs-field-signature.scss',\n shadow: false,\n})\nexport class VerdocsFieldSignature {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n If set, the signature creation dialog will be initialized with this text.\n /\n @Prop() name?: string = '';\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field will be colored using this index value to select the background color.\n /\n @Prop() roleindex?: number = 0;\n\n /\n Event emitted when the field has changed.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n /\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n console.log('focused', this);\n }\n\n @State()\n tempSignature: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[SIGNATURE] Adopted signature');\n this.tempSignature = e.detail;\n this.fieldChange?.emit(this.tempSignature);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-signature-dialog');\n this.dialog.setAttribute('name', this.name);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = this.tempSignature \|\| settings.base64;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n return (\n <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n {value ? <img src={this.tempSignature \|\| settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n position: fixed;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n\n .dialog {\n width: 100%;\n max-width: 340px;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n background: $dialog-bg;\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n padding: 20px 20px 0 20px;\n line-height: 28px;\n font-size: 20px;\n font-weight: 500;\n }\n\n .content {\n font-size: 14px;\n padding: 20px;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n\n canvas {\n background: $verdocs-grey-4;\n box-sizing: border-box;\n margin: 0 auto;\n width: 300px;\n // TODO: The original app had an aspect ratio of (80 / 305) (signatureBodyWidth - 20)\n height: 79px;\n max-width: 100%;\n box-shadow: 0 0 6px 0 #0000001f;\n }\n\n .disclaimer {\n text-align: justify;\n padding: 8px 0;\n font-size: 11px;\n line-height: 14px;\n color: rgba(0, 0, 0, 0.54);\n }\n\n .as-shown {\n font-size: 11px;\n margin: 4px 0 20px 4px;\n color: rgba(0, 0, 0, 0.54);\n }\n\n .tabs {\n display: flex;\n flex-direction: row;\n\n .tab {\n padding: 8px 15px;\n cursor: pointer;\n\n &.active {\n border-bottom: 2px solid $light-border-color;\n }\n\n &:hover {\n color: $primary-color;\n }\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/*\n Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n /\n@Component({\n tag: 'verdocs-signature-dialog',\n styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n private canvasElement?: HTMLCanvasElement;\n\n /\n Initial signature text\n /\n @Prop() name: string = '';\n\n /\n Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n * representation of the signature adopted.\n /\n @Event({composed: true}) next: EventEmitter<string>;\n\n /\n Fired if the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n @State() fontLoaded = false;\n\n @State() enteredName: string = '';\n\n @State() mode: string = 'type';\n\n componentWillLoad() {\n this.enteredName = this.name;\n\n const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n ds.load().then(font => {\n document.fonts.add(font);\n this.fontLoaded = true;\n });\n }\n\n componentDidLoad() {\n this.redrawSignature();\n }\n\n componentDidUpdate() {\n this.redrawSignature();\n }\n\n redrawSignature() {\n if (!this.canvasElement) {\n return;\n }\n\n const canvasWidth = this.canvasElement.width;\n\n const context = this.canvasElement.getContext('2d');\n context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n let fontSize = 100;\n do {\n fontSize -= 2;\n context.font = `${fontSize}px Dancing Script`;\n } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.font = `${fontSize}px Dancing Script`;\n context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n e.preventDefault();\n this.cancel.emit();\n }\n\n handleNameChange(e: any) {\n this.enteredName = e.target.value;\n }\n\n handleAdopt(e: any) {\n e.stopPropagation();\n e.preventDefault();\n const data = this.canvasElement.toDataURL('image/png');\n this.next.emit(data);\n }\n\n /\n selColor(hex: string) {\n this.color = hex;\n this.animateDraw();\n }\n\n stopDraw() {\n this.paint = false;\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n draw(e) {\n this.paint = true;\n this.addPoints(e, false);\n this.animateDraw();\n }\n\n recordPoints(e) {\n if (this.paint) {\n this.addPoints(e, true);\n this.animateDraw();\n }\n }\n\n animateDraw() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n this.canvas.strokeStyle = this.color \|\| '#000000';\n this.canvas.lineJoin = 'round';\n this.canvas.lineWidth = 3;\n\n for (let i = 0; i < this.points.length; i++) {\n this.canvas.beginPath();\n if (this.points[i].drag && i) {\n this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n } else {\n this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n }\n\n this.canvas.lineTo(this.points[i].x, this.points[i].y);\n this.canvas.closePath();\n this.canvas.stroke();\n }\n }\n\n drawCurve(color: string, curve: number) {\n this.canvas.beginPath();\n }\n\n\n\n addPoints(e, drag: boolean) {\n if (window) {\n let x;\n let y;\n e.preventDefault();\n if (e.touches && e.touches.length > 0) {\n x = e.touches[0].clientX;\n } else {\n x = e.clientX;\n }\n\n if (e.touches && e.touches.length > 0) {\n y = e.touches[0].clientY;\n } else {\n y = e.clientY;\n }\n const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n this.points.push({\n x: x - rect.left,\n y: y - rect.top,\n drag: drag\n });\n }\n }\n\n clearPad() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n this.points = [];\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n async adoptAndSign() {\n try {\n this.adoptedAndSigned = true;\n await this.updateFullName();\n await this.captureSignatureFromCanvas();\n const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n this.handleMode();\n } catch (err) {\n this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n }\n }\n\n handleMode() {\n let currentField;\n switch (this.mode) {\n case 'signerview':\n if (this.signatureMode === 'Signature') {\n this.signatureService.postSignatureBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateSigned(currentField.fName, true);\n this.signatureService.toggleSig(false);\n this.signatureService.setSignatureId(result.id);\n this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n this.eventTracker.createEvent({\n category: 'verdoc',\n action: 'verdoc signed',\n label: `verdoc id: ${this.envelopeId}`\n })\n if (res && res.settings) {\n this.signatureService.setSignatureData(res.settings.base64);\n this.signatureService.setSignatureId(res.settings.signature_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n } else {\n this.signatureService.postInitialBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateInitialed(currentField.fName, true);\n this.signatureService.setInitialId(result.id);\n this.signatureService.toggleSig(false);\n this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n if (res && res.settings) {\n this.signatureService.setInitialData(res.settings.base64);\n this.signatureService.setInitialId(res.settings.initial_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n }\n break;\n }\n }\n /\n\n render() {\n return (\n <Host onClick={e => this.handleCancel(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Signature</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n {/<div class=\"tabs\">/}\n {/ <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>/}\n {/ Type/}\n {/ </div>/}\n {/<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>/}\n {/ Draw/}\n {/</div>/}\n {/</div>/}\n\n {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n <div class=\"disclaimer\">\n By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n including legally binding contracts — just the same as a pen-and-paper signature or initial.\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n font-family: $verdocs-primary-font;\n display: inline-block;\n\n .icon {\n display: inline-block;\n cursor: pointer;\n\n svg {\n fill: $choice-available-color;\n }\n }\n\n .tooltip {\n display: none;\n box-shadow: 0 0 10px 1px #999999;\n background: #ffffff;\n color: $label-color;\n max-width: 240px;\n font-weight: bold;\n padding: 5px 10px;\n font-size: 13px;\n position: relative;\n border-radius: 4px;\n z-index: 10000;\n\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n top: -4px;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n }\n\n &[data-show] {\n display: block;\n }\n\n &[data-popper-placement^='top'] > .arrow {\n bottom: -4px;\n }\n\n &[data-popper-placement^='bottom'] > .arrow {\n top: -4px;\n }\n\n &[data-popper-placement^='left'] > .arrow {\n right: -4px;\n }\n\n &[data-popper-placement^='right'] > .arrow {\n left: -4px;\n }\n }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/\n Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n /\n@Component({\n tag: 'verdocs-toolbar-icon',\n styleUrl: 'verdocs-toolbar-icon.scss',\n shadow: false,\n})\nexport class VerdocsToolbarIcon {\n iconEl: HTMLDivElement;\n tooltip: HTMLDivElement;\n popperInstance: Instance;\n\n /\n Help text to display on hover/focus\n /\n @Prop() text: string = '';\n\n /\n SVG icon to display\n /\n @Prop() icon: string = '';\n\n /\n Triggered when the icon is pressed\n */\n // @Event({composed: true}) press: EventEmitter;\n\n @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n componentDidLoad() {\n this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n show() {\n this.tooltip?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n }\n\n hide() {\n this.tooltip?.removeAttribute('data-show');\n }\n\n // handlePress() {\n // this.press?.emit();\n // }\n\n render() {\n return (\n <Host class={{}}>\n <div\n aria-describedby={this.containerId}\n class=\"icon\"\n innerHTML={this.icon}\n onMouseEnter={() => this.show()}\n onFocus={() => this.show()}\n onMouseLeave={() => this.hide()}\n onBlur={() => this.hide()}\n ref={el => (this.iconEl = el as HTMLDivElement)}\n />\n <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n {this.text}\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-field-signature.verdocs-signature-dialog.verdocs-toolbar-icon.entry.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","./src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","./src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","./src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n position: relative;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n /\n@Component({\n tag: 'verdocs-field-signature',\n styleUrl: 'verdocs-field-signature.scss',\n shadow: false,\n})\nexport class VerdocsFieldSignature {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n If set, the signature creation dialog will be initialized with this text.\n /\n @Prop() name?: string = '';\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field will be colored using this index value to select the background color.\n /\n @Prop() roleindex?: number = 0;\n\n /\n Event emitted when the field has changed.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n /\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n console.log('focused', this);\n }\n\n @State()\n tempSignature: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[SIGNATURE] Adopted signature');\n this.tempSignature = e.detail;\n this.fieldChange?.emit(this.tempSignature);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-signature-dialog');\n this.dialog.setAttribute('name', this.name);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = this.tempSignature \|\| settings.base64;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n return (\n <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n {value ? <img src={this.tempSignature \|\| settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n position: fixed;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n\n .dialog {\n width: 100%;\n max-width: 340px;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n background: $dialog-bg;\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n padding: 20px 20px 0 20px;\n line-height: 28px;\n font-size: 20px;\n font-weight: 500;\n }\n\n .content {\n font-size: 14px;\n padding: 20px;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n\n canvas {\n background: $verdocs-grey-4;\n box-sizing: border-box;\n margin: 0 auto;\n width: 300px;\n // TODO: The original app had an aspect ratio of (80 / 305) (signatureBodyWidth - 20)\n height: 79px;\n max-width: 100%;\n box-shadow: 0 0 6px 0 #0000001f;\n }\n\n .disclaimer {\n text-align: justify;\n padding: 8px 0;\n font-size: 11px;\n line-height: 14px;\n color: rgba(0, 0, 0, 0.54);\n }\n\n .as-shown {\n font-size: 11px;\n margin: 4px 0 20px 4px;\n color: rgba(0, 0, 0, 0.54);\n }\n\n .tabs {\n display: flex;\n flex-direction: row;\n\n .tab {\n padding: 8px 15px;\n cursor: pointer;\n\n &.active {\n border-bottom: 2px solid $light-border-color;\n }\n\n &:hover {\n color: $primary-color;\n }\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/*\n Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n /\n@Component({\n tag: 'verdocs-signature-dialog',\n styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n private canvasElement?: HTMLCanvasElement;\n\n /\n Initial signature text\n /\n @Prop() name: string = '';\n\n /\n Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n * representation of the signature adopted.\n /\n @Event({composed: true}) next: EventEmitter<string>;\n\n /\n Fired if the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n @State() fontLoaded = false;\n\n @State() enteredName: string = '';\n\n @State() mode: string = 'type';\n\n componentWillLoad() {\n this.enteredName = this.name;\n\n const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n ds.load().then(font => {\n document.fonts.add(font);\n this.fontLoaded = true;\n });\n }\n\n componentDidLoad() {\n this.redrawSignature();\n }\n\n componentDidUpdate() {\n this.redrawSignature();\n }\n\n redrawSignature() {\n if (!this.canvasElement) {\n return;\n }\n\n const canvasWidth = this.canvasElement.width;\n\n const context = this.canvasElement.getContext('2d');\n context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n let fontSize = 100;\n do {\n fontSize -= 2;\n context.font = `${fontSize}px Dancing Script`;\n } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.font = `${fontSize}px Dancing Script`;\n context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n }\n\n handleNameChange(e: any) {\n this.enteredName = e.target.value;\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n e.preventDefault();\n this.cancel.emit();\n }\n\n handleAdopt(e: any) {\n e.stopPropagation();\n e.preventDefault();\n const data = this.canvasElement.toDataURL('image/png');\n this.next.emit(data);\n }\n\n /\n selColor(hex: string) {\n this.color = hex;\n this.animateDraw();\n }\n\n stopDraw() {\n this.paint = false;\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n draw(e) {\n this.paint = true;\n this.addPoints(e, false);\n this.animateDraw();\n }\n\n recordPoints(e) {\n if (this.paint) {\n this.addPoints(e, true);\n this.animateDraw();\n }\n }\n\n animateDraw() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n this.canvas.strokeStyle = this.color \|\| '#000000';\n this.canvas.lineJoin = 'round';\n this.canvas.lineWidth = 3;\n\n for (let i = 0; i < this.points.length; i++) {\n this.canvas.beginPath();\n if (this.points[i].drag && i) {\n this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n } else {\n this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n }\n\n this.canvas.lineTo(this.points[i].x, this.points[i].y);\n this.canvas.closePath();\n this.canvas.stroke();\n }\n }\n\n drawCurve(color: string, curve: number) {\n this.canvas.beginPath();\n }\n\n\n\n addPoints(e, drag: boolean) {\n if (window) {\n let x;\n let y;\n e.preventDefault();\n if (e.touches && e.touches.length > 0) {\n x = e.touches[0].clientX;\n } else {\n x = e.clientX;\n }\n\n if (e.touches && e.touches.length > 0) {\n y = e.touches[0].clientY;\n } else {\n y = e.clientY;\n }\n const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n this.points.push({\n x: x - rect.left,\n y: y - rect.top,\n drag: drag\n });\n }\n }\n\n clearPad() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n this.points = [];\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n async adoptAndSign() {\n try {\n this.adoptedAndSigned = true;\n await this.updateFullName();\n await this.captureSignatureFromCanvas();\n const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n this.handleMode();\n } catch (err) {\n this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n }\n }\n\n handleMode() {\n let currentField;\n switch (this.mode) {\n case 'signerview':\n if (this.signatureMode === 'Signature') {\n this.signatureService.postSignatureBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateSigned(currentField.fName, true);\n this.signatureService.toggleSig(false);\n this.signatureService.setSignatureId(result.id);\n this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n this.eventTracker.createEvent({\n category: 'verdoc',\n action: 'verdoc signed',\n label: `verdoc id: ${this.envelopeId}`\n })\n if (res && res.settings) {\n this.signatureService.setSignatureData(res.settings.base64);\n this.signatureService.setSignatureId(res.settings.signature_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n } else {\n this.signatureService.postInitialBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateInitialed(currentField.fName, true);\n this.signatureService.setInitialId(result.id);\n this.signatureService.toggleSig(false);\n this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n if (res && res.settings) {\n this.signatureService.setInitialData(res.settings.base64);\n this.signatureService.setInitialId(res.settings.initial_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n }\n break;\n }\n }\n /\n\n render() {\n return (\n <Host onClick={e => this.handleCancel(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Signature</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n {/<div class=\"tabs\">/}\n {/ <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>/}\n {/ Type/}\n {/ </div>/}\n {/<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>/}\n {/ Draw/}\n {/</div>/}\n {/</div>/}\n\n {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n <div class=\"disclaimer\">\n By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n including legally binding contracts — just the same as a pen-and-paper signature or initial.\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n font-family: $verdocs-primary-font;\n display: inline-block;\n\n .icon {\n display: inline-block;\n cursor: pointer;\n\n svg {\n fill: $choice-available-color;\n }\n }\n\n .tooltip {\n display: none;\n box-shadow: 0 0 10px 1px #999999;\n background: #ffffff;\n color: $label-color;\n max-width: 240px;\n font-weight: bold;\n padding: 5px 10px;\n font-size: 13px;\n position: relative;\n border-radius: 4px;\n z-index: 10000;\n\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n top: -4px;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n }\n\n &[data-show] {\n display: block;\n }\n\n &[data-popper-placement^='top'] > .arrow {\n bottom: -4px;\n }\n\n &[data-popper-placement^='bottom'] > .arrow {\n top: -4px;\n }\n\n &[data-popper-placement^='left'] > .arrow {\n right: -4px;\n }\n\n &[data-popper-placement^='right'] > .arrow {\n left: -4px;\n }\n }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/\n Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n /\n@Component({\n tag: 'verdocs-toolbar-icon',\n styleUrl: 'verdocs-toolbar-icon.scss',\n shadow: false,\n})\nexport class VerdocsToolbarIcon {\n iconEl: HTMLDivElement;\n tooltip: HTMLDivElement;\n popperInstance: Instance;\n\n /\n Help text to display on hover/focus\n /\n @Prop() text: string = '';\n\n /\n SVG icon to display\n /\n @Prop() icon: string = '';\n\n /\n Triggered when the icon is pressed\n */\n // @Event({composed: true}) press: EventEmitter;\n\n @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n componentDidLoad() {\n this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n show() {\n this.tooltip?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n }\n\n hide() {\n this.tooltip?.removeAttribute('data-show');\n }\n\n // handlePress() {\n // this.press?.emit();\n // }\n\n render() {\n return (\n <Host class={{}}>\n <div\n aria-describedby={this.containerId}\n class=\"icon\"\n innerHTML={this.icon}\n onMouseEnter={() => this.show()}\n onFocus={() => this.show()}\n onMouseLeave={() => this.hide()}\n onBlur={() => this.hide()}\n ref={el => (this.iconEl = el as HTMLDivElement)}\n />\n <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n {this.text}\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/verdocs-preview.entry.js CHANGED Viewed

@@ -3,10 +3,10 @@ import './Types-ab9f6af8.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
 import { r as renderDocumentField, a as getRoleIndex } from './utils-2e6beff8.js';
 import { s as state } from './templateStore-b8512d36.js';
-import { l as loadTemplate } from './Templates-7a534fd1.js';
+import { l as loadTemplate } from './Templates-e77fb578.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './index-fd7b8a34.js';
-import './Templates-f7c590c0.js';
+import './Templates-0638b1e4.js';
 const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";

package/dist/esm/verdocs-quick-functions_3.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-f78d163d.js';
 import './Types-ab9f6af8.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
-import { a as getTemplates } from './Templates-f7c590c0.js';
+import { a as getTemplates } from './Templates-0638b1e4.js';
 /**
  * Verdocs provides a range of search functions to help find and retrieve content. This module provides generic functions intended

package/dist/esm/verdocs-send.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
-import { g as getTemplate } from './Templates-f7c590c0.js';
+import { g as getTemplate } from './Templates-0638b1e4.js';
 import './Types-ab9f6af8.js';
 import { i as isValidEmail, a as isValidPhone } from './Validators-f110bae2.js';
 import { g as getRGBA } from './Colors-1b298092.js';

package/dist/esm/verdocs-sign.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-f78d163d.js';
-import { g as getSigningSession, a as getEnvelopeById, s as state, b as getEnvelopeFile, u as updateEnvelopeField, c as updateEnvelopeFieldSignature } from './Envelopes-19ca610d.js';
+import { g as getSigningSession, a as getEnvelopeById, s as state, b as getEnvelopeFile, u as updateEnvelopeField, c as updateEnvelopeFieldSignature, d as updateEnvelopeFieldInitials } from './Envelopes-8038ca25.js';
 import './Types-ab9f6af8.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators-f110bae2.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
@@ -79,6 +79,20 @@ var createSignature = function (endpoint, name, signature) {
         .then(function (r) { return r.data; });
 };
+/**
+ * Create an initials block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
+ * an initials block to be used for all initials fields in the document. Thus, this is typically called one time to
+ * create and store an initials block. Thereafter, the ID of the initials block may be re-used for each initials field
+ * to be "stamped" by the user.
+ */
+var createInitials = function (endpoint, name, initials) {
+    var data = new FormData();
+    data.append('initial', initials, name);
+    return endpoint.api //
+        .post("/initials", data)
+        .then(function (r) { return r.data; });
+};
 const verdocsSignCss = "verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 15px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}";
 const VerdocsSign = class {
@@ -96,6 +110,7 @@ const VerdocsSign = class {
     this.signerToken = null;
     this.hasSignature = false;
     this.nextButtonLabel = 'Start';
+    this.errorMessage = '';
     this.focusedField = '';
     this.finishLater = false;
     this.showFinishLater = false;
@@ -201,81 +216,58 @@ const VerdocsSign = class {
         break;
     }
   }
+  saveFieldChange(fieldName, fields) {
+    updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
+      .catch(e => {
+      var _a, _b, _c, _d, _e, _f;
+      if (((_a = e.response) === null || _a === void 0 ? void 0 : _a.status) === 401 && ((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === 'jwt expired') {
+        // TODO: Do we want to improve the instructions here?
+        console.log('[SIGN] Signing session expired');
+        this.errorMessage = 'Signing session expired.';
+      }
+      else {
+        console.log('[SIGN] Server error', e);
+      }
+      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+    });
+  }
   async handleFieldChange(field, e, optionId) {
     console.log('fieldChange', field, e);
     const { value, checked } = e.target;
     switch (field.type) {
       case 'textbox':
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c, _d, _e, _f;
-          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
-            console.log('jwt expired');
-          }
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value });
       case 'checkbox_group':
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options: [{ id: optionId, checked }] } })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: { options: [{ id: optionId, checked }] } });
       case 'radio_button_group':
         const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options } })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: { options } });
       case 'dropdown':
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c;
-          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
       case 'initial':
-        console.log('Got initial', e.detail);
-        break;
+        const initialsBlob = await (await fetch(e.detail)).blob();
+        return createInitials(this.endpoint, 'initial', initialsBlob) //
+          .then(newInitials => {
+          console.log('New initials', field.name, newInitials);
+          updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);
+        });
       case 'signature':
-        console.log('Got signature', e.detail);
-        const newSignature = await createSignature(this.endpoint, 'signature', e.detail);
-        console.log('Created signature', newSignature);
-        //   --data-raw '{"ip_address":"ip_unavailable"}' \
-        const attachResult = await updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
-        console.log('Attach result', attachResult);
-        break;
+        const signatureBlob = await (await fetch(e.detail)).blob();
+        return createSignature(this.endpoint, 'signature', signatureBlob) //
+          .then(newSignature => {
+          console.log('New sign', field.name, newSignature);
+          updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);
+        });
       case 'date':
         const iso = e.target.getAttribute('iso');
-        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: iso })
-          .then(r => console.log('Update result', r))
-          .catch(e => {
-          var _a, _b, _c, _d, _e, _f;
-          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
-            console.log('jwt expired');
-          }
-          console.log('Error updating', e);
-        });
-        break;
+        return this.saveFieldChange(field.name, { prepared: false, value: iso });
       default:
         console.log('Unhandled field update', { value, checked }, field);
         break;
     }
   }
   isFieldValid(field) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     switch (field.type) {
       case 'textbox':
         switch (((_a = field.settings) === null || _a === void 0 ? void 0 : _a.validator) || '') {
@@ -288,18 +280,19 @@ const VerdocsSign = class {
         }
       case 'signature':
       case 'initial':
+        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.base64);
       case 'textarea':
       case 'date':
       case 'timestamp':
       case 'attachment':
-        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.result);
+        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.result);
       case 'dropdown':
-        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.value);
+        return !!((_g = field.settings) === null || _g === void 0 ? void 0 : _g.value);
       case 'checkbox_group':
-        const checked = (((_h = (_g = field.settings) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.filter(option => option.checked)) || []).length;
-        return checked >= (((_j = field.settings) === null || _j === void 0 ? void 0 : _j.minimum_checked) || 0) && checked <= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.maximum_checked) || 999);
+        const checked = (((_j = (_h = field.settings) === null || _h === void 0 ? void 0 : _h.options) === null || _j === void 0 ? void 0 : _j.filter(option => option.checked)) || []).length;
+        return checked >= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.minimum_checked) || 0) && checked <= (((_l = field.settings) === null || _l === void 0 ? void 0 : _l.maximum_checked) || 999);
       case 'radio_button_group':
-        return (((_m = (_l = field.settings) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.filter(option => option.selected)) || []).length > 0;
+        return (((_o = (_m = field.settings) === null || _m === void 0 ? void 0 : _m.options) === null || _o === void 0 ? void 0 : _o.filter(option => option.selected)) || []).length > 0;
       // TODO
       // case 'checkbox':
       //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
@@ -309,39 +302,41 @@ const VerdocsSign = class {
         return false;
     }
   }
-  // (async () => {
-  //   await customElements.whenDefined('verdocs-field-signature');
-  //   const els = document.getElementById('verdocs-field-signature');
-  //   await els.focusField();
-  // })();
   handleNext() {
+    var _a;
     // Find and focus the next incomplete required field
     const requiredFields = this.fields.filter(field => field.required);
-    console.log('required Fields', requiredFields);
     const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
-    console.log('focused Index', focusedIndex);
     let nextFocusedIndex = focusedIndex + 1;
     if (nextFocusedIndex >= requiredFields.length) {
       nextFocusedIndex = 0;
     }
-    const nextRequiredField = requiredFields[nextFocusedIndex];
-    console.log('next required field', nextRequiredField);
+    let nextRequiredField = requiredFields[nextFocusedIndex];
+    // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
+    let skips = 0;
+    if (skips < requiredFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_a = nextRequiredField.settings) === null || _a === void 0 ? void 0 : _a.result) === 'signed') {
+      skips++;
+      nextFocusedIndex++;
+      if (nextFocusedIndex >= requiredFields.length) {
+        nextFocusedIndex = 0;
+      }
+      nextRequiredField = requiredFields[nextFocusedIndex];
+    }
+    if (skips >= requiredFields.length) {
+      nextRequiredField = null;
+    }
     if (nextRequiredField) {
       const id = getFieldId(nextRequiredField);
       const el = document.getElementById(id);
-      console.log('focusing', id, el);
       el === null || el === void 0 ? void 0 : el.focusField();
       this.focusedField = nextRequiredField.name;
     }
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[SIGN] Page rendered', pageInfo);
+    console.log('[SIGN] Page rendered, adding fields', pageInfo);
     const roleIndex = getRoleIndex(state.roleNames, this.recipient.role_name);
-    console.log('rendering fields for recipient', roleIndex);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
-    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    console.log('[SIGN] Fields on page', recipientFields);
     recipientFields.forEach(field => {
       var _a;
       const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false });
@@ -349,10 +344,10 @@ const VerdocsSign = class {
         return;
       }
       el.addEventListener('input', e => {
-        this.handleFieldChange(field, e);
+        this.handleFieldChange(field, e).catch(() => { });
       });
       el.addEventListener('fieldChange', e => {
-        this.handleFieldChange(field, e);
+        this.handleFieldChange(field, e).catch(() => { });
       });
       el.setAttribute('roleindex', roleIndex);
       el.setAttribute('xScale', pageInfo.xScale);
@@ -412,17 +407,18 @@ const VerdocsSign = class {
       { id: 'later', label: 'Finish Later' },
       { id: 'claim', label: 'Claim the Document', disabled: true },
       { id: 'decline', label: 'Decline to Sign' },
-      { id: 'print', label: 'Print Without Signing' },
+      { id: 'print', label: 'Print Without Signing', disabled: true },
       { id: 'download', label: 'Download' },
     ];
     return (h(Host, { class: { agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, !this.finishLater && (h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents."))), h("div", { class: "header" }, h("div", { class: "inner" }, !this.finishLater && (h("div", { class: "toolbar" }, h("div", { class: "tools" }, h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h("div", { style: { flex: '1' } })), h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))))), !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document" }, (state.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
+      console.log('p', envelopeDocument, pages);
       return (h(Fragment, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] })))));
-    })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: "To complete the document, use the link in the original email notification inviting you to review and finish the document.", onNext: () => (this.showFinishLater = false) }))));
+    })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: "To complete the document, use the link in the original email notification inviting you to review and finish the document.", onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') })));
   }
 };
 VerdocsSign.style = verdocsSignCss;