@servicetitan/dte-pdf-editor 1.0.0

package/README.md

@@ -0,0 +1,356 @@
+# PDF Editor Component
+
+A comprehensive React component library for editing PDF documents with drag-and-drop field placement, data model integration, e-signature fields, and fillable form fields.
+
+## Overview
+
+The PDF Editor is a powerful, interactive component that allows users to:
+- View PDF documents page by page
+- Drag and drop various field types onto PDF pages
+- Configure field properties (labels, recipients, requirements)
+- Position, resize, and move fields on PDF pages
+- Integrate with data models for dynamic content merging
+- Support e-signature workflows with recipient assignment
+
+## Features
+
+### Core Functionality
+- **PDF Rendering**: Multi-page PDF viewing using `react-pdf` and `pdfjs-dist`
+- **Drag & Drop**: Intuitive drag-and-drop interface for placing fields on PDF pages
+- **Field Management**: Create, edit, move, resize, and delete fields
+- **Field Selection**: Click to select and configure individual fields
+- **Multi-page Support**: Handle PDFs with multiple pages
+
+### Field Types
+
+#### 1. Data Model Fields (Merge Tags)
+- Extract fields from JSON schema objects
+- Group fields by schema structure
+- Search and filter data model fields
+- Generate paths for data replacement (e.g., `{{customer.name}}`)
+
+#### 2. E-Signature Fields
+- **Signature**: Digital signature field
+- **Initials**: Initials field
+- **Date Signed**: Date signature field
+- **Full Name**: Full name field
+- Recipient assignment with color coding
+
+#### 3. Fillable Fields
+- **Text Field**: Single-line text input
+- **Date Field**: Date picker input
+- **Checkbox**: Boolean checkbox input
+- Required field marking
+- Recipient assignment
+
+### Visual Features
+- Color-coded fields by recipient
+- Visual field overlays on PDF pages
+- Resize handles for selected fields
+- Drag indicators and visual feedback
+- Loading and error states
+
+## Installation
+
+```bash
+npm install @servicetitan/dte-pdf-editor
+```
+
+### Peer Dependencies
+
+The component requires the following peer dependencies:
+
+```json
+{
+  "@servicetitan/anvil2": "^1.46.9",
+  "react": "~18.3.1",
+  "react-dom": "~18.3.1"
+}
+```
+
+### Dependencies
+
+- `pdfjs-dist`: ^3.11.0
+- `react-pdf`: ^7.5.0
+- `uuid`: ^9.0.0
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { PdfEditor } from '@servicetitan/dte-pdf-editor';
+import '@servicetitan/dte-pdf-editor/dist/styles/index.css';
+
+function App() {
+  const [fields, setFields] = useState([]);
+
+  return (
+    <PdfEditor
+      pdfUrl="/path/to/document.pdf"
+      fields={fields}
+      onFieldsChange={setFields}
+      recipients={[
+        { id: 1, name: 'recipient1', displayName: 'John Doe' },
+        { id: 2, name: 'recipient2', displayName: 'Jane Smith' }
+      ]}
+      dataModel={{
+        type: 'object',
+        properties: {
+          customer: {
+            type: 'object',
+            properties: {
+              name: { type: 'string', title: 'Customer Name' },
+              email: { type: 'string', title: 'Email' }
+            }
+          }
+        }
+      }}
+    />
+  );
+}
+```
+
+## API Reference
+
+### PdfEditor Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `pdfUrl` | `string` | Yes | URL or path to the PDF file |
+| `fields` | `PdfField[]` | No | Array of field objects (default: `[]`) |
+| `onFieldsChange` | `(fields: PdfField[]) => void` | Yes | Callback when fields are modified |
+| `dataModel` | `SchemaObject` | No | JSON schema object for data model fields |
+| `recipients` | `RecipientInfo[]` | No | Array of recipient information (default: `[]`) |
+| `loading` | `boolean` | No | Loading state (default: `false`) |
+| `loadingPlaceholder` | `ReactNode` | No | Custom loading placeholder |
+| `errorPlaceholder` | `ReactNode` | No | Custom error placeholder |
+
+### PdfField Interface
+
+```typescript
+interface PdfField {
+  id: string;                    // Unique identifier (UUID)
+  type: FieldTypeEnum;           // 'data-model' | 'e-sign' | 'fillable'
+  subType?: string;              // Field subtype (e.g., 'text', 'date', 'signature')
+  x: number;                     // X coordinate on page
+  y: number;                     // Y coordinate on page
+  page: number;                  // Page number (1-indexed)
+  label: string;                 // Display label
+  width: number;                 // Field width in pixels
+  height: number;                // Field height in pixels
+  required?: boolean;            // Whether field is required (fillable fields)
+  path?: string;                // Data path for merge tags
+  recipient?: string;            // Recipient name for e-sign/fillable fields
+}
+```
+
+### RecipientInfo Interface
+
+```typescript
+interface RecipientInfo {
+  id: number;
+  name: string;                  // Internal recipient identifier
+  displayName: string;            // Display name for UI
+}
+```
+
+### SchemaObject Interface
+
+The data model follows a JSON Schema-like structure:
+
+```typescript
+interface SchemaObject {
+  type: 'object';
+  properties: Record<string, SchemaNode>;
+  title?: string;
+  options?: {
+    placeholder?: any;
+    description?: any;
+    sampleData?: any;
+    showInEditor?: boolean;
+    isHighlighted?: boolean;
+  };
+}
+```
+
+## Component Architecture
+
+### Main Components
+
+#### `PdfEditor`
+The root component that orchestrates the entire editor experience.
+
+**Key Responsibilities:**
+- Manages field state and selection
+- Handles drag and drop operations
+- Coordinates between sidebar and canvas
+- Manages recipient color mapping
+
+#### `FieldSidebar`
+Left sidebar containing field type lists and search functionality.
+
+**Features:**
+- Three tabs: Merge Tags, E-Sign, Fillable Fields
+- Search functionality for data model and fillable fields
+- Drag source for new fields
+
+#### `PdfCanvas`
+Main canvas area displaying PDF pages with field overlays.
+
+**Features:**
+- PDF rendering with `react-pdf`
+- Drop zone for new fields
+- Click-to-deselect functionality
+- Page dimension calculations
+
+#### `PdfDocumentRenderer`
+PDF document renderer using `react-pdf` library.
+
+**Features:**
+- Multi-page rendering
+- Drag and drop event handling
+- Loading and error states
+
+#### `PdfFieldOverlay`
+Overlay component rendering field visualizations on PDF pages.
+
+**Features:**
+- Field positioning and rendering
+- Drag and drop for existing fields
+- Resize handles for selected fields
+- Color coding by recipient
+
+#### `FieldConfigPanelOverlay`
+Configuration panel that appears when a field is selected.
+
+**Features:**
+- Field property editing
+- Recipient assignment
+- Field deletion
+- E-sign field type selection
+
+### Supporting Components
+
+- **`FieldType`**: Draggable field type item in sidebar
+- **`DataModelFieldTypeList`**: List of data model fields grouped by schema
+- **`ESignFieldTypeList`**: List of e-signature field types
+- **`FillableFieldTypeList`**: List of fillable field types
+- **`FieldConfigPanel`**: Form for editing field properties
+
+## Utilities
+
+The component includes several utility functions:
+
+- **`calculateDropCoordinates`**: Calculates field position from drop event
+- **`extractGroupedFieldsFromDataModel`**: Extracts fields from JSON schema
+- **`generateESignPath`**: Generates path for e-signature fields
+- **`getPagePosition`**: Gets page position relative to container
+- **`getPageDimensions`**: Gets page dimensions
+- **`handleFieldDrag`**: Handles field dragging logic
+- **`handleFieldResize`**: Handles field resizing logic
+- **`isDragOverCanvas`**: Checks if drag is over PDF canvas
+- **`mapColorsToRecipients`**: Assigns colors to recipients
+
+## Styling
+
+The component includes CSS modules for styling. Import the main stylesheet:
+
+```tsx
+import '@servicetitan/dte-pdf-editor/dist/styles/index.css';
+```
+
+### CSS Classes
+
+- `.dte-pdf-editor`: Main editor container
+- `.dte-pdf-editor-sidebar-container`: Sidebar container
+- `.dte-pdf-editor-content-container`: Main content area
+- `.dte-pdf-canvas-container`: PDF canvas container
+- `.dte-pdf-field`: Individual field overlay
+- `.dte-pdf-field-selected`: Selected field state
+- `.dte-field-sidebar-container`: Sidebar styling
+- `.dte-field-config-panel-overlay`: Config panel overlay
+
+## Field Types Details
+
+### Data Model Fields
+
+Data model fields are extracted from a JSON Schema structure. The component:
+- Groups fields by parent objects
+- Handles nested objects and arrays
+- Generates paths like `customer.name` or `items[].description`
+- Supports search and filtering
+
+### E-Signature Fields
+
+E-signature fields support four subtypes:
+- **Signature**: Full signature field
+- **Initials**: Initials only
+- **Date Signed**: Date of signing
+- **Full Name**: Signer's full name
+
+Each e-sign field is assigned to a recipient and generates a unique path.
+
+### Fillable Fields
+
+Fillable fields support three input types:
+- **Text**: Single-line text input
+- **Date**: Date picker
+- **Checkbox**: Boolean checkbox
+
+Fillable fields can be marked as required and assigned to recipients.
+
+## Constants
+
+- **`BASE_PAGE_WIDTH`**: 980px - Base width for PDF page rendering
+
+## Development
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   ├── pdf-editor.tsx   # Main editor component
+│   ├── pdf-document-renderer.tsx   # PDF renderer
+│   ├── pdf-canvas.tsx   # Canvas with overlays
+│   ├── field-sidebar.tsx
+│   └── ...
+├── interface/          # TypeScript interfaces
+├── utils/              # Utility functions
+├── constants/          # Constants and enums
+└── styles/             # CSS stylesheets
+```
+
+### Building
+
+The project uses TypeScript and compiles to the `dist/` directory.
+
+### TypeScript
+
+The project extends `@servicetitan/startup/tsconfig/base` and includes:
+- Strict type checking
+- Composite project support
+- Source maps generation
+
+## Browser Support
+
+The component requires modern browsers with support for:
+- ES6+ JavaScript
+- CSS Grid and Flexbox
+- HTML5 Drag and Drop API
+- Canvas API
+
+## License
+
+This package is part of the ServiceTitan Document Template Engine components.
+
+## Contributing
+
+When contributing to this package:
+1. Follow TypeScript best practices
+2. Maintain component prop interfaces
+3. Update this README for API changes
+4. Ensure styles are scoped to component classes
+5. Test drag-and-drop functionality across browsers
+

