@verdocs/web-sdk 6.13.2 → 6.14.0

package/dist/components/p-DRP4Xxiu.js

@@ -1,2 +0,0 @@
-import{p as e,H as t,c as s,h as o,d as i,F as l,t as a}from"./p-yZBlG3YQ.js";import{i as d}from"./p-COaijEV0.js";import{VerdocsEndpoint as r,getTemplate as n,updateField as c,createField as p,integerSequence as m}from"@verdocs/js-sdk";import{g as h,h as v,i as f,j as g,d as u,k as x}from"./p-BCwFpXpV.js";import{D as w}from"./p-C7k2AOsW.js";import{V as b}from"./p-D97GxsI-.js";import{S as k}from"./p-C1sRVZWv.js";import{S as E}from"./p-C7hFgM52.js";import{d as q}from"./p-Bb5V9TQx.js";import{d as C}from"./p-DGNIsXfr.js";import{d as Z}from"./p-C-v22G3g.js";import{d as V}from"./p-C90lxyUX.js";import{d as M}from"./p-BKLlc2r0.js";import{d as y}from"./p-1FjgijEi.js";import{d as H}from"./p-D0MFs2Dv.js";import{d as j}from"./p-9kEZy9MP.js";import{d as S}from"./p-B1AE2j97.js";import{d as L}from"./p-ek0LNMtb.js";import{d as D}from"./p-CQzPkAVQ.js";import{d as I}from"./p-B4tpmyon.js";import{d as Q}from"./p-CFacV7mg.js";import{d as F}from"./p-CEcG_ay-.js";import{d as B}from"./p-C8yiLtCJ.js";import{d as z}from"./p-DHzSlpJw.js";import{d as N}from"./p-DqzFuSNN.js";import{d as T}from"./p-5FU3bYQ3.js";import{d as P}from"./p-DhOuB4nS.js";import{d as _}from"./p-Bodw4NVB.js";import{d as R}from"./p-BhG0HGg6.js";import{d as $}from"./p-Bxvw_LqR.js";import{d as O}from"./p-PfdIkMoz.js";import{d as U}from"./p-B-ul_Soj.js";import{d as Y}from"./p-DM3wePVp.js";const A=()=>`verdocs-template-fields{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);position:relative;display:block;min-height:600px}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{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-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .pages .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-template-fields .pages .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-template-fields .pages .document-separator:first-child{margin-top:0}verdocs-template-fields #verdocs-template-fields-toolbar{width:100%;height:50px;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;font-weight:700;padding:0 20px 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#f5f5fa;-ms-flex-pack:center;justify-content:center;background:#46497d}verdocs-template-fields #verdocs-template-fields-toolbar>verdocs-select-input{margin:0}verdocs-template-fields #verdocs-template-fields-toolbar svg{width:24px;height:24px}verdocs-template-fields #verdocs-template-fields-toolbar .add-for{margin:0;font-weight:500;color:#f5f5fa}verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{margin:0 20px 0 0}@media all and (max-width: 1000px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;padding:0 10px 0 0}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}@media all and (max-width: 600px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-template-fields #verdocs-template-fields-toolbar .separator,verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}verdocs-template-fields.placing-attachment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-checkbox{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-radio{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url("data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A") 0 14, pointer}verdocs-template-fields.placing-timestamp{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z'%3E%3C/path%3E%3C/svg%3E") 16 16, pointer}`;const G='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';const W='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';const X='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z"/></svg>';const J='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';const K='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';const ee='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';const te='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';const se='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>';const oe='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';const ie=[{id:"signature",tooltip:"Signature",icon:K,class:"signature"},{id:"initial",tooltip:"Initials",icon:ee,class:"initial"},{id:"sep1",tooltip:"",icon:oe,class:"separator"},{id:"textbox",tooltip:"Text Box",icon:G,class:"textbox"},{id:"checkbox",tooltip:"Check Box",icon:W,class:"checkbox"},{id:"radio",tooltip:"Radio Button",icon:X,class:"radio"},{id:"dropdown",tooltip:"Dropdown",icon:te,class:"dropdown"},{id:"sep2",tooltip:"",icon:oe,class:"separator"},{id:"date",tooltip:"Date",icon:J,class:"date"},{id:"attachment",tooltip:"Attachment",icon:se,class:"attachment"}];const le=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.sdkError=s(this,"sdkError");this.templateUpdated=s(this,"templateUpdated");this.templateListenerId=null;this.endpoint=r.getDefault();this.templateId=null;this.toolbarTargetId=null;this.placing=null;this.showMustSelectRole=false;this.selectedRoleName="";this.loading=true;this.template=null;this.pageHeights={};this.cachedPageInfo={}}onTemplateIdChanged(){this.listenToTemplate()}handleKeyDown(e){if(e.key==="Escape"){this.placing=null}}handleFieldSettingsChanged(){var e;(e=this.templateUpdated)===null||e===void 0?void 0:e.emit({endpoint:this.endpoint,template:this.template,event:"updated-field"})}handleFieldDeleted(){var e;(e=this.templateUpdated)===null||e===void 0?void 0:e.emit({endpoint:this.endpoint,template:this.template,event:"deleted-field"})}async componentWillLoad(){var e,t,s;try{this.endpoint.loadSession();if(!this.templateId){console.log(`[FIELDS] Missing required template ID ${this.templateId}`);return}if(!this.endpoint.session){console.log("[FIELDS] Unable to start builder session, must be authenticated");return}this.listenToTemplate()}catch(o){console.log("[FIELDS] Error with fields session",o);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new k(o.message,(t=o.response)===null||t===void 0?void 0:t.status,(s=o.response)===null||s===void 0?void 0:s.data))}}componentDidRender(){d.dynamicDrop(true);document.querySelectorAll(".verdocs-field").forEach((e=>{this.makeDraggable(e)}));const e=this.toolbarTargetId?document.getElementById(this.toolbarTargetId):null;const t=document.getElementById("verdocs-template-fields-toolbar");if(e&&t){t.remove();e.append(t)}}componentWillUpdate(){var e,t;const s=[...((e=this.template)===null||e===void 0?void 0:e.roles)||[]].sort(((e,t)=>{var s,o;return((s=e.sequence)!==null&&s!==void 0?s:0)-((o=t.sequence)!==null&&o!==void 0?o:0)}));if(!this.selectedRoleName||!s.find((e=>e&&e.name===this.selectedRoleName))){this.selectedRoleName=((t=s[0])===null||t===void 0?void 0:t.name)||"";console.log("[FIELDS] Selected new role",this.selectedRoleName)}}disconnectedCallback(){this.unlistenToTemplate()}async listenToTemplate(){this.unlistenToTemplate();E.subscribe("templates",this.templateId,(()=>n(this.endpoint,this.templateId)),false,(e=>{var t;console.log("Template updated");this.template=e;this.loading=false;if(!this.selectedRoleName){const s=[...e.roles||[]].sort(((e,t)=>{var s,o;return((s=e.sequence)!==null&&s!==void 0?s:0)-((o=t.sequence)!==null&&o!==void 0?o:0)}));this.selectedRoleName=((t=s[0])===null||t===void 0?void 0:t.name)||""}}))}unlistenToTemplate(){if(this.templateListenerId){E.store.delListener(this.templateListenerId);this.templateListenerId=null}}handlePageRendered(e){var t,s;var o,i;const l=e.detail;console.log("[FIELDS] Page rendered",l.documentId,l.pageNumber,l.xScale,l.yScale);(t=(o=this.cachedPageInfo)[i=l.documentId])!==null&&t!==void 0?t:o[i]={};this.cachedPageInfo[l.documentId][l.pageNumber]=l;this.pageHeights[l.pageNumber]=l.naturalHeight;(((s=this.template)===null||s===void 0?void 0:s.fields)||[]).filter((e=>e&&e.page===l.pageNumber)).forEach((e=>{const t=h(e);const s=document.getElementById(t);if(s){s.setAttribute("templateid",this.templateId);s.setAttribute("fieldname",e.name);s.setAttribute("documentid",String(e.document_id));s.setAttribute("pagenumber",String(e.page));s.setAttribute("xScale",String(l.xScale));s.setAttribute("yScale",String(l.yScale));this.makeDraggable(s)}}))}makeDraggable(e){d(e).draggable({listeners:{move:this.handleMoveField.bind(this),end:this.handleMoveEnd.bind(this)}})}async handleMoveField(e){const t=+(e.target.getAttribute("posX")||0);const s=+(e.target.getAttribute("posY")||0);const o=+(e.target.getAttribute("xScale")||1);const i=+(e.target.getAttribute("yScale")||1);const l=e.dx/o+t;const a=e.dy/i+s;e.target.setAttribute("posX",l);e.target.setAttribute("posy",a);v(e.target,"translate",`${l}px, ${a}px`)}async handleMoveEnd(e){var t,s,o,i,l,a,d,r;const n=e.target.getAttribute("fieldname");const p=(((t=this.template)===null||t===void 0?void 0:t.fields)||[]).find((e=>e.name===n));if(!p){console.log("[FIELDS] Unable to find field",n,e.target);return}const m=e.target.getAttribute("pagenumber");const h=e.target.getAttribute("documentid");let{naturalWidth:v=612,naturalHeight:w=792,renderedHeight:q=792}=this.cachedPageInfo[h][m];const C=e.target.getBoundingClientRect();const Z=e.target.parentElement;const V=Z.getBoundingClientRect();const M=p.width||x(p.type);const y=p.height||u(p.type);const H=Math.max(C.left-V.left,0);let j=Math.max(q-(V.bottom-C.bottom),0);let S=parseInt(m);if(j>q){S=Math.min(S+1,((i=(o=((s=this.template)===null||s===void 0?void 0:s.documents)||[])===null||o===void 0?void 0:o[0])===null||i===void 0?void 0:i.pages)||1);j-=q;q=this.cachedPageInfo[h][S].renderedHeight;console.log("Next page",{newPageNumber:S,newY:j,renderedHeight:q})}else if(j<0){S=Math.max(S-1,1);q=this.cachedPageInfo[h][S].renderedHeight;j+=q;console.log("[FIELDS] Next page",{newPageNumber:S,newY:j,renderedHeight:q})}const{x:L,y:D}=this.viewCoordinatesToPageCoordinates(H,j,h,m,v-M,w-y);try{const t={x:L,y:D,page:S};const s=await c(this.endpoint,this.templateId,n,t);console.log("[FIELDS] Updated",s);const o=JSON.parse(JSON.stringify(this.template));const i=o.fields.findIndex((e=>e.name===n));if(i>-1){o.fields[i]=s}E.updateTemplate(this.templateId,o);e.target.removeAttribute("posX");e.target.removeAttribute("posY");f(e.target);const{xScale:a=1,yScale:d=1}=this.cachedPageInfo[h][m];g(e.target,s,a,d);(l=this.templateUpdated)===null||l===void 0?void 0:l.emit({endpoint:this.endpoint,template:o,event:"updated-field"})}catch(t){b("Error updating field, please try again later",{style:"error"});console.log("[FIELDS] Error updating field",t);(a=this.sdkError)===null||a===void 0?void 0:a.emit(new k(t.message,(d=t.response)===null||d===void 0?void 0:d.status,(r=t.response)===null||r===void 0?void 0:r.data));e.target.removeAttribute("posX");e.target.removeAttribute("posY");f(e.target)}}generateFieldName(e,t){var s;let o=1;let i;do{i=`${e}P${t}-${o}`;o++}while((((s=this.template)===null||s===void 0?void 0:s.fields)||[]).some((e=>e&&e.name===i)));return i}viewCoordinatesToPageCoordinates(e,t,s,o,i,l){const{xScale:a=1,yScale:d=1,renderedHeight:r=792}=this.cachedPageInfo[s][o];const n=Math.floor(Math.min(e/a,i));const c=Math.floor(Math.min(Math.max(r-t,0)/d,l));return{x:n,y:c}}async handleClickPage(e,t,s){var o;if(this.placing){const i=e.offsetX;const l=e.offsetY;const a=x(this.placing);const d=u(this.placing);const r=this.cachedPageInfo[t][s];const{naturalWidth:n=612,naturalHeight:c=792}=r;const m=this.viewCoordinatesToPageCoordinates(i,l,t,s,n-a,c-d);const h=Math.floor(m.x);const v=Math.floor(m.y);const f={name:this.generateFieldName(this.placing,s),role_name:this.selectedRoleName,template_id:this.templateId,document_id:r.documentId,type:this.placing,required:this.placing!=="radio"&&this.placing!=="attachment"&&this.placing!=="checkbox",page:s,validator:null,label:null,default:null,placeholder:null,group:null,settings:{},x:h,y:v,width:a,height:d,multiline:false,readonly:false,options:this.placing==="radio"?[{id:"option-1",label:"Option 1"}]:[]};const g=await p(this.endpoint,this.templateId,f);console.log("[FIELDS] Created field",g);const w=JSON.parse(JSON.stringify(this.template));w.fields.push(g);E.updateTemplate(this.templateId,w);(o=this.templateUpdated)===null||o===void 0?void 0:o.emit({endpoint:this.endpoint,template:w,event:"added-field"});this.placing=null}}render(){var e,t,s;console.log("Rendering");if(this.loading){return o(i,null,o("verdocs-loader",null))}if(!this.endpoint.session){return o(i,null,o("verdocs-component-error",{message:"You must be authenticated to use this module."}))}const a=[...((e=this.template)===null||e===void 0?void 0:e.roles)||[]].sort(((e,t)=>{var s,o;return((s=e.sequence)!==null&&s!==void 0?s:0)-((o=t.sequence)!==null&&o!==void 0?o:0)}));const d=a.map((e=>({value:e.name,label:e.full_name?`${e.name}: ${e.full_name}`:e.name})));return o(i,{class:this.placing?{[`placing-${this.placing}`]:true}:{},onSubmit:()=>{}},o("div",{id:"verdocs-template-fields-toolbar"},o("div",{class:"add-for"},"Add field:"),o("verdocs-select-input",{value:this.selectedRoleName,options:d,onInput:e=>this.selectedRoleName=e.target.value}),ie.map((e=>o("verdocs-toolbar-icon",{text:e.tooltip,icon:e.icon,class:e.class,onClick:()=>{if(e.tooltip){if(this.selectedRoleName){this.placing=e.id}else{this.showMustSelectRole=true}}}})))),o("div",{class:"pages"},(((t=this.template)===null||t===void 0?void 0:t.documents)||[]).map((e=>{const t=m(1,e.pages);return t.map((t=>{var s;const i=e.page_sizes[t];return o(l,null,((s=this.template)===null||s===void 0?void 0:s.documents.length)>1&&o("div",{class:"document-separator"},o("div",{innerHTML:w}),o("span",null,e.name)),o("verdocs-template-document-page",{templateId:this.templateId,documentId:e.id,pageNumber:t,virtualWidth:(i===null||i===void 0?void 0:i.width)||612,virtualHeight:(i===null||i===void 0?void 0:i.height)||792,disabled:true,editable:true,done:false,onClick:s=>this.handleClickPage(s,e.id,t),onPageRendered:e=>this.handlePageRendered(e),layers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]}))}))}))),this.showMustSelectRole&&o("verdocs-ok-dialog",{heading:"Unable to add field",message:(((s=this.template)===null||s===void 0?void 0:s.roles)||[]).length>0?"Please select a role before adding fields.":"Please add at least one role before adding fields.",onNext:()=>this.showMustSelectRole=false}))}static get watchers(){return{templateId:[{onTemplateIdChanged:0}]}}static get style(){return A()}},[0,"verdocs-template-fields",{endpoint:[16],templateId:[1537,"template-id"],toolbarTargetId:[1,"toolbar-target-id"],placing:[32],showMustSelectRole:[32],selectedRoleName:[32],loading:[32],template:[32]},[[4,"keydown","handleKeyDown"],[0,"settingsChanged","handleFieldSettingsChanged"],[0,"deleted","handleFieldDeleted"]],{templateId:[{onTemplateIdChanged:0}]}]);function ae(){if(typeof customElements==="undefined"){return}const e=["verdocs-template-fields","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-dialog","verdocs-field-attachment","verdocs-field-checkbox","verdocs-field-date","verdocs-field-dropdown","verdocs-field-initial","verdocs-field-radio","verdocs-field-signature","verdocs-field-textarea","verdocs-field-textbox","verdocs-field-timestamp","verdocs-flag","verdocs-help-icon","verdocs-loader","verdocs-ok-dialog","verdocs-portal","verdocs-select-input","verdocs-template-document-page","verdocs-template-field-properties","verdocs-text-input","verdocs-toolbar-icon","verdocs-upload-dialog"];e.forEach((e=>{switch(e){case"verdocs-template-fields":if(!customElements.get(a(e))){customElements.define(a(e),le)}break;case"verdocs-button":if(!customElements.get(a(e))){q()}break;case"verdocs-checkbox":if(!customElements.get(a(e))){C()}break;case"verdocs-component-error":if(!customElements.get(a(e))){Z()}break;case"verdocs-dialog":if(!customElements.get(a(e))){V()}break;case"verdocs-field-attachment":if(!customElements.get(a(e))){M()}break;case"verdocs-field-checkbox":if(!customElements.get(a(e))){y()}break;case"verdocs-field-date":if(!customElements.get(a(e))){H()}break;case"verdocs-field-dropdown":if(!customElements.get(a(e))){j()}break;case"verdocs-field-initial":if(!customElements.get(a(e))){S()}break;case"verdocs-field-radio":if(!customElements.get(a(e))){L()}break;case"verdocs-field-signature":if(!customElements.get(a(e))){D()}break;case"verdocs-field-textarea":if(!customElements.get(a(e))){I()}break;case"verdocs-field-textbox":if(!customElements.get(a(e))){Q()}break;case"verdocs-field-timestamp":if(!customElements.get(a(e))){F()}break;case"verdocs-flag":if(!customElements.get(a(e))){B()}break;case"verdocs-help-icon":if(!customElements.get(a(e))){z()}break;case"verdocs-loader":if(!customElements.get(a(e))){N()}break;case"verdocs-ok-dialog":if(!customElements.get(a(e))){T()}break;case"verdocs-portal":if(!customElements.get(a(e))){P()}break;case"verdocs-select-input":if(!customElements.get(a(e))){_()}break;case"verdocs-template-document-page":if(!customElements.get(a(e))){R()}break;case"verdocs-template-field-properties":if(!customElements.get(a(e))){$()}break;case"verdocs-text-input":if(!customElements.get(a(e))){O()}break;case"verdocs-toolbar-icon":if(!customElements.get(a(e))){U()}break;case"verdocs-upload-dialog":if(!customElements.get(a(e))){Y()}break}}))}export{le as V,ae as d};
-//# sourceMappingURL=p-DRP4Xxiu.js.map

