@servicetitan/dte-pdf-editor 1.9.0 → 1.11.0

package/dist/components/pdf-canvas/pdf-document-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-document-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-canvas/pdf-document-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAG3C,UAAU,wBAAwB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAChD,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CACnE;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAkE5D,CAAC"}
+{"version":3,"file":"pdf-document-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-canvas/pdf-document-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAG3C,UAAU,wBAAwB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAChD,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CACnE;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAoE5D,CAAC"}

package/dist/components/pdf-canvas/pdf-document-renderer.js

@@ -5,16 +5,9 @@ import 'react-pdf/dist/Page/TextLayer.css';
 import { useInitializePdfJsWorker, usePdfDocumentRenderer } from '../../hooks';
 export const PdfDocumentRenderer = ({ errorPlaceholder, loading, loadingPlaceholder, onDocumentLoadSuccess, onDragOver, onDrop, pageWidth, pdfUrl, }) => {
     useInitializePdfJsWorker();
-    const { handleDocumentLoadSuccess: handleLoadSuccess, pages } = usePdfDocumentRenderer();
+    const { handleDocumentLoadSuccess: handleLoadSuccess, numPages, pages, } = usePdfDocumentRenderer();
     const handleDocumentLoadSuccess = ({ numPages }) => {
         handleLoadSuccess({ numPages });
-        /*
-         * Delay setting PDF as loaded to ensure form fields render
-         * correctly even when the PDF contains empty values
-         */
-        setTimeout(() => {
-            onDocumentLoadSuccess === null || onDocumentLoadSuccess === void 0 ? void 0 : onDocumentLoadSuccess(numPages);
-        }, 300);
     };
     const handlePageDrop = (e, pageNumber) => {
         e.preventDefault();
@@ -27,7 +20,11 @@ export const PdfDocumentRenderer = ({ errorPlaceholder, loading, loadingPlacehol
         onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(e);
     };
     return (_jsx(Document, { file: pdfUrl, error: errorPlaceholder, loading: loadingPlaceholder, onLoadSuccess: handleDocumentLoadSuccess, noData: loading ? loadingPlaceholder : undefined, children: pages.map(pageNumber => {
-            return (_jsx("div", { "data-page-number": pageNumber, className: "dte-pdf-document-renderer-page", onDragOver: handlePageDragOver, onDrop: e => handlePageDrop(e, pageNumber), children: _jsx(Page, { loading: _jsx("span", {}), pageNumber: pageNumber, width: pageWidth, renderTextLayer: false, renderAnnotationLayer: false }) }, `page_${pageNumber}`));
+            return (_jsx("div", { "data-page-number": pageNumber, className: "dte-pdf-document-renderer-page", onDragOver: handlePageDragOver, onDrop: e => handlePageDrop(e, pageNumber), children: _jsx(Page, { loading: loadingPlaceholder, onLoadSuccess: e => {
+                        if (e._pageIndex + 1 === numPages) {
+                            onDocumentLoadSuccess === null || onDocumentLoadSuccess === void 0 ? void 0 : onDocumentLoadSuccess(numPages);
+                        }
+                    }, pageNumber: pageNumber, width: pageWidth, renderTextLayer: false, renderAnnotationLayer: false }) }, `page_${pageNumber}`));
         }) }));
 };
 //# sourceMappingURL=pdf-document-renderer.js.map

package/dist/components/pdf-canvas/pdf-document-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-document-renderer.js","sourceRoot":"","sources":["../../../src/components/pdf-canvas/pdf-document-renderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAa/E,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAC9D,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,MAAM,EACN,SAAS,EACT,MAAM,GACT,EAAE,EAAE;IACD,wBAAwB,EAAE,CAAC;IAE3B,MAAM,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,sBAAsB,EAAE,CAAC;IAEzF,MAAM,yBAAyB,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;QACrE,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC;;;WAGG;QACH,UAAU,CAAC,GAAG,EAAE;YACZ,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,QAAQ,CAAC,CAAC;QACtC,CAAC,EAAE,GAAG,CAAC,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAA4B,EAAE,UAAkB,EAAE,EAAE;QACxE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,EAAE,UAAU,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,CAA4B,EAAE,EAAE;QACxD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,QAAQ,IACL,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,kBAAkB,EAC3B,aAAa,EAAE,yBAAyB,EACxC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,YAE/C,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACpB,OAAO,CACH,kCAEsB,UAAU,EAC5B,SAAS,EAAC,gCAAgC,EAC1C,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,CAAC,YAE1C,KAAC,IAAI,IACD,OAAO,EAAE,gBAAQ,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,EAChB,eAAe,EAAE,KAAK,EACtB,qBAAqB,EAAE,KAAK,GAC9B,IAZG,QAAQ,UAAU,EAAE,CAavB,CACT,CAAC;QACN,CAAC,CAAC,GACK,CACd,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"pdf-document-renderer.js","sourceRoot":"","sources":["../../../src/components/pdf-canvas/pdf-document-renderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAa/E,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAC9D,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,MAAM,EACN,SAAS,EACT,MAAM,GACT,EAAE,EAAE;IACD,wBAAwB,EAAE,CAAC;IAE3B,MAAM,EACF,yBAAyB,EAAE,iBAAiB,EAC5C,QAAQ,EACR,KAAK,GACR,GAAG,sBAAsB,EAAE,CAAC;IAE7B,MAAM,yBAAyB,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;QACrE,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAA4B,EAAE,UAAkB,EAAE,EAAE;QACxE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,EAAE,UAAU,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,CAA4B,EAAE,EAAE;QACxD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,QAAQ,IACL,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,kBAAkB,EAC3B,aAAa,EAAE,yBAAyB,EACxC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,YAE/C,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACpB,OAAO,CACH,kCAEsB,UAAU,EAC5B,SAAS,EAAC,gCAAgC,EAC1C,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,CAAC,YAE1C,KAAC,IAAI,IACD,OAAO,EAAE,kBAAkB,EAC3B,aAAa,EAAE,CAAC,CAAC,EAAE;wBACf,IAAI,CAAC,CAAC,UAAU,GAAG,CAAC,KAAK,QAAQ,EAAE,CAAC;4BAChC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,QAAQ,CAAC,CAAC;wBACtC,CAAC;oBACL,CAAC,EACD,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,EAChB,eAAe,EAAE,KAAK,EACtB,qBAAqB,EAAE,KAAK,GAC9B,IAjBG,QAAQ,UAAU,EAAE,CAkBvB,CACT,CAAC;QACN,CAAC,CAAC,GACK,CACd,CAAC;AACN,CAAC,CAAC"}

package/dist/components/pdf-view/pdf-view-field-container.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren, RefObject } from 'react';
+import { PdfField } from '../../interface/types';
+interface PdfViewFieldContainer {
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    field: PdfField;
+    recipientsColors: Record<string, string>;
+}
+export declare const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>;
+export {};
+//# sourceMappingURL=pdf-view-field-container.d.ts.map

package/dist/components/pdf-view/pdf-view-field-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdf-view-field-container.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-field-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,UAAU,qBAAqB;IAC3B,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,KAAK,EAAE,QAAQ,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAyB9E,CAAC"}

package/dist/components/pdf-view/pdf-view-field-container.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+export const PdfViewFieldContainer = ({ children, field, pdfWrapperRef, recipientsColors, }) => {
+    const pagePos = getPagePosition(field.page, pdfWrapperRef);
+    const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
+    return (_jsx("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            position: 'absolute',
+            padding: '4px',
+            background: bgColor,
+            left: `${pagePos.left + field.x}px`,
+            top: `${pagePos.top + field.y}px`,
+            width: `${field.width}px`,
+            height: `${field.height}px`,
+        }, children: children }));
+};
+//# sourceMappingURL=pdf-view-field-container.js.map