package/dist/components/data-model-field-type-list.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { DataModelFieldGroup, FieldTypeOption } from '../interface/pdf-editor';
+interface DataModelFieldTypeListProps {
+    searchText?: string;
+    dataModelGroups?: DataModelFieldGroup[];
+    onDragStart(fieldOption: FieldTypeOption): void;
+    onDragEnd(): void;
+}
+export declare const DataModelFieldTypeList: FC<DataModelFieldTypeListProps>;
+export {};
+//# sourceMappingURL=data-model-field-type-list.d.ts.map

package/dist/components/data-model-field-type-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-model-field-type-list.d.ts","sourceRoot":"","sources":["../../src/components/data-model-field-type-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/E,UAAU,2BAA2B;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACxC,WAAW,CAAC,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IAChD,SAAS,IAAI,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA6ClE,CAAC"}

package/dist/components/data-model-field-type-list.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from '@servicetitan/anvil2';
+import { Fragment, useMemo } from 'react';
+import { FieldType } from './field-type';
+export const DataModelFieldTypeList = ({ dataModelGroups = [], onDragEnd, onDragStart, searchText, }) => {
+    const searchedFieldGroups = useMemo(() => {
+        if (!searchText) {
+            return dataModelGroups;
+        }
+        const searchLower = searchText.toLowerCase();
+        return dataModelGroups
+            .map(group => ({
+            ...group,
+            fieldTypes: group.fields.filter(({ label }) => label.toLowerCase().includes(searchLower)),
+        }))
+            .filter(group => group.fieldTypes.length > 0);
+    }, [dataModelGroups, searchText]);
+    return (_jsx(Fragment, { children: searchedFieldGroups.map(group => (_jsxs("div", { className: "dte-field-type-group m-t-1", children: [_jsx(Flex, { alignItems: "center", gap: 1, className: "dte-field-type-group-header", children: _jsx(Text, { variant: "headline", el: "h6", size: "small", children: group.groupName }) }), group.fields.map(fieldOption => {
+                    const key = `${fieldOption.type}-${group.groupName}-${fieldOption.path}`;
+                    return (_jsx(FieldType, { label: fieldOption.label, onDragEnd: onDragEnd, onDragStart: () => onDragStart(fieldOption) }, key));
+                })] }, group.groupName))) }));
+};
+//# sourceMappingURL=data-model-field-type-list.js.map

