UNPKG

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
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 };