package/dist/components/pdf-view/pdf-view-field-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdf-view-field-container.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-field-container.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQvE,MAAM,CAAC,MAAM,qBAAqB,GAAiD,CAAC,EAChF,QAAQ,EACR,KAAK,EACL,aAAa,EACb,gBAAgB,GACnB,EAAE,EAAE;IACD,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,uBAAuB,CAAC,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;IAC3E,OAAO,CACH,cACI,KAAK,EAAE;YACH,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,OAAO;YACnB,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,IAAI;YACnC,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,IAAI;YACjC,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI;YACzB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,IAAI;SAC9B,YAEA,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/pdf-view/pdf-view-fillable.d.ts

@@ -1,12 +1,11 @@
 import { FC } from 'react';
-import { DataModelValues, PdfField } from '../../interface/types';
+import { DataChangePayload, DataModelValues, PdfField, PreviewMode } from '../../interface/types';
 interface PdfViewFillableProps {
     field: PdfField;
     data?: DataModelValues;
     fillingBy?: string[];
-    onDataChange?(changedData: {
-        [path: string]: string | boolean;
-    }): void;
+    previewMode?: PreviewMode;
+    onDataChange?(changedData: DataChangePayload, field: PdfField): void;
 }
 export declare const PdfViewFillable: FC<PdfViewFillableProps>;
 export {};

