@servicetitan/dte-pdf-editor 1.42.0 → 1.43.0

package/src/styles/formula-modal.css

@@ -25,6 +25,52 @@
     flex-direction: column;
     min-height: 0;
     overflow-y: auto;
+    transition:
+        background-color 0.28s ease,
+        border-color 0.28s ease,
+        box-shadow 0.28s ease;
+}
+
+.dte-formula-sidebar-slide-outer {
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+}
+
+.dte-formula-sidebar-slide-track {
+    align-items: stretch;
+    display: flex;
+    flex-direction: row;
+    min-height: min-content;
+    width: 200%;
+    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+}
+
+.dte-formula-sidebar-slide-track.--detail {
+    transform: translateX(-50%);
+}
+
+.dte-formula-sidebar-slide-panel {
+    box-sizing: border-box;
+    display: flex;
+    flex: 0 0 50%;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    min-height: min-content;
+    padding-right: var(--spacing-1);
+    width: 50%;
+}
+
+.dte-formula-sidebar-slide-panel.--form-fields {
+    flex-shrink: 0;
+    gap: 0;
+}
+
+.dte-formula-sidebar-forms-heading {
+    flex-shrink: 0;
 }
 
 .dte-formula-field-list {
@@ -36,8 +82,16 @@
 .dte-formula-field-list-item {
     padding: var(--spacing-1) var(--spacing-2);
     cursor: pointer;
-    border-left: 3px solid transparent;
-    border-bottom: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
+    margin-block: var(--spacing-1);
+    border-radius: var(--spacing-1);
+    font-size: var(--typescale-1, 14px);
+}
+
+.dte-text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .dte-formula-field-list-item:hover,
@@ -46,7 +100,7 @@
 }
 
 .dte-formula-field-list-item.--selected {
-    border-left-color: var(--border-color-active, #0265dc);
+    border-color: var(--border-color-active-dark, #2d2e31);
 }
 
 .dte-formula-editor {
@@ -79,15 +133,17 @@
 .dte-formula-chip {
     display: inline-flex;
     align-items: center;
-    padding: 2px 6px;
+    padding: 6px 12px;
     margin: var(--spacing-0) 2px;
-    background: var(--menu-active-color, #0265dc);
-    border-radius: var(--spacing-half, 4px);
-    color: var(--white);
+    background: var(--menu-active-bg-light-color, #e0f2ff);
+    border: 1px solid var(--border-color-active);
+    border-radius: 20px;
+    color: var(--black, #000000);
     gap: var(--spacing-half);
     margin-bottom: var(--spacing-half);
     cursor: grab;
-    font-weight: 500;
+    font-weight: normal;
+    font-size: var(--typescale-0);
 }
 
 .dte-formula-chip-label {
@@ -98,6 +154,8 @@
     cursor: pointer;
     opacity: 0.9;
     padding: var(--spacing-0) 2px;
+    font-size: var(--typescale-3);
+    font-weight: var(--font-weight-semibold);
     line-height: 1;
 }
 

package/src/styles/variables.css

@@ -2,6 +2,7 @@
 
 .dte-pdf-editor {
     --menu-active-color: var(--color-blue-400, #2270ee);
+    --menu-active-bg-light-color: var(--color-blue-100, #e0f2ff);
     --menu-hover-color: var(--color-neutral-100, #606162);
 
     /* Typography */
@@ -13,6 +14,7 @@
     --spacing-half: 4px;
     --spacing-1: 8px;
     --spacing-2: 16px;
+    --spacing-3: 24px;
 
     /* Colors - Neutral */
     --color-neutral-0: var(--color-neutral-0, #ffffff);
@@ -31,11 +33,13 @@
     --green: #28a745;
     --red: #dc3545;
     --white: var(--color-neutral-0, #ffffff);
+    --black: #000000;
 
     /* Border colors*/
     --border-color: #e0e0e0;
     --border-color-hover: #bdbdbd;
     --border-color-active: var(--color-blue-400, #2270ee);
+    --border-color-active-dark: var(--color-neutral-300, #2d2e31);
 
     /* Layout sizes */
     --layout-sidebar-menu-width: 85px;

package/src/utils/formula/expression.utils.ts

@@ -1,4 +1,10 @@
-import { FormulaToken, StructuredFormula } from '../../interface/types';
+import {
+    FormFieldsByFormIdI,
+    FormInfo,
+    FormulaToken,
+    StructuredFormula,
+} from '../../interface/types';
+import { tryBuildFormFieldFormulaSnapshot } from './form-fields.utils';
 
 /**
  * Convert StructuredFormula tokens to an editable expression string.
@@ -61,6 +67,10 @@ export function parseExpression(
     expression: string,
     validPaths: Set<string>,
     knownDateFields?: Set<string>,
+    formContext?: {
+        forms: FormInfo[];
+        formFieldsByFormId: FormFieldsByFormIdI;
+    },
 ): FormulaToken[] {
     const parts = tokenizeExpression(expression).filter(
         p => p.type !== 'text' || p.value.trim() !== '',
@@ -74,11 +84,19 @@ export function parseExpression(
         if (part.type === 'field') {
             if (validPaths.has(part.value)) {
                 const fieldType = knownDateFields?.has(part.value) ? 'date' : 'number';
-                tokens.push({
-                    type: 'field',
-                    path: part.value,
-                    fieldType,
-                });
+                const snapshot =
+                    formContext && formContext.forms.length > 0
+                        ? tryBuildFormFieldFormulaSnapshot(
+                              part.value,
+                              formContext.forms,
+                              formContext.formFieldsByFormId,
+                          )
+                        : undefined;
+                tokens.push(
+                    snapshot
+                        ? { type: 'field', path: part.value, fieldType, formSnapshot: snapshot }
+                        : { type: 'field', path: part.value, fieldType },
+                );
             }
             continue;
         }

package/src/utils/formula/form-fields.utils.ts

@@ -0,0 +1,165 @@
+import {
+    DataPointOption,
+    FieldTypeEnum,
+    FieldTypeOption,
+    FormFieldInfo,
+    FormFieldsByFormIdI,
+    FormFieldType,
+    FormInfo,
+    FormulaFieldFormSnapshot,
+    SchemaFieldType,
+} from '../../interface/types';
+
+export const FORM_FIELD_TYPES_FOR_CALC = ['date', 'number'] as FormFieldType[];
+
+/** Root key and path prefix for form submission field references (matches Unlayer/tools). */
+export const SUBMISSION_FIELDS_PATH_PREFIX = '__submission_fields';
+
+export const normalizeFormFieldIdForPath = (fieldId: string): string => fieldId.replaceAll('-', '');
+
+export const buildFormFieldKey = (formId: number, fieldId: string): string =>
+    `${SUBMISSION_FIELDS_PATH_PREFIX}.${formId}.${normalizeFormFieldIdForPath(fieldId)}`;
+
+const SUBMISSION_FIELDS_DOT_PATH_RE = /^__submission_fields\.(\d+)\.([A-Za-z0-9]+)$/;
+const LEGACY_SUBMISSION_FIELD_SINGULAR_RE = /^__submission_field\.(\d+)\.(.+)$/;
+
+export const parseFormFieldKey = (key: string): { formId: number; fieldId: string } | null => {
+    let match = SUBMISSION_FIELDS_DOT_PATH_RE.exec(key);
+    if (match) {
+        return { formId: Number(match[1]), fieldId: match[2] };
+    }
+    match = LEGACY_SUBMISSION_FIELD_SINGULAR_RE.exec(key);
+    if (match) {
+        return { formId: Number(match[1]), fieldId: normalizeFormFieldIdForPath(match[2]) };
+    }
+    const legacyMatch = key.match(/^__form_(\d+)_([a-f0-9]+)$/i);
+    if (legacyMatch) {
+        return { formId: Number(legacyMatch[1]), fieldId: legacyMatch[2] };
+    }
+    return null;
+};
+
+export const buildFormFieldSnapshot = (
+    formId: number,
+    formName: string,
+    field: FormFieldInfo,
+): FormulaFieldFormSnapshot => ({
+    formId,
+    fieldId: field.id,
+    formName,
+    fieldName: field.header,
+    fieldType: field.itemType,
+});
+
+export const tryBuildFormFieldFormulaSnapshot = (
+    path: string,
+    forms: FormInfo[],
+    formFieldsByFormId: FormFieldsByFormIdI,
+): FormulaFieldFormSnapshot | undefined => {
+    const parsed = parseFormFieldKey(path);
+    if (!parsed) {
+        return undefined;
+    }
+    const form = forms.find(f => f.id === parsed.formId);
+    const fields = formFieldsByFormId[parsed.formId];
+    if (!form || !fields?.length) {
+        return undefined;
+    }
+    const field = fields.find(f => normalizeFormFieldIdForPath(f.id) === parsed.fieldId);
+    if (!field) {
+        return undefined;
+    }
+    return buildFormFieldSnapshot(parsed.formId, form.name, field);
+};
+
+export const isFormFieldCalculationType = (itemType: FormFieldType): itemType is SchemaFieldType =>
+    FORM_FIELD_TYPES_FOR_CALC.includes(itemType);
+
+export const formFieldInfosToCalculationOptions = (
+    formId: number,
+    fields: FormFieldInfo[],
+    formName: string,
+): FieldTypeOption[] =>
+    fields
+        .filter((f): f is FormFieldInfo & { itemType: SchemaFieldType } =>
+            isFormFieldCalculationType(f.itemType),
+        )
+        .map(field => ({
+            type: FieldTypeEnum.forms,
+            label: field.header,
+            path: buildFormFieldKey(formId, field.id),
+            fieldType: field.itemType,
+            formSnapshot: buildFormFieldSnapshot(formId, formName, field),
+        }));
+
+export const formFieldInfoToFieldTypeOption = (
+    formId: number,
+    field: FormFieldInfo,
+    formName: string,
+): FieldTypeOption => ({
+    type: FieldTypeEnum.forms,
+    label: field.header,
+    path: buildFormFieldKey(formId, field.id),
+    formSnapshot: buildFormFieldSnapshot(formId, formName, field),
+    ...(isFormFieldCalculationType(field.itemType) ? { fieldType: field.itemType } : {}),
+});
+
+export const formFieldToDisplayConditionDataPointOption = (
+    form: FormInfo,
+    field: FormFieldInfo,
+): DataPointOption => ({
+    fullKey: buildFormFieldKey(form.id, field.id),
+    title: field.header,
+    fieldType: field.itemType === 'number' ? 'number' : 'string',
+    formSnapshot: buildFormFieldSnapshot(form.id, form.name, field),
+});
+
+export const getDisplayConditionFieldTypeForKey = (
+    dataPointKey: string,
+    mergeTagOptions: DataPointOption[],
+    fillableOptions: DataPointOption[],
+    formFieldsByFormId: FormFieldsByFormIdI,
+): 'number' | 'string' => {
+    const fromLists = [...mergeTagOptions, ...fillableOptions].find(
+        o => o.fullKey === dataPointKey,
+    );
+    if (fromLists) {
+        return fromLists.fieldType;
+    }
+    const parsed = parseFormFieldKey(dataPointKey);
+    if (!parsed) {
+        return 'string';
+    }
+    const fields = formFieldsByFormId[parsed.formId];
+    const field = fields?.find(f => normalizeFormFieldIdForPath(f.id) === parsed.fieldId);
+    if (!field) {
+        return 'string';
+    }
+    return field.itemType === 'number' ? 'number' : 'string';
+};
+
+/** Subset of {@link FieldTypeEnum} used as display-condition row “Source”. */
+export type DisplayConditionSourceKind = Extract<
+    FieldTypeEnum,
+    FieldTypeEnum.dataModel | FieldTypeEnum.fillable | FieldTypeEnum.forms
+>;
+
+export const inferDisplayConditionSourceKind = (
+    dataPointKey: string,
+    mergeTagOptions: DataPointOption[],
+    fillableOptions: DataPointOption[],
+): DisplayConditionSourceKind | null => {
+    if (!dataPointKey) {
+        return null;
+    }
+    if (parseFormFieldKey(dataPointKey)) {
+        return FieldTypeEnum.forms;
+    }
+    if (fillableOptions.some(o => o.fullKey === dataPointKey)) {
+        return FieldTypeEnum.fillable;
+    }
+    if (mergeTagOptions.some(o => o.fullKey === dataPointKey)) {
+        return FieldTypeEnum.dataModel;
+    }
+    return null;
+};

package/src/utils/formula/index.ts

@@ -6,3 +6,4 @@ export * from './format-calculated-result.utils';
 export * from './formula-types';
 export * from './render-formula.utils';
 export * from './validate-formula.utils';
+export * from './form-fields.utils';