@servicetitan/dte-pdf-editor 1.92.3 → 1.93.0

package/src/styles/pdf-field-overlay.css

@@ -11,70 +11,15 @@
     }
 }
 
-/* Editor-only chrome. Layout metrics come from getFieldBoundsStyle. */
-.dte-pdf-field-editor {
-    outline: 1px dashed #999;
-    outline-offset: 0;
-    border: none;
-    pointer-events: auto;
-    border-radius: 4px;
-
-    &.--edit-mode {
-        overflow: unset !important;
-    }
-
-    &.--selected {
-        outline: 2px solid var(--border-color-active);
-        cursor: move;
-    }
-
-    &.--unselected {
-        cursor: pointer;
-    }
-
-    &.--dragging {
-        opacity: 0.5;
-    }
-
-    &.--colored:not(.--selected) {
-        outline-color: var(--border-color-active) !important;
-        box-shadow: 0 0 2px 0 var(--border-color-active);
-    }
-
-    &.--error {
-        outline-color: var(--danger) !important;
-        box-shadow: 0 0 4px 0 var(--danger);
-    }
-}
-
 .dte-pdf-field-error-message {
     top: 100%;
     min-width: 100px;
     position: absolute;
-    margin-top: var(--spacing-half, 4px);
+    margin-top: var(--spacing-1, 8px);
     color: var(--danger);
     font-size: var(--typescale-small, 10px);
 }
 
-.dte-pdf-field-label {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-half, 4px);
-    background-color: var(--color-neutral-0, #ffffff);
-    border-radius: 4px;
-    padding: 1px var(--spacing-half, 4px);
-    top: -10px;
-    left: 3px;
-    font-size: var(--typescale-small, 10px);
-    line-height: 1;
-    white-space: nowrap;
-    color: var(--menu-active-color, #2270ee);
-    border-width: 1px;
-    border-style: solid;
-    border-color: inherit;
-}
-
 .dte-pdf-field-resize-handle {
     position: absolute;
     bottom: 0;
@@ -91,59 +36,14 @@
     }
 }
 