package/dist/components/pdf-view/pdf-view-fillable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-view-fillable.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-fillable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGlE,UAAU,oBAAoB;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,CAAC,CAAC,WAAW,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAmIpD,CAAC"}
+{"version":3,"file":"pdf-view-fillable.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-fillable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGlG,UAAU,oBAAoB;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,CAAC,WAAW,EAAE,iBAAiB,EAAE,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxE;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA4HpD,CAAC"}

package/dist/components/pdf-view/pdf-view-fillable.js

@@ -1,8 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFieldPlaceholderText } from '../../utils';
-export const PdfViewFillable = ({ data, field, fillingBy, onDataChange, }) => {
+export const PdfViewFillable = ({ data, field, fillingBy, onDataChange, previewMode, }) => {
     const resolvedValue = data === null || data === void 0 ? void 0 : data[field.path];
     const isViewByCurrentRecipient = fillingBy === null || fillingBy === void 0 ? void 0 : fillingBy.includes(field.recipient);
+    const isFillable = previewMode === 'fillable'
+        ? true
+        : previewMode === 'view'
+            ? false
+            : isViewByCurrentRecipient;
+    const handleDataChange = (fieldValue) => {
+        const changedData = { [field.path]: fieldValue };
+        onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(changedData, field);
+    };
     if (field.subType === 'checkbox') {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -10,9 +19,7 @@ export const PdfViewFillable = ({ data, field, fillingBy, onDataChange, }) => {
                 background: 'inherit',
                 width: 'inherit',
                 height: 'inherit',
-            }, children: [_jsx("input", { style: { width: 'inherit', height: 'inherit', margin: 0 }, type: "checkbox", checked: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : false, disabled: !isViewByCurrentRecipient, name: field.path, onChange: e => onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange({
-                        [field.path]: e.target.checked,
-                    }) }), field.label] }));
+            }, children: [_jsx("input", { style: { width: 'inherit', height: 'inherit', margin: 0 }, type: "checkbox", checked: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : false, disabled: !isFillable, name: field.path, onChange: e => handleDataChange === null || handleDataChange === void 0 ? void 0 : handleDataChange(e.target.checked) }), field.label] }));
     }
     if (field.subType === 'radio') {
         return (_jsxs("div", { style: {
@@ -21,34 +28,26 @@ export const PdfViewFillable = ({ data, field, fillingBy, onDataChange, }) => {
                 background: 'inherit',
                 width: 'inherit',
                 height: 'inherit',
-            }, children: [_jsx("input", { style: { width: 'inherit', height: 'inherit', margin: 0 }, type: "radio", value: field.id, checked: resolvedValue === field.id, disabled: !isViewByCurrentRecipient, name: field.path, onChange: () => onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange({
-                        [field.path]: field.id,
-                    }) }), field.label] }));
+            }, children: [_jsx("input", { style: { width: 'inherit', height: 'inherit', margin: 0 }, type: "radio", value: field.id, checked: resolvedValue === field.id, disabled: !isFillable, name: field.path, onChange: () => handleDataChange(field.id) }), field.label] }));
     }
     if (field.subType === 'date') {
         return (_jsx("input", { type: "date", style: {
                 background: 'inherit',
                 width: 'inherit',
                 height: 'inherit',
-            }, disabled: !isViewByCurrentRecipient, id: field.path, name: field.path, value: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '', onChange: e => onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange({
-                [field.path]: e.target.value,
-            }), placeholder: getFieldPlaceholderText(field, 'mm/dd/yyyy') }));
+            }, disabled: !isFillable, id: field.path, name: field.path, value: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '', onChange: e => handleDataChange(e.target.value), placeholder: getFieldPlaceholderText(field, 'mm/dd/yyyy') }));
     }
     if (field.subType === 'number') {
         return (_jsx("input", { type: "number", style: {
                 background: 'inherit',
                 width: 'inherit',
                 height: 'inherit',
-            }, disabled: !isViewByCurrentRecipient, id: field.path, name: field.path, value: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '', onChange: e => onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange({
-                [field.path]: e.target.value,
-            }), placeholder: getFieldPlaceholderText(field) }));
+            }, disabled: !isFillable, id: field.path, name: field.path, value: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '', onChange: e => handleDataChange(e.target.value), placeholder: getFieldPlaceholderText(field) }));
     }
     return (_jsx("input", { type: "text", style: {
             background: 'inherit',
             width: 'inherit',
             height: 'inherit',
-        }, disabled: !isViewByCurrentRecipient, id: field.path, name: field.path, value: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '', onChange: e => onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange({
-            [field.path]: e.target.value,
-        }), placeholder: getFieldPlaceholderText(field) }));
+        }, disabled: !isFillable, id: field.path, name: field.path, value: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '', onChange: e => handleDataChange(e.target.value), placeholder: getFieldPlaceholderText(field) }));
 };
 //# sourceMappingURL=pdf-view-fillable.js.map

