npm - @verdocs/web-sdk - Versions diffs - 1.9.20 → 1.9.21 - Mend

@verdocs/web-sdk 1.9.20 → 1.9.21

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 (362) hide show

package/dist/verdocs-web-sdk/p-35333c3b.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as t,h as i,H as e}from"./p-ff1278ed.js";import{g as s}from"./p-6de76553.js";import{g as r}from"./p-208a3320.js";import{c as n}from"./p-ec26fc38.js";import"./p-21603661.js";const a='verdocs-field-signature{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}';const l='<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>';const d=class{constructor(i){o(this,i);this.fieldChange=t(this,"fieldChange",7);this.settingsPress=t(this,"settingsPress",7);this.field=null;this.name="";this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0;this.tempSignature=""}async focusField(){this.handleShow();console.log("focused",this)}hideDialog(){var o;(o=this.dialog)===null\|\|o===void 0?void 0:o.remove();this.dialog=null}handleAdopt(o){var t;console.log("[SIGNATURE] Adopted signature");this.tempSignature=o.detail;(t=this.fieldChange)===null\|\|t===void 0?void 0:t.emit(this.tempSignature);this.hideDialog()}handleShow(){this.dialog=document.createElement("verdocs-signature-dialog");this.dialog.setAttribute("name",this.name);this.dialog.setAttribute("roleindex",this.roleindex);this.dialog.addEventListener("cancel",(()=>this.hideDialog()));this.dialog.addEventListener("next",(o=>this.handleAdopt(o)));document.body.append(this.dialog)}render(){var o,t,n;const a=r(this.field);const d=this.tempSignature\|\|a.base64;const c=(t=(o=this.disabled)!==null&&o!==void 0?o:a.disabled)!==null&&t!==void 0?t:false;const p=this.field["rgba"]\|\|s(this.roleindex);if(this.done){return i(e,{class:{done:this.done}},d&&i("img",{src:this.tempSignature\|\|a.base64,alt:"Signature"}))}return i(e,{class:{required:(n=this.field)===null\|\|n===void 0?void 0:n.required,disabled:c},style:{backgroundColor:p}},d?i("img",{src:this.tempSignature\|\|a.base64,alt:"Signature"}):i("button",{onClick:()=>!c&&this.handleShow()},"Signature"),this.editable&&i("verdocs-button-panel",{icon:l},i("h6",null,"Field Settings"),i("form",null,i("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}]}),i("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:o=>console.log("ipt",o)}),i("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:o=>console.log("ipt",o)}))))}};d.style=a;const c='verdocs-signature-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}';const p=class{constructor(i){o(this,i);this.next=t(this,"next",7);this.cancel=t(this,"cancel",7);this.name="";this.fontLoaded=false;this.enteredName="";this.mode="type"}componentWillLoad(){this.enteredName=this.name;const o=new FontFace("Dancing Script","url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)");o.load().then((o=>{document.fonts.add(o);this.fontLoaded=true}))}componentDidLoad(){this.redrawSignature()}componentDidUpdate(){this.redrawSignature()}redrawSignature(){if(!this.canvasElement){return}const o=this.canvasElement.width;const t=this.canvasElement.getContext("2d");t.clearRect(0,0,this.canvasElement.width,this.canvasElement.height);let i=100;do{i-=2;t.font=`${i}px Dancing Script`}while(t.measureText(this.enteredName).width>o-32);t.textAlign="center";t.textBaseline="middle";t.font=`${i}px Dancing Script`;t.fillText(this.enteredName,this.canvasElement.width/2,this.canvasElement.height/2)}handleNameChange(o){this.enteredName=o.target.value}handleCancel(o){o.stopPropagation();o.preventDefault();this.cancel.emit()}handleAdopt(o){o.stopPropagation();o.preventDefault();const t=this.canvasElement.toDataURL("image/png");this.next.emit(t)}render(){return i(e,{onClick:o=>this.handleCancel(o)},i("div",{class:"dialog"},i("div",{class:"heading"},"Create Your Signature"),i("div",{class:"content"},i("verdocs-text-input",{placeholder:"Full Name...",label:"Full Name",value:this.enteredName,onInput:o=>this.handleNameChange(o),onClick:o=>o.stopPropagation()}),i("div",{class:"as-shown"},"As shown on driver's license or govt. ID card."),this.fontLoaded?i("canvas",{ref:o=>this.canvasElement=o}):i("div",{style:{display:"none"}}),i("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 — just the same as a pen-and-paper signature or initial."),i("div",{class:"buttons"},i("verdocs-button",{label:"CANCEL",size:"normal",variant:"outline",onClick:o=>this.handleCancel(o)}),i("verdocs-button",{label:"Adopt & Sign",size:"normal",onClick:o=>this.handleAdopt(o)})))))}};p.style=c;const h='verdocs-toolbar-icon{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:10000}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}';const g=class{constructor(t){o(this,t);this.text="";this.icon="";this.containerId=`verdocs-toolbar-icon-${Math.random().toString(36).substring(2,11)}`}componentDidLoad(){this.popperInstance=n(this.iconEl,this.tooltip,{})}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}show(){var o,t;(o=this.tooltip)===null\|\|o===void 0?void 0:o.setAttribute("data-show","");(t=this.popperInstance)===null\|\|t===void 0?void 0:t.update().catch((()=>{}))}hide(){var o;(o=this.tooltip)===null\|\|o===void 0?void 0:o.removeAttribute("data-show")}render(){return i(e,{class:{}},i("div",{"aria-describedby":this.containerId,class:"icon",innerHTML:this.icon,onMouseEnter:()=>this.show(),onFocus:()=>this.show(),onMouseLeave:()=>this.hide(),onBlur:()=>this.hide(),ref:o=>this.iconEl=o}),i("div",{id:this.containerId,role:"tooltip",class:"tooltip","data-popper-placement":"bottom",ref:o=>this.tooltip=o},this.text,i("div",{"data-popper-arrow":"true",class:"arrow"})))}};g.style=h;export{d as verdocs_field_signature,p as verdocs_signature_dialog,g as verdocs_toolbar_icon};
2	+ //# sourceMappingURL=p-35333c3b.entry.js.map

package/dist/verdocs-web-sdk/{p-b73576e6.entry.js.map → p-35333c3b.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"names":["verdocsFieldSignatureCss","settingsIcon","VerdocsFieldSignature","[object Object]","this","handleShow","console","log","_a","dialog","remove","e","tempSignature","detail","fieldChange","emit","hideDialog","document","createElement","setAttribute","name","roleindex","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","_c","style","onClick","editable","icon","label","options","placeholder","onInput","verdocsSignatureDialogCss","VerdocsSignatureDialog","enteredName","ds","FontFace","load","then","font","fonts","add","fontLoaded","redrawSignature","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","measureText","textAlign","textBaseline","fillText","target","stopPropagation","preventDefault","cancel","data","toDataURL","next","handleCancel","handleNameChange","ref","el","display","size","variant","verdocsToolbarIconCss","VerdocsToolbarIcon","Math","random","toString","substring","popperInstance","createPopper","iconEl","tooltip","destroy","update","catch","removeAttribute","aria-describedby","containerId","innerHTML","onMouseEnter","show","onFocus","onMouseLeave","hide","onBlur","id","role","data-popper-placement","text","data-popper-arrow"],"mappings":"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","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 &.done {\n border: none;\n opacity: 1;\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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={this.tempSignature \|\| settings.base64} alt=\"Signature\" />}</Host>;\n }\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"]}
1	+ {"version":3,"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"],"names":["verdocsFieldSignatureCss","settingsIcon","VerdocsFieldSignature","[object Object]","this","handleShow","console","log","_a","dialog","remove","e","tempSignature","detail","fieldChange","emit","hideDialog","document","createElement","setAttribute","name","roleindex","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","_c","style","onClick","editable","icon","label","options","placeholder","onInput","verdocsSignatureDialogCss","VerdocsSignatureDialog","enteredName","ds","FontFace","load","then","font","fonts","add","fontLoaded","redrawSignature","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","measureText","textAlign","textBaseline","fillText","target","stopPropagation","preventDefault","cancel","data","toDataURL","next","handleCancel","handleNameChange","ref","el","display","size","variant","verdocsToolbarIconCss","VerdocsToolbarIcon","Math","random","toString","substring","popperInstance","createPopper","iconEl","tooltip","destroy","update","catch","removeAttribute","aria-describedby","containerId","innerHTML","onMouseEnter","show","onFocus","onMouseLeave","hide","onBlur","id","role","data-popper-placement","text","data-popper-arrow"],"mappings":"6LAAA,MAAMA,EAA2B,03CCMjC,MAAMC,EACJ,+rCAWWC,EAAqB,gIAIwB,eAKhC,iBAKK,oBAMA,oBAKA,gBAKJ,qBAKI,qBAkBL,GANdC,mBACRC,KAAKC,aACLC,QAAQC,IAAI,UAAWH,MAQzBD,oBACEK,EAAAJ,KAAKK,UAAM,MAAAD,SAAA,OAAA,EAAAA,EAAEE,SACbN,KAAKK,OAAS,KAGhBN,YAAYQ,SACVL,QAAQC,IAAI,iCACZH,KAAKQ,cAAgBD,EAAEE,QACvBL,EAAAJ,KAAKU,eAAW,MAAAN,SAAA,OAAA,EAAAA,EAAEO,KAAKX,KAAKQ,eAC5BR,KAAKY,aAGPb,aACEC,KAAKK,OAASQ,SAASC,cAAc,4BACrCd,KAAKK,OAAOU,aAAa,OAAQf,KAAKgB,MACtChB,KAAKK,OAAOU,aAAa,YAAaf,KAAKiB,WAC3CjB,KAAKK,OAAOa,iBAAiB,UAAU,IAAMlB,KAAKY,eAClDZ,KAAKK,OAAOa,iBAAiB,QAAQX,GAAKP,KAAKmB,YAAYZ,KAC3DM,SAASO,KAAKC,OAAOrB,KAAKK,QAG5BN,mBACE,MAAMuB,EAAWC,EAAiBvB,KAAKwB,OACvC,MAAMC,EAAQzB,KAAKQ,eAAiBc,EAASI,OAC7C,MAAMC,GAAWC,GAAAxB,EAAAJ,KAAK2B,YAAQ,MAAAvB,SAAA,EAAAA,EAAIkB,EAASK,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAMC,EAAkB7B,KAAKwB,MAAM,SAAWM,EAAQ9B,KAAKiB,WAE3D,GAAIjB,KAAK+B,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAM/B,KAAK+B,OAAQN,GAASO,EAAA,MAAA,CAAKG,IAAKnC,KAAKQ,eAAiBc,EAASI,OAAQU,IAAI,eAGxG,OACEJ,EAACC,EAAI,CAACC,MAAO,CAACG,UAAUC,EAAAtC,KAAKwB,SAAK,MAAAc,SAAA,OAAA,EAAAA,EAAED,SAAUV,SAAAA,GAAWY,MAAO,CAACV,gBAAAA,IAC9DJ,EAAQO,EAAA,MAAA,CAAKG,IAAKnC,KAAKQ,eAAiBc,EAASI,OAAQU,IAAI,cAAiBJ,EAAA,SAAA,CAAQQ,QAAS,KAAOb,GAAY3B,KAAKC,cAAY,aAEnID,KAAKyC,UACJT,EAAA,uBAAA,CAAsBU,KAAM7C,GAC1BmC,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEW,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASlB,MAAO,SACxB,CAACkB,MAAO,SAAUlB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBW,MAAM,aAAalB,MAAM,GAAGoB,YAAY,uBAAuBC,QAASvC,GAAKL,QAAQC,IAAI,MAAOI,KACpHyB,EAAA,qBAAA,CAAoBW,MAAM,cAAclB,MAAM,GAAGoB,YAAY,sBAAsBC,QAASvC,GAAKL,QAAQC,IAAI,MAAOI,oBC3HlI,MAAMwC,EAA4B,sxDCUrBC,EAAsB,mGAMV,mBAaD,uBAES,aAEP,OAExBjD,oBACEC,KAAKiD,YAAcjD,KAAKgB,KAExB,MAAMkC,EAAK,IAAIC,SAAS,iBAAkB,oHAC1CD,EAAGE,OAAOC,MAAKC,IACbzC,SAAS0C,MAAMC,IAAIF,GACnBtD,KAAKyD,WAAa,QAItB1D,mBACEC,KAAK0D,kBAGP3D,qBACEC,KAAK0D,kBAGP3D,kBACE,IAAKC,KAAK2D,cAAe,CACvB,OAGF,MAAMC,EAAc5D,KAAK2D,cAAcE,MAEvC,MAAMC,EAAU9D,KAAK2D,cAAcI,WAAW,MAC9CD,EAAQE,UAAU,EAAG,EAAGhE,KAAK2D,cAAcE,MAAO7D,KAAK2D,cAAcM,QAErE,IAAIC,EAAW,IACf,EAAG,CACDA,GAAY,EACZJ,EAAQR,KAAO,GAAGY,2BACXJ,EAAQK,YAAYnE,KAAKiD,aAAaY,MAAQD,EAAc,IAErEE,EAAQM,UAAY,SACpBN,EAAQO,aAAe,SACvBP,EAAQR,KAAO,GAAGY,qBAClBJ,EAAQQ,SAAStE,KAAKiD,YAAajD,KAAK2D,cAAcE,MAAQ,EAAG7D,KAAK2D,cAAcM,OAAS,GAG/FlE,iBAAiBQ,GACfP,KAAKiD,YAAc1C,EAAEgE,OAAO9C,MAG9B1B,aAAaQ,GACXA,EAAEiE,kBACFjE,EAAEkE,iBACFzE,KAAK0E,OAAO/D,OAGdZ,YAAYQ,GACVA,EAAEiE,kBACFjE,EAAEkE,iBACF,MAAME,EAAO3E,KAAK2D,cAAciB,UAAU,aAC1C5E,KAAK6E,KAAKlE,KAAKgE,GAiKjB5E,SACE,OACEiC,EAACC,EAAI,CAACO,QAASjC,GAAKP,KAAK8E,aAAavE,IACpCyB,EAAA,MAAA,CAAKE,MAAM,UACTF,EAAA,MAAA,CAAKE,MAAM,WAAS,yBAEpBF,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,qBAAA,CAAoBa,YAAY,eAAeF,MAAM,YAAYlB,MAAOzB,KAAKiD,YAAaH,QAASvC,GAAKP,KAAK+E,iBAAiBxE,GAAIiC,QAASjC,GAAKA,EAAEiE,oBAClJxC,EAAA,MAAA,CAAKE,MAAM,YAAU,kDAWpBlC,KAAKyD,WAAazB,EAAA,SAAA,CAAQgD,IAAKC,GAAOjF,KAAK2D,cAAgBsB,IAA+BjD,EAAA,MAAA,CAAKO,MAAO,CAAC2C,QAAS,UAEjHlD,EAAA,MAAA,CAAKE,MAAM,cAAY,iQAKvBF,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,iBAAA,CAAgBW,MAAM,SAASwC,KAAK,SAASC,QAAQ,UAAU5C,QAASjC,GAAKP,KAAK8E,aAAavE,KAC/FyB,EAAA,iBAAA,CAAgBW,MAAM,eAAewC,KAAK,SAAS3C,QAASjC,GAAKP,KAAKmB,YAAYZ,qBCtRhG,MAAM8E,EAAwB,srCCYjBC,EAAkB,yCAQN,aAKA,oBAOA,wBAAwBC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,MAEvF3F,mBACEC,KAAK2F,eAAiBC,EAAa5F,KAAK6F,OAAQ7F,KAAK8F,QAAS,IAMhE/F,uBACE,GAAIC,KAAK2F,eAAgB,CACvB3F,KAAK2F,eAAeI,UACpB/F,KAAK2F,eAAiB,MAI1B5F,gBACEK,EAAAJ,KAAK8F,WAAO,MAAA1F,SAAA,OAAA,EAAAA,EAAEW,aAAa,YAAa,KACxCa,EAAA5B,KAAK2F,kBAAc,MAAA/D,SAAA,OAAA,EAAAA,EAAEoE,SAASC,OAAM,SAGtClG,cACEK,EAAAJ,KAAK8F,WAAO,MAAA1F,SAAA,OAAA,EAAAA,EAAE8F,gBAAgB,aAOhCnG,SACE,OACEiC,EAACC,EAAI,CAACC,MAAO,IACXF,EAAA,MAAA,CAAAmE,mBACoBnG,KAAKoG,YACvBlE,MAAM,OACNmE,UAAWrG,KAAK0C,KAChB4D,aAAc,IAAMtG,KAAKuG,OACzBC,QAAS,IAAMxG,KAAKuG,OACpBE,aAAc,IAAMzG,KAAK0G,OACzBC,OAAQ,IAAM3G,KAAK0G,OACnB1B,IAAKC,GAAOjF,KAAK6F,OAASZ,IAE5BjD,EAAA,MAAA,CAAK4E,GAAI5G,KAAKoG,YAAaS,KAAK,UAAU3E,MAAM,UAAS4E,wBAAuB,SAAS9B,IAAKC,GAAOjF,KAAK8F,QAAUb,GACjHjF,KAAK+G,KACN/E,EAAA,MAAA,CAAAgF,oBAAuB,OAAO9E,MAAM","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 &.done {\n border: none;\n opacity: 1;\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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={this.tempSignature \|\| settings.base64} alt=\"Signature\" />}</Host>;\n }\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"]}