package/dist/components/data-model-field-type-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-model-field-type-list.js","sourceRoot":"","sources":["../../src/components/data-model-field-type-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAM,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC,MAAM,CAAC,MAAM,sBAAsB,GAAoC,CAAC,EACpE,eAAe,GAAG,EAAE,EACpB,SAAS,EACT,WAAW,EACX,UAAU,GACb,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,OAAO,eAAe,CAAC;QAC3B,CAAC;QAED,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC;QAC7C,OAAO,eAAe;aACjB,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACX,GAAG,KAAK;YACR,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAC5C;SACJ,CAAC,CAAC;aACF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAClC,OAAO,CACH,KAAC,QAAQ,cACJ,mBAAmB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC9B,eAA2B,SAAS,EAAC,4BAA4B,aAC7D,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,6BAA6B,YACrE,KAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACxC,KAAK,CAAC,SAAS,GACb,GACJ,EACN,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;oBAC5B,MAAM,GAAG,GAAG,GAAG,WAAW,CAAC,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC,IAAI,EAAE,CAAC;oBACzE,OAAO,CACH,KAAC,SAAS,IAEN,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,IAHtC,GAAG,CAIV,CACL,CAAC;gBACN,CAAC,CAAC,KAhBI,KAAK,CAAC,SAAS,CAiBnB,CACT,CAAC,GACK,CACd,CAAC;AACN,CAAC,CAAC"}