package/dist/components/pdf-view/pdf-view-fillable.js.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-view-fillable.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-fillable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"pdf-view-fillable.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-fillable.tsx"],"names":[],"mappings":"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"}

package/dist/components/pdf-view/pdf-view.d.ts

@@ -1,7 +1,8 @@
 import { FC, ReactNode } from 'react';
-import { DataModelValues, PdfField, RecipientInfo } from '../../interface/types';
+import { DataChangePayload, DataModelValues, PdfField, PreviewMode, RecipientInfo } from '../../interface/types';
 interface PdfViewProps {
     fields: PdfField[];
+    previewMode?: PreviewMode;
     data?: DataModelValues;
     pdfUrl: string;
     loading?: boolean;
@@ -9,9 +10,7 @@ interface PdfViewProps {
     loadingPlaceholder?: ReactNode;
     errorPlaceholder?: ReactNode;
     recipients?: RecipientInfo[];
-    onDataChange?(changedData: {
-        [path: string]: string | boolean;
-    }): void;
+    onDataChange?(changedData: DataChangePayload, field: PdfField): void;
 }
 export declare const PdfView: FC<PdfViewProps>;
 export {};

package/dist/components/pdf-view/pdf-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-view.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,eAAe,EAAiB,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAOhG,UAAU,YAAY;IAClB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,YAAY,CAAC,CAAC,WAAW,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA6EpC,CAAC"}
+{"version":3,"file":"pdf-view.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAExD,OAAO,EACH,iBAAiB,EACjB,eAAe,EAEf,QAAQ,EACR,WAAW,EACX,aAAa,EAChB,MAAM,uBAAuB,CAAC;AAQ/B,UAAU,YAAY;IAClB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,YAAY,CAAC,CAAC,WAAW,EAAE,iBAAiB,EAAE,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxE;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA2EpC,CAAC"}

package/dist/components/pdf-view/pdf-view.js

@@ -2,33 +2,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from '@servicetitan/anvil2';
 import { useRef, useState } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { FieldTypeEnum } from '../../interface/types';
-import { getFieldBackgroundColor, getPagePosition, mapColorsToRecipients } from '../../utils';
+import { FieldTypeEnum, } from '../../interface/types';
+import { mapColorsToRecipients } from '../../utils';
 import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
 import { PdfViewDataModel } from './pdf-view-data-model';
 import { PdfViewESign } from './pdf-view-e-sign';
+import { PdfViewFieldContainer } from './pdf-view-field-container';
 import { PdfViewFillable } from './pdf-view-fillable';
-export const PdfView = ({ data, errorPlaceholder, fields, fillingBy, loading = false, loadingPlaceholder, onDataChange, pdfUrl, recipients, }) => {
+export const PdfView = ({ data, errorPlaceholder, fields, fillingBy, loading = false, loadingPlaceholder, onDataChange, pdfUrl, previewMode, recipients, }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState(false);
+    const [previewData, setPreviewData] = useState(data !== null && data !== void 0 ? data : {});
     const pdfWrapperRef = useRef(null);
     const onDocumentLoadSuccess = (_) => {
         setIsPdfLoaded(true);
     };
+    const handleDataChange = (data, field) => {
+        if (previewMode === 'fillable') {
+            setPreviewData(prev => ({
+                ...prev,
+                ...data,
+            }));
+        }
+        onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(data, field);
+    };
     const recipientsColors = mapColorsToRecipients(recipients);
-    return (_jsx(Flex, { flex: 1, className: "dte-pdf-view-container", style: { maxWidth: BASE_PAGE_WIDTH }, children: _jsxs("div", { ref: pdfWrapperRef, className: "dte-pdf-wrapper", children: [_jsx(PdfDocumentRenderer, { pdfUrl: pdfUrl, loading: loading, pageWidth: BASE_PAGE_WIDTH, errorPlaceholder: errorPlaceholder, loadingPlaceholder: loadingPlaceholder, onDocumentLoadSuccess: onDocumentLoadSuccess }), isPdfLoaded && (_jsx("div", { className: "dte-pdf-field-overlay --view-mode", children: fields.map(field => {
-                        const pagePos = getPagePosition(field.page, pdfWrapperRef);
-                        const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
-                        return (_jsxs("div", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                position: 'absolute',
-                                padding: '4px',
-                                background: bgColor,
-                                left: `${pagePos.left + field.x}px`,
-                                top: `${pagePos.top + field.y}px`,
-                                width: `${field.width}px`,
-                                height: `${field.height}px`,
-                            }, children: [field.type === FieldTypeEnum.dataModel && (_jsx(PdfViewDataModel, { field: field, data: data })), field.type === FieldTypeEnum.eSign && (_jsx(PdfViewESign, { field: field })), field.type === FieldTypeEnum.fillable && (_jsx(PdfViewFillable, { data: data, field: field, fillingBy: fillingBy, onDataChange: onDataChange }))] }, field.id));
-                    }) }))] }) }));
+    return (_jsx(Flex, { flex: 1, className: "dte-pdf-view-container", style: { maxWidth: BASE_PAGE_WIDTH }, children: _jsxs("div", { ref: pdfWrapperRef, className: "dte-pdf-wrapper", children: [_jsx(PdfDocumentRenderer, { pdfUrl: pdfUrl, loading: loading, pageWidth: BASE_PAGE_WIDTH, errorPlaceholder: errorPlaceholder, loadingPlaceholder: loadingPlaceholder, onDocumentLoadSuccess: onDocumentLoadSuccess }), isPdfLoaded && (_jsx("div", { className: "dte-pdf-field-overlay --view-mode", children: fields.map(field => (_jsxs(PdfViewFieldContainer, { field: field, recipientsColors: recipientsColors, pdfWrapperRef: pdfWrapperRef, children: [field.type === FieldTypeEnum.dataModel && (_jsx(PdfViewDataModel, { field: field, data: data })), field.type === FieldTypeEnum.eSign && (_jsx(PdfViewESign, { field: field })), field.type === FieldTypeEnum.fillable && (_jsx(PdfViewFillable, { data: previewMode === 'fillable' ? previewData : data, field: field, fillingBy: fillingBy, previewMode: previewMode, onDataChange: handleDataChange }))] }, field.id))) }))] }) }));
 };
 //# sourceMappingURL=pdf-view.js.map

