df-ae-forms-package
Version:
A comprehensive React form preview component library with form controls, validation, and responsive design for Angular/Ionic integration
959 lines (931 loc) • 31.6 kB
TypeScript
import React from 'react';
interface ICondition {
id: string;
when: string;
operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual';
value: string | number | boolean;
}
interface IConditionalLogic {
action: 'show' | 'hide' | 'always';
when: 'all' | 'any';
conditions: ICondition[];
}
interface IFormControlChange {
id: string;
value: any;
isValid?: boolean;
errors?: Record<string, any>;
comments?: string;
}
interface IFormValidationErrors {
[key: string]: any;
}
type TInputComponentType = 'text' | 'number' | 'email' | 'password' | 'url' | 'tel';
interface IBaseFormComponent {
id: string;
_id: string;
name: string;
category: string;
basic: {
label: string;
value: string;
defaultValue: string;
placeholder: string;
options: any[];
description?: string;
collapsed?: boolean;
showLabel?: boolean;
};
validation: {
required: boolean;
readonly: boolean;
customValidationMessage: string;
minLength?: number;
maxLength?: number;
min?: number;
max?: number;
pattern?: string;
customValidation?: string;
minDate?: string;
maxDate?: string;
};
styles: {
labelAlignment: 'left' | 'top';
width?: number;
height?: number;
minWidth?: number;
maxWidth?: number;
minHeight?: number;
maxHeight?: number;
column?: number;
fontSize?: string;
color?: string;
backgroundColor?: string;
borderColor?: string;
borderWidth?: string;
borderRadius?: string;
padding?: string;
margin?: string;
};
position: number;
options: any[];
conditional: IConditionalLogic;
}
interface ITextInputComponent extends IBaseFormComponent {
name: 'text-input';
validation: IBaseFormComponent['validation'] & {
minLength?: number;
maxLength?: number;
pattern?: string;
};
}
interface INumberInputComponent extends IBaseFormComponent {
name: 'number-input';
validation: IBaseFormComponent['validation'] & {
min?: number;
max?: number;
step?: number;
lowerLimit?: number;
upperLimit?: number;
};
}
interface IEmailInputComponent extends IBaseFormComponent {
name: 'email-input';
validation: IBaseFormComponent['validation'] & {
pattern?: string;
};
}
interface ITextareaComponent extends IBaseFormComponent {
name: 'textarea';
validation: IBaseFormComponent['validation'] & {
minLength?: number;
maxLength?: number;
rows?: number;
};
}
interface ISelectComponent extends IBaseFormComponent {
name: 'select';
options: Array<{
label: string;
value: string;
disabled?: boolean;
}>;
validation: IBaseFormComponent['validation'] & {
multiple?: boolean;
};
basic: IBaseFormComponent['basic'] & {
comments?: string;
};
}
interface IRadioComponent extends IBaseFormComponent {
name: 'radio';
options: Array<{
label: string;
value: string;
disabled?: boolean;
}>;
validation: IBaseFormComponent['validation'];
basic: IBaseFormComponent['basic'] & {
inlineLayout?: boolean;
comments?: string;
};
}
interface ICheckboxComponent extends IBaseFormComponent {
name: 'checkbox';
options: Array<{
label: string;
value: string;
disabled?: boolean;
}>;
validation: IBaseFormComponent['validation'] & {
multiple?: boolean;
};
basic: IBaseFormComponent['basic'] & {
inlineLayout?: boolean;
comments?: string;
};
}
interface ISegmentComponent extends IBaseFormComponent {
name: 'segment';
options: Array<{
label: string;
value: string;
disabled?: boolean;
}>;
validation: IBaseFormComponent['validation'];
basic: IBaseFormComponent['basic'] & {
inlineLayout?: boolean;
comments?: string;
};
}
interface IDateComponent extends IBaseFormComponent {
name: 'date';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IDatePickerComponent extends IBaseFormComponent {
name: 'date-picker';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IDateTimePickerComponent extends IBaseFormComponent {
name: 'datetime-picker';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IFileComponent extends IBaseFormComponent {
name: 'file';
validation: IBaseFormComponent['validation'] & {
accept?: string;
maxSize?: number;
multiple?: boolean;
};
}
interface IFileUploadComponent extends IBaseFormComponent {
name: 'file-upload';
validation: IBaseFormComponent['validation'] & {
accept?: string;
maxSize?: number;
multiple?: boolean;
maxFiles?: number;
allowedTypes?: string[];
};
}
interface ILocationComponent extends IBaseFormComponent {
name: 'location';
validation: IBaseFormComponent['validation'] & {
enableHighAccuracy?: boolean;
timeout?: number;
maximumAge?: number;
};
}
interface IHeadingComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
name: 'heading';
basic: {
label: string;
level?: 1 | 2 | 3 | 4 | 5 | 6;
};
styles?: {
fontSize?: string;
color?: string;
textAlign?: 'left' | 'center' | 'right';
};
}
interface IDividerComponent extends Omit<IBaseFormComponent, 'styles'> {
name: 'divider';
styles?: {
color?: string;
thickness?: string;
style?: 'solid' | 'dashed' | 'dotted';
};
}
interface IInstructionComponent extends Omit<IBaseFormComponent, 'basic' | 'validation'> {
name: 'instructions';
basic: {
label?: string;
instructions: string[];
value?: string;
defaultValue?: string;
placeholder?: string;
options?: any[];
description?: string;
collapsed?: boolean;
showLabel?: boolean;
};
validation: IBaseFormComponent['validation'] & {
listStyle?: 'none' | 'numbers' | 'bullets' | 'alpha';
};
}
interface ISignatureComponent extends IBaseFormComponent {
name: 'signature';
validation: IBaseFormComponent['validation'] & {
required?: boolean;
};
}
interface ISectionComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
name: 'section';
basic: {
label: string;
description: string;
collapsed: boolean;
};
children: FormComponentType[];
styles: IBaseFormComponent['styles'] & {
backgroundColor: string;
borderColor: string;
borderWidth: string;
borderRadius: string;
padding: string;
margin: string;
};
}
interface ITableComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
name: 'table';
basic: {
label: string;
description: string;
rows: number;
columns: number;
};
table: {
rows: number;
columns: number;
displayAsTable: boolean;
columnNames: string;
showColumns: boolean;
};
cells: TableCell[][];
styles: IBaseFormComponent['styles'] & {
backgroundColor: string;
borderColor: string;
borderWidth: string;
borderRadius: string;
padding: string;
margin: string;
headerBackgroundColor?: string;
headerTextColor?: string;
};
}
interface IDataGridComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
name: 'datagrid';
basic: {
label: string;
description: string;
collapsed?: boolean;
};
datagrid: {
maxEntries: number;
minEntries: number;
allowAddRemoveEntries: boolean;
addAnotherText: string;
removeText: string;
displayAsGrid: boolean;
};
templateComponents: FormComponentType[];
entries: DataGridEntry[];
styles: IBaseFormComponent['styles'] & {
backgroundColor: string;
borderColor: string;
borderWidth: string;
borderRadius: string;
padding: string;
margin: string;
};
}
interface DataGridEntry {
id: string;
index: number;
components: FormComponentType[];
styles?: {
backgroundColor?: string;
borderColor?: string;
padding?: string;
minHeight?: string;
verticalAlign?: 'top' | 'middle' | 'bottom';
};
}
interface TableCell {
id: string;
row: number;
column: number;
components: FormComponentType[];
styles?: {
backgroundColor?: string;
borderColor?: string;
padding?: string;
minHeight?: string;
verticalAlign?: 'top' | 'middle' | 'bottom';
};
}
type FormComponentType = ITextInputComponent | INumberInputComponent | IEmailInputComponent | ITextareaComponent | ISelectComponent | IRadioComponent | ICheckboxComponent | ISegmentComponent | IDateComponent | IDatePickerComponent | IDateTimePickerComponent | IFileComponent | IFileUploadComponent | ILocationComponent | IHeadingComponent | IDividerComponent | IInstructionComponent | ISignatureComponent | ISectionComponent | ITableComponent | IDataGridComponent;
interface FormComponentProps {
id: string;
properties: FormComponentType;
validationErrors?: IFormValidationErrors;
formValue?: any;
inputType?: TInputComponentType;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
onSelect?: () => void;
isSelected?: boolean;
className?: string;
hideLabel?: boolean;
}
interface ErrorMessageProps {
validationErrors: IFormValidationErrors;
fieldId: string;
control?: any;
inputType?: TInputComponentType;
touchedFields: Record<string, boolean>;
formSubmitted: boolean;
properties: FormComponentType;
localValidation?: {
isValid: boolean;
errors: Record<string, any>;
};
isTouched?: boolean;
mode?: 'edit' | 'preview' | 'test';
}
interface ValidationRule {
type: 'required' | 'minLength' | 'maxLength' | 'min' | 'max' | 'lowerLimit' | 'upperLimit' | 'pattern' | 'email' | 'custom';
value?: any;
message?: string;
}
interface ValidationResult {
isValid: boolean;
errors: Record<string, string>;
}
type DeviceType = 'desktop' | 'tablet' | 'mobile';
interface DfFormPreviewProps {
formComponents: FormComponentType[];
formData?: any;
currentDevice?: DeviceType;
isPreviewMode?: boolean;
initialFormData?: FormComponentType[];
onSubmit?: (formData: FormComponentType[]) => void;
onFormDataChange?: (formData: FormComponentType[]) => void;
formTitle?: string;
formDescription?: string;
formTemplateId?: string;
onComponentSelect?: (component: FormComponentType) => void;
onComponentDelete?: (component: FormComponentType, event: React.MouseEvent) => void;
onComponentEdit?: (component: FormComponentType) => void;
onComponentUpdate?: (componentId: string, updates: Partial<FormComponentType>) => void;
selectedComponent?: FormComponentType | null;
}
declare const DfFormPreview: React.FC<DfFormPreviewProps>;
interface DfFormInputProps {
id: string;
properties: ITextInputComponent | INumberInputComponent | IEmailInputComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
inputType?: TInputComponentType;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
formTemplateId?: string;
onThresholdIssueRaised?: (conditionId: string) => void;
raisedThresholdIssues?: Set<string>;
}
declare const DfFormInput: React.FC<DfFormInputProps>;
interface DfFormTextareaProps {
id: string;
properties: ITextareaComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormTextarea: React.FC<DfFormTextareaProps>;
interface DfFormSelectProps {
id: string;
properties: ISelectComponent;
validationErrors?: IFormValidationErrors;
formValue?: string | string[];
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormSelect: React.FC<DfFormSelectProps>;
interface DfFormCheckboxProps {
id: string;
properties: ICheckboxComponent;
validationErrors?: IFormValidationErrors;
formValue?: string[];
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormCheckbox: React.FC<DfFormCheckboxProps>;
interface DfFormRadioProps {
id: string;
properties: IRadioComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormRadio: React.FC<DfFormRadioProps>;
interface DfFormSegmentProps {
id: string;
properties: ISegmentComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormSegment: React.FC<DfFormSegmentProps>;
interface DfFormDateTimeProps {
id: string;
properties: IDateComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormDateTime: React.FC<DfFormDateTimeProps>;
interface DfFormSignatureProps {
id: string;
properties: ISignatureComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormSignature: React.FC<DfFormSignatureProps>;
interface IFileDataObject {
name?: string;
fileName?: string;
type?: string;
fileType?: string;
mimeType?: string;
size?: number;
fileSize?: number;
url?: string;
path?: string;
data?: string;
}
interface DfFormFileUploadProps {
id: string;
properties: IFileUploadComponent;
validationErrors?: IFormValidationErrors;
formValue?: File[] | FileList | IFileDataObject[] | string[] | null;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormFileUpload: React.FC<DfFormFileUploadProps>;
interface DfFormLocationProps {
id: string;
properties: ILocationComponent;
validationErrors?: IFormValidationErrors;
formValue?: ILocationData | null;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
interface ILocationData {
latitude: number;
longitude: number;
accuracy?: number;
timestamp?: number;
address?: string;
placeName?: string;
city?: string;
country?: string;
}
declare const DfFormLocation: React.FC<DfFormLocationProps>;
interface DfFormHeadingProps {
id: string;
properties: IHeadingComponent;
mode?: 'edit' | 'preview' | 'test';
className?: string;
hideLabel?: boolean;
}
declare const DfFormHeading: React.FC<DfFormHeadingProps>;
interface DfFormInstructionProps {
id: string;
properties: IInstructionComponent;
mode?: 'edit' | 'preview' | 'test';
formValue?: any;
onValueChange?: (change: IFormControlChange) => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormInstruction: React.FC<DfFormInstructionProps>;
declare const DfFormErrorMsg: React.FC<ErrorMessageProps>;
interface DfFormCommentsProps {
comment?: string;
onSave?: (comment: string) => void;
placeholder?: string;
className?: string;
disabled?: boolean;
}
declare const DfFormComments: React.FC<DfFormCommentsProps>;
interface DfFormSectionProps {
id: string;
properties: ISectionComponent;
validationErrors?: Record<string, any>;
formValue?: any;
formData?: Record<string, any>;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
onSelect?: () => void;
isSelected?: boolean;
className?: string;
onSectionSelect?: (section: ISectionComponent) => void;
onSectionDelete?: (sectionId: string) => void;
onChildrenChange?: (children: FormComponentType[]) => void;
onChildSelect?: (child: FormComponentType) => void;
onChildDelete?: (childId: string) => void;
selectedChild?: FormComponentType | null;
renderFormComponent?: (field: FormComponentType) => React.ReactNode;
formTemplateId?: string;
onThresholdActionCompletion?: (conditionId: string, action: 'notes' | 'attachments' | 'email', completed: boolean) => void;
onThresholdIssueRaised?: (conditionId: string) => void;
onNotesChange?: (componentId: string, notes: string) => void;
onAttachmentChange?: (componentId: string, attachments: File[] | null) => void;
}
declare const DfFormSection: React.FC<DfFormSectionProps>;
interface DfFormDataGridProps {
id: string;
properties: IDataGridComponent;
validationErrors?: Record<string, any>;
formValue?: any;
formData?: Record<string, any>;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
onSelect?: () => void;
isSelected?: boolean;
className?: string;
onDataGridSelect?: (dataGrid: IDataGridComponent) => void;
onDataGridDelete?: (dataGridId: string) => void;
onEntryChange?: (entryIndex: number, components: FormComponentType[]) => void;
onComponentSelect?: (component: FormComponentType) => void;
onComponentDelete?: (component: FormComponentType, event: React.MouseEvent) => void;
onComponentEdit?: (component: FormComponentType) => void;
onComponentUpdate?: (componentId: string, updates: Partial<FormComponentType>) => void;
selectedComponent?: FormComponentType | null;
renderFormComponent?: (field: FormComponentType, hideLabel?: boolean) => React.ReactNode;
onDataGridUpdate?: (dataGridId: string, updates: Partial<IDataGridComponent>) => void;
onEntryAdd?: () => void;
onEntryRemove?: (entryIndex: number) => void;
formTemplateId?: string;
onThresholdActionCompletion?: (conditionId: string, action: 'notes' | 'attachments' | 'email', completed: boolean) => void;
onThresholdIssueRaised?: (conditionId: string) => void;
onNotesChange?: (componentId: string, notes: string) => void;
onAttachmentChange?: (componentId: string, attachments: File[] | null) => void;
}
declare const DfFormDataGrid: React.FC<DfFormDataGridProps>;
interface DfFormTableProps {
id: string;
properties: ITableComponent;
validationErrors?: Record<string, any>;
formValue?: any;
formData?: Record<string, any>;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
onSelect?: () => void;
isSelected?: boolean;
className?: string;
onTableSelect?: (table: ITableComponent) => void;
onTableDelete?: (tableId: string) => void;
onCellChange?: (row: number, column: number, components: FormComponentType[]) => void;
onComponentSelect?: (component: FormComponentType) => void;
onComponentDelete?: (componentId: string) => void;
onComponentEdit?: (component: FormComponentType) => void;
selectedComponent?: FormComponentType | null;
renderFormComponent?: (field: FormComponentType) => React.ReactNode;
onTableUpdate?: (tableId: string, updates: Partial<ITableComponent>) => void;
onCellAdd?: (row: number, column: number) => void;
onCellRemove?: (row: number, column: number) => void;
onRowAdd?: () => void;
onRowRemove?: (rowIndex: number) => void;
onColumnAdd?: () => void;
onColumnRemove?: (columnIndex: number) => void;
formTemplateId?: string;
onThresholdActionCompletion?: (conditionId: string, action: 'notes' | 'attachments' | 'email', completed: boolean) => void;
onThresholdIssueRaised?: (conditionId: string) => void;
onNotesChange?: (componentId: string, notes: string) => void;
onAttachmentChange?: (componentId: string, attachments: File[] | null) => void;
}
declare const DfFormTable: React.FC<DfFormTableProps>;
interface IComponentActionFeaturesProps {
component: FormComponentType;
mode: 'edit' | 'preview' | 'test';
formTemplateId?: string;
formValue?: any;
onNotesChange?: (notes: string) => void;
onAttachmentChange?: (files: File[] | null) => void;
notes?: string;
attachments?: File[] | null;
onThresholdActionCompletion?: (conditionId: string, action: 'notes' | 'attachments' | 'email', completed: boolean) => void;
onThresholdIssueRaised?: (conditionId: string) => void;
onBasicPropertyActionCompletion?: (action: 'notes' | 'attachments' | 'email' | 'issue', completed: boolean) => void;
}
declare const ComponentActionFeatures: React.FC<IComponentActionFeaturesProps>;
interface IComponentSubmissionActionsProps {
component: FormComponentType;
}
declare const ComponentSubmissionActions: React.FC<IComponentSubmissionActionsProps>;
interface IThresholdAlertProps {
component: any;
condition: any;
currentValue: string | number;
thresholdValue: string | number;
formTemplateId?: string;
onDismiss?: () => void;
onIssueRaised?: (conditionId: string) => void;
isIssueRaised?: boolean;
}
declare const ThresholdAlert: React.FC<IThresholdAlertProps>;
interface IIssue {
_id?: string;
issueNumber?: string;
title?: string;
description?: string;
workOrderNumber?: string;
assetNumber?: string;
formTemplateId?: string;
component?: FormComponentType;
priority?: 'High' | 'Medium' | 'Low';
status?: string;
assignee?: string;
comments?: string;
createdAt?: string;
}
interface IRaiseIssueModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess?: (createdIssue?: IIssue) => void;
component?: FormComponentType;
formTemplateId?: string;
notes?: string;
attachments?: File[] | null;
issue?: IIssue | null;
onCreateIssue?: (issueData: any, attachments: File[]) => Promise<IIssue>;
onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
user?: {
firstName?: string;
lastName?: string;
};
availableUsers?: string[];
}
declare const RaiseIssueModal: React.FC<IRaiseIssueModalProps>;
interface IAvailableComponent {
id: string;
label: string;
type: string;
key: string;
}
interface IConditionalEvaluationResult {
shouldShow: boolean;
evaluatedConditions: Array<{
condition: ICondition;
result: boolean;
componentValue: any;
}>;
}
declare class ConditionalLogicService {
private static instance;
private constructor();
static getInstance(): ConditionalLogicService;
getAvailableComponentsForConditional(formSchema: FormComponentType[], excludeComponentId?: string): IAvailableComponent[];
getApplicableOperators(componentType: string): string[];
validateConditionalLogic(conditional: IConditionalLogic, formSchema: FormComponentType[]): {
isValid: boolean;
errors: string[];
};
evaluateConditionalLogic(conditional: IConditionalLogic, formSchema: FormComponentType[], formValues: Record<string, any>): IConditionalEvaluationResult;
private getComponentValue;
private evaluateCondition;
private evaluateCheckboxCondition;
private isCheckboxChecked;
private determineFinalResult;
private isEqual;
private isEmpty;
private contains;
private isGreaterThan;
private isLessThan;
private isGreaterThanOrEqual;
private isLessThanOrEqual;
private isValidConditionValue;
createDefaultConditionalLogic(): IConditionalLogic;
getOperatorDisplayText(operator: string): string;
getActionDisplayText(action: string): string;
getConditionalLogicSummary(conditional: IConditionalLogic, formSchema: FormComponentType[]): string;
private formatConditionValue;
}
declare const conditionalLogicService: ConditionalLogicService;
interface IToast {
id: string;
message: string;
type: 'success' | 'danger' | 'warning' | 'info';
duration?: number;
}
declare class ToastService {
private toasts;
private listeners;
private defaultDuration;
private timeouts;
private generateId;
private notifyListeners;
private addToast;
removeToast(id: string): void;
showSuccess(message: string, duration?: number): void;
showError(message: string, duration?: number): void;
showWarning(message: string, duration?: number): void;
showInfo(message: string, duration?: number): void;
show(message: string, type?: 'success' | 'danger' | 'warning' | 'info', duration?: number): void;
clearAll(): void;
subscribe(listener: (toasts: IToast[]) => void): () => void;
getToasts(): IToast[];
}
declare const toastService: ToastService;
type TComponentCategory = 'Basic' | 'Advanced' | 'Layout' | 'Custom';
type TBasicComponentName = 'text-input' | 'number-input' | 'email-input' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'segment' | 'date-picker' | 'datetime-picker' | 'info' | 'signature' | 'heading' | 'instructions' | 'section' | 'table' | 'datagrid' | 'file' | 'location';
type TComponentName = TBasicComponentName;
declare enum ELabelAlignment {
Top = "top",
Left = "left"
}
interface IOption {
label: string;
value: string;
selected?: boolean;
enableNotes?: boolean;
enableAttachment?: boolean;
enableRaiseIssue?: boolean;
enableSendEmail?: boolean;
color?: string;
backgroundColor?: string;
icon?: string;
}
type TCheckboxValue = string | string[];
interface IBaseProps {
label: string;
value: string;
defaultValue: string | number;
placeholder?: string;
options?: any[];
description?: string;
collapsed?: boolean;
valid?: boolean;
enableNotes?: boolean;
enableAttachment?: boolean;
enableRaiseIssue?: boolean;
enableSendEmail?: boolean;
}
interface IBaseValidationProps {
required: boolean;
customValidationMessage: string;
readonly: boolean;
}
interface IBaseStyleProps {
labelAlignment: ELabelAlignment;
width?: number;
height?: number;
minWidth?: number;
maxWidth?: number;
minHeight?: number;
maxHeight?: number;
column?: number;
backgroundColor?: string;
borderColor?: string;
borderWidth?: string;
borderRadius?: string;
padding?: string;
margin?: string;
}
type TFormComponent = FormComponentType;
export { ComponentActionFeatures, ComponentSubmissionActions, DfFormCheckbox, DfFormComments, DfFormDataGrid, DfFormDateTime, DfFormErrorMsg, DfFormFileUpload, DfFormHeading, DfFormInput, DfFormInstruction, DfFormLocation, DfFormPreview, DfFormRadio, DfFormSection, DfFormSegment, DfFormSelect, DfFormSignature, DfFormTable, DfFormTextarea, ELabelAlignment, RaiseIssueModal, ThresholdAlert, conditionalLogicService, toastService };
export type { DataGridEntry, DeviceType, DfFormPreviewProps, ErrorMessageProps, FormComponentProps, FormComponentType, IAvailableComponent, IBaseFormComponent, IBaseProps, IBaseStyleProps, IBaseValidationProps, ICheckboxComponent, ICondition, IConditionalEvaluationResult, IConditionalLogic, IDataGridComponent, IDateComponent, IDatePickerComponent, IDateTimePickerComponent, IDividerComponent, IEmailInputComponent, IFileComponent, IFileUploadComponent, IFormControlChange, IFormValidationErrors, IHeadingComponent, IInstructionComponent, ILocationComponent, INumberInputComponent, IOption, IRadioComponent, ISectionComponent, ISegmentComponent, ISelectComponent, ISignatureComponent, ITableComponent, ITextInputComponent, ITextareaComponent, IToast, TBasicComponentName, TCheckboxValue, TComponentCategory, TComponentName, TFormComponent, TInputComponentType, TableCell, ValidationResult, ValidationRule };