package/dist/components/e-sign-field-type-list.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { FieldTypeOption } from '../interface/pdf-editor';
+interface ESignFieldTypeListProps {
+    onDragStart(fieldOption: FieldTypeOption): void;
+    onDragEnd(): void;
+}
+export declare const ESignFieldTypeList: FC<ESignFieldTypeListProps>;
+export {};
+//# sourceMappingURL=e-sign-field-type-list.d.ts.map

package/dist/components/e-sign-field-type-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"e-sign-field-type-list.d.ts","sourceRoot":"","sources":["../../src/components/e-sign-field-type-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,UAAU,uBAAuB;IAC7B,WAAW,CAAC,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IAChD,SAAS,IAAI,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAgB1D,CAAC"}

package/dist/components/e-sign-field-type-list.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { E_SIGN_FIELD_TYPES } from '../constants';
+import { FieldType } from './field-type';
+export const ESignFieldTypeList = ({ onDragEnd, onDragStart }) => {
+    return (_jsx(Fragment, { children: E_SIGN_FIELD_TYPES.map(fieldOption => {
+            var _a;
+            const key = `${fieldOption.type}-${(_a = fieldOption.path) !== null && _a !== void 0 ? _a : fieldOption.label}`;
+            return (_jsx(FieldType, { label: fieldOption.label, onDragEnd: onDragEnd, onDragStart: () => onDragStart(fieldOption) }, key));
+        }) }));
+};
+//# sourceMappingURL=e-sign-field-type-list.js.map

package/dist/components/e-sign-field-type-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"e-sign-field-type-list.js","sourceRoot":"","sources":["../../src/components/e-sign-field-type-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IAC1F,OAAO,CACH,KAAC,QAAQ,cACJ,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;;YAClC,MAAM,GAAG,GAAG,GAAG,WAAW,CAAC,IAAI,IAAI,MAAA,WAAW,CAAC,IAAI,mCAAI,WAAW,CAAC,KAAK,EAAE,CAAC;YAC3E,OAAO,CACH,KAAC,SAAS,IAEN,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,IAHtC,GAAG,CAIV,CACL,CAAC;QACN,CAAC,CAAC,GACK,CACd,CAAC;AACN,CAAC,CAAC"}

package/dist/components/field-config-panel-overlay.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { PdfField } from '../interface/pdf-editor';
+import { RecipientInfo } from './pdf-editor';
+interface FieldConfigPanelOverlayProps {
+    selectedField: PdfField;
+    recipients?: RecipientInfo[];
+    onFieldConfigChange(updates: Partial<PdfField>): void;
+    onDeleteField(): void;
+    onDeselectField?(): void;
+}
+export declare const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps>;
+export {};
+//# sourceMappingURL=field-config-panel-overlay.d.ts.map