package/dist/verdocs-web-sdk/p-359129d0.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as o,h as s,H as i}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as r}from"./p-1f1127dd.js";import{r as a,a as t}from"./p-208a3320.js";import{s as n}from"./p-4ef84b54.js";import{l}from"./p-dadccc57.js";import{S as d}from"./p-7a1b2643.js";import"./p-21603661.js";import"./p-5ea05a1d.js";import"./p-c2cc4492.js";const p='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}';const c=class{constructor(s){e(this,s);this.sdkError=o(this,"sdkError",7);this.endpoint=r.getDefault();this.templateId=null}async componentDidLoad(){var e,o,s;this.endpoint.loadSession();if(!this.templateId){console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);return}try{console.log(`[PREVIEW] Loading template ${this.templateId}`);await l(this.endpoint,this.templateId)}catch(i){console.log("[PREVIEW] Error loading template",i);(e=this.sdkError)===null\|\|e===void 0?void 0:e.emit(new d(i.message,(o=i.response)===null\|\|o===void 0?void 0:o.status,(s=i.response)===null\|\|s===void 0?void 0:s.data))}}async handleFieldChange(e,o,s){console.log("[PREVIEW] handleFieldChange",e,o,s)}handlePageRendered(e){const o=e.detail;console.log("[PREVIEW] Page rendered",o);const s=n.fields.filter((e=>e.page_sequence===o.pageNumber));console.log("[PREVIEW] Fields on page",s);s.forEach((e=>a(e,o,t(n.roleNames,e.role_name),{disabled:true,editable:false,draggable:false})))}render(){if(n.loading\|\|!n.template){return s(i,null,s("verdocs-loader",null))}const e=[...n.template.pages];e.sort(((e,o)=>e.sequence-o.sequence));return s(i,null,e.map((e=>{console.log("rendering page",e);return s("verdocs-document-page",{pageImageUri:e.display_uri,virtualWidth:612,virtualHeight:792,pageNumber:e.sequence,onPageRendered:e=>this.handlePageRendered(e),layers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]})})))}};c.style=p;export{c as verdocs_preview};
2	+ //# sourceMappingURL=p-359129d0.entry.js.map