package/dist/components/pdf-view/pdf-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-view.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"pdf-view.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/usePdfDocumentRenderer.d.ts

@@ -1,4 +1,5 @@
 interface UsePdfDocumentRendererReturn {
+    numPages: number;
     pages: number[];
     handleDocumentLoadSuccess: (data: {
         numPages: number;

package/dist/hooks/usePdfDocumentRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePdfDocumentRenderer.d.ts","sourceRoot":"","sources":["../../src/hooks/usePdfDocumentRenderer.ts"],"names":[],"mappings":"AAEA,UAAU,4BAA4B;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,yBAAyB,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACnE;AAED,eAAO,MAAM,sBAAsB,QAAO,4BAazC,CAAC"}
+{"version":3,"file":"usePdfDocumentRenderer.d.ts","sourceRoot":"","sources":["../../src/hooks/usePdfDocumentRenderer.ts"],"names":[],"mappings":"AAEA,UAAU,4BAA4B;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,yBAAyB,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACnE;AAED,eAAO,MAAM,sBAAsB,QAAO,4BAczC,CAAC"}

package/dist/hooks/usePdfDocumentRenderer.js

@@ -6,6 +6,7 @@ export const usePdfDocumentRenderer = () => {
     };
     const pages = useMemo(() => Array.from({ length: numPages }, (_, i) => i + 1), [numPages]);
     return {
+        numPages,
         pages,
         handleDocumentLoadSuccess,
     };

package/dist/hooks/usePdfDocumentRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePdfDocumentRenderer.js","sourceRoot":"","sources":["../../src/hooks/usePdfDocumentRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAiC,EAAE;IACrE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEpD,MAAM,yBAAyB,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;QACrE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE3F,OAAO;QACH,KAAK;QACL,yBAAyB;KAC5B,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"usePdfDocumentRenderer.js","sourceRoot":"","sources":["../../src/hooks/usePdfDocumentRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ1C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAiC,EAAE;IACrE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEpD,MAAM,yBAAyB,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;QACrE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE3F,OAAO;QACH,QAAQ;QACR,KAAK;QACL,yBAAyB;KAC5B,CAAC;AACN,CAAC,CAAC"}

package/dist/interface/types.d.ts

@@ -67,5 +67,9 @@ export interface RecipientInfo {
     name: string;
     displayName: string;
 }
+export interface DataChangePayload {
+    [fieldId: string]: string | boolean;
+}
+export type PreviewMode = 'fillable' | 'view';
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/interface/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/interface/types.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACrB,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACxB;AAED,oBAAY,cAAc;IACtB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElF,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAAC;AAEnE,MAAM,WAAW,WAAY,SAAQ,eAAe;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACrB;AACD,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACvD,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/interface/types.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACrB,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACxB;AAED,oBAAY,cAAc;IACtB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElF,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAAC;AAEnE,MAAM,WAAW,WAAY,SAAQ,eAAe;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACrB;AACD,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACvD,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACvC;AAeD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

package/src/components/pdf-canvas/pdf-document-renderer.tsx

@@ -27,17 +27,14 @@ export const PdfDocumentRenderer: FC<PdfDocumentRendererProps> = ({
 }) => {
     useInitializePdfJsWorker();
 
-    const { handleDocumentLoadSuccess: handleLoadSuccess, pages } = usePdfDocumentRenderer();
+    const {
+        handleDocumentLoadSuccess: handleLoadSuccess,
+        numPages,
+        pages,
+    } = usePdfDocumentRenderer();
 
     const handleDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
         handleLoadSuccess({ numPages });
-        /*
-         * Delay setting PDF as loaded to ensure form fields render
-         * correctly even when the PDF contains empty values
-         */
-        setTimeout(() => {
-            onDocumentLoadSuccess?.(numPages);
-        }, 300);
     };
 
     const handlePageDrop = (e: DragEvent<HTMLDivElement>, pageNumber: number) => {
@@ -70,7 +67,12 @@ export const PdfDocumentRenderer: FC<PdfDocumentRendererProps> = ({
                         onDrop={e => handlePageDrop(e, pageNumber)}
                     >
                         <Page
-                            loading={<span />}
+                            loading={loadingPlaceholder}
+                            onLoadSuccess={e => {
+                                if (e._pageIndex + 1 === numPages) {
+                                    onDocumentLoadSuccess?.(numPages);
+                                }
+                            }}
                             pageNumber={pageNumber}
                             width={pageWidth}
                             renderTextLayer={false}

package/src/components/pdf-view/pdf-view-field-container.tsx

@@ -0,0 +1,36 @@
+import { FC, PropsWithChildren, RefObject } from 'react';
+import { PdfField } from '../../interface/types';
+import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+
+interface PdfViewFieldContainer {
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    field: PdfField;
+    recipientsColors: Record<string, string>;
+}
+
+export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>> = ({
+    children,
+    field,
+    pdfWrapperRef,
+    recipientsColors,
+}) => {
+    const pagePos = getPagePosition(field.page, pdfWrapperRef);
+    const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
+    return (
+        <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                position: 'absolute',
+                padding: '4px',
+                background: bgColor,
+                left: `${pagePos.left + field.x}px`,
+                top: `${pagePos.top + field.y}px`,
+                width: `${field.width}px`,
+                height: `${field.height}px`,
+            }}
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/pdf-view/pdf-view-fillable.tsx

@@ -1,12 +1,13 @@
 import { FC } from 'react';
-import { DataModelValues, PdfField } from '../../interface/types';
+import { DataChangePayload, DataModelValues, PdfField, PreviewMode } from '../../interface/types';
 import { getFieldPlaceholderText } from '../../utils';
 
 interface PdfViewFillableProps {
     field: PdfField;
     data?: DataModelValues;
     fillingBy?: string[];
-    onDataChange?(changedData: { [path: string]: string | boolean }): void;
+    previewMode?: PreviewMode;
+    onDataChange?(changedData: DataChangePayload, field: PdfField): void;
 }
 
 export const PdfViewFillable: FC<PdfViewFillableProps> = ({
@@ -14,9 +15,22 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     field,
     fillingBy,
     onDataChange,
+    previewMode,
 }) => {
     const resolvedValue = data?.[field.path!];
     const isViewByCurrentRecipient = fillingBy?.includes(field.recipient!);
+    const isFillable =
+        previewMode === 'fillable'
+            ? true
+            : previewMode === 'view'
+              ? false
+              : isViewByCurrentRecipient;
+
+    const handleDataChange = (fieldValue: DataChangePayload[string]) => {
+        const changedData = { [field.path!]: fieldValue };
+        onDataChange?.(changedData, field);
+    };
+
     if (field.subType === 'checkbox') {
         return (
             <div
@@ -32,13 +46,9 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     style={{ width: 'inherit', height: 'inherit', margin: 0 }}
                     type="checkbox"
                     checked={resolvedValue ?? false}
-                    disabled={!isViewByCurrentRecipient}
+                    disabled={!isFillable}
                     name={field.path}
-                    onChange={e =>
-                        onDataChange?.({
-                            [field.path!]: e!.target.checked,
-                        })
-                    }
+                    onChange={e => handleDataChange?.(e!.target.checked)}
                 />
                 {field.label}
             </div>
@@ -61,13 +71,9 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     type="radio"
                     value={field.id}
                     checked={resolvedValue === field.id}
-                    disabled={!isViewByCurrentRecipient}
+                    disabled={!isFillable}
                     name={field.path}
-                    onChange={() =>
-                        onDataChange?.({
-                            [field.path!]: field.id,
-                        })
-                    }
+                    onChange={() => handleDataChange(field.id)}
                 />
                 {field.label}
             </div>
@@ -83,15 +89,11 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     width: 'inherit',
                     height: 'inherit',
                 }}
-                disabled={!isViewByCurrentRecipient}
+                disabled={!isFillable}
                 id={field.path}
                 name={field.path}
                 value={resolvedValue ?? ''}
-                onChange={e =>
-                    onDataChange?.({
-                        [field.path!]: e.target.value,
-                    })
-                }
+                onChange={e => handleDataChange(e.target.value)}
                 placeholder={getFieldPlaceholderText(field, 'mm/dd/yyyy')}
             />
         );
@@ -106,15 +108,11 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     width: 'inherit',
                     height: 'inherit',
                 }}
-                disabled={!isViewByCurrentRecipient}
+                disabled={!isFillable}
                 id={field.path}
                 name={field.path}
                 value={resolvedValue ?? ''}
-                onChange={e =>
-                    onDataChange?.({
-                        [field.path!]: e.target.value,
-                    })
-                }
+                onChange={e => handleDataChange(e.target.value)}
                 placeholder={getFieldPlaceholderText(field)}
             />
         );
@@ -128,15 +126,11 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                 width: 'inherit',
                 height: 'inherit',
             }}
-            disabled={!isViewByCurrentRecipient}
+            disabled={!isFillable}
             id={field.path}
             name={field.path}
             value={resolvedValue ?? ''}
-            onChange={e =>
-                onDataChange?.({
-                    [field.path!]: e.target.value,
-                })
-            }
+            onChange={e => handleDataChange(e.target.value)}
             placeholder={getFieldPlaceholderText(field)}
         />
     );