package/dist/components/field-config-panel-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-config-panel-overlay.d.ts","sourceRoot":"","sources":["../../src/components/field-config-panel-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,UAAU,4BAA4B;IAClC,aAAa,EAAE,QAAQ,CAAC;IACxB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACtD,aAAa,IAAI,IAAI,CAAC;IACtB,eAAe,CAAC,IAAI,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAmCpE,CAAC"}

package/dist/components/field-config-panel-overlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, Text } from '@servicetitan/anvil2';
+import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
+import { FieldConfigPanel } from './field-config-panel';
+export const FieldConfigPanelOverlay = ({ onDeleteField, onDeselectField, onFieldConfigChange, recipients, selectedField, }) => {
+    return (_jsxs(Flex, { className: "dte-field-config-panel-overlay", onClick: e => e.stopPropagation(), children: [_jsxs(Flex, { className: "dte-field-config-panel-header", alignItems: "center", justifyContent: "space-between", children: [_jsx(Text, { variant: "headline", el: "h6", size: "small", children: "Field Configuration" }), _jsx(Button, { appearance: "ghost", size: "small", onClick: onDeselectField, "aria-label": "Close", icon: IconClose })] }), _jsx("div", { className: "dte-field-config-panel-content", children: _jsx(FieldConfigPanel, { field: selectedField, recipients: recipients, onFieldConfigChange: onFieldConfigChange, onDeleteField: onDeleteField }) })] }));
+};
+//# sourceMappingURL=field-config-panel-overlay.js.map

package/dist/components/field-config-panel-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-config-panel-overlay.js","sourceRoot":"","sources":["../../src/components/field-config-panel-overlay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,SAAS,MAAM,4DAA4D,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAWxD,MAAM,CAAC,MAAM,uBAAuB,GAAqC,CAAC,EACtE,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,UAAU,EACV,aAAa,GAChB,EAAE,EAAE;IACD,OAAO,CACH,MAAC,IAAI,IAAC,SAAS,EAAC,gCAAgC,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAC9E,MAAC,IAAI,IACD,SAAS,EAAC,+BAA+B,EACzC,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,aAE9B,KAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,oCAEtC,EACP,KAAC,MAAM,IACH,UAAU,EAAC,OAAO,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,eAAe,gBACb,OAAO,EAClB,IAAI,EAAE,SAAS,GACjB,IACC,EACP,cAAK,SAAS,EAAC,gCAAgC,YAC3C,KAAC,gBAAgB,IACb,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU,EACtB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,aAAa,GAC9B,GACA,IACH,CACV,CAAC;AACN,CAAC,CAAC"}

package/dist/components/field-config-panel.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { PdfField } from '../interface/pdf-editor';
+import { RecipientInfo } from './pdf-editor';
+interface FieldConfigPanelProps {
+    field: PdfField;
+    recipients?: RecipientInfo[];
+    onDeleteField(): void;
+    onFieldConfigChange(updates: Partial<PdfField>): void;
+}
+export declare const FieldConfigPanel: FC<FieldConfigPanelProps>;
+export {};
+//# sourceMappingURL=field-config-panel.d.ts.map

package/dist/components/field-config-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-config-panel.d.ts","sourceRoot":"","sources":["../../src/components/field-config-panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAiC,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,UAAU,qBAAqB;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,aAAa,IAAI,IAAI,CAAC;IACtB,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;CACzD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+HtD,CAAC"}