-.dte-add-field-button {
-    display: none;
-    position: absolute;
-    bottom: -20px;
-    left: -10px;
-    margin-left: 50%;
-    padding: var(--spacing-0, 0);
-    width: 20px;
-    height: 20px;
-
-    .dte-pdf-field-editor:hover & {
-        display: block;
-    }
-}
-
-.dte-pdf-field-view {
-    border: none;
-    outline: none;
-    cursor: default;
-    pointer-events: auto;
-
-    &.--fillable,
-    &.--eSign {
-        border-style: dashed;
-        border-width: 1px;
-        border-radius: 4px;
-
-        &:focus {
-            outline: 2px solid var(--border-color-active);
-        }
-    }
-}
-
 .dte-pdf-field-content {
     width: 100%;
     min-width: 0;
     min-height: 0;
     overflow: hidden;
     line-height: 1;
-
-    input[type='checkbox']:focus,
-    input[type='checkbox']:active,
-    input[type='radio']:active,
-    input[type='radio']:focus {
-        box-shadow:
-            0 0 0 2px var(--border-color-active, #2270ee) inset,
-            0 0 0 3px var(--color-neutral-0, #ffffff) inset;
-    }
 }
 
-/*
- * Printed PDF text modes (no ellipsis — hard clip like PdfSharp).
- */
 .dte-pdf-field-text--single-line {
     width: 100%;
     min-width: 0;
@@ -201,16 +101,7 @@
     }
 
     &:focus {
-        outline: 2px solid var(--border-color-active, #2270ee);
-        outline-offset: 2px;
-    }
-
-    .dte-pdf-field-editor & {
-        pointer-events: none;
-    }
-
-    .dte-pdf-field-view & {
-        pointer-events: auto;
+        outline: none;
     }
 }
 

package/src/styles/pdf-field.css

@@ -0,0 +1,111 @@
+.dte-pdf-field-container {
+    --pdf-field-color: var(--color-blue-500, #0265dc);
+    --pdf-field-color-dark: var(--color-blue-500, #0265dc);
+    --pdf-field-opacity-color: #3d95ff1f;
+
+    pointer-events: auto;
+    border-radius: 4px;
+
+    &.--edit {
+        color: var(--pdf-field-color);
+        background-color: var(--pdf-field-opacity-color);
+        outline: 1px dashed var(--pdf-field-color);
+    }
+
+    &.--view {
+        &.--fillable,
+        &.--eSign {
+            color: var(--pdf-field-color);
+            background-color: var(--pdf-field-opacity-color);
+            outline: 1px dashed var(--pdf-field-color);
+
+            &:focus-within {
+                box-shadow:
+                    0 0 0 3px white,
+                    0 0 0 5px var(--pdf-field-color-dark) !important;
+            }
+
+            input[type='checkbox'],
+            select {
+                outline: none;
+            }
+
+            &:has(input:disabled),
+            &:has(select:disabled) {
+                --pdf-field-color: #707070 !important;
+                --pdf-field-color-dark: #707070 !important;
+                --pdf-field-opacity-color: #7070701f !important;
+            }
+        }
+    }
+
+    .dte-pdf-field-label {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-half, 4px);
+        background-color: var(--color-neutral-0, #ffffff);
+        border-radius: 4px;
+        padding: 1px var(--spacing-half, 4px);
+        top: -10px;
+        left: 3px;
+        font-size: var(--typescale-small, 10px);
+        line-height: 1;
+        white-space: nowrap;
+        color: var(--pdf-field-color-dark);
+        border-width: 1px;
+        border-style: solid;
+        border-color: inherit;
+        font-weight: var(--font-weight-bold, 700);
+
+        span {
+            font-weight: var(--font-weight-regular, 400);
+        }
+    }
+
+    input::placeholder,
+    input[type='date'],
+    input[type='date']::-webkit-calendar-picker-indicator {
+        color: var(--pdf-field-color);
+    }
+
+    &.--selected {
+        box-shadow:
+            0 0 0 3px white,
+            0 0 0 5px var(--pdf-field-color-dark);
+        cursor: move;
+    }
+
+    &.--colored:not(.--selected) {
+        box-shadow: 0 0 3px 1px #616e7b;
+    }
+
+    &.--unselected {
+        cursor: pointer;
+    }
+
+    &.--dragging {
+        opacity: 0.5;
+    }
+
+    &.--error {
+        --pdf-field-color: var(--danger, #dc3545) !important;
+        --pdf-field-color-dark: var(--red, #0265dc) !important;
+        --pdf-field-opacity-color: var(--danger-opacity, #dc35451f) !important;
+    }
+
+    .dte-add-field-button {
+        display: none;
+        position: absolute;
+        bottom: -20px;
+        left: -10px;
+        margin-left: 50%;
+        padding: var(--spacing-0, 0);
+        width: 20px;
+        height: 20px;
+    }
+
+    &:hover .dte-add-field-button {
+        display: block;
+    }
+}

package/src/styles/variables.css

@@ -44,6 +44,7 @@
     /* Colors - Semantic */
     --success: #28a745;
     --danger: #dc3545;
+    --danger-opacity: #dc35451f;
     --green: #28a745;
     --red: #dc3545;
     --white: var(--color-neutral-0, #ffffff);

package/src/utils/data-model/index.ts

@@ -1,2 +1,3 @@
 export * from './extract-fields.utils';
 export * from './resolve-values.utils';
+export * from './resolve-fields-default-values';

package/src/utils/data-model/resolve-fields-default-values.ts

@@ -0,0 +1,19 @@
+import { DataModelValues, PdfField } from '../../interface/types';
+import { getTodayDateInputValue } from '../field';
+
+export const resolveFieldsDefaultValues = (fields: PdfField[]): DataModelValues => {
+    const defaultValues: Record<string, any> = {};
+    for (const field of fields) {
+        if (field.default !== undefined) {
+            if (field.default.type === 'radio') {
+                defaultValues[field.path!] = field.id;
+            } else if (field.default.type === 'today') {
+                defaultValues[field.path!] = getTodayDateInputValue();
+            } else {
+                defaultValues[field.path!] = field.default.value;
+            }
+        }
+    }
+
+    return defaultValues;
+};

package/src/utils/exposes-utils.ts

@@ -0,0 +1 @@
+export * from './data-model/resolve-fields-default-values';

package/src/utils/field/__tests__/field-background-color.utils.test.ts

@@ -1,8 +1,8 @@
-import { getFieldBackgroundColor } from '../field-background-color.utils';
+import { getFieldColor } from '../field-background-color.utils';
 
-describe('getFieldBackgroundColor', () => {
+describe('getFieldColor', () => {
     const subject = (recipient: string | undefined, recipientsColors: Record<string, string>) =>
-        getFieldBackgroundColor(recipient, recipientsColors);
+        getFieldColor(recipient, recipientsColors);
 
     test('returns color for recipient when present in map', () => {
         expect(subject('signer1', { signer1: '#ff0000', signer2: '#00ff00' })).toBe('#ff0000');

package/src/utils/field/__tests__/get-field-bounds-style.utils.test.ts

@@ -34,7 +34,6 @@ describe('getFieldBoundsStyle', () => {
             padding: 4,
             alignItems: 'flex-start',
             justifyContent: 'flex-start',
-            overflow: 'hidden',
             lineHeight: 1,
         });
     });

package/src/utils/field/__tests__/get-fillable-default-value.utils.test.ts

@@ -0,0 +1,137 @@
+import { FieldTypeEnum, type FillableDefault, type PdfField } from '../../../interface/types';
+import {
+    getFillableEffectiveValue,
+    getTodayDateInputValue,
+    isRadioDefaultSelected,
+    isRadioOptionChecked,
+    resolveFillableDefaultValue,
+} from '../get-fillable-default-value.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Field Label',
+    width: 100,
+    height: 25,
+    ...overrides,
+});
+
+describe('getTodayDateInputValue', () => {
+    test('matches the local calendar date in YYYY-MM-DD form', () => {
+        const now = new Date();
+        const expected = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(
+            now.getDate(),
+        ).padStart(2, '0')}`;
+
+        expect(getTodayDateInputValue()).toBe(expected);
+    });
+});
+
+describe('resolveFillableDefaultValue', () => {
+    test('returns undefined when there is no default (pre-existing fields)', () => {
+        expect(resolveFillableDefaultValue(undefined)).toBeUndefined();
+    });
+
+    test('resolves a text default', () => {
+        expect(resolveFillableDefaultValue({ type: 'text', value: 'hello' })).toBe('hello');
+    });
+
+    test('resolves a number default', () => {
+        expect(resolveFillableDefaultValue({ type: 'number', value: 42 })).toBe(42);
+    });
+
+    test('resolves a checkbox default', () => {
+        expect(resolveFillableDefaultValue({ type: 'checkbox', value: true })).toBe(true);
+    });
+
+    test('resolves a fixed date default as-is', () => {
+        expect(resolveFillableDefaultValue({ type: 'date', value: '2026-03-15' })).toBe('2026-03-15');
+    });
+
+    test('resolves the today sentinel to the current local date, not a frozen date', () => {
+        expect(resolveFillableDefaultValue({ type: 'today' })).toBe(getTodayDateInputValue());
+    });
+
+    test('resolves radio to undefined - selection lives on the option field, not a scalar', () => {
+        expect(resolveFillableDefaultValue({ type: 'radio' })).toBeUndefined();
+    });
+});
+
+describe('getFillableEffectiveValue', () => {
+    const field = buildField({ default: { type: 'text', value: 'default text' } });
+
+    test('with a configured default and no stored value, returns the default', () => {
+        expect(getFillableEffectiveValue(field, undefined)).toBe('default text');
+    });
+
+    test('without a configured default and no stored value, returns undefined (starts blank)', () => {
+        expect(getFillableEffectiveValue(buildField(), undefined)).toBeUndefined();
+    });
+
+    test('an explicit stored value overrides the default', () => {
+        expect(getFillableEffectiveValue(field, 'typed by recipient')).toBe('typed by recipient');
+    });
+
+    test('an explicit empty string is a real stored answer and is not re-defaulted', () => {
+        expect(getFillableEffectiveValue(field, '')).toBe('');
+    });
+
+    test('an explicit false is a real stored answer and is not re-defaulted', () => {
+        const checkboxField = buildField({
+            subType: 'checkbox',
+            default: { type: 'checkbox', value: true },
+        });
+        expect(getFillableEffectiveValue(checkboxField, false)).toBe(false);
+    });
+
+    test('an explicit 0 is a real stored answer and is not re-defaulted', () => {
+        const numberField = buildField({ subType: 'number', default: { type: 'number', value: 100 } });
+        expect(getFillableEffectiveValue(numberField, 0)).toBe(0);
+    });
+
+    test('a date field defaults to today, resolved fresh rather than frozen at authoring time', () => {
+        const dateField = buildField({ subType: 'date', default: { type: 'today' } });
+        expect(getFillableEffectiveValue(dateField, undefined)).toBe(getTodayDateInputValue());
+    });
+});
+
+describe('isRadioDefaultSelected', () => {
+    test('true when this option field carries the radio default flag', () => {
+        expect(isRadioDefaultSelected(buildField({ subType: 'radio', default: { type: 'radio' } }))).toBe(
+            true,
+        );
+    });
+
+    test('false when this option has no default', () => {
+        expect(isRadioDefaultSelected(buildField({ subType: 'radio' }))).toBe(false);
+    });
+
+    test('false for a mismatched default type (defensive: should never happen post-validation)', () => {
+        const mismatched = { type: 'text', value: 'x' } as unknown as FillableDefault;
+        expect(isRadioDefaultSelected(buildField({ subType: 'radio', default: mismatched }))).toBe(false);
+    });
+});
+
+describe('isRadioOptionChecked', () => {
+    const defaultOption = buildField({ id: 'opt-yes', subType: 'radio', default: { type: 'radio' } });
+    const otherOption = buildField({ id: 'opt-no', subType: 'radio' });
+
+    test('the flagged option checks itself when the group has no stored answer yet', () => {
+        expect(isRadioOptionChecked(defaultOption, undefined)).toBe(true);
+        expect(isRadioOptionChecked(otherOption, undefined)).toBe(false);
+    });
+
+    test('a stored selection of a different option overrides the default flag', () => {
+        // The recipient picked "opt-no" - the group's stored value is now that option's id.
+        expect(isRadioOptionChecked(defaultOption, 'opt-no')).toBe(false);
+        expect(isRadioOptionChecked(otherOption, 'opt-no')).toBe(true);
+    });
+
+    test('a stored selection confirming the defaulted option still checks it, not by the default flag', () => {
+        expect(isRadioOptionChecked(defaultOption, 'opt-yes')).toBe(true);
+    });
+});

package/src/utils/field/field-background-color.utils.ts

@@ -1,4 +1,4 @@
-export const getFieldBackgroundColor = (
+export const getFieldColor = (
     recipient: string | undefined,
     recipientsColors: Record<string, string>,
 ): string => {

package/src/utils/field/get-dropdown-field-items.utils.ts

@@ -0,0 +1,14 @@
+import { type FillableDropdownItem, type PdfField } from '../../interface/types';
+
+export const getDropdownFieldItems = (
+    field: Pick<PdfField, 'dropdownItems'>,
+): FillableDropdownItem[] => {
+    if (!Array.isArray(field.dropdownItems)) {
+        return [];
+    }
+
+    return field.dropdownItems.filter(
+        (item): item is FillableDropdownItem =>
+            !!item && typeof item.value === 'string' && typeof item.label === 'string',
+    );
+};

package/src/utils/field/get-field-bounds-style.utils.ts

@@ -4,8 +4,7 @@ import { getFieldTypographyStyle } from './get-field-typography.utils';
 
 interface FieldBoundsStyleOptions {
     pageOffset?: { left: number; top: number };
-    backgroundColor?: string;
-    borderColor?: string;
+    color?: string;
     /**
      * Current page zoom factor (1 = 100%). Field `x/y/width/height` are stored
      * relative to the unzoomed reference page width, so they must be scaled by
@@ -46,12 +45,15 @@ export const getFieldBoundsStyle = (
     field: PdfField,
     options?: FieldBoundsStyleOptions,
 ): CSSProperties => {
-    const {
-        backgroundColor,
-        borderColor,
-        pageOffset = { left: 0, top: 0 },
-        zoom = 1,
-    } = options ?? {};
+    const { color, pageOffset = { left: 0, top: 0 }, zoom = 1 } = options ?? {};
+
+    const colors = color
+        ? {
+              '--pdf-field-color': color,
+              '--pdf-field-color-dark': color,
+              '--pdf-field-opacity-color': `${color}1f`,
+          }
+        : {};
 
     return {
         position: 'absolute',
@@ -67,11 +69,9 @@ export const getFieldBoundsStyle = (
         margin: 0,
         minWidth: 0,
         minHeight: 0,
-        overflow: 'hidden',
         lineHeight: 1,
         ...getFieldTypeSpecificStyle(field),
         ...getFieldTypographyStyle(field),
-        ...(backgroundColor ? { backgroundColor } : {}),
-        ...(borderColor ? { borderColor } : {}),
+        ...colors,
     };
 };

package/src/utils/field/get-fillable-default-value.utils.ts

@@ -0,0 +1,70 @@
+import { type FillableDefault, type PdfField } from '../../interface/types';
+
+/** Today's calendar date in the browser's own local timezone, as `YYYY-MM-DD`. */
+export const getTodayDateInputValue = (): string => {
+    const today = new Date();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${today.getFullYear()}-${month}-${day}`;
+};
+
+/**
+ * Resolves a `FillableDefault` to the scalar it should display. `today` resolves dynamically to
+ * the current local date every time this is called - it is never frozen at authoring time.
+ * `radio` has no scalar of its own (selection is decided per sibling option field, not a value
+ * here) and resolves to `undefined`, same as no default at all.
+ */
+export const resolveFillableDefaultValue = (
+    fillableDefault: FillableDefault | undefined,
+): string | number | boolean | undefined => {
+    switch (fillableDefault?.type) {
+        case 'text':
+        case 'number':
+        case 'checkbox':
+        case 'date':
+        case 'dropdown':
+            return fillableDefault.value;
+        case 'today':
+            return getTodayDateInputValue();
+        default:
+            return undefined;
+    }
+};
+
+/**
+ * Merges a stored value with the field's configured default for *display* only: a stored value -
+ * including an explicit empty string, `false`, or `0` - always wins, since those are real answers
+ * the recipient already gave. Only a path that is genuinely absent from the data object (`storedValue
+ * === undefined`) falls back to the default. `??` already has exactly this semantic (it only
+ * falls through on `null`/`undefined`), so this is intentionally not a truthiness check.
+ */
+export const getFillableEffectiveValue = (
+    field: Pick<PdfField, 'default'>,
+    /*
+     * matches DataModelValues (Record<string, any>): a stored answer's runtime type varies by
+     * fillable subtype (string/number/boolean), same looseness callers already had via
+     * `data?.[field.path]`.
+     */
+    storedValue: any,
+): any => {
+    return storedValue ?? resolveFillableDefaultValue(field.default);
+};
+
+/** Whether this specific radio option field is the group's pre-selected default. */
+export const isRadioDefaultSelected = (field: Pick<PdfField, 'default'>): boolean => {
+    return field.default?.type === 'radio';
+};
+
+/**
+ * Whether this radio option should render checked: a stored selection for the group (any option's
+ * id, resolved by the caller) always wins, even if it picked a *different* option than the
+ * default - that is what "override" means for a radio group. Only when the group's path is
+ * genuinely unanswered yet (`resolvedValue === undefined`) does this option's own default flag
+ * decide it.
+ */
+export const isRadioOptionChecked = (
+    field: Pick<PdfField, 'id' | 'default'>,
+    resolvedValue: unknown,
+): boolean => {
+    return resolvedValue !== undefined ? resolvedValue === field.id : isRadioDefaultSelected(field);
+};

package/src/utils/field/index.ts

@@ -11,3 +11,5 @@ export * from './get-field-text-clip.utils';
 export * from './get-field-type-option.utils';
 export * from './get-field-typography.utils';
 export * from './get-navigable-fields.utils';
+export * from './get-dropdown-field-items.utils';
+export * from './get-fillable-default-value.utils';

package/src/utils/recipients/map-colors.ts

@@ -1,29 +1,29 @@
 import { type RecipientInfo } from '../../interface/types';
 
 const colors = [
-    '#1F77B41f',
-    '#FF7F0E1f',
-    '#2CA02C1f',
-    '#9467BD1f',
-    '#8C564B1f',
-    '#E377C21f',
-    '#7F7F7F1f',
-    '#BCBD221f',
-    '#17BECF1f',
-    '#D627281f',
-    '#98DF8A1f',
-    '#FFBB781f',
-    '#C5B0D51f',
-    '#C49C941f',
-    '#F7B6D21f',
-    '#C7C7C71f',
-    '#DBDB8D1f',
-    '#9EDAE51f',
-    '#E5E5E51f',
-    '#393B791f',
-    '#5254A31f',
-    '#6B6EBD1f',
-    '#9C9EDA1f',
+    '#1F77B4',
+    '#FF7F0E',
+    '#2CA02C',
+    '#9467BD',
+    '#8C564B',
+    '#E377C2',
+    '#7F7F7F',
+    '#BCBD22',
+    '#17BECF',
+    '#D62728',
+    '#98DF8A',
+    '#FFBB78',
+    '#C5B0D5',
+    '#C49C94',
+    '#F7B6D2',
+    '#C7C7C7',
+    '#DBDB8D',
+    '#9EDAE5',
+    '#E5E5E5',
+    '#393B79',
+    '#5254A3',
+    '#6B6EBD',
+    '#9C9EDA',
 ];
 
 export const mapColorsToRecipients = (recipients?: RecipientInfo[]): Record<string, string> => {