package/dist/components/p-DRP4Xxiu.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["verdocsTemplateFieldsCss","iconTextbox","iconCheck","iconRadio","iconDatepicker","iconSignature","iconInitial","iconDropdown","iconAttachment","separator","menuOptions","id","tooltip","icon","class","VerdocsTemplateFields","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","templateListenerId","endpoint","VerdocsEndpoint","getDefault","templateId","toolbarTargetId","placing","showMustSelectRole","selectedRoleName","loading","template","pageHeights","cachedPageInfo","onTemplateIdChanged","listenToTemplate","handleKeyDown","ev","key","handleFieldSettingsChanged","_a","templateUpdated","emit","event","handleFieldDeleted","componentWillLoad","loadSession","console","log","session","e","sdkError","SDKError","message","_b","response","status","_c","data","componentDidRender","interact","dynamicDrop","document","querySelectorAll","forEach","el","makeDraggable","toolbarTarget","getElementById","toolbarEl","remove","append","componentWillUpdate","roles","sort","a","b","sequence","find","role","name","disconnectedCallback","unlistenToTemplate","Store","subscribe","getTemplate","sorted","store","delListener","handlePageRendered","pageInfo","detail","documentId","pageNumber","xScale","yScale","_d","naturalHeight","fields","filter","field","page","getFieldId","setAttribute","String","document_id","draggable","listeners","move","handleMoveField","bind","end","handleMoveEnd","oldX","target","getAttribute","oldY","newX","dx","newY","dy","updateCssTransform","naturalWidth","renderedHeight","clientRect","getBoundingClientRect","parent","parentElement","parentRect","width","defaultWidth","type","height","defaultHeight","Math","max","left","bottom","newPageNumber","parseInt","min","documents","pages","x","y","viewCoordinatesToPageCoordinates","params","updatedField","updateField","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","removeAttribute","removeCssTransform","setControlStyles","_e","VerdocsToast","style","_f","_g","_h","generateFieldName","i","fieldName","some","viewX","viewY","xMax","yMax","floor","handleClickPage","clickedX","offsetX","clickedY","offsetY","cachedPage","coords","role_name","template_id","required","validator","label","default","placeholder","group","settings","multiline","readonly","options","newField","createField","push","render","h","Host","sortedRoles","selectableRoles","map","value","full_name","onSubmit","onInput","option","text","onClick","pageNumbers","integerSequence","pageSize","page_sizes","Fragment","length","innerHTML","DocumentPageIcon","virtualWidth","virtualHeight","disabled","editable","done","onPageRendered","layers","heading","onNext"],"sources":["src/components/templates/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","src/components/templates/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  font-family: $verdocs-primary-font;\n  position: relative;\n  display: block;\n  min-height: 600px;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .pages {\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    .document-separator {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 12px 20px;\n      width: 100%;\n      box-sizing: border-box;\n      background-color: $verdocs-grey-1;\n      color: white;\n      border-radius: 6px;\n      font-size: 16px;\n      font-weight: 500;\n      margin-top: 20px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n      svg {\n        flex-shrink: 0;\n      }\n\n      // Remove margin for the very first one if desired, but 20px spacing is probably good even for the first one\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  #verdocs-template-fields-toolbar {\n    width: 100%;\n    height: 50px;\n    display: flex;\n    column-gap: 15px;\n    font-weight: 700;\n    padding: 0 20px 0 0; // Right-only to better balance the visual\n    align-items: center;\n    flex-direction: row;\n    color: $verdocs-grey-3;\n    justify-content: center;\n    background: $verdocs-grey-blue;\n\n    > verdocs-select-input {\n      margin: 0;\n    }\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    .add-for {\n      margin: 0;\n      font-weight: 500;\n      color: $verdocs-grey-3;\n    }\n\n    verdocs-select-input {\n      margin: 0 20px 0 0;\n    }\n\n    @media all and (max-width: 1000px) {\n      column-gap: 8px;\n      padding: 0 10px 0 0; // Right-only to better balance the visual\n\n      svg {\n        transform: scale(0.8);\n      }\n\n      .add-for,\n      verdocs-select-input {\n        display: none;\n      }\n    }\n\n    @media all and (max-width: 600px) {\n      column-gap: 6px;\n\n      svg {\n        transform: scale(0.6);\n      }\n\n      .separator,\n      .add-for,\n      verdocs-select-input {\n        display: none;\n      }\n    }\n  }\n\n  &.placing-attachment {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-checkbox {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-date {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-dropdown {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-initial {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-payment {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-radio {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-signature {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-textarea {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-textbox {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A\")\n        0 14,\n      pointer;\n  }\n\n  &.placing-timestamp {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z'%3E%3C/path%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n}\n","import interact from 'interactjs';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host, State, Listen, Watch} from '@stencil/core';\nimport {createField, getTemplate, integerSequence, ITemplate, ITemplateField, TFieldType, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {defaultHeight, defaultWidth, getFieldId, removeCssTransform, setControlStyles, updateCssTransform} from '../../../utils/utils';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {DocumentPageIcon} from '../../../utils/Icons';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst iconTextbox = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n// const iconTimestamp =\n//   '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z\"></path></svg>';\n\nconst iconDropdown =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke=\"#ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25\" /></svg>';\n\nconst iconAttachment =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13\" /></svg>';\n\nconst separator = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14.707 14.707\"><g><rect x=\"6.275\" y=\"0\" fill=\"#ffffff7f\" width=\"1\" height=\"15\"/></g></svg>';\n\nconst menuOptions = [\n  {id: 'signature', tooltip: 'Signature', icon: iconSignature, class: 'signature'},\n  {id: 'initial', tooltip: 'Initials', icon: iconInitial, class: 'initial'},\n  {id: 'sep1', tooltip: '', icon: separator, class: 'separator'},\n  {id: 'textbox', tooltip: 'Text Box', icon: iconTextbox, class: 'textbox'},\n  {id: 'checkbox', tooltip: 'Check Box', icon: iconCheck, class: 'checkbox'},\n  {id: 'radio', tooltip: 'Radio Button', icon: iconRadio, class: 'radio'},\n  {id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown, class: 'dropdown'},\n  {id: 'sep2', tooltip: '', icon: separator, class: 'separator'},\n  {id: 'date', tooltip: 'Date', icon: iconDatepicker, class: 'date'},\n  // {id: 'timestamp', tooltip: 'Timestamp', icon: iconTimestamp, class: 'timestamp'},\n  // {id: 'sep3', tooltip: '', icon: separator},\n  {id: 'attachment', tooltip: 'Attachment', icon: iconAttachment, class: 'attachment'},\n  // {id: 'payment', tooltip: 'Payment', icon: 'P'},\n];\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  private templateListenerId = null;\n\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({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\n   * component renders, the toolbar will be removed from its default location and placed in the target element.\n   * This allows the parent application to more easily control its placement and scroll effects.\n   *\n   * The movement of the toolbar to the target container is not dynamic - it is performed only on the initial\n   * render. Host applications should not conditionally render this container. If the toolbar's visibility must\n   * be externally controlled, use CSS display options to hide/show it instead.\n   */\n  @Prop() toolbarTargetId: 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  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: 'added-field' | 'updated-field' | 'deleted-field'}>;\n\n  @State() placing: TFieldType | null = null;\n  @State() showMustSelectRole = false;\n  @State() selectedRoleName = '';\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  pageHeights: Record<number, number> = {};\n\n  @Watch('templateId')\n  onTemplateIdChanged() {\n    this.listenToTemplate();\n  }\n\n  // Stop field-placement mode if ESC is pressed\n  @Listen('keydown', {target: 'document'})\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.placing = null;\n    }\n  }\n\n  @Listen('settingsChanged')\n  handleFieldSettingsChanged() {\n    this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'updated-field'});\n  }\n\n  @Listen('deleted')\n  handleFieldDeleted() {\n    this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'deleted-field'});\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[FIELDS] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[FIELDS] Error with fields session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    // Defensive re-attach: when returning to the Fields tab from Preview, the preview component\n    // may have unset interact bindings on shared field DOM elements. pageRendered doesn't always\n    // refire in that case, so ensure every .verdocs-field in the document has a drag handler.\n    // makeDraggable is idempotent (interact re-configures the same Interactable).\n    document.querySelectorAll('.verdocs-field').forEach(el => {\n      this.makeDraggable(el as HTMLElement);\n    });\n\n    const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;\n    const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');\n    if (toolbarTarget && toolbarEl) {\n      toolbarEl.remove();\n      toolbarTarget.append(toolbarEl);\n    }\n  }\n\n  componentWillUpdate() {\n    // If a new role was added and there were none yet so far, or the \"selected\" role was deleted, reset our selection\n    const roles = [...(this.template?.roles || [])].sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0));\n    if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {\n      this.selectedRoleName = roles[0]?.name || '';\n      console.log('[FIELDS] Selected new role', this.selectedRoleName);\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        console.log('Template updated');\n        this.template = template;\n        this.loading = false;\n\n        if (!this.selectedRoleName) {\n          const sorted = [...(template.roles || [])].sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0));\n          this.selectedRoleName = sorted[0]?.name || '';\n        }\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  cachedPageInfo: Record<string, Record<number, IDocumentPageInfo>> = {};\n  handlePageRendered(e: any) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[FIELDS] Page rendered', pageInfo.documentId, pageInfo.pageNumber, pageInfo.xScale, pageInfo.yScale);\n    this.cachedPageInfo[pageInfo.documentId] ??= {};\n    this.cachedPageInfo[pageInfo.documentId][pageInfo.pageNumber] = pageInfo;\n\n    this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;\n\n    (this.template?.fields || [])\n      .filter(field => field && field.page === pageInfo.pageNumber)\n      .forEach(field => {\n        const id = getFieldId(field);\n        const el = document.getElementById(id);\n        if (el) {\n          el.setAttribute('templateid', this.templateId);\n          el.setAttribute('fieldname', field.name);\n          el.setAttribute('documentid', String(field.document_id));\n          el.setAttribute('pagenumber', String(field.page));\n          el.setAttribute('xScale', String(pageInfo.xScale));\n          el.setAttribute('yScale', String(pageInfo.yScale));\n          this.makeDraggable(el);\n        }\n      });\n  }\n\n  makeDraggable(el: HTMLElement) {\n    interact(el).draggable({\n      listeners: {\n        move: this.handleMoveField.bind(this),\n        end: this.handleMoveEnd.bind(this),\n      },\n    });\n  }\n\n  async handleMoveField(event: any) {\n    const oldX = +(event.target.getAttribute('posX') || 0);\n    const oldY = +(event.target.getAttribute('posY') || 0);\n    const xScale = +(event.target.getAttribute('xScale') || 1);\n    const yScale = +(event.target.getAttribute('yScale') || 1);\n    const newX = event.dx / xScale + oldX;\n    const newY = event.dy / yScale + oldY;\n    event.target.setAttribute('posX', newX);\n    event.target.setAttribute('posy', newY);\n    updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n  }\n\n  async handleMoveEnd(event: any) {\n    const name = event.target.getAttribute('fieldname');\n    const field = (this.template?.fields || []).find(field => field.name === name);\n    if (!field) {\n      console.log('[FIELDS] Unable to find field', name, event.target);\n      return;\n    }\n\n    const pageNumber = event.target.getAttribute('pagenumber');\n    const documentId = event.target.getAttribute('documentid');\n    let {naturalWidth = 612, naturalHeight = 792, renderedHeight = 792} = this.cachedPageInfo[documentId][pageNumber];\n    const clientRect = event.target.getBoundingClientRect();\n    const parent = event.target.parentElement;\n    const parentRect = parent.getBoundingClientRect();\n\n    const width = field.width || defaultWidth(field.type);\n    const height = field.height || defaultHeight(field.type);\n\n    // These two being backwards is not a mistake. Left measures \"over\" from the left\n    // (positive displacement) while bottom measures \"up\" from the bottom (negative displacement).\n    const newX = Math.max(clientRect.left - parentRect.left, 0);\n    let newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);\n\n    let newPageNumber = parseInt(pageNumber);\n    if (newY > renderedHeight) {\n      newPageNumber = Math.min(newPageNumber + 1, (this.template?.documents || [])?.[0]?.pages || 1);\n      newY -= renderedHeight;\n      renderedHeight = this.cachedPageInfo[documentId][newPageNumber].renderedHeight;\n\n      console.log('Next page', {newPageNumber, newY, renderedHeight});\n    } else if (newY < 0) {\n      newPageNumber = Math.max(newPageNumber - 1, 1);\n      renderedHeight = this.cachedPageInfo[documentId][newPageNumber].renderedHeight;\n      newY += renderedHeight;\n      console.log('[FIELDS] Next page', {newPageNumber, newY, renderedHeight});\n    }\n\n    const {x, y} = this.viewCoordinatesToPageCoordinates(newX, newY, documentId, pageNumber, naturalWidth - width, naturalHeight - height);\n    try {\n      const params = {x, y, page: newPageNumber};\n      const updatedField = await updateField(this.endpoint, this.templateId, name, params);\n      console.log('[FIELDS] Updated', updatedField);\n\n      const newTemplate = JSON.parse(JSON.stringify(this.template));\n      const fieldIndex = newTemplate.fields.findIndex(field => field.name === name);\n      if (fieldIndex > -1) {\n        newTemplate.fields[fieldIndex] = updatedField;\n      }\n\n      Store.updateTemplate(this.templateId, newTemplate);\n      event.target.removeAttribute('posX');\n      event.target.removeAttribute('posY');\n      removeCssTransform(event.target);\n      const {xScale = 1, yScale = 1} = this.cachedPageInfo[documentId][pageNumber];\n      setControlStyles(event.target, updatedField, xScale, yScale);\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: newTemplate, event: 'updated-field'});\n    } catch (e) {\n      VerdocsToast('Error updating field, please try again later', {style: 'error'});\n      console.log('[FIELDS] Error updating field', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      event.target.removeAttribute('posX');\n      event.target.removeAttribute('posY');\n      removeCssTransform(event.target);\n    }\n  }\n\n  generateFieldName(type: string, pageNumber: number) {\n    let i = 1;\n    let fieldName: string;\n    do {\n      fieldName = `${type}P${pageNumber}-${i}`;\n      i++;\n    } while ((this.template?.fields || []).some(field => field && field.name === fieldName));\n\n    return fieldName;\n  }\n\n  // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.\n  viewCoordinatesToPageCoordinates(viewX: number, viewY: number, documentId: string, pageNumber: number, xMax: number, yMax: number) {\n    const {xScale = 1, yScale = 1, renderedHeight = 792} = this.cachedPageInfo[documentId][pageNumber];\n    const x = Math.floor(Math.min(viewX / xScale, xMax));\n    const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));\n    return {x, y};\n  }\n\n  async handleClickPage(e: any, documentId: string, pageNumber: number) {\n    if (this.placing) {\n      // console.log('Placing field', {documentId, pageNumber});\n      const clickedX = e.offsetX;\n      const clickedY = e.offsetY;\n\n      const width = defaultWidth(this.placing);\n      const height = defaultHeight(this.placing);\n\n      const cachedPage = this.cachedPageInfo[documentId][pageNumber];\n      const {naturalWidth = 612, naturalHeight = 792} = cachedPage;\n\n      const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, documentId, pageNumber, naturalWidth - width, naturalHeight - height);\n      const x = Math.floor(coords.x);\n      const y = Math.floor(coords.y);\n\n      const field: ITemplateField = {\n        name: this.generateFieldName(this.placing, pageNumber), //  'textboxP1-22',\n        role_name: this.selectedRoleName,\n        template_id: this.templateId,\n        document_id: cachedPage.documentId,\n        type: this.placing,\n        required: this.placing !== 'radio' && this.placing !== 'attachment' && this.placing !== 'checkbox',\n        page: pageNumber,\n        validator: null,\n        label: null,\n        default: null,\n        placeholder: null,\n        group: null,\n        settings: {},\n        x,\n        y,\n        width,\n        height,\n        multiline: false,\n        readonly: false,\n        options: this.placing === 'radio' ? [{id: 'option-1', label: 'Option 1'}] : [],\n      };\n\n      const newField = await createField(this.endpoint, this.templateId, field);\n      console.log('[FIELDS] Created field', newField);\n\n      const newTemplate = JSON.parse(JSON.stringify(this.template));\n      newTemplate.fields.push(newField);\n\n      Store.updateTemplate(this.templateId, newTemplate);\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: newTemplate, event: 'added-field'});\n\n      this.placing = null;\n    }\n  }\n\n  render() {\n    console.log('Rendering');\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    const sortedRoles = [...(this.template?.roles || [])].sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0));\n    const selectableRoles = sortedRoles.map(role => ({value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name}));\n\n    return (\n      <Host class={this.placing ? {[`placing-${this.placing}`]: true} : {}} onSubmit={() => {}}>\n        <div id=\"verdocs-template-fields-toolbar\">\n          <div class=\"add-for\">Add field:</div>\n          <verdocs-select-input value={this.selectedRoleName} options={selectableRoles} onInput={(e: any) => (this.selectedRoleName = e.target.value)} />\n\n          {menuOptions.map(option => (\n            <verdocs-toolbar-icon\n              text={option.tooltip}\n              icon={option.icon}\n              class={option.class}\n              onClick={() => {\n                // We ignore empty-tooltip entries because they're separators\n                if (option.tooltip) {\n                  // We require a role to be selected first\n                  if (this.selectedRoleName) {\n                    this.placing = option.id as TFieldType;\n                  } else {\n                    this.showMustSelectRole = true;\n                  }\n                }\n              }}\n            />\n          ))}\n        </div>\n\n        {/* <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>*/}\n        {/*  <div class=\"user-placed-fields\">*/}\n        {/*    <div class=\"title\">User-Placed Fields</div>*/}\n        {/*    <verdocs-field-signature*/}\n        {/*      field={testField}*/}\n        {/*      style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}*/}\n        {/*      moveable={true}*/}\n        {/*      editable={true}*/}\n        {/*    />*/}\n        {/*  </div>*/}\n        {/*</div>*/}\n\n        <div class=\"pages\">\n          {(this.template?.documents || []).map(document => {\n            const pageNumbers = integerSequence(1, document.pages);\n\n            return pageNumbers.map(page => {\n              const pageSize = document.page_sizes[page];\n\n              return (\n                <Fragment>\n                  {this.template?.documents.length > 1 && (\n                    <div class=\"document-separator\">\n                      <div innerHTML={DocumentPageIcon} />\n                      <span>{document.name}</span>\n                    </div>\n                  )}\n\n                  <verdocs-template-document-page\n                    templateId={this.templateId}\n                    documentId={document.id}\n                    pageNumber={page}\n                    virtualWidth={pageSize?.width || 612}\n                    virtualHeight={pageSize?.height || 792}\n                    disabled={true}\n                    editable={true}\n                    done={false}\n                    onClick={(e: PointerEvent) => this.handleClickPage(e, document.id, page)}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                </Fragment>\n              );\n            });\n          })}\n        </div>\n        {this.showMustSelectRole && (\n          <verdocs-ok-dialog\n            heading=\"Unable to add field\"\n            message={(this.template?.roles || []).length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.'}\n            onNext={() => (this.showMustSelectRole = false)}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-ek0LNMtb.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as o,h as i,d as t,F as r,t as d}from"./p-yZBlG3YQ.js";import{i as a}from"./p-COaijEV0.js";import{S as l}from"./p-C7k2AOsW.js";import{S as n}from"./p-C7hFgM52.js";import{d as c}from"./p-Bb5V9TQx.js";import{d as p}from"./p-DGNIsXfr.js";import{d as f}from"./p-C-v22G3g.js";import{d as u}from"./p-DHzSlpJw.js";import{d as h}from"./p-DqzFuSNN.js";import{d as b}from"./p-DhOuB4nS.js";import{d as m}from"./p-Bodw4NVB.js";import{d as v}from"./p-Bxvw_LqR.js";import{d as g}from"./p-PfdIkMoz.js";const x=()=>`verdocs-field-radio{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);width:14px;height:14px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio svg{margin-top:4px}verdocs-field-radio.disabled.done{opacity:1}verdocs-field-radio div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-radio div.group{top:14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#bb0589;border-bottom-left-radius:2px;border-bottom-right-radius:2px}verdocs-field-radio input{cursor:inherit}verdocs-field-radio.disabled input{opacity:0.5}verdocs-field-radio.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio:not(.done) input[type=radio]+label:before{content:"";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:12px;height:12px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio: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:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio: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:#f3f3fc;background:#f3f3fc}verdocs-field-radio:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-radio.hide{display:none}verdocs-field-radio verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio .settings-icon svg{fill:#707ae5}verdocs-field-radio .settings-icon:hover{opacity:1}`;const k=`<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 y=`<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 w=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsChanged=o(this,"settingsChanged");this.deleted=o(this,"deleted");this.source="template";this.sourceid="";this.fieldname="";this.field=null;this.disabled=false;this.required=false;this.done=false;this.editable=false;this.moveable=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false;this.focused=false}handleBlur(){this.focused=false}async focusField(){this.el.focus();this.focused=true}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}}onEditableChanged(e,s){if(s&&!e){a(this.el).unset()}}disconnectedCallback(){a(this.el).unset()}render(){const{source:e,sourceid:s,fieldname:o,editable:d=false,done:a=false,disabled:c=false,focused:p,xscale:f=1,yscale:u=1}=this;const{index:h,field:b}=n.getField(e,s,o,this.field);const{name:m,required:v=false,label:g="",group:x="",value:w=false,readonly:E=false}=b||{};const j=`signer-${h%10+1}`;const C=w==="true";if(a){return i(t,{class:{"verdocs-field":true,done:a},style:{maxWidth:"10px"}},i("span",{innerHTML:C?y:k}))}return i(t,{class:{"verdocs-field":true,required:this.required||v,disabled:c,done:a,focused:p,[j]:true}},g&&i("div",{class:"label"},g),d&&x&&i("div",{class:"group"},x),i("input",{id:o,type:"radio",name:x||o,value:m,checked:!!C,disabled:E||c,required:v}),i("label",{htmlFor:o}),d&&i(r,null,i("div",{id:`verdocs-settings-panel-trigger-${o}`,style:{transform:`scale(${Math.floor(1/f*1e3)/1e3}, ${Math.floor(1/u*1e3)/1e3})`},class:"settings-icon",innerHTML:l,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&i("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${o}`,onClickAway:()=>this.showingProperties=false},i("verdocs-template-field-properties",{templateId:s,fieldName:o,onClose:()=>this.showingProperties=false,onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:o});return this.hideSettingsPanel()},onSettingsChanged:e=>{var s;(s=this.settingsChanged)===null||s===void 0?void 0:s.emit(e.detail);return this.hideSettingsPanel()},helpText:"Radio buttons capture the recipient's selection of just one of several related (exclusive) options."}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return x()}},[0,"verdocs-field-radio",{source:[513],sourceid:[513],fieldname:[513],field:[16],isPreview:[516,"is-preview"],disabled:[516],required:[516],done:[516],editable:[516],moveable:[516],xscale:[514],yscale:[514],pagenumber:[514],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[0,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function E(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-radio","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-radio":if(!customElements.get(d(e))){customElements.define(d(e),w)}break;case"verdocs-button":if(!customElements.get(d(e))){c()}break;case"verdocs-checkbox":if(!customElements.get(d(e))){p()}break;case"verdocs-component-error":if(!customElements.get(d(e))){f()}break;case"verdocs-help-icon":if(!customElements.get(d(e))){u()}break;case"verdocs-loader":if(!customElements.get(d(e))){h()}break;case"verdocs-portal":if(!customElements.get(d(e))){b()}break;case"verdocs-select-input":if(!customElements.get(d(e))){m()}break;case"verdocs-template-field-properties":if(!customElements.get(d(e))){v()}break;case"verdocs-text-input":if(!customElements.get(d(e))){g()}break}}))}export{w as V,E as d};
-//# sourceMappingURL=p-ek0LNMtb.js.map

package/dist/components/p-ek0LNMtb.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["verdocsFieldRadioCss","RadioIconUnselected","RadioIconSelected","VerdocsFieldRadio","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","source","sourceid","fieldname","field","disabled","required","done","editable","moveable","xscale","yscale","pagenumber","showingProperties","focused","handleBlur","focusField","el","focus","showSettingsPanel","settingsPanel","document","getElementById","showPanel","hideSettingsPanel","hidePanel","onEditableChanged","newVal","oldVal","interact","unset","disconnectedCallback","render","index","Store","getField","name","label","group","value","readonly","signerClass","selected","h","Host","class","style","maxWidth","innerHTML","id","type","checked","htmlFor","Fragment","transform","Math","floor","SettingsIcon","onClick","e","stopPropagation","anchor","onClickAway","templateId","fieldName","onClose","onDelete","_a","deleted","emit","onSettingsChanged","settingsChanged","detail","helpText"],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  div.group {\n    top: 14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\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: 12px;\n        height: 12px;\n        position: absolute;\n        // This looks off in Storybook but correct in apps.\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: #f3f3fc;\n          background: #f3f3fc;\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    border: 1px solid var(--verdocs-required-field-border);\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  verdocs-button-panel {\n    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State, Element, Listen, Watch} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\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',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\n  @Element() el: HTMLElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: 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({reflect: true}) 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({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @Listen('blur')\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.el.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  @Watch('editable')\n  onEditableChanged(newVal: boolean, oldVal: boolean) {\n    // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings\n    if (oldVal && !newVal) {\n      interact(this.el).unset();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere\n    interact(this.el).unset();\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false, readonly = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{'verdocs-field': true,done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{'verdocs-field': true,required: this.required || required, disabled, done, focused, [signerClass]: true}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={readonly || disabled} required={required} />\n        <label htmlFor={fieldname} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}