package/dist/components/field-config-panel.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Combobox, Flex, TextField } from '@servicetitan/anvil2';
+import { useMemo } from 'react';
+import { E_SIGN_FIELD_TYPE_OPTIONS } from '../constants';
+import { FieldTypeEnum } from '../interface/pdf-editor';
+import { generateESignPath } from '../utils';
+export const FieldConfigPanel = ({ field, onDeleteField, onFieldConfigChange, recipients = [], }) => {
+    const recipientOptions = useMemo(() => recipients.map(recipient => ({
+        id: recipient.name,
+        name: recipient.displayName,
+    })), [recipients]);
+    const selectedRecipient = useMemo(() => { var _a; return (_a = recipientOptions.find(option => option.id === field.recipient)) !== null && _a !== void 0 ? _a : null; }, [recipientOptions, field.recipient]);
+    const handleRecipientChange = (item) => {
+        if (item) {
+            onFieldConfigChange({
+                recipient: item.id,
+                path: field.type === FieldTypeEnum.eSign
+                    ? generateESignPath(item.id, field.subType)
+                    : field.path,
+            });
+        }
+    };
+    const selectedESignFieldType = useMemo(() => { var _a; return (_a = E_SIGN_FIELD_TYPE_OPTIONS.find(option => option.id === field.subType)) !== null && _a !== void 0 ? _a : null; }, [field]);
+    const handleESignFieldTypeChange = (item) => {
+        if (item) {
+            onFieldConfigChange({
+                subType: item.id,
+                path: generateESignPath(field.recipient, item.id),
+            });
+        }
+    };
+    return (_jsxs(Flex, { direction: "column", gap: "4", children: [(field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (_jsx(TextField, { label: "Label", value: field.label, onChange: e => onFieldConfigChange({
+                    label: e.target.value,
+                }) })), (field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (_jsxs(Combobox, { items: recipientOptions, itemToString: item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.name) !== null && _a !== void 0 ? _a : ''; }, onChange: handleRecipientChange, selectedItem: selectedRecipient, children: [_jsx(Combobox.SearchField, { placeholder: "", label: "Recipient", labelProps: { required: true } }), _jsx(Combobox.Content, { children: ({ items }) => (_jsx(Combobox.List, { children: items.map((item, i) => (_jsx(Combobox.Item, { item: item, index: i, children: item.name }, item.id))) })) })] })), field.type === FieldTypeEnum.eSign && (_jsxs(Combobox, { items: E_SIGN_FIELD_TYPE_OPTIONS, itemToString: item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.name) !== null && _a !== void 0 ? _a : ''; }, onChange: handleESignFieldTypeChange, selectedItem: selectedESignFieldType, children: [_jsx(Combobox.SearchField, { label: "Field Type", labelProps: { required: true } }), _jsx(Combobox.Content, { children: ({ items }) => (_jsx(Combobox.List, { children: items.map((item, i) => (_jsx(Combobox.Item, { item: item, index: i, children: item.name }, item.id))) })) })] })), field.type === FieldTypeEnum.dataModel && field.path && (_jsx(TextField, { label: "Data Path", value: field.path, disabled: true })), field.type === FieldTypeEnum.fillable && (_jsx(Checkbox, { label: "Required", checked: field.required, onChange: () => onFieldConfigChange({
+                    required: !field.required,
+                }) })), _jsx(Button, { className: "full-width", onClick: onDeleteField, children: "Delete Field" })] }));
+};
+//# sourceMappingURL=field-config-panel.js.map

package/dist/components/field-config-panel.js.map

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

package/dist/components/field-sidebar.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { DataModelFieldGroup, FieldTypeOption } from '../interface/pdf-editor';
+interface FieldSidebarProps {
+    dataModelGroups?: DataModelFieldGroup[];
+    onDragEnd(): void;
+    onDragStart(fieldOption: FieldTypeOption): void;
+}
+export declare const FieldSidebar: FC<FieldSidebarProps>;
+export {};
+//# sourceMappingURL=field-sidebar.d.ts.map

package/dist/components/field-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-sidebar.d.ts","sourceRoot":"","sources":["../../src/components/field-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAiB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAK9F,UAAU,iBAAiB;IACvB,eAAe,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACxC,SAAS,IAAI,IAAI,CAAC;IAClB,WAAW,CAAC,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACnD;AAYD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiE9C,CAAC"}

