@pdfme/ui 5.0.0-dev.3 → 5.0.0-dev.4

package/dist/index.es.js

@@ -162931,8 +162931,17 @@ class Form extends PreviewUI {
     this.onChangeInputCallback = s;
   }
   setInputs(s) {
-    super.setInputs(s), s.map((_, _e) => Object.keys(_).map((tt) => ({ index: _e, name: tt, value: _[tt] }))).flat().forEach((_) => {
-      this.onChangeInputCallback && this.onChangeInputCallback(_);
+    const $ = this.getInputs();
+    super.setInputs(s);
+    const _ = [];
+    s.forEach((_e, tt) => {
+      const nt = $[tt] || {};
+      (/* @__PURE__ */ new Set([...Object.keys(_e), ...Object.keys(nt)])).forEach((ot) => {
+        const rt = _e[ot], st = nt[ot];
+        rt !== st && _.push({ index: tt, name: ot, value: rt });
+      });
+    }), _.forEach((_e) => {
+      this.onChangeInputCallback && this.onChangeInputCallback(_e);
     });
   }
   render() {

package/dist/index.umd.js

@@ -1144,4 +1144,4 @@ canvas {
 .adder.dragging {
     display: block;
 }
-`),GuidesElement=defaultStyled("div",GUIDES_CSS),Guides$1=function(a){__extends(s,a);function s(){var _=a!==null&&a.apply(this,arguments)||this;return _.state={guides:[]},_.scrollPos=0,_.guideElements=[],_.onDragStart=function(_e){var tt=_e.datas,nt=_e.inputEvent,at=_.props.onDragStart;addClass(tt.target,DRAGGING),_.onDrag(_e),at(__assign({},_e,{dragElement:tt.target})),nt.stopPropagation(),nt.preventDefault()},_.onDrag=function(_e){var tt=_.movePos(_e);return _.props.onDrag(__assign({},_e,{dragElement:_e.datas.target})),tt},_.onDragEnd=function(_e){var tt=_e.datas,nt=_e.isDouble,at=_e.distX,ot=_e.distY,rt=_.movePos(_e),st=_.state.guides,lt=_.props,et=lt.onChangeGuides,it=lt.zoom,ut=lt.displayDragPos,ft=lt.digit,ht=lt.lockGuides,dt=parseFloat((rt/it).toFixed(ft||0));if(ut&&(_.displayElement.style.cssText+="display: none;"),removeClass(tt.target,DRAGGING),_.props.onDragEnd(__assign({},_e,{dragElement:tt.target})),tt.fromRuler)rt>=_.scrollPos&&st.indexOf(dt)<0&&_.setState({guides:st.concat([dt])},function(){et({guides:_.state.guides,distX:at,distY:ot,isAdd:!0,isRemove:!1,isChange:!1})});else{var gt=tt.target.getAttribute("data-index"),pt=!1,mt=!1;if(st=st.slice(),nt||dt<_.scrollPos){if(ht&&(ht===!0||ht.indexOf("remove")>-1))return;st.splice(gt,1),pt=!0}else{if(st.indexOf(dt)>-1)return;if(ht&&(ht===!0||ht.indexOf("change")>-1))return;st[gt]=dt,mt=!0}_.setState({guides:st},function(){var ct=_.state.guides;et({distX:at,distY:ot,guides:ct,isAdd:!1,isChange:mt,isRemove:pt})})}},_}var $=s.prototype;return $.render=function(){var _=this.props,_e=_.className,tt=_.type,nt=_.zoom,at=_.style,ot=_.rulerStyle,rt=_.displayDragPos,st=_.cspNonce,lt=_.dragGuideStyle,et=_.portalContainer,it=this.props,ut=this.getTranslateName(),ft={};return PROPERTIES.forEach(function(ht){ht!=="style"&&(ft[ht]=it[ht])}),reactExports.createElement(GuidesElement,{ref:ref(this,"manager"),cspNonce:st,className:prefix("manager",tt)+" "+_e,portalContainer:et,style:at},reactExports.createElement("div",{className:prefix("guide-origin"),ref:ref(this,"originElement")}),reactExports.createElement(Ruler$1,__assign({ref:ref(this,"ruler"),style:ot},ft)),reactExports.createElement("div",{className:GUIDES,ref:ref(this,"guidesElement"),style:{transform:ut+"("+-this.scrollPos*nt+"px)"}},rt&&reactExports.createElement("div",{className:DISPLAY_DRAG,ref:ref(this,"displayElement"),style:lt}),reactExports.createElement("div",{className:ADDER,ref:ref(this,"adderElement")}),this.renderGuides()))},$.renderGuides=function(){var _=this,_e=this.props,tt=_e.type,nt=_e.zoom,at=_e.showGuides,ot=_e.guideStyle,rt=this.getTranslateName(),st=this.state.guides;if(this.guideElements=[],at)return st.map(function(lt,et){return reactExports.createElement("div",{className:prefix("guide",tt),ref:refs(_,"guideElements",et),key:et,"data-index":et,"data-pos":lt,style:__assign({},ot,{transform:rt+"("+lt*nt+"px) translateZ(0px)"})})})},$.componentDidMount=function(){var _=this;this.gesto=new Gesto(this.manager.getElement(),{container:document.body}).on("dragStart",function(_e){var tt=_.props,nt=tt.type,at=tt.zoom,ot=tt.lockGuides;if(ot===!0){_e.stop();return}var rt=_e.inputEvent,st=rt.target,lt=_e.datas,et=_.ruler.canvasElement,it=_.guidesElement,ut=nt==="horizontal",ft=_.originElement.getBoundingClientRect(),ht=getDistElementMatrix(_.manager.getElement()),dt=calculateMatrixDist(ht,[_e.clientX-ft.left,_e.clientY-ft.top]);dt[0]-=it.offsetLeft,dt[1]-=it.offsetTop,dt[ut?1:0]+=_.scrollPos*at,lt.offsetPos=dt,lt.matrix=ht;var gt=ot&&ot.indexOf("add")>-1,pt=ot&&ot.indexOf("remove")>-1,mt=ot&&ot.indexOf("change")>-1;if(st===et){if(gt){_e.stop();return}lt.fromRuler=!0,lt.target=_.adderElement}else if(hasClass(st,GUIDE)){if(pt&&mt){_e.stop();return}lt.target=st}else return _e.stop(),!1;_.onDragStart(_e)}).on("drag",this.onDrag).on("dragEnd",this.onDragEnd),this.setState({guides:this.props.defaultGuides||[]})},$.componentWillUnmount=function(){this.gesto.unset()},$.componentDidUpdate=function(_){_.defaultGuides!==this.props.defaultGuides&&this.setState({guides:this.props.defaultGuides||[]})},$.loadGuides=function(_){this.setState({guides:_})},$.getGuides=function(){return this.state.guides},$.scrollGuides=function(_){var _e=this.props.zoom,tt=this.guidesElement;this.scrollPos=_,tt.style.transform=this.getTranslateName()+"("+-_*_e+"px)";var nt=this.state.guides;this.guideElements.forEach(function(at,ot){at&&(at.style.display=-_+nt[ot]<0?"none":"block")})},$.resize=function(){this.ruler.resize()},$.scroll=function(_){this.ruler.scroll(_)},$.movePos=function(_){var _e=_.datas,tt=_.distX,nt=_.distY,at=this.props,ot=at.type,rt=at.zoom,st=at.snaps,lt=at.snapThreshold,et=at.displayDragPos,it=at.digit,ut=at.dragPosFormat||function(xt){return xt},ft=ot==="horizontal",ht=calculateMatrixDist(_e.matrix,[tt,nt]),dt=_e.offsetPos,gt=ht[0]+dt[0],pt=ht[1]+dt[1],mt=Math.round(ft?pt:gt),ct=parseFloat((mt/rt).toFixed(it||0)),vt=st.slice().sort(function(xt,bt){return Math.abs(ct-xt)-Math.abs(ct-bt)});if(vt.length&&Math.abs(vt[0]*rt-mt)<lt&&(ct=vt[0],mt=ct*rt),et){var At=ot==="horizontal"?[gt,mt]:[mt,pt];this.displayElement.style.cssText+="display: block;transform: translate(-50%, -50%) "+("translate("+At.map(function(xt){return xt+"px"}).join(", ")+")"),this.displayElement.innerHTML=""+ut(ct)}return _e.target.setAttribute("data-pos",ct),_e.target.style.transform=this.getTranslateName()+"("+mt+"px)",mt},$.getTranslateName=function(){return this.props.type==="horizontal"?"translateY":"translateX"},s.defaultProps={className:"",type:"horizontal",zoom:1,style:{},snapThreshold:5,snaps:[],digit:0,onChangeGuides:function(){},onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},displayDragPos:!1,dragPosFormat:function(_){return _},defaultGuides:[],lockGuides:!1,showGuides:!0,guideStyle:{},dragGuideStyle:{},portalContainer:null},s}(reactExports.PureComponent);const Guides$2=Guides$1,guideStyle=(a,s,$,_)=>({position:"absolute",top:a,left:s,height:$,width:_,background:"#333333"}),_Guides=({paperSize:a,horizontalRef:s,verticalRef:$})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("div",{className:"ruler-container",style:guideStyle(-RULER_HEIGHT,-RULER_HEIGHT,RULER_HEIGHT,RULER_HEIGHT)}),jsxRuntimeExports.jsx(Guides$2,{zoom:ZOOM,style:guideStyle(-RULER_HEIGHT,0,RULER_HEIGHT,a.width),type:"horizontal",ref:s}),jsxRuntimeExports.jsx(Guides$2,{zoom:ZOOM,style:guideStyle(0,-RULER_HEIGHT,a.height,RULER_HEIGHT),type:"vertical",ref:$})]}),Guides=_Guides,Mask=({width:a,height:s})=>jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:-RULER_HEIGHT,left:-RULER_HEIGHT,zIndex:100,width:a,height:s,background:theme.useToken().token.colorBgMask}}),Mask$1=Mask,getPaddingStyle=(a,s,$)=>{const _={position:"absolute",background:$,opacity:.25,pointerEvents:"none"};switch(a){case 0:_.top=0,_.height=`${s*ZOOM}px`,_.left=0,_.right=0;break;case 1:_.right=0,_.width=`${s*ZOOM}px`,_.top=0,_.bottom=0;break;case 2:_.bottom=0,_.height=`${s*ZOOM}px`,_.left=0,_.right=0;break;case 3:_.left=0,_.width=`${s*ZOOM}px`,_.top=0,_.bottom=0;break}return _},Padding=({basePdf:a})=>jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:isBlankPdf(a)&&a.padding.map((s,$)=>jsxRuntimeExports.jsx("div",{style:getPaddingStyle($,s,theme.useToken().token.colorError)},String($)))}),Padding$1=Padding,mm2px=a=>a*3.7795275591,DELETE_BTN_ID=uuid$6(),fmt4Num=a=>Number(a.replace("px","")),fmt=a=>round(fmt4Num(a)/ZOOM,2),isTopLeftResize=a=>a==="-1,-1"||a==="-1,0"||a==="0,-1",normalizeRotate=a=>(a%360+360)%360,DeleteButton=({activeElements:a})=>{const{token:s}=theme.useToken(),$=26,_=Math.min(...a.map(({style:tt})=>fmt4Num(tt.top))),_e=Math.max(...a.map(({style:tt})=>fmt4Num(tt.left)+fmt4Num(tt.width)))+10;return jsxRuntimeExports.jsx(Button$2,{id:DELETE_BTN_ID,style:{position:"absolute",zIndex:1,top:_,left:_e,width:$,height:$,padding:2,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:s.borderRadius,color:s.colorWhite,background:s.colorPrimary},children:jsxRuntimeExports.jsx(CloseOutlined$4,{style:{pointerEvents:"none"}})})},Canvas=(a,s)=>{const{basePdf:$,pageCursor:_,scale:_e,backgrounds:tt,pageSizes:nt,size:at,activeElements:ot,schemasList:rt,hoveringSchemaId:st,onEdit:lt,changeSchemas:et,removeSchemas:it,onChangeHoveringSchemaId:ut,paperRefs:ft,sidebarOpen:ht}=a,{token:dt}=theme.useToken(),gt=reactExports.useContext(PluginsRegistry),pt=reactExports.useRef([]),mt=reactExports.useRef([]),ct=reactExports.useRef(null),[vt,At]=reactExports.useState(!1),[xt,bt]=reactExports.useState(!1),Et=usePrevious(rt[_]),St=Lt=>{Lt.shiftKey&&At(!0)},Bt=Lt=>{(Lt.key==="Shift"||!Lt.shiftKey)&&At(!1),(Lt.key==="Escape"||Lt.key==="Esc")&&bt(!1)},Ot=reactExports.useCallback(()=>{window.addEventListener("keydown",St),window.addEventListener("keyup",Bt)},[]),Pt=reactExports.useCallback(()=>{window.removeEventListener("keydown",St),window.removeEventListener("keyup",Bt)},[]);reactExports.useEffect(()=>(Ot(),Pt),[Ot,Pt]),reactExports.useEffect(()=>{var Tt,Dt;if((Tt=ct.current)==null||Tt.updateRect(),!Et)return;const Lt=JSON.stringify(Et[_]||{}),$t=JSON.stringify(rt[_]||{});Lt===$t&&((Dt=ct.current)==null||Dt.updateRect())},[_,rt,Et]);const wt=({target:Lt,top:$t,left:Tt})=>{const{width:Dt,height:Ut}=Lt.style,Vt=fmt(Dt),Qt=fmt(Ut),qt=$t/ZOOM,Zt=Tt/ZOOM,{width:ar,height:Jt}=nt[_];let rr=0,Yt=0,Kt=0,nr=0;if(isBlankPdf($)){const[tr,ir,sr,cr]=$.padding;rr=tr*ZOOM,Yt=ir,Kt=sr,nr=cr*ZOOM}qt+Qt>Jt-Kt?Lt.style.top=`${(Jt-Qt-Kt)*ZOOM}px`:Lt.style.top=`${$t<rr?rr:$t}px`,Zt+Vt>ar-Yt?Lt.style.left=`${(ar-Vt-Yt)*ZOOM}px`:Lt.style.left=`${Tt<nr?nr:Tt}px`},Ct=({target:Lt})=>{const{top:$t,left:Tt}=Lt.style;et([{key:"position.y",value:fmt($t),schemaId:Lt.id},{key:"position.x",value:fmt(Tt),schemaId:Lt.id}])},It=({targets:Lt})=>{const $t=Lt.map(({style:{top:Tt,left:Dt},id:Ut})=>[{key:"position.y",value:fmt(Tt),schemaId:Ut},{key:"position.x",value:fmt(Dt),schemaId:Ut}]);et(flatten($t))},yt=({target:Lt,rotate:$t})=>{Lt.style.transform=`rotate(${$t}deg)`},Rt=({target:Lt})=>{const{transform:$t}=Lt.style,Tt=Number($t.replace("rotate(","").replace("deg)","")),Dt=normalizeRotate(Tt);et([{key:"rotate",value:Dt,schemaId:Lt.id}])},kt=({targets:Lt})=>{const $t=Lt.map(({style:{transform:Tt},id:Dt})=>{const Ut=Number(Tt.replace("rotate(","").replace("deg)",""));return[{key:"rotate",value:normalizeRotate(Ut),schemaId:Dt}]});et(flatten($t))},jt=({target:Lt})=>{const{id:$t,style:Tt}=Lt,{width:Dt,height:Ut,top:Vt,left:Qt}=Tt;et([{key:"position.x",value:fmt(Qt),schemaId:$t},{key:"position.y",value:fmt(Vt),schemaId:$t},{key:"width",value:fmt(Dt),schemaId:$t},{key:"height",value:fmt(Ut),schemaId:$t}]);const qt=rt[_].find(Zt=>Zt.id===$t);qt&&(qt.position.x=fmt(Qt),qt.position.y=fmt(Vt),qt.width=fmt(Dt),qt.height=fmt(Ut))},Ht=({targets:Lt})=>{const $t=Lt.map(({style:{width:Tt,height:Dt,top:Ut,left:Vt},id:Qt})=>[{key:"width",value:fmt(Tt),schemaId:Qt},{key:"height",value:fmt(Dt),schemaId:Qt},{key:"position.y",value:fmt(Ut),schemaId:Qt},{key:"position.x",value:fmt(Vt),schemaId:Qt}]);et(flatten($t))},Ft=({target:Lt,width:$t,height:Tt,direction:Dt})=>{if(!Lt)return;let Ut=0,Vt=0,Qt=0,qt=0;if(isBlankPdf($)){const[tr,ir,sr,cr]=$.padding;Ut=tr*ZOOM,Vt=mm2px(ir),Qt=mm2px(sr),qt=cr*ZOOM}const Zt=mm2px(nt[_].width),ar=mm2px(nt[_].height),Jt={width:`${$t}px`,height:`${Tt}px`},rr=Lt.style;let Yt=fmt4Num(rr.left)+(fmt4Num(rr.width)-$t),Kt=fmt4Num(rr.top)+(fmt4Num(rr.height)-Tt);Yt<qt&&(Yt=qt),Kt<Ut&&(Kt=Ut),Yt+$t>Zt-Vt&&(Jt.width=`${Zt-Vt-Yt}px`),Kt+Tt>ar-Qt&&(Jt.height=`${ar-Qt-Kt}px`);const nr=Dt.toString();isTopLeftResize(nr)?(Jt.top=`${Kt}px`,Jt.left=`${Yt}px`):nr==="1,-1"?Jt.top=`${Kt}px`:nr==="-1,1"&&(Jt.left=`${Yt}px`),Object.assign(rr,Jt)},_t=(Lt,$t)=>Lt[$t]&&Lt[$t].getGuides().map(Tt=>Tt*ZOOM),Nt=Lt=>{Lt.inputEvent.stopPropagation(),bt(!0)},Mt=reactExports.useMemo(()=>{const $t=(rt[_]||[]).filter(Ut=>ot.map(Vt=>Vt.id).includes(Ut.id)).map(Ut=>Ut.type),Tt=[...new Set($t)],Dt=Object.values(gt).map(Ut=>Ut==null?void 0:Ut.propPanel.defaultSchema);return Tt.every(Ut=>{var Vt;return((Vt=Dt.find(Qt=>Qt.type===Ut))==null?void 0:Vt.rotate)!==void 0})},[ot,_,rt,gt]);return jsxRuntimeExports.jsxs("div",{style:{position:"relative",overflow:"auto",marginRight:ht?RIGHT_SIDEBAR_WIDTH:0,...at},ref:s,children:[jsxRuntimeExports.jsx(Selecto,{container:ft.current[_],continueSelect:vt,onDragStart:Lt=>{var Dt,Ut;const{inputEvent:$t}=Lt,Tt=(Dt=ct.current)==null?void 0:Dt.isMoveableElement($t.target);($t.type==="touchstart"&&Lt.isTrusted||Tt)&&Lt.stop(),ft.current[_]===$t.target&&lt([]),((Ut=$t.target)==null?void 0:Ut.id)===DELETE_BTN_ID&&it(ot.map(Vt=>Vt.id))},onSelect:({added:Lt,removed:$t,selected:Tt,inputEvent:Dt})=>{const Ut=Dt.type==="mousedown";let Vt=Ut?Tt:[];!Ut&&Lt.length>0&&(Vt=ot.concat(Lt)),!Ut&&$t.length>0&&(Vt=ot.filter(Qt=>!$t.includes(Qt))),lt(Vt),Vt!=ot&&bt(!1),Dt.shiftKey||At(!1)}}),jsxRuntimeExports.jsx(Paper$1,{paperRefs:ft,scale:_e,size:at,schemasList:rt,pageSizes:nt,backgrounds:tt,hasRulers:!0,renderPaper:({index:Lt,paperSize:$t})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[!xt&&ot.length>0&&_===Lt&&jsxRuntimeExports.jsx(DeleteButton,{activeElements:ot}),jsxRuntimeExports.jsx(Padding$1,{basePdf:$}),jsxRuntimeExports.jsx(Guides,{paperSize:$t,horizontalRef:Tt=>{Tt&&(mt.current[Lt]=Tt)},verticalRef:Tt=>{Tt&&(pt.current[Lt]=Tt)}}),_!==Lt?jsxRuntimeExports.jsx(Mask$1,{width:$t.width+RULER_HEIGHT,height:$t.height+RULER_HEIGHT}):!xt&&jsxRuntimeExports.jsx(Moveable,{ref:ct,target:ot,bounds:{left:0,top:0,bottom:$t.height,right:$t.width},horizontalGuidelines:_t(mt.current,Lt),verticalGuidelines:_t(pt.current,Lt),keepRatio:vt,rotatable:Mt,onDrag:wt,onDragEnd:Ct,onDragGroupEnd:It,onRotate:yt,onRotateEnd:Rt,onRotateGroupEnd:kt,onResize:Ft,onResizeEnd:jt,onResizeGroupEnd:Ht,onClick:Nt})]}),renderSchema:({schema:Lt})=>jsxRuntimeExports.jsx(Renderer$1,{schema:Lt,basePdf:$,value:Lt.content||"",onChangeHoveringSchemaId:ut,mode:xt&&ot.map($t=>$t.id).includes(Lt.id)?"designer":"viewer",onChange:$t=>{const Tt=Array.isArray($t)?$t:[$t];et(Tt.map(({key:Dt,value:Ut})=>({key:Dt,value:Ut,schemaId:Lt.id})))},stopEditing:()=>bt(!1),outline:`1px ${st===Lt.id?"solid":"dashed"} ${Lt.readOnly&&st!==Lt.id?"transparent":dt.colorPrimary}`,scale:_e},Lt.id)})]})},Canvas$1=reactExports.forwardRef(Canvas),Spinner=()=>jsxRuntimeExports.jsx(Spin$1,{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},indicator:jsxRuntimeExports.jsx(LoadingOutlined$1,{style:{fontSize:50},spin:!0})}),Spinner$1=Spinner,Root=({size:a,scale:s,children:$},_)=>{const _e=reactExports.useContext(FontContext);return reactExports.useEffect(()=>{if(!document||!document.fonts)return;const nt=Object.entries(_e).map(([at,{data:ot}])=>new FontFace(at,typeof ot=="string"?`url(${ot})`:ot,{display:"swap"})).filter(at=>!document.fonts.has(at));Promise.allSettled(nt.map(at=>at.load())).then(at=>{at.forEach(ot=>{ot.status==="fulfilled"&&document.fonts.add(ot.value)})})},[_e]),jsxRuntimeExports.jsx("div",{ref:_,style:{position:"relative",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{margin:"0 auto",...a},children:s===0?jsxRuntimeExports.jsx(Spinner$1,{}):$})})},Root$1=reactExports.forwardRef(Root),ErrorScreen=({size:a,error:s})=>{const $=reactExports.useContext(I18nContext),{token:_}=theme.useToken();return jsxRuntimeExports.jsx("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{width:300,margin:"0 auto",background:_.colorBgLayout},children:jsxRuntimeExports.jsx(Result$2,{icon:null,title:"ERROR",subTitle:$("errorOccurred"),extra:jsxRuntimeExports.jsx("span",{children:s.message})})})})},ErrorScreen$1=ErrorScreen,{Text:Text$1}=Typography$1,Zoom=({zoomLevel:a,setZoomLevel:s,style:$})=>{const nt=a-.25,at=a+.25;return jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:.25>=nt,onClick:()=>s(nt),icon:jsxRuntimeExports.jsx(MinusOutlined$1,{style:{color:$.textStyle.color}})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:$.textStyle,children:[Math.round(a*100),"%"]}),jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:2<at,onClick:()=>s(at),icon:jsxRuntimeExports.jsx(PlusOutlined$4,{style:{color:$.textStyle.color}})})]})},Pager=({pageCursor:a,pageNum:s,setPageCursor:$,style:_})=>jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:a<=0,onClick:()=>$(a-1),children:jsxRuntimeExports.jsx(LeftOutlined$1,{style:{color:_.textStyle.color}})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:_.textStyle,children:[a+1,"/",s]}),jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:a+1>=s,onClick:()=>$(a+1),children:jsxRuntimeExports.jsx(RightOutlined$1,{style:{color:_.textStyle.color}})})]}),ContextMenu=({items:a,style:s})=>jsxRuntimeExports.jsx(Dropdown$1,{menu:{items:a},placement:"top",arrow:!0,trigger:["click"],children:jsxRuntimeExports.jsx(Button$2,{type:"text",children:jsxRuntimeExports.jsx(EllipsisOutlined$1,{style:{color:s.textStyle.color}})})}),CtlBar=a=>{const{token:s}=theme.useToken(),$=reactExports.useContext(I18nContext),{size:_,pageCursor:_e,pageNum:tt,setPageCursor:nt,zoomLevel:at,setZoomLevel:ot,addPageAfter:rt,removePage:st}=a,lt=[];rt&&lt.push({key:"1",label:jsxRuntimeExports.jsx("div",{onClick:rt,children:$("addPageAfter")})}),st&&tt>1&&_e!==0&&lt.push({key:"2",label:jsxRuntimeExports.jsx("div",{onClick:st,children:$("removePage")})});const et=300,it=lt.length>0?50:0,ut=(tt>1?et:et/2)+it,ft={color:s.colorWhite,fontSize:s.fontSize,margin:s.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:"auto",bottom:"6%",width:_.width},children:jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-evenly",position:"relative",zIndex:1,left:`calc(50% - ${ut/2}px)`,width:ut,height:40,boxSizing:"border-box",padding:s.paddingSM,borderRadius:s.borderRadius,backgroundColor:s.colorBgMask},children:[tt>1&&jsxRuntimeExports.jsx(Pager,{style:{textStyle:ft},pageCursor:_e,pageNum:tt,setPageCursor:nt}),jsxRuntimeExports.jsx(Zoom,{style:{textStyle:ft},zoomLevel:at,setZoomLevel:ot}),lt.length>0&&jsxRuntimeExports.jsx(ContextMenu,{items:lt,style:{textStyle:ft}})]})})},CtlBar$1=CtlBar,scaleDragPosAdjustment=(a,s)=>s>1?a*(s-1):s<1?a*-(1-s):0,TemplateEditor=({template:a,size:s,onSaveTemplate:$,onChangeTemplate:_,onPageCursorChange:_e})=>{const tt=reactExports.useRef([]),nt=reactExports.useRef([]),at=reactExports.useRef(null),ot=reactExports.useRef([]),rt=reactExports.useContext(I18nContext),st=reactExports.useContext(PluginsRegistry),lt=reactExports.useContext(OptionsContext),[et,it]=reactExports.useState(null),[ut,ft]=reactExports.useState([]),[ht,dt]=reactExports.useState([[]]),[gt,pt]=reactExports.useState(0),[mt,ct]=reactExports.useState(1),[vt,At]=reactExports.useState(!0),[xt,bt]=reactExports.useState(null),{backgrounds:Et,pageSizes:St,scale:Bt,error:Ot,refresh:Pt}=useUIPreProcessor({template:a,size:s,zoomLevel:mt}),wt=Tt=>{ft(Tt),it(null)},Ct=()=>{ft([]),it(null)};useScrollPageCursor({ref:at,pageSizes:St,scale:Bt,pageCursor:gt,onChangePageCursor:Tt=>{pt(Tt),_e(Tt),Ct()}});const It=reactExports.useCallback(Tt=>{nt.current=[],tt.current.push(cloneDeep$1(ht[gt]));const Dt=cloneDeep$1(ht);Dt[gt]=Tt,dt(Dt),_(schemasList2template(Dt,a.basePdf))},[a,ht,gt,_]),yt=reactExports.useCallback(Tt=>{It(ht[gt].filter(Dt=>!Tt.includes(Dt.id))),Ct()},[ht,gt,It]),Rt=reactExports.useCallback(Tt=>{changeSchemas({objs:Tt,schemas:ht[gt],basePdf:a.basePdf,pluginsRegistry:st,pageSize:St[gt],commitSchemas:It})},[It,gt,ht,st,St,a.basePdf]);useInitEvents({pageCursor:gt,pageSizes:St,activeElements:ut,template:a,schemasList:ht,changeSchemas:Rt,commitSchemas:It,removeSchemas:yt,onSaveTemplate:$,past:tt,future:nt,setSchemasList:dt,onEdit:wt,onEditEnd:Ct});const kt=reactExports.useCallback(async Tt=>{var Ut;const Dt=await template2SchemasList(Tt);dt(Dt),Ct(),pt(0),(Ut=at.current)!=null&&Ut.scroll&&at.current.scroll({top:0,behavior:"smooth"})},[]),jt=Tt=>{const[Dt,Ut,Vt,Qt]=isBlankPdf(a.basePdf)?a.basePdf.padding:[0,0,0,0],qt=St[gt],Zt=rr=>{let Yt=ht.reduce((nr,tr)=>nr+tr.length,1),Kt=rr+Yt;for(;ht.some(nr=>nr.find(tr=>tr.name===Kt));)Yt++,Kt=rr+Yt;return Kt},ar=(rr,Yt,Kt)=>Math.min(Math.max(rr,Yt),Kt),Jt={id:uuid$6(),...Tt,name:Zt(rt("field")),position:{x:ar(Qt,Tt.position.x,qt.width-Ut-Tt.width),y:ar(Dt,Tt.position.y,qt.height-Vt-Tt.height)},required:Tt.readOnly?!1:lt.requiredByDefault||Tt.required||!1};if(Tt.position.y===0){const rr=ot.current[gt],Yt=rr?rr.getBoundingClientRect().top:0;Jt.position.y=Yt>0?Dt:St[gt].height/2}It(ht[gt].concat(Jt)),setTimeout(()=>wt([document.getElementById(Jt.id)]))},Ht=Tt=>{It(Tt)},Ft=Tt=>{it(Tt)},_t=async(Tt,Dt)=>{pt(Dt);const Ut=schemasList2template(Tt,a.basePdf);_(Ut),await kt(Ut),Pt(Ut),setTimeout(()=>at.current&&(at.current.scrollTop=getPagesScrollTopByIndex(St,Dt,Bt),0))},Nt=()=>{if(gt===0||!window.confirm(rt("removePageConfirm")))return;const Tt=cloneDeep$1(ht);Tt.splice(gt,1),_t(Tt,gt-1)},Mt=()=>{const Tt=cloneDeep$1(ht);Tt.splice(gt+1,0,[]),_t(Tt,gt+1)};xt!==a&&(bt(a),kt(a));const Lt={width:vt?s.width-RIGHT_SIDEBAR_WIDTH:s.width,height:s.height};if(Ot)return jsxRuntimeExports.jsx(ErrorScreen$1,{size:s,error:Ot});const $t=isBlankPdf(a.basePdf)?{addPageAfter:Mt,removePage:Nt}:{};return jsxRuntimeExports.jsx(Root$1,{size:s,scale:Bt,children:jsxRuntimeExports.jsxs(DndContext,{onDragEnd:Tt=>{var Yt,Kt;if(!Tt.active)return;const Dt=Tt.active,Ut=ot.current[gt].getBoundingClientRect(),Vt=((Yt=Dt.rect.current.initial)==null?void 0:Yt.left)||0,Qt=((Kt=Dt.rect.current.initial)==null?void 0:Kt.top)||0,qt=Ut.left-Vt+scaleDragPosAdjustment(20,Bt),Zt=Ut.top-Qt,ar=(Tt.delta.y-Zt)/Bt,Jt=(Tt.delta.x-qt)/Bt,rr={x:round(px2mm(Math.max(0,Jt)),2),y:round(px2mm(Math.max(0,ar)),2)};jt({...Dt.data.current,position:rr})},onDragStart:Ct,children:[jsxRuntimeExports.jsx(CtlBar$1,{size:Lt,pageCursor:gt,pageNum:ht.length,setPageCursor:Tt=>{at.current&&(at.current.scrollTop=getPagesScrollTopByIndex(St,Tt,Bt),pt(Tt),Ct())},zoomLevel:mt,setZoomLevel:ct,...$t}),jsxRuntimeExports.jsx(LeftSidebar$1,{height:at.current?at.current.clientHeight:0,scale:Bt,basePdf:a.basePdf}),jsxRuntimeExports.jsx(RightSidebar,{hoveringSchemaId:et,onChangeHoveringSchemaId:Ft,height:at.current?at.current.clientHeight:0,size:s,pageSize:St[gt]??[],activeElements:ut,schemasList:ht,schemas:ht[gt]??[],changeSchemas:Rt,onSortEnd:Ht,onEdit:Tt=>{const Dt=document.getElementById(Tt);Dt&&wt([Dt])},onEditEnd:Ct,deselectSchema:Ct,sidebarOpen:vt,setSidebarOpen:At}),jsxRuntimeExports.jsx(Canvas$1,{ref:at,paperRefs:ot,basePdf:a.basePdf,hoveringSchemaId:et,onChangeHoveringSchemaId:Ft,height:s.height-RULER_HEIGHT*ZOOM,pageCursor:gt,scale:Bt,size:Lt,pageSizes:St,backgrounds:Et,activeElements:ut,schemasList:ht,changeSchemas:Rt,removeSchemas:yt,sidebarOpen:vt,onEdit:wt})]})})},DesignerComponent=TemplateEditor,defaultTheme={token:{colorPrimary:"#38a0ff"},components:{Form:{fontSize:12,margin:8,marginLG:12,marginXS:4,padding:8,paddingLG:12,paddingXS:4,itemMarginBottom:4,verticalLabelPadding:"0 0 2px"}}},isObject=a=>a&&typeof a=="object"&&!Array.isArray(a),deepMerge=(a,s)=>{let $={...a};return isObject(a)&&isObject(s)&&Object.keys(s).forEach(_=>{isObject(s[_])?_ in a?$[_]=deepMerge(a[_],s[_]):Object.assign($,{[_]:s[_]}):Object.assign($,{[_]:s[_]})}),$},AppContextProvider=({children:a,lang:s,font:$,plugins:_,options:_e})=>{let tt=defaultTheme;_e.theme&&(tt=deepMerge(tt,_e.theme));let nt=getDict(s);return _e.labels&&(nt=deepMerge(nt,_e.labels)),jsxRuntimeExports.jsx(ThemeConfigProvider,{theme:tt,children:jsxRuntimeExports.jsx(I18nContext.Provider,{value:at=>i18n(at,nt),children:jsxRuntimeExports.jsx(FontContext.Provider,{value:$,children:jsxRuntimeExports.jsx(PluginsRegistry.Provider,{value:_,children:jsxRuntimeExports.jsx(OptionsContext.Provider,{value:_e,children:a})})})})})},AppContextProvider$1=AppContextProvider;class Designer extends BaseUIClass{constructor(s){super(s),this.pageCursor=0,checkDesignerProps(s)}saveTemplate(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.onSaveTemplateCallback&&this.onSaveTemplateCallback(this.template)}updateTemplate(s){if(checkTemplate(s),!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.template=cloneDeep$1(s),this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s),this.render()}onSaveTemplate(s){this.onSaveTemplateCallback=s}onChangeTemplate(s){this.onChangeTemplateCallback=s}getPageCursor(){return this.pageCursor}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider$1,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(DesignerComponent,{template:this.template,onSaveTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onSaveTemplateCallback&&this.onSaveTemplateCallback(s)},onChangeTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s)},onPageCursorChange:s=>{this.pageCursor=s},size:this.size})}),this.domContainer)}}const Designer$1=Designer,{Text}=Typography$1,icons={left:LeftOutlined$1,right:RightOutlined$1,doubleLeft:DoubleLeftOutlined$1,doubleRight:DoubleRightOutlined$1},UnitButton=({type:a,onClick:s,disabled:$,textStyle:_})=>{const _e=icons[a];return jsxRuntimeExports.jsx(Button$2,{type:"text",onClick:s,disabled:$,children:jsxRuntimeExports.jsx(_e,{style:{color:_.color}})})},UnitPager=({size:a,unitCursor:s,unitNum:$,setUnitCursor:_})=>{if($<=1)return null;const{token:_e}=theme.useToken(),tt={pointerEvents:"initial",position:"sticky",zIndex:1,display:"flex",alignItems:"center",boxSizing:"border-box",height:40,padding:_e.paddingSM,borderRadius:_e.borderRadius,backgroundColor:_e.colorBgMask},nt={color:_e.colorWhite,fontSize:_e.fontSize,margin:_e.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",...a},children:jsxRuntimeExports.jsxs("div",{style:{position:"sticky",width:"100%",zIndex:1,top:`calc(50% - ${tt.height/2}px)`,display:"flex",alignItems:"center"},children:[s>0&&jsxRuntimeExports.jsxs("div",{style:{left:"1rem",marginLeft:"1rem",...tt},children:[jsxRuntimeExports.jsx(UnitButton,{type:"doubleLeft",onClick:()=>_(0),disabled:s<=0,textStyle:nt}),jsxRuntimeExports.jsx(UnitButton,{type:"left",onClick:()=>_(s-1),disabled:s<=0,textStyle:nt}),jsxRuntimeExports.jsxs(Text,{strong:!0,style:nt,children:[s+1,"/",$]})]}),s+1<$&&jsxRuntimeExports.jsxs("div",{style:{right:"1rem",marginLeft:"auto",marginRight:"1rem",...tt},children:[jsxRuntimeExports.jsxs(Text,{strong:!0,style:nt,children:[s+1,"/",$]}),jsxRuntimeExports.jsx(UnitButton,{type:"right",onClick:()=>_(s+1),disabled:s+1>=$,textStyle:nt}),jsxRuntimeExports.jsx(UnitButton,{type:"doubleRight",onClick:()=>_($-1),disabled:s+1>=$,textStyle:nt})]})]})})},UnitPager$1=UnitPager,_cache=new Map,Preview=({template:a,inputs:s,size:$,onChangeInput:_})=>{const{token:_e}=theme.useToken(),tt=reactExports.useContext(FontContext),nt=reactExports.useRef(null),at=reactExports.useRef([]),[ot,rt]=reactExports.useState(0),[st,lt]=reactExports.useState(0),[et,it]=reactExports.useState(1),[ut,ft]=reactExports.useState([[]]),{backgrounds:ht,pageSizes:dt,scale:gt,error:pt,refresh:mt}=useUIPreProcessor({template:a,size:$,zoomLevel:et}),ct=!!_,vt=s[ot],At=bt=>{getDynamicTemplate({template:bt,input:vt,options:{font:tt},_cache,getDynamicHeights:(St,Bt)=>{switch(Bt.schema.type){case"table":return getDynamicHeightsForTable(St,Bt);default:return Promise.resolve([Bt.schema.height])}}}).then(async St=>{const Bt=await template2SchemasList(St);ft(Bt),await mt(St)}).catch(St=>console.error("[@pdfme/ui] ",St))};reactExports.useEffect(()=>{ot>s.length-1&&rt(s.length-1),At(a)},[a,s,$]),useScrollPageCursor({ref:nt,pageSizes:dt,scale:gt,pageCursor:st,onChangePageCursor:lt});const xt=({name:bt,value:Et})=>_&&_({index:ot,name:bt,value:Et});return pt?jsxRuntimeExports.jsx(ErrorScreen$1,{size:$,error:pt}):jsxRuntimeExports.jsxs(Root$1,{size:$,scale:gt,children:[jsxRuntimeExports.jsx(CtlBar$1,{size:$,pageCursor:st,pageNum:ut.length,setPageCursor:bt=>{nt.current&&(nt.current.scrollTop=getPagesScrollTopByIndex(dt,bt,gt),lt(bt))},zoomLevel:et,setZoomLevel:it}),jsxRuntimeExports.jsx(UnitPager$1,{size:$,unitCursor:ot,unitNum:s.length,setUnitCursor:rt}),jsxRuntimeExports.jsx("div",{ref:nt,style:{...$,position:"relative",overflow:"auto"},children:jsxRuntimeExports.jsx(Paper$1,{paperRefs:at,scale:gt,size:$,schemasList:ut,pageSizes:dt,backgrounds:ht,renderSchema:({schema:bt,index:Et})=>{const{name:St,readOnly:Bt}=bt,Ot=Bt?String(bt.content)||"":String(vt&&vt[St]||"");return jsxRuntimeExports.jsx(Renderer$1,{schema:bt,basePdf:a.basePdf,value:Ot,mode:ct?"form":"viewer",placeholder:bt.content,tabIndex:Et+100,onChange:Pt=>{const wt=Array.isArray(Pt)?Pt:[Pt];let Ct=!1;wt.forEach(({key:It,value:yt})=>{if(It==="content"){const Rt=yt,kt=(vt==null?void 0:vt[St])||"";if(Rt===kt)return;xt({name:St,value:Rt}),bt.type==="table"&&(Ct=!0)}else{const Rt=ut[st].find(kt=>kt.id===bt.id);if(!Rt)return;Rt[It]=yt}}),Ct&&At(a),ft([...ut])},outline:ct&&!bt.readOnly?`1px dashed ${_e.colorPrimary}`:"transparent",scale:gt},bt.id)}})})]})},Preview$1=Preview;class Form extends PreviewUI{constructor(s){super(s)}onChangeInput(s){this.onChangeInputCallback=s}setInputs(s){super.setInputs(s),s.map((_,_e)=>Object.keys(_).map(tt=>({index:_e,name:tt,value:_[tt]}))).flat().forEach(_=>{this.onChangeInputCallback&&this.onChangeInputCallback(_)})}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider$1,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview$1,{template:this.template,size:this.size,inputs:this.inputs,onChangeInput:s=>{const{index:$,value:_,name:_e}=s;this.onChangeInputCallback&&this.onChangeInputCallback({index:$,value:_,name:_e}),this.inputs&&this.inputs[$]&&this.inputs[$][_e]!==_&&(this.inputs[$][_e]=_,this.render())}})}),this.domContainer)}}const Form$1=Form;class Viewer extends PreviewUI{constructor(s){super(s)}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider$1,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview$1,{template:this.template,size:this.size,inputs:this.inputs})}),this.domContainer)}}const Viewer$1=Viewer;exports.Designer=Designer$1,exports.Form=Form$1,exports.Viewer=Viewer$1,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})});
+`),GuidesElement=defaultStyled("div",GUIDES_CSS),Guides$1=function(a){__extends(s,a);function s(){var _=a!==null&&a.apply(this,arguments)||this;return _.state={guides:[]},_.scrollPos=0,_.guideElements=[],_.onDragStart=function(_e){var tt=_e.datas,nt=_e.inputEvent,at=_.props.onDragStart;addClass(tt.target,DRAGGING),_.onDrag(_e),at(__assign({},_e,{dragElement:tt.target})),nt.stopPropagation(),nt.preventDefault()},_.onDrag=function(_e){var tt=_.movePos(_e);return _.props.onDrag(__assign({},_e,{dragElement:_e.datas.target})),tt},_.onDragEnd=function(_e){var tt=_e.datas,nt=_e.isDouble,at=_e.distX,ot=_e.distY,rt=_.movePos(_e),st=_.state.guides,lt=_.props,et=lt.onChangeGuides,it=lt.zoom,ut=lt.displayDragPos,ft=lt.digit,ht=lt.lockGuides,dt=parseFloat((rt/it).toFixed(ft||0));if(ut&&(_.displayElement.style.cssText+="display: none;"),removeClass(tt.target,DRAGGING),_.props.onDragEnd(__assign({},_e,{dragElement:tt.target})),tt.fromRuler)rt>=_.scrollPos&&st.indexOf(dt)<0&&_.setState({guides:st.concat([dt])},function(){et({guides:_.state.guides,distX:at,distY:ot,isAdd:!0,isRemove:!1,isChange:!1})});else{var gt=tt.target.getAttribute("data-index"),pt=!1,mt=!1;if(st=st.slice(),nt||dt<_.scrollPos){if(ht&&(ht===!0||ht.indexOf("remove")>-1))return;st.splice(gt,1),pt=!0}else{if(st.indexOf(dt)>-1)return;if(ht&&(ht===!0||ht.indexOf("change")>-1))return;st[gt]=dt,mt=!0}_.setState({guides:st},function(){var ct=_.state.guides;et({distX:at,distY:ot,guides:ct,isAdd:!1,isChange:mt,isRemove:pt})})}},_}var $=s.prototype;return $.render=function(){var _=this.props,_e=_.className,tt=_.type,nt=_.zoom,at=_.style,ot=_.rulerStyle,rt=_.displayDragPos,st=_.cspNonce,lt=_.dragGuideStyle,et=_.portalContainer,it=this.props,ut=this.getTranslateName(),ft={};return PROPERTIES.forEach(function(ht){ht!=="style"&&(ft[ht]=it[ht])}),reactExports.createElement(GuidesElement,{ref:ref(this,"manager"),cspNonce:st,className:prefix("manager",tt)+" "+_e,portalContainer:et,style:at},reactExports.createElement("div",{className:prefix("guide-origin"),ref:ref(this,"originElement")}),reactExports.createElement(Ruler$1,__assign({ref:ref(this,"ruler"),style:ot},ft)),reactExports.createElement("div",{className:GUIDES,ref:ref(this,"guidesElement"),style:{transform:ut+"("+-this.scrollPos*nt+"px)"}},rt&&reactExports.createElement("div",{className:DISPLAY_DRAG,ref:ref(this,"displayElement"),style:lt}),reactExports.createElement("div",{className:ADDER,ref:ref(this,"adderElement")}),this.renderGuides()))},$.renderGuides=function(){var _=this,_e=this.props,tt=_e.type,nt=_e.zoom,at=_e.showGuides,ot=_e.guideStyle,rt=this.getTranslateName(),st=this.state.guides;if(this.guideElements=[],at)return st.map(function(lt,et){return reactExports.createElement("div",{className:prefix("guide",tt),ref:refs(_,"guideElements",et),key:et,"data-index":et,"data-pos":lt,style:__assign({},ot,{transform:rt+"("+lt*nt+"px) translateZ(0px)"})})})},$.componentDidMount=function(){var _=this;this.gesto=new Gesto(this.manager.getElement(),{container:document.body}).on("dragStart",function(_e){var tt=_.props,nt=tt.type,at=tt.zoom,ot=tt.lockGuides;if(ot===!0){_e.stop();return}var rt=_e.inputEvent,st=rt.target,lt=_e.datas,et=_.ruler.canvasElement,it=_.guidesElement,ut=nt==="horizontal",ft=_.originElement.getBoundingClientRect(),ht=getDistElementMatrix(_.manager.getElement()),dt=calculateMatrixDist(ht,[_e.clientX-ft.left,_e.clientY-ft.top]);dt[0]-=it.offsetLeft,dt[1]-=it.offsetTop,dt[ut?1:0]+=_.scrollPos*at,lt.offsetPos=dt,lt.matrix=ht;var gt=ot&&ot.indexOf("add")>-1,pt=ot&&ot.indexOf("remove")>-1,mt=ot&&ot.indexOf("change")>-1;if(st===et){if(gt){_e.stop();return}lt.fromRuler=!0,lt.target=_.adderElement}else if(hasClass(st,GUIDE)){if(pt&&mt){_e.stop();return}lt.target=st}else return _e.stop(),!1;_.onDragStart(_e)}).on("drag",this.onDrag).on("dragEnd",this.onDragEnd),this.setState({guides:this.props.defaultGuides||[]})},$.componentWillUnmount=function(){this.gesto.unset()},$.componentDidUpdate=function(_){_.defaultGuides!==this.props.defaultGuides&&this.setState({guides:this.props.defaultGuides||[]})},$.loadGuides=function(_){this.setState({guides:_})},$.getGuides=function(){return this.state.guides},$.scrollGuides=function(_){var _e=this.props.zoom,tt=this.guidesElement;this.scrollPos=_,tt.style.transform=this.getTranslateName()+"("+-_*_e+"px)";var nt=this.state.guides;this.guideElements.forEach(function(at,ot){at&&(at.style.display=-_+nt[ot]<0?"none":"block")})},$.resize=function(){this.ruler.resize()},$.scroll=function(_){this.ruler.scroll(_)},$.movePos=function(_){var _e=_.datas,tt=_.distX,nt=_.distY,at=this.props,ot=at.type,rt=at.zoom,st=at.snaps,lt=at.snapThreshold,et=at.displayDragPos,it=at.digit,ut=at.dragPosFormat||function(xt){return xt},ft=ot==="horizontal",ht=calculateMatrixDist(_e.matrix,[tt,nt]),dt=_e.offsetPos,gt=ht[0]+dt[0],pt=ht[1]+dt[1],mt=Math.round(ft?pt:gt),ct=parseFloat((mt/rt).toFixed(it||0)),vt=st.slice().sort(function(xt,bt){return Math.abs(ct-xt)-Math.abs(ct-bt)});if(vt.length&&Math.abs(vt[0]*rt-mt)<lt&&(ct=vt[0],mt=ct*rt),et){var At=ot==="horizontal"?[gt,mt]:[mt,pt];this.displayElement.style.cssText+="display: block;transform: translate(-50%, -50%) "+("translate("+At.map(function(xt){return xt+"px"}).join(", ")+")"),this.displayElement.innerHTML=""+ut(ct)}return _e.target.setAttribute("data-pos",ct),_e.target.style.transform=this.getTranslateName()+"("+mt+"px)",mt},$.getTranslateName=function(){return this.props.type==="horizontal"?"translateY":"translateX"},s.defaultProps={className:"",type:"horizontal",zoom:1,style:{},snapThreshold:5,snaps:[],digit:0,onChangeGuides:function(){},onDragStart:function(){},onDrag:function(){},onDragEnd:function(){},displayDragPos:!1,dragPosFormat:function(_){return _},defaultGuides:[],lockGuides:!1,showGuides:!0,guideStyle:{},dragGuideStyle:{},portalContainer:null},s}(reactExports.PureComponent);const Guides$2=Guides$1,guideStyle=(a,s,$,_)=>({position:"absolute",top:a,left:s,height:$,width:_,background:"#333333"}),_Guides=({paperSize:a,horizontalRef:s,verticalRef:$})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("div",{className:"ruler-container",style:guideStyle(-RULER_HEIGHT,-RULER_HEIGHT,RULER_HEIGHT,RULER_HEIGHT)}),jsxRuntimeExports.jsx(Guides$2,{zoom:ZOOM,style:guideStyle(-RULER_HEIGHT,0,RULER_HEIGHT,a.width),type:"horizontal",ref:s}),jsxRuntimeExports.jsx(Guides$2,{zoom:ZOOM,style:guideStyle(0,-RULER_HEIGHT,a.height,RULER_HEIGHT),type:"vertical",ref:$})]}),Guides=_Guides,Mask=({width:a,height:s})=>jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:-RULER_HEIGHT,left:-RULER_HEIGHT,zIndex:100,width:a,height:s,background:theme.useToken().token.colorBgMask}}),Mask$1=Mask,getPaddingStyle=(a,s,$)=>{const _={position:"absolute",background:$,opacity:.25,pointerEvents:"none"};switch(a){case 0:_.top=0,_.height=`${s*ZOOM}px`,_.left=0,_.right=0;break;case 1:_.right=0,_.width=`${s*ZOOM}px`,_.top=0,_.bottom=0;break;case 2:_.bottom=0,_.height=`${s*ZOOM}px`,_.left=0,_.right=0;break;case 3:_.left=0,_.width=`${s*ZOOM}px`,_.top=0,_.bottom=0;break}return _},Padding=({basePdf:a})=>jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:isBlankPdf(a)&&a.padding.map((s,$)=>jsxRuntimeExports.jsx("div",{style:getPaddingStyle($,s,theme.useToken().token.colorError)},String($)))}),Padding$1=Padding,mm2px=a=>a*3.7795275591,DELETE_BTN_ID=uuid$6(),fmt4Num=a=>Number(a.replace("px","")),fmt=a=>round(fmt4Num(a)/ZOOM,2),isTopLeftResize=a=>a==="-1,-1"||a==="-1,0"||a==="0,-1",normalizeRotate=a=>(a%360+360)%360,DeleteButton=({activeElements:a})=>{const{token:s}=theme.useToken(),$=26,_=Math.min(...a.map(({style:tt})=>fmt4Num(tt.top))),_e=Math.max(...a.map(({style:tt})=>fmt4Num(tt.left)+fmt4Num(tt.width)))+10;return jsxRuntimeExports.jsx(Button$2,{id:DELETE_BTN_ID,style:{position:"absolute",zIndex:1,top:_,left:_e,width:$,height:$,padding:2,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:s.borderRadius,color:s.colorWhite,background:s.colorPrimary},children:jsxRuntimeExports.jsx(CloseOutlined$4,{style:{pointerEvents:"none"}})})},Canvas=(a,s)=>{const{basePdf:$,pageCursor:_,scale:_e,backgrounds:tt,pageSizes:nt,size:at,activeElements:ot,schemasList:rt,hoveringSchemaId:st,onEdit:lt,changeSchemas:et,removeSchemas:it,onChangeHoveringSchemaId:ut,paperRefs:ft,sidebarOpen:ht}=a,{token:dt}=theme.useToken(),gt=reactExports.useContext(PluginsRegistry),pt=reactExports.useRef([]),mt=reactExports.useRef([]),ct=reactExports.useRef(null),[vt,At]=reactExports.useState(!1),[xt,bt]=reactExports.useState(!1),Et=usePrevious(rt[_]),St=Lt=>{Lt.shiftKey&&At(!0)},Bt=Lt=>{(Lt.key==="Shift"||!Lt.shiftKey)&&At(!1),(Lt.key==="Escape"||Lt.key==="Esc")&&bt(!1)},Ot=reactExports.useCallback(()=>{window.addEventListener("keydown",St),window.addEventListener("keyup",Bt)},[]),Pt=reactExports.useCallback(()=>{window.removeEventListener("keydown",St),window.removeEventListener("keyup",Bt)},[]);reactExports.useEffect(()=>(Ot(),Pt),[Ot,Pt]),reactExports.useEffect(()=>{var Tt,Dt;if((Tt=ct.current)==null||Tt.updateRect(),!Et)return;const Lt=JSON.stringify(Et[_]||{}),$t=JSON.stringify(rt[_]||{});Lt===$t&&((Dt=ct.current)==null||Dt.updateRect())},[_,rt,Et]);const wt=({target:Lt,top:$t,left:Tt})=>{const{width:Dt,height:Ut}=Lt.style,Vt=fmt(Dt),Qt=fmt(Ut),qt=$t/ZOOM,Zt=Tt/ZOOM,{width:ar,height:Jt}=nt[_];let rr=0,Yt=0,Kt=0,nr=0;if(isBlankPdf($)){const[tr,ir,sr,cr]=$.padding;rr=tr*ZOOM,Yt=ir,Kt=sr,nr=cr*ZOOM}qt+Qt>Jt-Kt?Lt.style.top=`${(Jt-Qt-Kt)*ZOOM}px`:Lt.style.top=`${$t<rr?rr:$t}px`,Zt+Vt>ar-Yt?Lt.style.left=`${(ar-Vt-Yt)*ZOOM}px`:Lt.style.left=`${Tt<nr?nr:Tt}px`},Ct=({target:Lt})=>{const{top:$t,left:Tt}=Lt.style;et([{key:"position.y",value:fmt($t),schemaId:Lt.id},{key:"position.x",value:fmt(Tt),schemaId:Lt.id}])},It=({targets:Lt})=>{const $t=Lt.map(({style:{top:Tt,left:Dt},id:Ut})=>[{key:"position.y",value:fmt(Tt),schemaId:Ut},{key:"position.x",value:fmt(Dt),schemaId:Ut}]);et(flatten($t))},yt=({target:Lt,rotate:$t})=>{Lt.style.transform=`rotate(${$t}deg)`},Rt=({target:Lt})=>{const{transform:$t}=Lt.style,Tt=Number($t.replace("rotate(","").replace("deg)","")),Dt=normalizeRotate(Tt);et([{key:"rotate",value:Dt,schemaId:Lt.id}])},kt=({targets:Lt})=>{const $t=Lt.map(({style:{transform:Tt},id:Dt})=>{const Ut=Number(Tt.replace("rotate(","").replace("deg)",""));return[{key:"rotate",value:normalizeRotate(Ut),schemaId:Dt}]});et(flatten($t))},jt=({target:Lt})=>{const{id:$t,style:Tt}=Lt,{width:Dt,height:Ut,top:Vt,left:Qt}=Tt;et([{key:"position.x",value:fmt(Qt),schemaId:$t},{key:"position.y",value:fmt(Vt),schemaId:$t},{key:"width",value:fmt(Dt),schemaId:$t},{key:"height",value:fmt(Ut),schemaId:$t}]);const qt=rt[_].find(Zt=>Zt.id===$t);qt&&(qt.position.x=fmt(Qt),qt.position.y=fmt(Vt),qt.width=fmt(Dt),qt.height=fmt(Ut))},Ht=({targets:Lt})=>{const $t=Lt.map(({style:{width:Tt,height:Dt,top:Ut,left:Vt},id:Qt})=>[{key:"width",value:fmt(Tt),schemaId:Qt},{key:"height",value:fmt(Dt),schemaId:Qt},{key:"position.y",value:fmt(Ut),schemaId:Qt},{key:"position.x",value:fmt(Vt),schemaId:Qt}]);et(flatten($t))},Ft=({target:Lt,width:$t,height:Tt,direction:Dt})=>{if(!Lt)return;let Ut=0,Vt=0,Qt=0,qt=0;if(isBlankPdf($)){const[tr,ir,sr,cr]=$.padding;Ut=tr*ZOOM,Vt=mm2px(ir),Qt=mm2px(sr),qt=cr*ZOOM}const Zt=mm2px(nt[_].width),ar=mm2px(nt[_].height),Jt={width:`${$t}px`,height:`${Tt}px`},rr=Lt.style;let Yt=fmt4Num(rr.left)+(fmt4Num(rr.width)-$t),Kt=fmt4Num(rr.top)+(fmt4Num(rr.height)-Tt);Yt<qt&&(Yt=qt),Kt<Ut&&(Kt=Ut),Yt+$t>Zt-Vt&&(Jt.width=`${Zt-Vt-Yt}px`),Kt+Tt>ar-Qt&&(Jt.height=`${ar-Qt-Kt}px`);const nr=Dt.toString();isTopLeftResize(nr)?(Jt.top=`${Kt}px`,Jt.left=`${Yt}px`):nr==="1,-1"?Jt.top=`${Kt}px`:nr==="-1,1"&&(Jt.left=`${Yt}px`),Object.assign(rr,Jt)},_t=(Lt,$t)=>Lt[$t]&&Lt[$t].getGuides().map(Tt=>Tt*ZOOM),Nt=Lt=>{Lt.inputEvent.stopPropagation(),bt(!0)},Mt=reactExports.useMemo(()=>{const $t=(rt[_]||[]).filter(Ut=>ot.map(Vt=>Vt.id).includes(Ut.id)).map(Ut=>Ut.type),Tt=[...new Set($t)],Dt=Object.values(gt).map(Ut=>Ut==null?void 0:Ut.propPanel.defaultSchema);return Tt.every(Ut=>{var Vt;return((Vt=Dt.find(Qt=>Qt.type===Ut))==null?void 0:Vt.rotate)!==void 0})},[ot,_,rt,gt]);return jsxRuntimeExports.jsxs("div",{style:{position:"relative",overflow:"auto",marginRight:ht?RIGHT_SIDEBAR_WIDTH:0,...at},ref:s,children:[jsxRuntimeExports.jsx(Selecto,{container:ft.current[_],continueSelect:vt,onDragStart:Lt=>{var Dt,Ut;const{inputEvent:$t}=Lt,Tt=(Dt=ct.current)==null?void 0:Dt.isMoveableElement($t.target);($t.type==="touchstart"&&Lt.isTrusted||Tt)&&Lt.stop(),ft.current[_]===$t.target&&lt([]),((Ut=$t.target)==null?void 0:Ut.id)===DELETE_BTN_ID&&it(ot.map(Vt=>Vt.id))},onSelect:({added:Lt,removed:$t,selected:Tt,inputEvent:Dt})=>{const Ut=Dt.type==="mousedown";let Vt=Ut?Tt:[];!Ut&&Lt.length>0&&(Vt=ot.concat(Lt)),!Ut&&$t.length>0&&(Vt=ot.filter(Qt=>!$t.includes(Qt))),lt(Vt),Vt!=ot&&bt(!1),Dt.shiftKey||At(!1)}}),jsxRuntimeExports.jsx(Paper$1,{paperRefs:ft,scale:_e,size:at,schemasList:rt,pageSizes:nt,backgrounds:tt,hasRulers:!0,renderPaper:({index:Lt,paperSize:$t})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[!xt&&ot.length>0&&_===Lt&&jsxRuntimeExports.jsx(DeleteButton,{activeElements:ot}),jsxRuntimeExports.jsx(Padding$1,{basePdf:$}),jsxRuntimeExports.jsx(Guides,{paperSize:$t,horizontalRef:Tt=>{Tt&&(mt.current[Lt]=Tt)},verticalRef:Tt=>{Tt&&(pt.current[Lt]=Tt)}}),_!==Lt?jsxRuntimeExports.jsx(Mask$1,{width:$t.width+RULER_HEIGHT,height:$t.height+RULER_HEIGHT}):!xt&&jsxRuntimeExports.jsx(Moveable,{ref:ct,target:ot,bounds:{left:0,top:0,bottom:$t.height,right:$t.width},horizontalGuidelines:_t(mt.current,Lt),verticalGuidelines:_t(pt.current,Lt),keepRatio:vt,rotatable:Mt,onDrag:wt,onDragEnd:Ct,onDragGroupEnd:It,onRotate:yt,onRotateEnd:Rt,onRotateGroupEnd:kt,onResize:Ft,onResizeEnd:jt,onResizeGroupEnd:Ht,onClick:Nt})]}),renderSchema:({schema:Lt})=>jsxRuntimeExports.jsx(Renderer$1,{schema:Lt,basePdf:$,value:Lt.content||"",onChangeHoveringSchemaId:ut,mode:xt&&ot.map($t=>$t.id).includes(Lt.id)?"designer":"viewer",onChange:$t=>{const Tt=Array.isArray($t)?$t:[$t];et(Tt.map(({key:Dt,value:Ut})=>({key:Dt,value:Ut,schemaId:Lt.id})))},stopEditing:()=>bt(!1),outline:`1px ${st===Lt.id?"solid":"dashed"} ${Lt.readOnly&&st!==Lt.id?"transparent":dt.colorPrimary}`,scale:_e},Lt.id)})]})},Canvas$1=reactExports.forwardRef(Canvas),Spinner=()=>jsxRuntimeExports.jsx(Spin$1,{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},indicator:jsxRuntimeExports.jsx(LoadingOutlined$1,{style:{fontSize:50},spin:!0})}),Spinner$1=Spinner,Root=({size:a,scale:s,children:$},_)=>{const _e=reactExports.useContext(FontContext);return reactExports.useEffect(()=>{if(!document||!document.fonts)return;const nt=Object.entries(_e).map(([at,{data:ot}])=>new FontFace(at,typeof ot=="string"?`url(${ot})`:ot,{display:"swap"})).filter(at=>!document.fonts.has(at));Promise.allSettled(nt.map(at=>at.load())).then(at=>{at.forEach(ot=>{ot.status==="fulfilled"&&document.fonts.add(ot.value)})})},[_e]),jsxRuntimeExports.jsx("div",{ref:_,style:{position:"relative",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{margin:"0 auto",...a},children:s===0?jsxRuntimeExports.jsx(Spinner$1,{}):$})})},Root$1=reactExports.forwardRef(Root),ErrorScreen=({size:a,error:s})=>{const $=reactExports.useContext(I18nContext),{token:_}=theme.useToken();return jsxRuntimeExports.jsx("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{width:300,margin:"0 auto",background:_.colorBgLayout},children:jsxRuntimeExports.jsx(Result$2,{icon:null,title:"ERROR",subTitle:$("errorOccurred"),extra:jsxRuntimeExports.jsx("span",{children:s.message})})})})},ErrorScreen$1=ErrorScreen,{Text:Text$1}=Typography$1,Zoom=({zoomLevel:a,setZoomLevel:s,style:$})=>{const nt=a-.25,at=a+.25;return jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:.25>=nt,onClick:()=>s(nt),icon:jsxRuntimeExports.jsx(MinusOutlined$1,{style:{color:$.textStyle.color}})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:$.textStyle,children:[Math.round(a*100),"%"]}),jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:2<at,onClick:()=>s(at),icon:jsxRuntimeExports.jsx(PlusOutlined$4,{style:{color:$.textStyle.color}})})]})},Pager=({pageCursor:a,pageNum:s,setPageCursor:$,style:_})=>jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:a<=0,onClick:()=>$(a-1),children:jsxRuntimeExports.jsx(LeftOutlined$1,{style:{color:_.textStyle.color}})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:_.textStyle,children:[a+1,"/",s]}),jsxRuntimeExports.jsx(Button$2,{type:"text",disabled:a+1>=s,onClick:()=>$(a+1),children:jsxRuntimeExports.jsx(RightOutlined$1,{style:{color:_.textStyle.color}})})]}),ContextMenu=({items:a,style:s})=>jsxRuntimeExports.jsx(Dropdown$1,{menu:{items:a},placement:"top",arrow:!0,trigger:["click"],children:jsxRuntimeExports.jsx(Button$2,{type:"text",children:jsxRuntimeExports.jsx(EllipsisOutlined$1,{style:{color:s.textStyle.color}})})}),CtlBar=a=>{const{token:s}=theme.useToken(),$=reactExports.useContext(I18nContext),{size:_,pageCursor:_e,pageNum:tt,setPageCursor:nt,zoomLevel:at,setZoomLevel:ot,addPageAfter:rt,removePage:st}=a,lt=[];rt&&lt.push({key:"1",label:jsxRuntimeExports.jsx("div",{onClick:rt,children:$("addPageAfter")})}),st&&tt>1&&_e!==0&&lt.push({key:"2",label:jsxRuntimeExports.jsx("div",{onClick:st,children:$("removePage")})});const et=300,it=lt.length>0?50:0,ut=(tt>1?et:et/2)+it,ft={color:s.colorWhite,fontSize:s.fontSize,margin:s.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:"auto",bottom:"6%",width:_.width},children:jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-evenly",position:"relative",zIndex:1,left:`calc(50% - ${ut/2}px)`,width:ut,height:40,boxSizing:"border-box",padding:s.paddingSM,borderRadius:s.borderRadius,backgroundColor:s.colorBgMask},children:[tt>1&&jsxRuntimeExports.jsx(Pager,{style:{textStyle:ft},pageCursor:_e,pageNum:tt,setPageCursor:nt}),jsxRuntimeExports.jsx(Zoom,{style:{textStyle:ft},zoomLevel:at,setZoomLevel:ot}),lt.length>0&&jsxRuntimeExports.jsx(ContextMenu,{items:lt,style:{textStyle:ft}})]})})},CtlBar$1=CtlBar,scaleDragPosAdjustment=(a,s)=>s>1?a*(s-1):s<1?a*-(1-s):0,TemplateEditor=({template:a,size:s,onSaveTemplate:$,onChangeTemplate:_,onPageCursorChange:_e})=>{const tt=reactExports.useRef([]),nt=reactExports.useRef([]),at=reactExports.useRef(null),ot=reactExports.useRef([]),rt=reactExports.useContext(I18nContext),st=reactExports.useContext(PluginsRegistry),lt=reactExports.useContext(OptionsContext),[et,it]=reactExports.useState(null),[ut,ft]=reactExports.useState([]),[ht,dt]=reactExports.useState([[]]),[gt,pt]=reactExports.useState(0),[mt,ct]=reactExports.useState(1),[vt,At]=reactExports.useState(!0),[xt,bt]=reactExports.useState(null),{backgrounds:Et,pageSizes:St,scale:Bt,error:Ot,refresh:Pt}=useUIPreProcessor({template:a,size:s,zoomLevel:mt}),wt=Tt=>{ft(Tt),it(null)},Ct=()=>{ft([]),it(null)};useScrollPageCursor({ref:at,pageSizes:St,scale:Bt,pageCursor:gt,onChangePageCursor:Tt=>{pt(Tt),_e(Tt),Ct()}});const It=reactExports.useCallback(Tt=>{nt.current=[],tt.current.push(cloneDeep$1(ht[gt]));const Dt=cloneDeep$1(ht);Dt[gt]=Tt,dt(Dt),_(schemasList2template(Dt,a.basePdf))},[a,ht,gt,_]),yt=reactExports.useCallback(Tt=>{It(ht[gt].filter(Dt=>!Tt.includes(Dt.id))),Ct()},[ht,gt,It]),Rt=reactExports.useCallback(Tt=>{changeSchemas({objs:Tt,schemas:ht[gt],basePdf:a.basePdf,pluginsRegistry:st,pageSize:St[gt],commitSchemas:It})},[It,gt,ht,st,St,a.basePdf]);useInitEvents({pageCursor:gt,pageSizes:St,activeElements:ut,template:a,schemasList:ht,changeSchemas:Rt,commitSchemas:It,removeSchemas:yt,onSaveTemplate:$,past:tt,future:nt,setSchemasList:dt,onEdit:wt,onEditEnd:Ct});const kt=reactExports.useCallback(async Tt=>{var Ut;const Dt=await template2SchemasList(Tt);dt(Dt),Ct(),pt(0),(Ut=at.current)!=null&&Ut.scroll&&at.current.scroll({top:0,behavior:"smooth"})},[]),jt=Tt=>{const[Dt,Ut,Vt,Qt]=isBlankPdf(a.basePdf)?a.basePdf.padding:[0,0,0,0],qt=St[gt],Zt=rr=>{let Yt=ht.reduce((nr,tr)=>nr+tr.length,1),Kt=rr+Yt;for(;ht.some(nr=>nr.find(tr=>tr.name===Kt));)Yt++,Kt=rr+Yt;return Kt},ar=(rr,Yt,Kt)=>Math.min(Math.max(rr,Yt),Kt),Jt={id:uuid$6(),...Tt,name:Zt(rt("field")),position:{x:ar(Qt,Tt.position.x,qt.width-Ut-Tt.width),y:ar(Dt,Tt.position.y,qt.height-Vt-Tt.height)},required:Tt.readOnly?!1:lt.requiredByDefault||Tt.required||!1};if(Tt.position.y===0){const rr=ot.current[gt],Yt=rr?rr.getBoundingClientRect().top:0;Jt.position.y=Yt>0?Dt:St[gt].height/2}It(ht[gt].concat(Jt)),setTimeout(()=>wt([document.getElementById(Jt.id)]))},Ht=Tt=>{It(Tt)},Ft=Tt=>{it(Tt)},_t=async(Tt,Dt)=>{pt(Dt);const Ut=schemasList2template(Tt,a.basePdf);_(Ut),await kt(Ut),Pt(Ut),setTimeout(()=>at.current&&(at.current.scrollTop=getPagesScrollTopByIndex(St,Dt,Bt),0))},Nt=()=>{if(gt===0||!window.confirm(rt("removePageConfirm")))return;const Tt=cloneDeep$1(ht);Tt.splice(gt,1),_t(Tt,gt-1)},Mt=()=>{const Tt=cloneDeep$1(ht);Tt.splice(gt+1,0,[]),_t(Tt,gt+1)};xt!==a&&(bt(a),kt(a));const Lt={width:vt?s.width-RIGHT_SIDEBAR_WIDTH:s.width,height:s.height};if(Ot)return jsxRuntimeExports.jsx(ErrorScreen$1,{size:s,error:Ot});const $t=isBlankPdf(a.basePdf)?{addPageAfter:Mt,removePage:Nt}:{};return jsxRuntimeExports.jsx(Root$1,{size:s,scale:Bt,children:jsxRuntimeExports.jsxs(DndContext,{onDragEnd:Tt=>{var Yt,Kt;if(!Tt.active)return;const Dt=Tt.active,Ut=ot.current[gt].getBoundingClientRect(),Vt=((Yt=Dt.rect.current.initial)==null?void 0:Yt.left)||0,Qt=((Kt=Dt.rect.current.initial)==null?void 0:Kt.top)||0,qt=Ut.left-Vt+scaleDragPosAdjustment(20,Bt),Zt=Ut.top-Qt,ar=(Tt.delta.y-Zt)/Bt,Jt=(Tt.delta.x-qt)/Bt,rr={x:round(px2mm(Math.max(0,Jt)),2),y:round(px2mm(Math.max(0,ar)),2)};jt({...Dt.data.current,position:rr})},onDragStart:Ct,children:[jsxRuntimeExports.jsx(CtlBar$1,{size:Lt,pageCursor:gt,pageNum:ht.length,setPageCursor:Tt=>{at.current&&(at.current.scrollTop=getPagesScrollTopByIndex(St,Tt,Bt),pt(Tt),Ct())},zoomLevel:mt,setZoomLevel:ct,...$t}),jsxRuntimeExports.jsx(LeftSidebar$1,{height:at.current?at.current.clientHeight:0,scale:Bt,basePdf:a.basePdf}),jsxRuntimeExports.jsx(RightSidebar,{hoveringSchemaId:et,onChangeHoveringSchemaId:Ft,height:at.current?at.current.clientHeight:0,size:s,pageSize:St[gt]??[],activeElements:ut,schemasList:ht,schemas:ht[gt]??[],changeSchemas:Rt,onSortEnd:Ht,onEdit:Tt=>{const Dt=document.getElementById(Tt);Dt&&wt([Dt])},onEditEnd:Ct,deselectSchema:Ct,sidebarOpen:vt,setSidebarOpen:At}),jsxRuntimeExports.jsx(Canvas$1,{ref:at,paperRefs:ot,basePdf:a.basePdf,hoveringSchemaId:et,onChangeHoveringSchemaId:Ft,height:s.height-RULER_HEIGHT*ZOOM,pageCursor:gt,scale:Bt,size:Lt,pageSizes:St,backgrounds:Et,activeElements:ut,schemasList:ht,changeSchemas:Rt,removeSchemas:yt,sidebarOpen:vt,onEdit:wt})]})})},DesignerComponent=TemplateEditor,defaultTheme={token:{colorPrimary:"#38a0ff"},components:{Form:{fontSize:12,margin:8,marginLG:12,marginXS:4,padding:8,paddingLG:12,paddingXS:4,itemMarginBottom:4,verticalLabelPadding:"0 0 2px"}}},isObject=a=>a&&typeof a=="object"&&!Array.isArray(a),deepMerge=(a,s)=>{let $={...a};return isObject(a)&&isObject(s)&&Object.keys(s).forEach(_=>{isObject(s[_])?_ in a?$[_]=deepMerge(a[_],s[_]):Object.assign($,{[_]:s[_]}):Object.assign($,{[_]:s[_]})}),$},AppContextProvider=({children:a,lang:s,font:$,plugins:_,options:_e})=>{let tt=defaultTheme;_e.theme&&(tt=deepMerge(tt,_e.theme));let nt=getDict(s);return _e.labels&&(nt=deepMerge(nt,_e.labels)),jsxRuntimeExports.jsx(ThemeConfigProvider,{theme:tt,children:jsxRuntimeExports.jsx(I18nContext.Provider,{value:at=>i18n(at,nt),children:jsxRuntimeExports.jsx(FontContext.Provider,{value:$,children:jsxRuntimeExports.jsx(PluginsRegistry.Provider,{value:_,children:jsxRuntimeExports.jsx(OptionsContext.Provider,{value:_e,children:a})})})})})},AppContextProvider$1=AppContextProvider;class Designer extends BaseUIClass{constructor(s){super(s),this.pageCursor=0,checkDesignerProps(s)}saveTemplate(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.onSaveTemplateCallback&&this.onSaveTemplateCallback(this.template)}updateTemplate(s){if(checkTemplate(s),!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.template=cloneDeep$1(s),this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s),this.render()}onSaveTemplate(s){this.onSaveTemplateCallback=s}onChangeTemplate(s){this.onChangeTemplateCallback=s}getPageCursor(){return this.pageCursor}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider$1,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(DesignerComponent,{template:this.template,onSaveTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onSaveTemplateCallback&&this.onSaveTemplateCallback(s)},onChangeTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s)},onPageCursorChange:s=>{this.pageCursor=s},size:this.size})}),this.domContainer)}}const Designer$1=Designer,{Text}=Typography$1,icons={left:LeftOutlined$1,right:RightOutlined$1,doubleLeft:DoubleLeftOutlined$1,doubleRight:DoubleRightOutlined$1},UnitButton=({type:a,onClick:s,disabled:$,textStyle:_})=>{const _e=icons[a];return jsxRuntimeExports.jsx(Button$2,{type:"text",onClick:s,disabled:$,children:jsxRuntimeExports.jsx(_e,{style:{color:_.color}})})},UnitPager=({size:a,unitCursor:s,unitNum:$,setUnitCursor:_})=>{if($<=1)return null;const{token:_e}=theme.useToken(),tt={pointerEvents:"initial",position:"sticky",zIndex:1,display:"flex",alignItems:"center",boxSizing:"border-box",height:40,padding:_e.paddingSM,borderRadius:_e.borderRadius,backgroundColor:_e.colorBgMask},nt={color:_e.colorWhite,fontSize:_e.fontSize,margin:_e.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",...a},children:jsxRuntimeExports.jsxs("div",{style:{position:"sticky",width:"100%",zIndex:1,top:`calc(50% - ${tt.height/2}px)`,display:"flex",alignItems:"center"},children:[s>0&&jsxRuntimeExports.jsxs("div",{style:{left:"1rem",marginLeft:"1rem",...tt},children:[jsxRuntimeExports.jsx(UnitButton,{type:"doubleLeft",onClick:()=>_(0),disabled:s<=0,textStyle:nt}),jsxRuntimeExports.jsx(UnitButton,{type:"left",onClick:()=>_(s-1),disabled:s<=0,textStyle:nt}),jsxRuntimeExports.jsxs(Text,{strong:!0,style:nt,children:[s+1,"/",$]})]}),s+1<$&&jsxRuntimeExports.jsxs("div",{style:{right:"1rem",marginLeft:"auto",marginRight:"1rem",...tt},children:[jsxRuntimeExports.jsxs(Text,{strong:!0,style:nt,children:[s+1,"/",$]}),jsxRuntimeExports.jsx(UnitButton,{type:"right",onClick:()=>_(s+1),disabled:s+1>=$,textStyle:nt}),jsxRuntimeExports.jsx(UnitButton,{type:"doubleRight",onClick:()=>_($-1),disabled:s+1>=$,textStyle:nt})]})]})})},UnitPager$1=UnitPager,_cache=new Map,Preview=({template:a,inputs:s,size:$,onChangeInput:_})=>{const{token:_e}=theme.useToken(),tt=reactExports.useContext(FontContext),nt=reactExports.useRef(null),at=reactExports.useRef([]),[ot,rt]=reactExports.useState(0),[st,lt]=reactExports.useState(0),[et,it]=reactExports.useState(1),[ut,ft]=reactExports.useState([[]]),{backgrounds:ht,pageSizes:dt,scale:gt,error:pt,refresh:mt}=useUIPreProcessor({template:a,size:$,zoomLevel:et}),ct=!!_,vt=s[ot],At=bt=>{getDynamicTemplate({template:bt,input:vt,options:{font:tt},_cache,getDynamicHeights:(St,Bt)=>{switch(Bt.schema.type){case"table":return getDynamicHeightsForTable(St,Bt);default:return Promise.resolve([Bt.schema.height])}}}).then(async St=>{const Bt=await template2SchemasList(St);ft(Bt),await mt(St)}).catch(St=>console.error("[@pdfme/ui] ",St))};reactExports.useEffect(()=>{ot>s.length-1&&rt(s.length-1),At(a)},[a,s,$]),useScrollPageCursor({ref:nt,pageSizes:dt,scale:gt,pageCursor:st,onChangePageCursor:lt});const xt=({name:bt,value:Et})=>_&&_({index:ot,name:bt,value:Et});return pt?jsxRuntimeExports.jsx(ErrorScreen$1,{size:$,error:pt}):jsxRuntimeExports.jsxs(Root$1,{size:$,scale:gt,children:[jsxRuntimeExports.jsx(CtlBar$1,{size:$,pageCursor:st,pageNum:ut.length,setPageCursor:bt=>{nt.current&&(nt.current.scrollTop=getPagesScrollTopByIndex(dt,bt,gt),lt(bt))},zoomLevel:et,setZoomLevel:it}),jsxRuntimeExports.jsx(UnitPager$1,{size:$,unitCursor:ot,unitNum:s.length,setUnitCursor:rt}),jsxRuntimeExports.jsx("div",{ref:nt,style:{...$,position:"relative",overflow:"auto"},children:jsxRuntimeExports.jsx(Paper$1,{paperRefs:at,scale:gt,size:$,schemasList:ut,pageSizes:dt,backgrounds:ht,renderSchema:({schema:bt,index:Et})=>{const{name:St,readOnly:Bt}=bt,Ot=Bt?String(bt.content)||"":String(vt&&vt[St]||"");return jsxRuntimeExports.jsx(Renderer$1,{schema:bt,basePdf:a.basePdf,value:Ot,mode:ct?"form":"viewer",placeholder:bt.content,tabIndex:Et+100,onChange:Pt=>{const wt=Array.isArray(Pt)?Pt:[Pt];let Ct=!1;wt.forEach(({key:It,value:yt})=>{if(It==="content"){const Rt=yt,kt=(vt==null?void 0:vt[St])||"";if(Rt===kt)return;xt({name:St,value:Rt}),bt.type==="table"&&(Ct=!0)}else{const Rt=ut[st].find(kt=>kt.id===bt.id);if(!Rt)return;Rt[It]=yt}}),Ct&&At(a),ft([...ut])},outline:ct&&!bt.readOnly?`1px dashed ${_e.colorPrimary}`:"transparent",scale:gt},bt.id)}})})]})},Preview$1=Preview;class Form extends PreviewUI{constructor(s){super(s)}onChangeInput(s){this.onChangeInputCallback=s}setInputs(s){const $=this.getInputs();super.setInputs(s);const _=[];s.forEach((_e,tt)=>{const nt=$[tt]||{};new Set([...Object.keys(_e),...Object.keys(nt)]).forEach(ot=>{const rt=_e[ot],st=nt[ot];rt!==st&&_.push({index:tt,name:ot,value:rt})})}),_.forEach(_e=>{this.onChangeInputCallback&&this.onChangeInputCallback(_e)})}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider$1,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview$1,{template:this.template,size:this.size,inputs:this.inputs,onChangeInput:s=>{const{index:$,value:_,name:_e}=s;this.onChangeInputCallback&&this.onChangeInputCallback({index:$,value:_,name:_e}),this.inputs&&this.inputs[$]&&this.inputs[$][_e]!==_&&(this.inputs[$][_e]=_,this.render())}})}),this.domContainer)}}const Form$1=Form;class Viewer extends PreviewUI{constructor(s){super(s)}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider$1,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview$1,{template:this.template,size:this.size,inputs:this.inputs})}),this.domContainer)}}const Viewer$1=Viewer;exports.Designer=Designer$1,exports.Form=Form$1,exports.Viewer=Viewer$1,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.0.0-dev.3",
+  "version": "5.0.0-dev.4",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/Form.tsx

@@ -17,21 +17,37 @@ class Form extends PreviewUI {
     this.onChangeInputCallback = cb;
   }
 
-  public setInputs(inputs: { [key: string]: string; }[]): void {
+  public setInputs(inputs: { [key: string]: string }[]): void {
+    const previousInputs = this.getInputs();
+
     super.setInputs(inputs);
 
-    const transformedInputs =
-      inputs.map((input, index) =>
-        Object.keys(input).map((name) => ({ index, name, value: input[name] }))).flat();
+    const changedInputs: Array<{ index: number; name: string; value: string }> = [];
+
+    inputs.forEach((input, index) => {
+      const prevInput = previousInputs[index] || {};
+
+      const allKeys = new Set([...Object.keys(input), ...Object.keys(prevInput)]);
 
-    transformedInputs.forEach((input) => {
+      allKeys.forEach((name) => {
+        const newValue = input[name];
+        const oldValue = prevInput[name];
+
+        if (newValue !== oldValue) {
+          changedInputs.push({ index, name, value: newValue });
+        }
+      });
+    });
+
+    changedInputs.forEach((input) => {
       if (this.onChangeInputCallback) {
         this.onChangeInputCallback(input);
       }
     });
-
   }
 
+
+
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(