package/dist/verdocs-web-sdk/{p-55de5397.entry.js.map → p-359129d0.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"names":["verdocsPreviewCss","VerdocsPreview","VerdocsEndpoint","getDefault","[object Object]","this","endpoint","loadSession","templateId","console","log","loadTemplate","e","_a","sdkError","emit","SDKError","message","_b","response","status","_c","data","field","optionId","pageInfo","detail","fields","TemplateStore","filter","page_sequence","pageNumber","forEach","renderDocumentField","getRoleIndex","roleNames","role_name","disabled","editable","draggable","loading","template","h","Host","pages","sort","a","b","sequence","map","page","pageImageUri","display_uri","virtualWidth","virtualHeight","onPageRendered","handlePageRendered","layers","name","type"],"mappings":"~~4TAAA~~,MAAMA,EAAoB,0bCoBbC,EAAc,gFAIWC,EAAgBC,6BAKhB,KASpCC,mCACEC,KAAKC,SAASC,cAEd,IAAKF,KAAKG,WAAY,CACpBC,QAAQC,IAAI,0CAA0CL,KAAKG,cAC3D,OAGF,IACEC,QAAQC,IAAI,8BAA8BL,KAAKG,oBACzCG,EAAaN,KAAKC,SAAUD,KAAKG,YACvC,MAAOI,GACPH,QAAQC,IAAI,mCAAoCE,IAChDC,EAAAR,KAAKS,YAAQ,MAAAD,SAAA,OAAA,EAAAA,EAAEE,KAAK,IAAIC,EAASJ,EAAEK,SAASC,EAAAN,EAAEO,YAAQ,MAAAD,SAAA,OAAA,EAAAA,EAAEE,QAAQC,EAAAT,EAAEO,YAAQ,MAAAE,SAAA,OAAA,EAAAA,EAAEC,QAIhFlB,wBAAwBmB,EAAuBX,EAAQY,GACrDf,QAAQC,IAAI,8BAA+Ba,EAAOX,EAAGY,GAGvDpB,mBAAmBQ,GACjB,MAAMa,EAAWb,EAAEc,OACnBjB,QAAQC,IAAI,0BAA2Be,GAEvC,MAAME,EAASC,EAAcD,OAAOE,QAAON,GAASA,EAAMO,gBAAkBL,EAASM,aACrFtB,QAAQC,IAAI,2BAA4BiB,GACxCA,EAAOK,SAAQT,GAASU,EAAoBV,EAAOE,EAAUS,EAAaN,EAAcO,UAAWZ,EAAMa,WAAY,CAACC,SAAU,KAAMC,SAAU,MAAOC,UAAW,UAGpKnC,SAEE,GAAIwB,EAAcY,UAAYZ,EAAca,SAAU,CACpD,OACEC,EAACC,EAAI,KACHD,EAAA,iBAAA,OAKN,MAAME,EAAQ,IAAIhB,EAAca,SAASG,OACzCA,EAAMC,MAAK,CAACC,EAAGC,IAAMD,EAAEE,SAAWD,EAAEC,WAEpC,OACEN,EAACC,EAAI,KACFC,EAAMK,KAAIC,IACTzC,QAAQC,IAAI,iBAAkBwC,GAC9B,OACER,EAAA,wBAAA,CACES,aAAcD,EAAKE,YACnBC,aAAc,IACdC,cAAe,IACfvB,WAAYmB,EAAKF,SACjBO,eAAgB3C,GAAKP,KAAKmD,mBAAmB5C,GAC7C6C,OAAQ,CACN,CAACC,KAAM,OAAQC,KAAM,UACrB,CAACD,KAAM,WAAYC,KAAM","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"]}
1	+ {"version":3,"sources":["src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"names":["verdocsPreviewCss","VerdocsPreview","VerdocsEndpoint","getDefault","[object Object]","this","endpoint","loadSession","templateId","console","log","loadTemplate","e","_a","sdkError","emit","SDKError","message","_b","response","status","_c","data","field","optionId","pageInfo","detail","fields","TemplateStore","filter","page_sequence","pageNumber","forEach","renderDocumentField","getRoleIndex","roleNames","role_name","disabled","editable","draggable","loading","template","h","Host","pages","sort","a","b","sequence","map","page","pageImageUri","display_uri","virtualWidth","virtualHeight","onPageRendered","handlePageRendered","layers","name","type"],"mappings":"+UAAA,MAAMA,EAAoB,0bCoBbC,EAAc,gFAIWC,EAAgBC,6BAKhB,KASpCC,mCACEC,KAAKC,SAASC,cAEd,IAAKF,KAAKG,WAAY,CACpBC,QAAQC,IAAI,0CAA0CL,KAAKG,cAC3D,OAGF,IACEC,QAAQC,IAAI,8BAA8BL,KAAKG,oBACzCG,EAAaN,KAAKC,SAAUD,KAAKG,YACvC,MAAOI,GACPH,QAAQC,IAAI,mCAAoCE,IAChDC,EAAAR,KAAKS,YAAQ,MAAAD,SAAA,OAAA,EAAAA,EAAEE,KAAK,IAAIC,EAASJ,EAAEK,SAASC,EAAAN,EAAEO,YAAQ,MAAAD,SAAA,OAAA,EAAAA,EAAEE,QAAQC,EAAAT,EAAEO,YAAQ,MAAAE,SAAA,OAAA,EAAAA,EAAEC,QAIhFlB,wBAAwBmB,EAAuBX,EAAQY,GACrDf,QAAQC,IAAI,8BAA+Ba,EAAOX,EAAGY,GAGvDpB,mBAAmBQ,GACjB,MAAMa,EAAWb,EAAEc,OACnBjB,QAAQC,IAAI,0BAA2Be,GAEvC,MAAME,EAASC,EAAcD,OAAOE,QAAON,GAASA,EAAMO,gBAAkBL,EAASM,aACrFtB,QAAQC,IAAI,2BAA4BiB,GACxCA,EAAOK,SAAQT,GAASU,EAAoBV,EAAOE,EAAUS,EAAaN,EAAcO,UAAWZ,EAAMa,WAAY,CAACC,SAAU,KAAMC,SAAU,MAAOC,UAAW,UAGpKnC,SAEE,GAAIwB,EAAcY,UAAYZ,EAAca,SAAU,CACpD,OACEC,EAACC,EAAI,KACHD,EAAA,iBAAA,OAKN,MAAME,EAAQ,IAAIhB,EAAca,SAASG,OACzCA,EAAMC,MAAK,CAACC,EAAGC,IAAMD,EAAEE,SAAWD,EAAEC,WAEpC,OACEN,EAACC,EAAI,KACFC,EAAMK,KAAIC,IACTzC,QAAQC,IAAI,iBAAkBwC,GAC9B,OACER,EAAA,wBAAA,CACES,aAAcD,EAAKE,YACnBC,aAAc,IACdC,cAAe,IACfvB,WAAYmB,EAAKF,SACjBO,eAAgB3C,GAAKP,KAAKmD,mBAAmB5C,GAC7C6C,OAAQ,CACN,CAACC,KAAM,OAAQC,KAAM,UACrB,CAACD,KAAM,WAAYC,KAAM","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"]}

package/dist/verdocs-web-sdk/{p-8ebd80e3.system.js → p-4437603c.system.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function l(e){try{s(r.next(e))}catch(e){a(e)}}function i(e){try{s(r["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):o(e.value).then(l,i)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,l;return l={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function i(e){return function(t){return s([e,t])}}function s(l){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:n.label++;return{value:l[1],done:false};case 5:n.label++;o=l[1];l=[0];continue;case 7:l=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){n=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){n.label=l[1];break}if(l[0]===6&&n.label<a[1]){n.label=a[1];a=l;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(l);break}if(a[2])n.ops.pop();n.trys.pop();continue}l=t.call(e,n)}catch(e){l=[6,e];o=0}finally{r=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-0f6da8c7.system.js","./p-e1f005fc.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.c},function(e){n=e.i}],execute:function(){var r=this;var o=t({template:null,loadProgress:0,loading:true,pageNumbers:[],pageUris:{},roleNames:[],fields:[],dirty:false}),a=o.state,l=o.onChange;e("s",a);l("template",(function(e){return __awaiter(r,void 0,void 0,(function(){return __generator(this,(function(t){if(!e){console.log("[TEMPLATESTORE] Clearing template");a.fields=[];a.roleNames=[];a.pageNumbers=[];a.dirty=false;a.loading=false;a.loadProgress=0;return[2]}console.log("[TEMPLATESTORE] Template loaded",e);a.roleNames=e.roles.map((function(e){return e.name}));console.log("[TEMPLATESTORE] Loaded roles",a.roleNames);a.fields=[];e.roles.forEach((function(e){var t;(t=a.fields).push.apply(t,e.fields)}));console.log("[TEMPLATESTORE] Loaded fields",a.fields);a.pageNumbers=n(1,e.pages.length);return[2]}))}))}));l("fields",(function(e){console.log("[TEMPLATESTORE] Field changed",e);a.dirty=true}))}}}));
-//# sourceMappingURL=p-8ebd80e3.system.js.map
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function l(e){try{s(r.next(e))}catch(e){a(e)}}function i(e){try{s(r["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):o(e.value).then(l,i)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,l;return l={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function i(e){return function(t){return s([e,t])}}function s(l){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:n.label++;return{value:l[1],done:false};case 5:n.label++;o=l[1];l=[0];continue;case 7:l=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){n=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){n.label=l[1];break}if(l[0]===6&&n.label<a[1]){n.label=a[1];a=l;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(l);break}if(a[2])n.ops.pop();n.trys.pop();continue}l=t.call(e,n)}catch(e){l=[6,e];o=0}finally{r=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-0f6da8c7.system.js","./p-0eee7f43.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.c},function(e){n=e.i}],execute:function(){var r=this;var o=t({template:null,loadProgress:0,loading:true,pageNumbers:[],pageUris:{},roleNames:[],fields:[],dirty:false}),a=o.state,l=o.onChange;e("s",a);l("template",(function(e){return __awaiter(r,void 0,void 0,(function(){return __generator(this,(function(t){if(!e){console.log("[TEMPLATESTORE] Clearing template");a.fields=[];a.roleNames=[];a.pageNumbers=[];a.dirty=false;a.loading=false;a.loadProgress=0;return[2]}console.log("[TEMPLATESTORE] Template loaded",e);a.roleNames=e.roles.map((function(e){return e.name}));console.log("[TEMPLATESTORE] Loaded roles",a.roleNames);a.fields=[];e.roles.forEach((function(e){var t;(t=a.fields).push.apply(t,e.fields)}));console.log("[TEMPLATESTORE] Loaded fields",a.fields);a.pageNumbers=n(1,e.pages.length);return[2]}))}))}));l("fields",(function(e){console.log("[TEMPLATESTORE] Field changed",e);a.dirty=true}))}}}));
+//# sourceMappingURL=p-4437603c.system.js.map

package/dist/verdocs-web-sdk/{p-8ebd80e3.system.js.map → p-4437603c.system.js.map} RENAMED Viewed

File without changes

package/dist/verdocs-web-sdk/p-48285c26.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as e,H as t}from"./p-ff1278ed.js";import{g as i}from"./p-6de76553.js";import{g as d}from"./p-208a3320.js";import"./p-21603661.js";const s='verdocs-field-radio-button{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:"";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';const r=`<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;const a=`<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;const n=class{constructor(e){o(this,e);this.field=null;this.option=0;this.disabled=false;this.done=false;this.roleindex=0}render(){var o,s;const n=d(this.field);const l=(s=(o=this.disabled)!==null&&o!==void 0?o:n.disabled)!==null&&s!==void 0?s:false;const p=this.field["rgba"]\|\|i(this.roleindex);const b=n.options[this.option];const c=`${this.field.name}-${b.id}`;if(this.done){return e(t,{class:{done:this.done},style:{maxWidth:"10px"}},e("span",{innerHTML:!!b.selected?a:r}))}return e(t,{class:{required:n.required,disabled:l},style:{backgroundColor:p}},e("input",{id:c,type:"radio",value:b.id,tabIndex:n.order,name:this.field.name,checked:!!b.selected,disabled:l,required:n.required}),e("label",{htmlFor:c}))}};n.style=s;export{n as verdocs_field_radio_button};
2	+ //# sourceMappingURL=p-48285c26.entry.js.map

package/dist/verdocs-web-sdk/{p-45715eaf.entry.js.map → p-48285c26.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"names":["verdocsFieldRadioButtonCss","RadioIconUnselected","RadioIconSelected","VerdocsFieldRadioButton","[object Object]","settings","getFieldSettings","this","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","option","options","id","name","done","h","Host","class","style","maxWidth","innerHTML","selected","required","type","value","tabIndex","order","checked","htmlFor"],"mappings":"~~0HAAA~~,MAAMA,EAA6B,krDCMnC,MAAMC,EAAsB,qNAE5B,MAAMC,EAAoB,oRAUbC,EAAuB,0CAIsB,iBAK/B,gBAKI,gBAKJ,qBAKI,EAE7BC,iBACE,MAAMC,EAAWC,EAAiBC,KAAKC,OACvC,MAAMC,GAAWC,GAAAC,EAAAJ,KAAKE,YAAQ,MAAAE,SAAA,EAAAA,EAAIN,EAASI,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBL,KAAKC,MAAM,SAAWK,EAAQN,KAAKO,WAC3D,MAAMC,EAASV,EAASW,QAAQT,KAAKQ,QACrC,MAAME,EAAK,GAAGV,KAAKC,MAAMU,QAAQH,EAAOE,KAExC,GAAIV,KAAKY,KAAM,CACb,OACEC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMZ,KAAKY,MAAOI,MAAO,CAACC,SAAU,SAChDJ,EAAA,OAAA,CAAMK,YAAaV,EAAOW,SAAWxB,EAAoBD,KAK/D,OACEmB,EAACC,EAAI,CAACC,MAAO,CAACK,SAAUtB,EAASsB,SAAUlB,SAAAA,GAAWc,MAAO,CAACX,gBAAAA,IAC5DQ,EAAA,QAAA,CACEH,GAAIA,EACJW,KAAK,QACLC,MAAOd,EAAOE,GACda,SAAUzB,EAAS0B,MACnBb,KAAMX,KAAKC,MAAMU,KACjBc,UAAWjB,EAAOW,SAClBjB,SAAUA,EACVkB,SAAUtB,EAASsB,WAErBP,EAAA,QAAA,CAAOa,QAAShB","sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n font-family: $verdocs-primary-font;\n width: 14px;\n height: 14px;\n display: block;\n font-size: 11px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.disabled.done {\n opacity: 1;\n }\n\n &.done input[type='radio'] {\n margin: 0;\n padding: 0;\n width: 10px;\n height: 10px;\n }\n\n &:not(.done) input[type='radio'] {\n position: absolute;\n opacity: 0;\n\n + label {\n &:before {\n content: '';\n //background: $verdocs-grey-3;\n border-radius: 100%;\n border: 1px solid rgba(0, 0, 0, 0.6);\n display: inline-block;\n width: 10px;\n height: 10px;\n position: absolute;\n left: 1px;\n top: 1px;\n cursor: pointer;\n text-align: center;\n transition: all 250ms ease;\n }\n }\n\n &:checked {\n + label {\n &:before {\n background-color: $verdocs-green;\n box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n }\n }\n }\n\n &:focus {\n + label {\n &:before {\n outline: none;\n border-color: $verdocs-green;\n }\n }\n }\n\n &:disabled {\n + label {\n &:before {\n box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n border-color: darken($verdocs-grey-3, 25%);\n background: darken($verdocs-grey-3, 25%);\n }\n }\n }\n\n + label {\n &:empty {\n &:before {\n margin-right: 0;\n }\n }\n }\n }\n\n &.required {\n input[type='radio'] {\n + label {\n &:before {\n border: 1px solid $verdocs-red-1;\n }\n }\n }\n }\n\n &.hide {\n display: none;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/*\n Displays a radio button.\n /\n@Component({\n tag: 'verdocs-field-radio-button',\n styleUrl: 'verdocs-field-radio-button.scss',\n shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n The index of the settings option this particular checkbox is for\n /\n @Prop() option: number = 0;\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 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 const option = settings.options[this.option];\n const id = `${this.field.name}-${option.id}`;\n\n if (this.done) {\n return (\n <Host class={{done: this.done}} style={{maxWidth: '10px'}}>\n <span innerHTML={!!option.selected ? RadioIconSelected : RadioIconUnselected} />\n </Host>\n );\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n <input\n id={id}\n type=\"radio\"\n value={option.id}\n tabIndex={settings.order}\n name={this.field.name}\n checked={!!option.selected}\n disabled={disabled}\n required={settings.required}\n />\n <label htmlFor={id} />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"names":["verdocsFieldRadioButtonCss","RadioIconUnselected","RadioIconSelected","VerdocsFieldRadioButton","[object Object]","settings","getFieldSettings","this","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","option","options","id","name","done","h","Host","class","style","maxWidth","innerHTML","selected","required","type","value","tabIndex","order","checked","htmlFor"],"mappings":"kJAAA,MAAMA,EAA6B,krDCMnC,MAAMC,EAAsB,qNAE5B,MAAMC,EAAoB,oRAUbC,EAAuB,0CAIsB,iBAK/B,gBAKI,gBAKJ,qBAKI,EAE7BC,iBACE,MAAMC,EAAWC,EAAiBC,KAAKC,OACvC,MAAMC,GAAWC,GAAAC,EAAAJ,KAAKE,YAAQ,MAAAE,SAAA,EAAAA,EAAIN,EAASI,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBL,KAAKC,MAAM,SAAWK,EAAQN,KAAKO,WAC3D,MAAMC,EAASV,EAASW,QAAQT,KAAKQ,QACrC,MAAME,EAAK,GAAGV,KAAKC,MAAMU,QAAQH,EAAOE,KAExC,GAAIV,KAAKY,KAAM,CACb,OACEC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMZ,KAAKY,MAAOI,MAAO,CAACC,SAAU,SAChDJ,EAAA,OAAA,CAAMK,YAAaV,EAAOW,SAAWxB,EAAoBD,KAK/D,OACEmB,EAACC,EAAI,CAACC,MAAO,CAACK,SAAUtB,EAASsB,SAAUlB,SAAAA,GAAWc,MAAO,CAACX,gBAAAA,IAC5DQ,EAAA,QAAA,CACEH,GAAIA,EACJW,KAAK,QACLC,MAAOd,EAAOE,GACda,SAAUzB,EAAS0B,MACnBb,KAAMX,KAAKC,MAAMU,KACjBc,UAAWjB,EAAOW,SAClBjB,SAAUA,EACVkB,SAAUtB,EAASsB,WAErBP,EAAA,QAAA,CAAOa,QAAShB","sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n font-family: $verdocs-primary-font;\n width: 14px;\n height: 14px;\n display: block;\n font-size: 11px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.disabled.done {\n opacity: 1;\n }\n\n &.done input[type='radio'] {\n margin: 0;\n padding: 0;\n width: 10px;\n height: 10px;\n }\n\n &:not(.done) input[type='radio'] {\n position: absolute;\n opacity: 0;\n\n + label {\n &:before {\n content: '';\n //background: $verdocs-grey-3;\n border-radius: 100%;\n border: 1px solid rgba(0, 0, 0, 0.6);\n display: inline-block;\n width: 10px;\n height: 10px;\n position: absolute;\n left: 1px;\n top: 1px;\n cursor: pointer;\n text-align: center;\n transition: all 250ms ease;\n }\n }\n\n &:checked {\n + label {\n &:before {\n background-color: $verdocs-green;\n box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n }\n }\n }\n\n &:focus {\n + label {\n &:before {\n outline: none;\n border-color: $verdocs-green;\n }\n }\n }\n\n &:disabled {\n + label {\n &:before {\n box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n border-color: darken($verdocs-grey-3, 25%);\n background: darken($verdocs-grey-3, 25%);\n }\n }\n }\n\n + label {\n &:empty {\n &:before {\n margin-right: 0;\n }\n }\n }\n }\n\n &.required {\n input[type='radio'] {\n + label {\n &:before {\n border: 1px solid $verdocs-red-1;\n }\n }\n }\n }\n\n &.hide {\n display: none;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/*\n Displays a radio button.\n /\n@Component({\n tag: 'verdocs-field-radio-button',\n styleUrl: 'verdocs-field-radio-button.scss',\n shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n The index of the settings option this particular checkbox is for\n /\n @Prop() option: number = 0;\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 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 const option = settings.options[this.option];\n const id = `${this.field.name}-${option.id}`;\n\n if (this.done) {\n return (\n <Host class={{done: this.done}} style={{maxWidth: '10px'}}>\n <span innerHTML={!!option.selected ? RadioIconSelected : RadioIconUnselected} />\n </Host>\n );\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n <input\n id={id}\n type=\"radio\"\n value={option.id}\n tabIndex={settings.order}\n name={this.field.name}\n checked={!!option.selected}\n disabled={disabled}\n required={settings.required}\n />\n <label htmlFor={id} />\n </Host>\n );\n }\n}\n"]}

package/dist/verdocs-web-sdk/p-4943d790.system.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var __awaiter=this&&this.__awaiter\|\|function(e,t,i,o){function n(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i\|\|(i=Promise))((function(i,r){function l(e){try{a(o.next(e))}catch(e){r(e)}}function s(e){try{a(o["throw"](e))}catch(e){r(e)}}function a(e){e.done?i(e.value):n(e.value).then(l,s)}a((o=o.apply(e,t\|\|[])).next())}))};var __generator=this&&this.__generator\|\|function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,n,r,l;return l={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function s(e){return function(t){return a([e,t])}}function a(l){if(o)throw new TypeError("Generator is already executing.");while(i)try{if(o=1,n&&(r=l[0]&2?n["return"]:l[0]?n["throw"]\|\|((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,l[1])).done)return r;if(n=0,r)l=[l[0]&2,r.value];switch(l[0]){case 0:case 1:r=l;break;case 4:i.label++;return{value:l[1],done:false};case 5:i.label++;n=l[1];l=[0];continue;case 7:l=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(l[0]===6\|\|l[0]===2)){i=0;continue}if(l[0]===3&&(!r\|\|l[1]>r[0]&&l[1]<r[3])){i.label=l[1];break}if(l[0]===6&&i.label<r[1]){i.label=r[1];r=l;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(l);break}if(r[2])i.ops.pop();i.trys.pop();continue}l=t.call(e,i)}catch(e){l=[6,e];n=0}finally{o=r=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-05eb4fed.system.js","./p-0eee7f43.system.js","./p-51a3ea62.system.js","./p-af2c2f79.system.js"],(function(e){"use strict";var t,i,o,n,r,l;return{setters:[function(e){t=e.r;i=e.h;o=e.H},function(e){n=e.g},function(e){r=e.g},function(e){l=e.f},function(){}],execute:function(){var s='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;opacity:0.5}verdocs-field-timestamp.done{opacity:1}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:10px;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}';var a='<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>';var d=e("verdocs_field_timestamp",function(){function e(e){t(this,e);this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0}e.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.el.focus();return[2]}))}))};e.prototype.render=function(){var e=this;var t,s,d;var u=r(this.field);var c=(s=(t=this.disabled)!==null&&t!==void 0?t:u.disabled)!==null&&s!==void 0?s:false;var f=this.field["rgba"]\|\|n(this.roleindex);var p=u.value\|\|(new Date).toISOString();var v=new Date(p);var h=l(v,"MMM d, y");if(this.done){return i(o,{class:{done:this.done}},h)}return i(o,{class:{required:(d=this.field)===null\|\|d===void 0?void 0:d.required,disabled:c},style:{backgroundColor:f}},i("input",{type:"text",placeholder:u===null\|\|u===void 0?void 0:u.placeholder,tabIndex:u===null\|\|u===void 0?void 0:u.order,value:h,disabled:true,ref:function(t){return e.el=t}}),this.editable&&i("verdocs-button-panel",{icon:a},i("h6",null,"Field Settings"),i("form",null,i("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}]}),i("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:function(e){return console.log("ipt",e)}}),i("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:function(e){return console.log("ipt",e)}}))))};return e}());d.style=s}}}));
2	+ //# sourceMappingURL=p-4943d790.system.entry.js.map

package/dist/verdocs-web-sdk/{p-0189d628.system.entry.js.map → p-4943d790.system.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"names":["verdocsFieldTimestampCss","settingsIcon","VerdocsFieldTimestamp","exports","class_1","prototype","focusField","this","el","focus","render","_this","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","value","Date","toISOString","dt","formatted","format","done","h","Host","class","required","_c","style","type","placeholder","tabIndex","order","ref","editable","icon","label","options","onInput","e","console","log"],"mappings":"~~qtDAAA~~,IAAMA,EAA2B,kuCCOjC,IAAMC,EACJ,6rCAUWC,EAAqBC,EAAA,0BAAA,8CAMwB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEbC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,GAAGC,yBAGVL,EAAAC,UAAAK,OAAA,WAAA,IAAAC,EAAAJ,eACE,IAAMK,EAAWC,EAAiBN,KAAKO,OACvC,IAAMC,GAAWC,GAAAC,EAAAV,KAAKQ,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBX,KAAKO,MAAM,SAAWK,EAAQZ,KAAKa,WAC3D,IAAMC,EAAQT,EAASS,QAAS,IAAIC,MAAOC,cAE3C,IAAMC,EAAK,IAAIF,KAAKD,GACpB,IAAMI,EAAYC,EAAOF,EAAI,YAE7B,GAAIjB,KAAKoB,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMpB,KAAKoB,OAAQF,GAG1C,OACEG,EAACC,EAAI,CAACC,MAAO,CAACC,UAAUC,EAAAzB,KAAKO,SAAK,MAAAkB,SAAA,OAAA,EAAAA,EAAED,SAAUhB,SAAQA,GAAGkB,MAAO,CAACf,gBAAeA,IAC9EU,EAAA,QAAA,CACEM,KAAK,OACLC,YAAavB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUuB,YACvBC,SAAUxB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUyB,MAGpBhB,MAAOI,EACPV,SAAU,KACVuB,IAAK,SAAA9B,GAAE,OAAKG,EAAKH,GAAKA,KAGvBD,KAAKgC,UACJX,EAAA,uBAAA,CAAsBY,KAAMvC,GAC1B2B,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEa,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASpB,MAAO,SACxB,CAACoB,MAAO,SAAUpB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBa,MAAM,aAAapB,MAAM,GAAGc,YAAY,uBAAuBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,MACpHhB,EAAA,qBAAA,CAAoBa,MAAM,cAAcpB,MAAM,GAAGc,YAAY,sBAAsBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,mBA7EhG","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 opacity: 0.5;\n\n &.done {\n opacity: 1;\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: 10px;\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 {format} from 'date-fns';\nimport {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, Method} 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 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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 const value = settings.value \|\| new Date().toISOString();\n\n const dt = new Date(value);\n const formatted = format(dt, 'MMM d, y');\n\n if (this.done) {\n return <Host class={{done: this.done}}>{formatted}</Host>;\n }\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 // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n // is encoded in a ton of existing entries in the database and is hard to change.\n value={formatted}\n disabled={true}\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"]}
1	+ {"version":3,"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"],"names":["verdocsFieldTimestampCss","settingsIcon","VerdocsFieldTimestamp","exports","class_1","prototype","focusField","this","el","focus","render","_this","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","value","Date","toISOString","dt","formatted","format","done","h","Host","class","required","_c","style","type","placeholder","tabIndex","order","ref","editable","icon","label","options","onInput","e","console","log"],"mappings":"2vDAAA,IAAMA,EAA2B,kuCCOjC,IAAMC,EACJ,6rCAUWC,EAAqBC,EAAA,0BAAA,8CAMwB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEbC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,GAAGC,yBAGVL,EAAAC,UAAAK,OAAA,WAAA,IAAAC,EAAAJ,eACE,IAAMK,EAAWC,EAAiBN,KAAKO,OACvC,IAAMC,GAAWC,GAAAC,EAAAV,KAAKQ,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBX,KAAKO,MAAM,SAAWK,EAAQZ,KAAKa,WAC3D,IAAMC,EAAQT,EAASS,QAAS,IAAIC,MAAOC,cAE3C,IAAMC,EAAK,IAAIF,KAAKD,GACpB,IAAMI,EAAYC,EAAOF,EAAI,YAE7B,GAAIjB,KAAKoB,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMpB,KAAKoB,OAAQF,GAG1C,OACEG,EAACC,EAAI,CAACC,MAAO,CAACC,UAAUC,EAAAzB,KAAKO,SAAK,MAAAkB,SAAA,OAAA,EAAAA,EAAED,SAAUhB,SAAQA,GAAGkB,MAAO,CAACf,gBAAeA,IAC9EU,EAAA,QAAA,CACEM,KAAK,OACLC,YAAavB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUuB,YACvBC,SAAUxB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUyB,MAGpBhB,MAAOI,EACPV,SAAU,KACVuB,IAAK,SAAA9B,GAAE,OAAKG,EAAKH,GAAKA,KAGvBD,KAAKgC,UACJX,EAAA,uBAAA,CAAsBY,KAAMvC,GAC1B2B,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEa,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASpB,MAAO,SACxB,CAACoB,MAAO,SAAUpB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBa,MAAM,aAAapB,MAAM,GAAGc,YAAY,uBAAuBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,MACpHhB,EAAA,qBAAA,CAAoBa,MAAM,cAAcpB,MAAM,GAAGc,YAAY,sBAAsBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,mBA7EhG","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 opacity: 0.5;\n\n &.done {\n opacity: 1;\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: 10px;\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 {format} from 'date-fns';\nimport {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, Method} 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 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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 const value = settings.value \|\| new Date().toISOString();\n\n const dt = new Date(value);\n const formatted = format(dt, 'MMM d, y');\n\n if (this.done) {\n return <Host class={{done: this.done}}>{formatted}</Host>;\n }\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 // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n // is encoded in a ton of existing entries in the database and is hard to change.\n value={formatted}\n disabled={true}\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"]}