package/dist/components/field-sidebar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Icon, SearchField, Text } from '@servicetitan/anvil2';
+import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
+import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
+import { useState } from 'react';
+import { FieldTypeEnum } from '../interface/pdf-editor';
+import { DataModelFieldTypeList } from './data-model-field-type-list';
+import { ESignFieldTypeList } from './e-sign-field-type-list';
+import { FillableFieldTypeList } from './fillable-field-type-list';
+const menuGroups = [
+    { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
+    { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
+    {
+        svgIcon: IconPhotoSizeSelectSmall,
+        label: 'Fillable Fields',
+        key: FieldTypeEnum.fillable,
+    },
+];
+export const FieldSidebar = ({ dataModelGroups = [], onDragEnd, onDragStart, }) => {
+    const [activeFieldType, setActiveFieldType] = useState(FieldTypeEnum.dataModel);
+    const [searchText, setSearchText] = useState('');
+    return (_jsxs(Flex, { className: "dte-field-sidebar-container skeleton-item", children: [_jsx(Flex, { className: "dte-field-sidebar-menu", shrink: 0, direction: "column", gap: "3", children: menuGroups.map(({ key, label, svgIcon }) => (_jsxs(Flex, { alignItems: "center", justifyContent: "center", direction: "column", className: "dte-field-sidebar-menu-item cursor-pointer", onClick: () => setActiveFieldType(key), children: [_jsx(Icon, { svg: svgIcon, size: "large" }), _jsx(Text, { variant: "body", size: "small", className: "dte-field-sidebar-menu-item-text", children: label })] }, key))) }), _jsxs(Flex, { className: "dte-field-sidebar-content skeleton-item", shrink: 0, children: [_jsx(Text, { variant: "headline", el: "h1", size: "medium", children: "Merge Tags" }), activeFieldType !== FieldTypeEnum.eSign && (_jsx(SearchField, { placeholder: "Search", size: "small", className: "dte-field-sidebar-search", onChange: e => { var _a; return setSearchText((_a = e.target.value) !== null && _a !== void 0 ? _a : ''); } })), activeFieldType === FieldTypeEnum.fillable && (_jsx(FillableFieldTypeList, { searchText: searchText, onDragStart: onDragStart, onDragEnd: onDragEnd })), activeFieldType === FieldTypeEnum.eSign && (_jsx(ESignFieldTypeList, { onDragEnd: onDragEnd, onDragStart: onDragStart })), activeFieldType === FieldTypeEnum.dataModel && (_jsx(DataModelFieldTypeList, { searchText: searchText, dataModelGroups: dataModelGroups, onDragStart: onDragStart, onDragEnd: onDragEnd }))] })] }));
+};
+//# sourceMappingURL=field-sidebar.js.map

package/dist/components/field-sidebar.js.map

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

package/dist/components/field-type.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface FieldTypeProps {
+    label: string;
+    onDragEnd(): void;
+    onDragStart(): void;
+}
+export declare const FieldType: FC<FieldTypeProps>;
+export {};
+//# sourceMappingURL=field-type.d.ts.map

package/dist/components/field-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-type.d.ts","sourceRoot":"","sources":["../../src/components/field-type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,UAAU,cAAc;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,IAAI,IAAI,CAAC;IAClB,WAAW,IAAI,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiBxC,CAAC"}

package/dist/components/field-type.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Text } from '@servicetitan/anvil2';
+import IconDragIndicator from '@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg';
+export const FieldType = ({ label, onDragEnd, onDragStart }) => {
+    return (_jsxs("div", { draggable: true, onDragStart: e => {
+            onDragStart();
+            // Mark that we're dragging a new field type, not an existing field
+            e.dataTransfer.effectAllowed = 'copy';
+            e.dataTransfer.setData('text/plain', 'new-field-type');
+        }, onDragEnd: onDragEnd, className: "dte-field-type-item border m-t-1", children: [_jsx(Icon, { svg: IconDragIndicator, size: "medium" }), _jsx(Text, { size: "small", children: label })] }));
+};
+//# sourceMappingURL=field-type.js.map

package/dist/components/field-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-type.js","sourceRoot":"","sources":["../../src/components/field-type.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,iBAAiB,MAAM,qEAAqE,CAAC;AASpG,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IAC/E,OAAO,CACH,eACI,SAAS,QACT,WAAW,EAAE,CAAC,CAAC,EAAE;YACb,WAAW,EAAE,CAAC;YACd,mEAAmE;YACnE,CAAC,CAAC,YAAY,CAAC,aAAa,GAAG,MAAM,CAAC;YACtC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;QAC3D,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,kCAAkC,aAE5C,KAAC,IAAI,IAAC,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC9C,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,YAAE,KAAK,GAAQ,IAC/B,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/fillable-field-type-list.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { FieldTypeOption } from '../interface/pdf-editor';
+interface FillableFieldTypeListProps {
+    searchText?: string;
+    onDragStart(fieldOption: FieldTypeOption): void;
+    onDragEnd(): void;
+}
+export declare const FillableFieldTypeList: FC<FillableFieldTypeListProps>;
+export {};
+//# sourceMappingURL=fillable-field-type-list.d.ts.map

package/dist/components/fillable-field-type-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fillable-field-type-list.d.ts","sourceRoot":"","sources":["../../src/components/fillable-field-type-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,UAAU,0BAA0B;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IAChD,SAAS,IAAI,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA8BhE,CAAC"}