package/src/components/pdf-view/pdf-view.tsx

@@ -1,23 +1,38 @@
 import { Flex } from '@servicetitan/anvil2';
 import { FC, ReactNode, useRef, useState } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { DataModelValues, FieldTypeEnum, PdfField, RecipientInfo } from '../../interface/types';
-import { getFieldBackgroundColor, getPagePosition, mapColorsToRecipients } from '../../utils';
+import {
+    DataChangePayload,
+    DataModelValues,
+    FieldTypeEnum,
+    PdfField,
+    PreviewMode,
+    RecipientInfo,
+} from '../../interface/types';
+import { mapColorsToRecipients } from '../../utils';
 import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
 import { PdfViewDataModel } from './pdf-view-data-model';
 import { PdfViewESign } from './pdf-view-e-sign';
+import { PdfViewFieldContainer } from './pdf-view-field-container';
 import { PdfViewFillable } from './pdf-view-fillable';
 
 interface PdfViewProps {
     fields: PdfField[];
+    previewMode?: PreviewMode;
     data?: DataModelValues;
     pdfUrl: string;
     loading?: boolean;
+    /*
+     * fillingBy defines the list of recipient names
+     * who are allowed to fill this field.
+     * This restriction is enforced only when PreviewMode
+     * is NOT active (i.e., during actual form filling).
+     */
     fillingBy?: string[];
     loadingPlaceholder?: ReactNode;
     errorPlaceholder?: ReactNode;
     recipients?: RecipientInfo[];
-    onDataChange?(changedData: { [path: string]: string | boolean }): void;
+    onDataChange?(changedData: DataChangePayload, field: PdfField): void;
 }
 
 export const PdfView: FC<PdfViewProps> = ({
@@ -29,15 +44,28 @@ export const PdfView: FC<PdfViewProps> = ({
     loadingPlaceholder,
     onDataChange,
     pdfUrl,
+    previewMode,
     recipients,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
+    const [previewData, setPreviewData] = useState<DataModelValues>(data ?? {});
+
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
 
     const onDocumentLoadSuccess = (_: number) => {
         setIsPdfLoaded(true);
     };
 
+    const handleDataChange = (data: DataChangePayload, field: PdfField) => {
+        if (previewMode === 'fillable') {
+            setPreviewData(prev => ({
+                ...prev,
+                ...data,
+            }));
+        }
+        onDataChange?.(data, field);
+    };
+
     const recipientsColors = mapColorsToRecipients(recipients);
 
     return (
@@ -53,45 +81,30 @@ export const PdfView: FC<PdfViewProps> = ({
                 />
                 {isPdfLoaded && (
                     <div className="dte-pdf-field-overlay --view-mode">
-                        {fields.map(field => {
-                            const pagePos = getPagePosition(field.page, pdfWrapperRef);
-                            const bgColor = getFieldBackgroundColor(
-                                field.recipient,
-                                recipientsColors,
-                            );
-
-                            return (
-                                <div
-                                    key={field.id}
-                                    style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        position: 'absolute',
-                                        padding: '4px',
-                                        background: bgColor,
-                                        left: `${pagePos.left + field.x}px`,
-                                        top: `${pagePos.top + field.y}px`,
-                                        width: `${field.width}px`,
-                                        height: `${field.height}px`,
-                                    }}
-                                >
-                                    {field.type === FieldTypeEnum.dataModel && (
-                                        <PdfViewDataModel field={field} data={data} />
-                                    )}
-                                    {field.type === FieldTypeEnum.eSign && (
-                                        <PdfViewESign field={field} />
-                                    )}
-                                    {field.type === FieldTypeEnum.fillable && (
-                                        <PdfViewFillable
-                                            data={data}
-                                            field={field}
-                                            fillingBy={fillingBy}
-                                            onDataChange={onDataChange}
-                                        />
-                                    )}
-                                </div>
-                            );
-                        })}
+                        {fields.map(field => (
+                            <PdfViewFieldContainer
+                                key={field.id}
+                                field={field}
+                                recipientsColors={recipientsColors}
+                                pdfWrapperRef={pdfWrapperRef}
+                            >
+                                {field.type === FieldTypeEnum.dataModel && (
+                                    <PdfViewDataModel field={field} data={data} />
+                                )}
+                                {field.type === FieldTypeEnum.eSign && (
+                                    <PdfViewESign field={field} />
+                                )}
+                                {field.type === FieldTypeEnum.fillable && (
+                                    <PdfViewFillable
+                                        data={previewMode === 'fillable' ? previewData : data}
+                                        field={field}
+                                        fillingBy={fillingBy}
+                                        previewMode={previewMode}
+                                        onDataChange={handleDataChange}
+                                    />
+                                )}
+                            </PdfViewFieldContainer>
+                        ))}
                     </div>
                 )}
             </div>

package/src/hooks/usePdfDocumentRenderer.ts

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 
 interface UsePdfDocumentRendererReturn {
+    numPages: number;
     pages: number[];
     handleDocumentLoadSuccess: (data: { numPages: number }) => void;
 }
@@ -15,6 +16,7 @@ export const usePdfDocumentRenderer = (): UsePdfDocumentRendererReturn => {
     const pages = useMemo(() => Array.from({ length: numPages }, (_, i) => i + 1), [numPages]);
 
     return {
+        numPages,
         pages,
         handleDocumentLoadSuccess,
     };

package/src/interface/types.ts

@@ -81,3 +81,22 @@ export interface RecipientInfo {
     name: string;
     displayName: string;
 }
+
+export interface DataChangePayload {
+    [fieldId: string]: string | boolean;
+}
+
+/*
+ * PreviewMode controls how the form is displayed:
+ *
+ * - 'fillable':
+ *   Allows the user to fill all fillable fields,
+ *   but the data is NOT saved — it’s only for previewing
+ *   how the form will look when filled.
+ *
+ * - 'view':
+ *   Does NOT allow editing any fields.
+ *   Fields are shown as read-only, and if a value exists,
+ *   it is displayed.
+ */
+export type PreviewMode = 'fillable' | 'view';