form-preview-df/src/types/field-config.model.ts

Resusable Form Preview Components

import { ELabelAlignment } from './form-builder-schema.model';

export interface IFieldConfig {
  key: string;
  label: string;
  type:
    | 'text'
    | 'number'
    | 'boolean'
    | 'select'
    | 'checkbox'
    | 'radio'
    | 'date'
    | 'date-time'
    | 'email'
    | 'textarea'
    | 'range'
    | 'signature'
    | 'options'
    | 'dynamic-columns';
  defaultValue?: string | number | string[] | boolean;
  placeholder?: string;
  options?: { label: string; value: string }[];
  validation?: {
    required?: boolean;
    minLength?: number;
    maxLength?: number;
    pattern?: string;
    readonly?: boolean;
    message?: string;
    minCheckedNumber?: number;
    maxCheckedNumber?: number;
    minDate?: string;
    maxDate?: string;
  };
  min?: number;
  max?: number;
  step?: number;
  description?: string;
  helpText?: string;
}

export interface ITabConfig {
  id: string;
  label: string;
  fields: IFieldConfig[];
  description?: string;
}

export interface IComponentConfig {
  type: string;
  tabs: ITabConfig[];
  category?: 'Basic' | 'Advanced' | 'Layout' | 'Custom';
  description?: string;
}

// Common field configurations that can be reused
export const READONLY_FIELD: IFieldConfig = {
  key: 'readonly',
  label: 'Read-Only',
  type: 'boolean',
  defaultValue: false,
  description: 'Make this field read-only',
};

export const REQUIRED_FIELD: IFieldConfig = {
  key: 'required',
  label: 'Required',
  type: 'boolean',
  defaultValue: false,
  description: 'Make this field mandatory',
};

export const LABEL_ALIGNMENT_FIELD: IFieldConfig = {
  key: 'labelAlignment',
  label: 'Label Alignment',
  type: 'select',
  options: [
    { label: 'Top', value: ELabelAlignment.Top },
    { label: 'Left', value: ELabelAlignment.Left },
  ],
  defaultValue: ELabelAlignment.Top,
};

export const CUSTOM_VALIDATION_MESSAGE_FIELD: IFieldConfig = {
  key: 'customValidationMessage',
  label: 'Custom Validation Message',
  type: 'text',
  defaultValue: 'Please enter a valid value',
  placeholder: 'Enter custom validation message',
};

export const LABEL_FIELD: IFieldConfig = {
  key: 'label',
  label: 'Label',
  type: 'text',
  validation: { required: true },
  placeholder: 'Enter field label',
};

export const PLACEHOLDER_FIELD: IFieldConfig = {
  key: 'placeholder',
  label: 'Placeholder',
  type: 'text',
  placeholder: 'Enter placeholder text',
};

export const DEFAULT_VALUE_FIELD: IFieldConfig = {
  key: 'defaultValue',
  label: 'Default Value',
  type: 'text',
  placeholder: 'Enter default value',
};

export const DESCRIPTION_FIELD: IFieldConfig = {
  key: 'description',
  label: 'Description',
  type: 'textarea',
  placeholder: 'Enter field description',
};

export const HELP_TEXT_FIELD: IFieldConfig = {
  key: 'helpText',
  label: 'Help Text',
  type: 'text',
  placeholder: 'Enter help text for users',
};

export const COMMENTS_FIELD: IFieldConfig = {
  key: 'comments',
  label: 'Comments',
  type: 'text',
  placeholder: 'Enter additional comments',
};

export const INLINE_LAYOUT_FIELD: IFieldConfig = {
  key: 'inlineLayout',
  label: 'Inline Layout',
  type: 'boolean',
  defaultValue: false,
  helpText: 'Display options in a horizontal row',
};

export const ROWS_FIELD: IFieldConfig = {
  key: 'rows',
  label: 'Rows',
  type: 'number',
  defaultValue: 3,
  min: 1,
  max: 20,
  placeholder: 'Number of visible text lines',
};

export const DECIMAL_PLACES_FIELD: IFieldConfig = {
  key: 'decimalPlaces',
  label: 'Decimal Places',
  type: 'range',
  defaultValue: 0,
  min: 0,
  max: 10,
  step: 1,
  helpText: 'Number of decimal places to display',
};

export const INTEGER_ONLY_FIELD: IFieldConfig = {
  key: 'integerOnly',
  label: 'Integer Only',
  type: 'boolean',
  defaultValue: false,
  helpText: 'Allow only whole numbers',
};

export const MIN_CHECKED_NUMBER_FIELD: IFieldConfig = {
  key: 'minCheckedNumber',
  label: 'Min Checked Number',
  type: 'number',
  defaultValue: 0,
  min: 0,
  helpText: 'Minimum number of options that must be selected',
};

export const MAX_CHECKED_NUMBER_FIELD: IFieldConfig = {
  key: 'maxCheckedNumber',
  label: 'Max Checked Number',
  type: 'number',
  defaultValue: 10,
  min: 1,
  helpText: 'Maximum number of options that can be selected',
};

export const TIME_FORMAT_FIELD: IFieldConfig = {
  key: 'timeFormat',
  label: 'Time Format',
  type: 'select',
  options: [
    { label: '12-hour (AM/PM)', value: '12hr' },
    { label: '24-hour', value: '24hr' },
  ],
  defaultValue: '24hr',
};

export const HEIGHT_FIELD: IFieldConfig = {
  key: 'height',
  label: 'Height',
  type: 'number',
  defaultValue: 200,
  min: 50,
  max: 500,
  placeholder: 'Height in pixels',
};

export const PEN_COLOR_FIELD: IFieldConfig = {
  key: 'penColor',
  label: 'Pen Color',
  type: 'text',
  defaultValue: '#000000',
  placeholder: '#000000',
  helpText: 'Color for the signature pen',
};

export const BACKGROUND_COLOR_FIELD: IFieldConfig = {
  key: 'backgroundColor',
  label: 'Background Color',
  type: 'text',
  defaultValue: '#ffffff',
  placeholder: '#ffffff',
  helpText: 'Background color for the signature area',
};