@servicetitan/dte-pdf-editor 1.94.0 → 1.96.0

package/src/components/field-config-panel/field-config-panel-overlay.tsx

@@ -1,13 +1,20 @@
 import { Button, Flex, Text } from '@servicetitan/anvil2';
 import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
-import { FC } from 'react';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
+import { FC, useCallback, useMemo } from 'react';
 import {
+    type BusinessCalendar,
+    type BusinessDaySchedule,
+    type FieldScheduleBinding,
     type FormFieldsByFormIdI,
     type FormInfo,
+    type HolidayCatalog,
     type PdfField,
     type RecipientInfo,
+    type SaveScheduleRequest,
     type SchemaObject,
 } from '../../interface/types';
+import { getFieldDateCalcOptions, setFieldSchedule, setFieldScheduleEnabled } from '../../utils';
 import { FieldConfigPanel } from './field-config-panel';
 
 interface FieldConfigPanelOverlayProps {
@@ -19,6 +26,19 @@ interface FieldConfigPanelOverlayProps {
     selectedField: PdfField;
     recipients: RecipientInfo[];
     hideConditionalLogic?: boolean;
+    holidays?: string[];
+    fieldCalendars?: Record<string, BusinessCalendar>;
+    scheduleBindings?: FieldScheduleBinding[];
+    holidayCatalog?: HolidayCatalog;
+    holidayCatalogLoading?: boolean;
+    holidayCatalogError?: string;
+    schedules?: BusinessDaySchedule[];
+    schedulesLoading?: boolean;
+    schedulesError?: string;
+    onScheduleBindingsChange?(bindings: FieldScheduleBinding[]): void;
+    onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    onUpdateSchedule?(id: number, request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    onDeleteSchedule?(id: number): Promise<void>;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     onMatchingFieldsConfigChange?(
         predicate: (field: PdfField) => boolean,
@@ -32,18 +52,92 @@ interface FieldConfigPanelOverlayProps {
 export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
     dataModel,
     documentFields = [],
+    fieldCalendars,
     formFieldsByFormId,
     forms,
     formulaLoadingFormId,
     hideConditionalLogic,
+    holidayCatalog,
+    holidayCatalogError,
+    holidayCatalogLoading,
+    holidays,
+    onCreateSchedule,
     onDeleteField,
+    onDeleteSchedule,
     onDeselectField,
     onFieldConfigChange,
     onMatchingFieldsConfigChange,
     onRequestFormFields,
+    onScheduleBindingsChange,
+    onUpdateSchedule,
     recipients,
+    scheduleBindings,
+    schedules,
+    schedulesError,
+    schedulesLoading,
     selectedField,
 }) => {
+    const dateCalcOptions = useMemo(
+        () => getFieldDateCalcOptions(selectedField.id, scheduleBindings, holidays, fieldCalendars),
+        [selectedField.id, scheduleBindings, holidays, fieldCalendars],
+    );
+
+    const selectedFieldId = selectedField.id;
+    const selectedBinding = useMemo(
+        () => scheduleBindings?.find(b => b.fieldKey === selectedFieldId),
+        [scheduleBindings, selectedFieldId],
+    );
+
+    const handleToggle = useCallback(
+        (enabled: boolean) => {
+            onScheduleBindingsChange?.(
+                setFieldScheduleEnabled(scheduleBindings ?? [], selectedFieldId, enabled),
+            );
+        },
+        [scheduleBindings, selectedFieldId, onScheduleBindingsChange],
+    );
+
+    const handleSelectSchedule = useCallback(
+        (scheduleId: number | undefined) => {
+            onScheduleBindingsChange?.(
+                setFieldSchedule(scheduleBindings ?? [], selectedFieldId, scheduleId),
+            );
+        },
+        [scheduleBindings, selectedFieldId, onScheduleBindingsChange],
+    );
+
+    const businessCalendar: ScheduleEditorContext = useMemo(
+        () => ({
+            enabled: !!selectedBinding,
+            selectedScheduleId: selectedBinding?.scheduleId,
+            onToggle: handleToggle,
+            onSelectSchedule: handleSelectSchedule,
+            holidayCatalog,
+            holidayCatalogLoading,
+            holidayCatalogError,
+            schedules,
+            schedulesLoading,
+            schedulesError,
+            onCreateSchedule,
+            onUpdateSchedule,
+            onDeleteSchedule,
+        }),
+        [
+            selectedBinding,
+            handleToggle,
+            handleSelectSchedule,
+            holidayCatalog,
+            holidayCatalogLoading,
+            holidayCatalogError,
+            schedules,
+            schedulesLoading,
+            schedulesError,
+            onCreateSchedule,
+            onUpdateSchedule,
+            onDeleteSchedule,
+        ],
+    );
+
     return (
         <Flex className="dte-field-config-panel-overlay" onClick={e => e.stopPropagation()}>
             <Flex
@@ -75,6 +169,8 @@ export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
                     onMatchingFieldsConfigChange={onMatchingFieldsConfigChange}
                     onDeleteField={onDeleteField}
                     hideConditionalLogic={hideConditionalLogic}
+                    dateCalcOptions={dateCalcOptions}
+                    businessCalendar={businessCalendar}
                     onRequestFormFields={onRequestFormFields}
                 />
             </div>

package/src/components/field-config-panel/field-config-panel.tsx

@@ -1,4 +1,5 @@
 import { Button, Checkbox, Flex, SelectFieldSync, Textarea, TextField } from '@servicetitan/anvil2';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, useMemo } from 'react';
 import { FIELD_FONT_SIZE_OPTIONS } from '../../constants';
 import {
@@ -12,6 +13,7 @@ import {
     type SchemaObject,
 } from '../../interface/types';
 import {
+    type DateCalcOptions,
     generateESignPath,
     generateFillablePath,
     getFieldFontSize,
@@ -35,6 +37,10 @@ interface FieldConfigPanelProps {
     formulaLoadingFormId?: number | null;
     recipients: RecipientInfo[];
     hideConditionalLogic?: boolean;
+    /** The calendar of this field's formula preview. */
+    dateCalcOptions?: DateCalcOptions;
+    /** The business-calendar toggle/picker/drawer state and callbacks for this field. */
+    businessCalendar?: ScheduleEditorContext;
     onDeleteField(): void;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     onMatchingFieldsConfigChange?(
@@ -45,7 +51,9 @@ interface FieldConfigPanelProps {
 }
 
 export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
+    businessCalendar,
     dataModel,
+    dateCalcOptions,
     documentFields = [],
     field,
     formFieldsByFormId,
@@ -88,6 +96,23 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         onFieldConfigChange({ data });
     };
 
+    /*
+     * Reuses the catalog/CRUD half of `businessCalendar` (shared tenant schedules, same as a
+     * calculated field's), but overrides the enabled/selected-schedule half to read and write
+     * `ESignDateSignedOffsetSettings` instead of a `scheduleBindings` entry, since the toggle here
+     * applies to every `dateSignedOffset` field in the document, same as `rules` does.
+     */
+    const dateSignedOffsetData = field.data as ESignDateSignedOffsetSettings;
+    const eSignBusinessCalendar: ScheduleEditorContext | undefined = businessCalendar && {
+        ...businessCalendar,
+        enabled: !!dateSignedOffsetData?.businessCalendarEnabled,
+        selectedScheduleId: dateSignedOffsetData?.scheduleId,
+        onToggle: businessCalendarEnabled =>
+            handleDateSignedOffsetSave({ ...dateSignedOffsetData, businessCalendarEnabled }),
+        onSelectSchedule: scheduleId =>
+            handleDateSignedOffsetSave({ ...dateSignedOffsetData, scheduleId }),
+    };
+
     const handleRecipientChange = (item: { id: string; label: string } | null) => {
         if (!item) {
             return;
@@ -245,7 +270,9 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 )}
             {field.type === FieldTypeEnum.calculated && (
                 <FormulaGenerator
+                    businessCalendar={businessCalendar}
                     dataModel={dataModel}
+                    dateCalcOptions={dateCalcOptions}
                     documentFields={documentFields}
                     formFieldsByFormId={formFieldsByFormId}
                     forms={forms}
@@ -281,6 +308,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     <ESignOptionsModal
                         initialState={field.data as ESignDateSignedOffsetSettings}
                         onSave={handleDateSignedOffsetSave}
+                        businessCalendar={eSignBusinessCalendar}
                         documentFields={documentFields}
                         formFieldsByFormId={formFieldsByFormId}
                         formFieldsLoadingFormId={formulaLoadingFormId}

package/src/components/field-config-panel/formula-generator.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@servicetitan/anvil2';
 import EditIcon from '@servicetitan/anvil2/assets/icons/material/round/edit.svg';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, Fragment, useMemo, useState } from 'react';
 import {
     type CalculatedFieldFormat,
@@ -12,11 +13,13 @@ import {
     type SchemaObject,
     type StructuredFormula,
 } from '../../interface/types';
-import { extractGroupedFieldsFromDataModel } from '../../utils';
+import { type DateCalcOptions, extractGroupedFieldsFromDataModel } from '../../utils';
 import { FormulaModal } from './formula-modal';
 
 export interface FormulaGeneratorProps {
+    businessCalendar?: ScheduleEditorContext;
     dataModel?: SchemaObject;
+    dateCalcOptions?: DateCalcOptions;
     documentFields?: PdfField[];
     formFieldsByFormId?: FormFieldsByFormIdI;
     forms: FormInfo[];
@@ -43,7 +46,9 @@ function getFillableFilteredBuySubTypeFields(
 }
 
 export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
+    businessCalendar,
     dataModel,
+    dateCalcOptions,
     documentFields = [],
     formFieldsByFormId,
     forms,
@@ -87,7 +92,9 @@ export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
                 <FormulaModal
                     initialFormula={formula}
                     initialFormat={formulaFormat}
+                    businessCalendar={businessCalendar}
                     dataModelGroups={dataModelGroups}
+                    dateCalcOptions={dateCalcOptions}
                     fillableFieldsFromDocument={fillableFieldsFromDocument}
                     formFieldsByFormId={formFieldsByFormId}
                     forms={forms}

package/src/components/field-config-panel/formula-modal.tsx

@@ -1,6 +1,7 @@
 import { Button, Dialog, Divider, Flex } from '@servicetitan/anvil2';
 import IconRedo from '@servicetitan/anvil2/assets/icons/material/round/redo.svg';
 import IconUndo from '@servicetitan/anvil2/assets/icons/material/round/undo.svg';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import {
     DEFAULT_DATE_CALCULATED_FORMAT,
@@ -18,6 +19,7 @@ import {
     type StructuredFormula,
 } from '../../interface/types';
 import {
+    type DateCalcOptions,
     evaluateFormula,
     formatCalculatedResult,
     formFieldInfosToCalculationOptions,
@@ -68,7 +70,10 @@ function setSampleValueAtPath(target: DataModelValues, path: string, value: unkn
 export interface FormulaModalProps {
     initialFormula: StructuredFormula | undefined;
     initialFormat?: CalculatedFieldFormat;
+    businessCalendar?: ScheduleEditorContext;
     dataModelGroups: DataModelFieldGroup[];
+    /** The calendar the preview uses: the field's own, or the default one. */
+    dateCalcOptions?: DateCalcOptions;
     fillableFieldsFromDocument?: FieldTypeOption[];
     formFieldsByFormId?: FormFieldsByFormIdI;
     forms: FormInfo[];
@@ -79,7 +84,9 @@ export interface FormulaModalProps {
 }
 
 export const FormulaModal: FC<FormulaModalProps> = ({
+    businessCalendar,
     dataModelGroups,
+    dateCalcOptions,
     fillableFieldsFromDocument = [],
     formFieldsByFormId = {},
     forms,
@@ -255,21 +262,28 @@ export const FormulaModal: FC<FormulaModalProps> = ({
         if (parsedTokens.length === 0 || !formulaValidation.valid) {
             return '';
         }
-        return hasDivisionByZero({ tokens: parsedTokens }, sampleData)
+        return hasDivisionByZero({ tokens: parsedTokens }, sampleData, dateCalcOptions)
             ? 'Division by zero is not allowed'
             : '';
-    }, [parsedTokens, formulaValidation.valid, sampleData]);
+    }, [parsedTokens, formulaValidation.valid, sampleData, dateCalcOptions]);
 
     const previewValue = useMemo(() => {
         if (parsedTokens.length === 0 || !formulaValidation.valid || divisionByZeroError) {
             return '';
         }
-        const computed = evaluateFormula({ tokens: parsedTokens }, sampleData);
+        const computed = evaluateFormula({ tokens: parsedTokens }, sampleData, dateCalcOptions);
         if (computed === null) {
             return '';
         }
         return formatCalculatedResult(computed, format);
-    }, [parsedTokens, formulaValidation.valid, divisionByZeroError, sampleData, format]);
+    }, [
+        parsedTokens,
+        formulaValidation.valid,
+        divisionByZeroError,
+        sampleData,
+        format,
+        dateCalcOptions,
+    ]);
 
     const handleClose = useCallback(() => {
         onClose();
@@ -317,6 +331,7 @@ export const FormulaModal: FC<FormulaModalProps> = ({
                         selectedPaths={formulaEditor.selectedFieldPaths}
                     />
                     <FormulaWorkspace
+                        businessCalendar={businessCalendar}
                         disabledOperators={formulaEditor.disabledOperators}
                         editorRef={formulaEditor.editorRef}
                         isInvalid={isInvalid && formulaEditor.isDirty}

package/src/components/field-config-panel/formula-workspace.tsx

@@ -1,4 +1,8 @@
-import { Alert, Button, Flex, LinkButton, Text } from '@servicetitan/anvil2';
+import { Alert, Button, Flex, Text } from '@servicetitan/anvil2';
+import IconExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
+import IconArrowForward from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_right.svg';
+
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import {
     Dispatch,
     FC,
@@ -17,6 +21,7 @@ import { ResultTypeSelector } from './result-type-selector';
 interface FormulaWorkspaceProps {
     actions: ReactNode;
     advancedOpen: boolean;
+    businessCalendar?: ScheduleEditorContext;
     disabledOperators?: Set<string>;
     editorRef: RefObject<HTMLDivElement | null>;
     format: CalculatedFieldFormat;
@@ -38,6 +43,7 @@ interface FormulaWorkspaceProps {
 export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
     actions,
     advancedOpen,
+    businessCalendar,
     disabledOperators,
     editorRef,
     format,
@@ -75,7 +81,7 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
     );
 
     return (
-        <Flex direction="column" flex={1} gap={2} style={{ padding: '12px' }}>
+        <Flex direction="column" flex={1} gap={2} style={{ padding: '12px', overflowY: 'auto' }}>
             <Flex direction="column" gap={1}>
                 <Text variant="body" size="small">
                     Preview (uses demo sample data)
@@ -132,10 +138,29 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
                 })}
             </Flex>
             <ResultTypeSelector format={format} onChange={onResultTypeChange} />
-            <LinkButton appearance="primary" onClick={onToggleAdvanced}>
-                {advancedOpen ? 'Hide advanced settings' : 'Show advanced settings'}
-            </LinkButton>
-            {advancedOpen && <AdvancedSettings format={format} setFormat={setFormat} />}
+            <Flex
+                role="button"
+                onClick={onToggleAdvanced}
+                alignItems="center"
+                gap={1}
+                style={{ cursor: 'pointer', marginTop: 16 }}
+            >
+                <Text variant="eyebrow" size="small">
+                    Advanced settings
+                </Text>
+                {advancedOpen ? (
+                    <IconExpandMore fontSize="small" />
+                ) : (
+                    <IconArrowForward fontSize="small" />
+                )}
+            </Flex>
+            {advancedOpen && (
+                <AdvancedSettings
+                    format={format}
+                    setFormat={setFormat}
+                    businessCalendar={businessCalendar}
+                />
+            )}
         </Flex>
     );
 };

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

@@ -2,11 +2,16 @@ import { Flex } from '@servicetitan/anvil2';
 import { FC, ReactNode, useCallback, useMemo, useRef } from 'react';
 import { useFormFields, usePdfFieldDnD, usePdfFieldSelection } from '../../hooks';
 import {
+    type BusinessCalendar,
+    type BusinessDaySchedule,
     FieldTypeEnum,
+    type FieldScheduleBinding,
     type FormFieldsByFormIdI,
     type FormInfo,
+    type HolidayCatalog,
     type PdfField,
     type RecipientInfo,
+    type SaveScheduleRequest,
     type SchemaObject,
 } from '../../interface/types';
 import { extractGroupedFieldsFromDataModel, mapColorsToRecipients } from '../../utils';
@@ -30,10 +35,61 @@ export interface PdfEditorProps {
     hideConditionalLogic?: boolean;
     forms?: FormInfo[];
     zoomProps?: PdfCanvasProps['zoomProps'];
+    /**
+     * Holidays of the default business-day calendar, as `PdfView`'s `holidays`: the formula
+     * builder's preview of a date calculated field without its own calendar skips Saturday,
+     * Sunday and these days.
+     */
+    holidays?: string[];
+    /** Calendars of the date calculated fields bound to a schedule, by field id, as `PdfView`'s. */
+    fieldCalendars?: Record<string, BusinessCalendar>;
+    /**
+     * Date calculated fields whose custom business-day exclusion toggle is on, and the schedule
+     * each uses (`PdfField.id` as `fieldKey`), as `PdfView`'s. Also drives the Formula Builder's
+     * toggle/picker for the selected field.
+     */
+    scheduleBindings?: FieldScheduleBinding[];
+    /** The tenant's known holidays, for the schedule editor's checklist. */
+    holidayCatalog?: HolidayCatalog;
+    holidayCatalogLoading?: boolean;
+    holidayCatalogError?: string;
+    /** The schedules the tenant can pick from the Formula Builder's schedule picker. */
+    schedules?: BusinessDaySchedule[];
+    schedulesLoading?: boolean;
+    schedulesError?: string;
     onFormSelect?: (
         formIds: number[],
         sendFormFields: (formFieldsByFormId: FormFieldsByFormIdI) => void,
     ) => void;
+    /**
+     * Called with the complete desired `scheduleBindings` whenever the Formula Builder's toggle
+     * or schedule picker changes the selected field's binding (full replacement, mirroring DTE's
+     * `PUT api/holidays/templates/{id}/bindings`). `PdfEditor` does not persist this itself —
+     * the host is expected to save it (and the bindings are typically saved separately from the
+     * template's own fields).
+     */
+    onScheduleBindingsChange?(bindings: FieldScheduleBinding[]): void;
+    /**
+     * Creates a tenant schedule from the "Create New Schedule" drawer. Always creates a new
+     * schedule — it never overwrites a selected one. On success the created schedule is
+     * auto-selected in the picker. A rejected promise's `message` is shown as the drawer's error
+     * (for example a duplicate-name conflict).
+     */
+    onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /**
+     * Replaces a tenant schedule's name and rules in place, from the picker's "Edit" action
+     * (DTE's `PUT api/holidays/schedules/{id}`). Applies from the next conversion of every
+     * template using it. On success the updated schedule stays selected.
+     */
+    onUpdateSchedule?(id: number, request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /**
+     * Permanently deletes a tenant schedule, from the picker's "Delete" action (DTE's
+     * `DELETE api/holidays/schedules/{id}`). Fields still bound to it fall back to the default
+     * schedule — `PdfEditor` selects the default schedule for the current field on success, but
+     * does not itself update other fields' `scheduleBindings`; the host should drop bindings to
+     * a deleted schedule when it next saves them.
+     */
+    onDeleteSchedule?(id: number): Promise<void>;
     onLoadSuccess?(numPages: number): void;
     onFieldsChange(fields: PdfField[]): void;
 }
@@ -42,17 +98,30 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     dataModel,
     errorPlaceholder,
     errors = {},
+    fieldCalendars,
     fields = [],
     forms,
     hideConditionalLogic,
     hideFields,
+    holidayCatalog,
+    holidayCatalogError,
+    holidayCatalogLoading,
+    holidays,
     loading = false,
     loadingPlaceholder,
+    onCreateSchedule,
+    onDeleteSchedule,
     onFieldsChange,
     onFormSelect,
     onLoadSuccess,
+    onScheduleBindingsChange,
+    onUpdateSchedule,
     pdfUrl,
     recipients = [],
+    scheduleBindings,
+    schedules,
+    schedulesError,
+    schedulesLoading,
     zoomProps,
     zoomable = true,
 }) => {
@@ -99,6 +168,19 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     recipients={recipients}
                     onDeselectField={pdfFieldSelection.deselectField}
                     hideConditionalLogic={hideConditionalLogic}
+                    holidays={holidays}
+                    fieldCalendars={fieldCalendars}
+                    scheduleBindings={scheduleBindings}
+                    onScheduleBindingsChange={onScheduleBindingsChange}
+                    holidayCatalog={holidayCatalog}
+                    holidayCatalogLoading={holidayCatalogLoading}
+                    holidayCatalogError={holidayCatalogError}
+                    schedules={schedules}
+                    schedulesLoading={schedulesLoading}
+                    schedulesError={schedulesError}
+                    onCreateSchedule={onCreateSchedule}
+                    onUpdateSchedule={onUpdateSchedule}
+                    onDeleteSchedule={onDeleteSchedule}
                     onRequestFormFields={formFields.requestFormFieldsById}
                 />
             )}

package/src/components/pdf-fields-overlay/pdf-overlay-field-fillable.tsx

@@ -3,12 +3,14 @@ import { v4 as uuidv4 } from 'uuid';
 import { type PdfField } from '../../interface/types';
 import {
     getDropdownFieldItems,
+    getFieldMaxLength,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
     getFillablePaintedLabel,
     getTodayDateInputValue,
     isRadioDefaultSelected,
 } from '../../utils';
+import { CharLimitIndicator } from '../shared';
 import { AddHandle } from './add-handle';
 
 interface PdfOverlayFieldFillableProps {
@@ -130,14 +132,20 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
         case 'number': {
             const defaultNumberValue = field.default?.type === 'number' ? field.default.value : '';
             return (
-                <input
-                    key={defaultNumberValue}
-                    type="number"
-                    readOnly
-                    defaultValue={defaultNumberValue}
-                    className={`dte-pdf-field-fillable ${clipClassName}`}
-                    placeholder={placeholderText}
-                />
+                <Fragment>
+                    <input
+                        key={defaultNumberValue}
+                        type="number"
+                        readOnly
+                        defaultValue={defaultNumberValue}
+                        className={`dte-pdf-field-fillable ${clipClassName}`}
+                        placeholder={placeholderText}
+                    />
+                    <CharLimitIndicator
+                        maxLength={getFieldMaxLength(field, String(defaultNumberValue))}
+                        value={String(defaultNumberValue)}
+                    />
+                </Fragment>
             );
         }
 
@@ -166,27 +174,32 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
 
         default: {
             const defaultTextValue = field.default?.type === 'text' ? field.default.value : '';
-            if (field.multiline) {
-                return (
-                    <textarea
-                        key={defaultTextValue}
-                        readOnly
-                        defaultValue={defaultTextValue}
-                        style={{ font: 'inherit', lineHeight: 'inherit', outline: 'none' }}
-                        placeholder={placeholderText}
-                        className={`dte-pdf-field-fillable ${clipClassName}`}
-                    />
-                );
-            }
             return (
-                <input
-                    key={defaultTextValue}
-                    type="text"
-                    readOnly
-                    defaultValue={defaultTextValue}
-                    placeholder={placeholderText}
-                    className={`dte-pdf-field-fillable ${clipClassName}`}
-                />
+                <Fragment>
+                    {field.multiline ? (
+                        <textarea
+                            key={defaultTextValue}
+                            readOnly
+                            defaultValue={defaultTextValue}
+                            style={{ font: 'inherit', lineHeight: 'inherit', outline: 'none' }}
+                            placeholder={placeholderText}
+                            className={`dte-pdf-field-fillable ${clipClassName}`}
+                        />
+                    ) : (
+                        <input
+                            key={defaultTextValue}
+                            type="text"
+                            readOnly
+                            defaultValue={defaultTextValue}
+                            placeholder={placeholderText}
+                            className={`dte-pdf-field-fillable ${clipClassName}`}
+                        />
+                    )}
+                    <CharLimitIndicator
+                        maxLength={getFieldMaxLength(field, defaultTextValue)}
+                        value={defaultTextValue}
+                    />
+                </Fragment>
             );
         }
     }