package/dist/verdocs-web-sdk/p-4ef84b54.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{c as e}from"./p-5ea05a1d.js";import{i as a}from"./p-208a3320.js";const{state:s,onChange:o}=e({template:null,loadProgress:0,loading:true,pageNumbers:[],pageUris:{},roleNames:[],fields:[],dirty:false});o("template",(async e=>{if(!e){console.log("[TEMPLATESTORE] Clearing template");s.fields=[];s.roleNames=[];s.pageNumbers=[];s.dirty=false;s.loading=false;s.loadProgress=0;return}console.log("[TEMPLATESTORE] Template loaded",e);s.roleNames=e.roles.map((e=>e.name));console.log("[TEMPLATESTORE] Loaded roles",s.roleNames);s.fields=[];e.roles.forEach((e=>{s.fields.push(...e.fields)}));console.log("[TEMPLATESTORE] Loaded fields",s.fields);s.pageNumbers=a(1,e.pages.length)}));o("fields",(e=>{console.log("[TEMPLATESTORE] Field changed",e);s.dirty=true}));export{s};
2	+ //# sourceMappingURL=p-4ef84b54.js.map

package/dist/verdocs-web-sdk/{p-19418b30.js.map → p-4ef84b54.js.map} RENAMED Viewed

File without changes

package/dist/verdocs-web-sdk/p-4f321d05.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as t,H as o}from"./p-ff1278ed.js";import{g as l}from"./p-6de76553.js";import{g as s}from"./p-208a3320.js";import"./p-21603661.js";const i='verdocs-field-textarea{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';const r='<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>';const a=class{constructor(t){e(this,t);this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0}async focusField(){this.el.focus()}render(){var e,i;const a=s(this.field);const n=(i=(e=this.disabled)!==null&&e!==void 0?e:a.disabled)!==null&&i!==void 0?i:false;const d=this.field["rgba"]\|\|l(this.roleindex);if(this.done){return t(o,{class:{done:this.done}},a.value)}return t(o,{class:{required:a.required,disabled:n},style:{backgroundColor:d}},t("textarea",{placeholder:a.placeholder\|\|"",tabIndex:a.order,value:a.value,disabled:n,required:a.required,ref:e=>this.el=e}),this.editable&&t("verdocs-button-panel",{icon:r},t("h6",null,"Field Settings"),t("form",null,t("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}],onChange:e=>{console.log("select changed",e)}}),t("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:e=>console.log("ipt",e)}),t("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:e=>console.log("ipt",e)}))))}};a.style=i;export{a as verdocs_field_textarea};
2	+ //# sourceMappingURL=p-4f321d05.entry.js.map

package/dist/verdocs-web-sdk/{p-84cb5d2e.entry.js.map → p-4f321d05.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"names":["verdocsFieldTextareaCss","settingsIcon","VerdocsFieldTextarea","[object Object]","this","el","focus","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","done","h","Host","class","value","required","style","placeholder","tabIndex","order","ref","editable","icon","label","options","onChange","e","console","log","onInput"],"mappings":"~~0HAAA~~,MAAMA,EAA0B,2yBCMhC,MAAMC,EACJ,+rCAUWC,EAAoB,0CAMyB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEnBC,mBACRC,KAAKC,GAAGC,QAGVH,iBACE,MAAMI,EAAWC,EAAiBJ,KAAKK,OACvC,MAAMC,GAAWC,GAAAC,EAAAR,KAAKM,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBT,KAAKK,MAAM,SAAWK,EAAQV,KAAKW,WAE3D,GAAIX,KAAKY,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMZ,KAAKY,OAAQT,EAASa,OAGnD,OACEH,EAACC,EAAI,CAACC,MAAO,CAACE,SAAUd,EAASc,SAAUX,SAAAA,GAAWY,MAAO,CAACT,gBAAAA,IAC5DI,EAAA,WAAA,CACEM,YAAahB,EAASgB,aAAe,GACrCC,SAAUjB,EAASkB,MACnBL,MAAOb,EAASa,MAChBV,SAAUA,EACVW,SAAUd,EAASc,SACnBK,IAAKrB,GAAOD,KAAKC,GAAKA,IAGvBD,KAAKuB,UACJV,EAAA,uBAAA,CAAsBW,KAAM3B,GAC1BgB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEY,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAAST,MAAO,SACxB,CAACS,MAAO,SAAUT,MAAO,WAE3BW,SAAUC,IACRC,QAAQC,IAAI,iBAAkBF,MAIlCf,EAAA,qBAAA,CAAoBY,MAAM,aAAaT,MAAM,GAAGG,YAAY,uBAAuBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF,KACpHf,EAAA,qBAAA,CAAoBY,MAAM,cAAcT,MAAM,GAAGG,YAAY,sBAAsBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF","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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 if (this.done) {\n return <Host class={{done: this.done}}>{settings.value}</Host>;\n }\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"]}
1	+ {"version":3,"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"],"names":["verdocsFieldTextareaCss","settingsIcon","VerdocsFieldTextarea","[object Object]","this","el","focus","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","done","h","Host","class","value","required","style","placeholder","tabIndex","order","ref","editable","icon","label","options","onChange","e","console","log","onInput"],"mappings":"kJAAA,MAAMA,EAA0B,2yBCMhC,MAAMC,EACJ,+rCAUWC,EAAoB,0CAMyB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEnBC,mBACRC,KAAKC,GAAGC,QAGVH,iBACE,MAAMI,EAAWC,EAAiBJ,KAAKK,OACvC,MAAMC,GAAWC,GAAAC,EAAAR,KAAKM,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBT,KAAKK,MAAM,SAAWK,EAAQV,KAAKW,WAE3D,GAAIX,KAAKY,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMZ,KAAKY,OAAQT,EAASa,OAGnD,OACEH,EAACC,EAAI,CAACC,MAAO,CAACE,SAAUd,EAASc,SAAUX,SAAAA,GAAWY,MAAO,CAACT,gBAAAA,IAC5DI,EAAA,WAAA,CACEM,YAAahB,EAASgB,aAAe,GACrCC,SAAUjB,EAASkB,MACnBL,MAAOb,EAASa,MAChBV,SAAUA,EACVW,SAAUd,EAASc,SACnBK,IAAKrB,GAAOD,KAAKC,GAAKA,IAGvBD,KAAKuB,UACJV,EAAA,uBAAA,CAAsBW,KAAM3B,GAC1BgB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEY,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAAST,MAAO,SACxB,CAACS,MAAO,SAAUT,MAAO,WAE3BW,SAAUC,IACRC,QAAQC,IAAI,iBAAkBF,MAIlCf,EAAA,qBAAA,CAAoBY,MAAM,aAAaT,MAAM,GAAGG,YAAY,uBAAuBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF,KACpHf,EAAA,qBAAA,CAAoBY,MAAM,cAAcT,MAAM,GAAGG,YAAY,sBAAsBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF","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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 if (this.done) {\n return <Host class={{done: this.done}}>{settings.value}</Host>;\n }\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"]}

package/dist/verdocs-web-sdk/p-5bbbf36a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as t,h as e,H as s}from"./p-ff1278ed.js";import{g as o}from"./p-6de76553.js";import{g as l}from"./p-208a3320.js";import"./p-21603661.js";const n='verdocs-field-initial{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial.disabled{opacity:0.5}verdocs-field-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}';const a='<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>';const r=class{constructor(e){i(this,e);this.adopt=t(this,"adopt",7);this.cancel=t(this,"cancel",7);this.fieldChange=t(this,"fieldChange",7);this.settingsPress=t(this,"settingsPress",7);this.field=null;this.disabled=false;this.initials="";this.editable=false;this.moveable=false;this.done=false;this.roleindex=0;this.tempInitials=""}async focusField(){this.handleShow()}hideDialog(){var i;(i=this.dialog)===null\|\|i===void 0?void 0:i.remove();this.dialog=null}handleAdopt(i){var t;console.log("[INITIAL] Adopted initials");this.tempInitials=i.detail;(t=this.fieldChange)===null\|\|t===void 0?void 0:t.emit(this.tempInitials);this.hideDialog()}handleShow(){this.dialog=document.createElement("verdocs-initial-dialog");this.dialog.setAttribute("initials",this.initials);this.dialog.setAttribute("roleindex",this.roleindex);this.dialog.addEventListener("cancel",(()=>this.hideDialog()));this.dialog.addEventListener("next",(i=>this.handleAdopt(i)));document.body.append(this.dialog)}render(){var i,t;const n=l(this.field);const r=this.tempInitials\|\|n.base64;const d=(t=(i=this.disabled)!==null&&i!==void 0?i:n.disabled)!==null&&t!==void 0?t:false;const c=this.field["rgba"]\|\|o(this.roleindex);if(this.done){return e(s,{class:{done:this.done}},r&&e("img",{src:this.tempInitials\|\|n.base64,alt:"Initials"}))}return e(s,{class:{required:n.required,disabled:d},style:{backgroundColor:c}},r?e("img",{src:this.tempInitials\|\|n.base64,alt:"Initials"}):e("button",{class:{},onClick:()=>!d&&this.handleShow()},"Initials"),this.editable&&e("verdocs-button-panel",{icon:a},e("h6",null,"Field Settings"),e("form",null,e("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}]}),e("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:i=>console.log("ipt",i)}),e("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:i=>console.log("ipt",i)}))))}};r.style=n;export{r as verdocs_field_initial};
2	+ //# sourceMappingURL=p-5bbbf36a.entry.js.map

package/dist/verdocs-web-sdk/{p-9cf35b81.entry.js.map → p-5bbbf36a.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"names":["verdocsFieldInitialCss","settingsIcon","VerdocsFieldInitial","[object Object]","this","handleShow","_a","dialog","remove","e","console","log","tempInitials","detail","fieldChange","emit","hideDialog","document","createElement","setAttribute","initials","roleindex","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","style","onClick","editable","icon","label","options","placeholder","onInput"],"mappings":"~~iIAAA~~,MAAMA,EAAyB,80CCM/B,MAAMC,EACJ,+rCAWWC,EAAmB,4LAI0B,mBAK3B,oBAKF,iBAME,oBAKA,gBAKJ,qBAKI,oBA6BN,GALbC,mBACRC,KAAKC,aAQPF,oBACEG,EAAAF,KAAKG,UAAM,MAAAD,SAAA,OAAA,EAAAA,EAAEE,SACbJ,KAAKG,OAAS,KAGhBJ,YAAYM,SACVC,QAAQC,IAAI,8BACZP,KAAKQ,aAAeH,EAAEI,QACtBP,EAAAF,KAAKU,eAAW,MAAAR,SAAA,OAAA,EAAAA,EAAES,KAAKX,KAAKQ,cAC5BR,KAAKY,aAGPb,aACEC,KAAKG,OAASU,SAASC,cAAc,0BACrCd,KAAKG,OAAOY,aAAa,WAAYf,KAAKgB,UAC1ChB,KAAKG,OAAOY,aAAa,YAAaf,KAAKiB,WAC3CjB,KAAKG,OAAOe,iBAAiB,UAAU,IAAMlB,KAAKY,eAClDZ,KAAKG,OAAOe,iBAAiB,QAAQb,GAAKL,KAAKmB,YAAYd,KAC3DQ,SAASO,KAAKC,OAAOrB,KAAKG,QAG5BJ,iBACE,MAAMuB,EAAWC,EAAiBvB,KAAKwB,OACvC,MAAMC,EAAQzB,KAAKQ,cAAgBc,EAASI,OAC5C,MAAMC,GAAWC,GAAA1B,EAAAF,KAAK2B,YAAQ,MAAAzB,SAAA,EAAAA,EAAIoB,EAASK,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAMC,EAAkB7B,KAAKwB,MAAM,SAAWM,EAAQ9B,KAAKiB,WAE3D,GAAIjB,KAAK+B,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAM/B,KAAK+B,OAAQN,GAASO,EAAA,MAAA,CAAKG,IAAKnC,KAAKQ,cAAgBc,EAASI,OAAQU,IAAI,cAGvG,OACEJ,EAACC,EAAI,CAACC,MAAO,CAACG,SAAUf,EAASe,SAAUV,SAAAA,GAAWW,MAAO,CAACT,gBAAAA,IAC3DJ,EACCO,EAAA,MAAA,CAAKG,IAAKnC,KAAKQ,cAAgBc,EAASI,OAAQU,IAAI,aAEpDJ,EAAA,SAAA,CAAQE,MAAO,GAAIK,QAAS,KAAOZ,GAAY3B,KAAKC,cAAY,YAKjED,KAAKwC,UACJR,EAAA,uBAAA,CAAsBS,KAAM5C,GAC1BmC,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEU,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASjB,MAAO,SACxB,CAACiB,MAAO,SAAUjB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBU,MAAM,aAAajB,MAAM,GAAGmB,YAAY,uBAAuBC,QAASxC,GAAKC,QAAQC,IAAI,MAAOF,KACpH2B,EAAA,qBAAA,CAAoBU,MAAM,cAAcjB,MAAM,GAAGmB,YAAY,sBAAsBC,QAASxC,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid $verdocs-red-1;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n /\n@Component({\n tag: 'verdocs-field-initial',\n styleUrl: 'verdocs-field-initial.scss',\n shadow: false,\n})\nexport class VerdocsFieldInitial {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The document or template field to display.\n /\n @Prop() initials: string = '';\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: boolean = false;\n\n /\n If set, the field will be colored using this index value to select the background color.\n /\n @Prop() roleindex?: number = 0;\n\n /\n Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n /\n @Event({composed: true}) adopt: EventEmitter<string>;\n\n /\n Event emitted when the user cancels the process.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n * keypress.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n */\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n }\n\n @State()\n tempInitials: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[INITIAL] Adopted initials');\n this.tempInitials = e.detail;\n this.fieldChange?.emit(this.tempInitials);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-initial-dialog');\n this.dialog.setAttribute('initials', this.initials);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = this.tempInitials \|\| settings.base64;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={this.tempInitials \|\| settings.base64} alt=\"Initials\" />}</Host>;\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n {value ? (\n <img src={this.tempInitials \|\| settings.base64} alt=\"Initials\" />\n ) : (\n <button class={{}} onClick={() => !disabled && this.handleShow()}>\n Initials\n </button>\n )}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"names":["verdocsFieldInitialCss","settingsIcon","VerdocsFieldInitial","[object Object]","this","handleShow","_a","dialog","remove","e","console","log","tempInitials","detail","fieldChange","emit","hideDialog","document","createElement","setAttribute","initials","roleindex","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","style","onClick","editable","icon","label","options","placeholder","onInput"],"mappings":"yJAAA,MAAMA,EAAyB,80CCM/B,MAAMC,EACJ,+rCAWWC,EAAmB,4LAI0B,mBAK3B,oBAKF,iBAME,oBAKA,gBAKJ,qBAKI,oBA6BN,GALbC,mBACRC,KAAKC,aAQPF,oBACEG,EAAAF,KAAKG,UAAM,MAAAD,SAAA,OAAA,EAAAA,EAAEE,SACbJ,KAAKG,OAAS,KAGhBJ,YAAYM,SACVC,QAAQC,IAAI,8BACZP,KAAKQ,aAAeH,EAAEI,QACtBP,EAAAF,KAAKU,eAAW,MAAAR,SAAA,OAAA,EAAAA,EAAES,KAAKX,KAAKQ,cAC5BR,KAAKY,aAGPb,aACEC,KAAKG,OAASU,SAASC,cAAc,0BACrCd,KAAKG,OAAOY,aAAa,WAAYf,KAAKgB,UAC1ChB,KAAKG,OAAOY,aAAa,YAAaf,KAAKiB,WAC3CjB,KAAKG,OAAOe,iBAAiB,UAAU,IAAMlB,KAAKY,eAClDZ,KAAKG,OAAOe,iBAAiB,QAAQb,GAAKL,KAAKmB,YAAYd,KAC3DQ,SAASO,KAAKC,OAAOrB,KAAKG,QAG5BJ,iBACE,MAAMuB,EAAWC,EAAiBvB,KAAKwB,OACvC,MAAMC,EAAQzB,KAAKQ,cAAgBc,EAASI,OAC5C,MAAMC,GAAWC,GAAA1B,EAAAF,KAAK2B,YAAQ,MAAAzB,SAAA,EAAAA,EAAIoB,EAASK,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAMC,EAAkB7B,KAAKwB,MAAM,SAAWM,EAAQ9B,KAAKiB,WAE3D,GAAIjB,KAAK+B,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAM/B,KAAK+B,OAAQN,GAASO,EAAA,MAAA,CAAKG,IAAKnC,KAAKQ,cAAgBc,EAASI,OAAQU,IAAI,cAGvG,OACEJ,EAACC,EAAI,CAACC,MAAO,CAACG,SAAUf,EAASe,SAAUV,SAAAA,GAAWW,MAAO,CAACT,gBAAAA,IAC3DJ,EACCO,EAAA,MAAA,CAAKG,IAAKnC,KAAKQ,cAAgBc,EAASI,OAAQU,IAAI,aAEpDJ,EAAA,SAAA,CAAQE,MAAO,GAAIK,QAAS,KAAOZ,GAAY3B,KAAKC,cAAY,YAKjED,KAAKwC,UACJR,EAAA,uBAAA,CAAsBS,KAAM5C,GAC1BmC,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEU,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASjB,MAAO,SACxB,CAACiB,MAAO,SAAUjB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBU,MAAM,aAAajB,MAAM,GAAGmB,YAAY,uBAAuBC,QAASxC,GAAKC,QAAQC,IAAI,MAAOF,KACpH2B,EAAA,qBAAA,CAAoBU,MAAM,cAAcjB,MAAM,GAAGmB,YAAY,sBAAsBC,QAASxC,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid $verdocs-red-1;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n /\n@Component({\n tag: 'verdocs-field-initial',\n styleUrl: 'verdocs-field-initial.scss',\n shadow: false,\n})\nexport class VerdocsFieldInitial {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The document or template field to display.\n /\n @Prop() initials: string = '';\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: boolean = false;\n\n /\n If set, the field will be colored using this index value to select the background color.\n /\n @Prop() roleindex?: number = 0;\n\n /\n Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n /\n @Event({composed: true}) adopt: EventEmitter<string>;\n\n /\n Event emitted when the user cancels the process.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n * keypress.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n */\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n }\n\n @State()\n tempInitials: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[INITIAL] Adopted initials');\n this.tempInitials = e.detail;\n this.fieldChange?.emit(this.tempInitials);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-initial-dialog');\n this.dialog.setAttribute('initials', this.initials);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = this.tempInitials \|\| settings.base64;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={this.tempInitials \|\| settings.base64} alt=\"Initials\" />}</Host>;\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n {value ? (\n <img src={this.tempInitials \|\| settings.base64} alt=\"Initials\" />\n ) : (\n <button class={{}} onClick={() => !disabled && this.handleShow()}>\n Initials\n </button>\n )}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"]}