UNPKG

digitaform-preview-react

Version:

A comprehensive React form preview component library with form controls,responsive design

1,630 lines (1,597 loc) 59.6 kB
import React from 'react'; interface ICondition$1 { id: string; when: string; operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual'; value: string | number | boolean; } interface IConditionalLogic$2 { action: 'show' | 'hide' | 'always'; when: 'all' | 'any'; conditions: ICondition$1[]; } interface IFormControlChange { id: string; value: any; isValid?: boolean; errors?: Record<string, any>; comments?: string; } interface IFormValidationErrors { [key: string]: any; } type TInputComponentType$1 = '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$2; } interface ITextInputComponent$1 extends IBaseFormComponent { name: 'text-input'; validation: IBaseFormComponent['validation'] & { minLength?: number; maxLength?: number; pattern?: string; }; } interface INumberInputComponent$1 extends IBaseFormComponent { name: 'number-input'; validation: IBaseFormComponent['validation'] & { min?: number; max?: number; step?: number; minLength?: number; maxLength?: number; }; } interface IEmailInputComponent$1 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$1 extends IBaseFormComponent { name: 'date-picker'; validation: IBaseFormComponent['validation'] & { minDate?: string; maxDate?: string; }; } interface IDateTimePickerComponent$1 extends IBaseFormComponent { name: 'datetime-picker'; validation: IBaseFormComponent['validation'] & { minDate?: string; maxDate?: string; }; } interface IFileComponent$1 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$1 extends IBaseFormComponent { name: 'location'; validation: IBaseFormComponent['validation'] & { enableHighAccuracy?: boolean; timeout?: number; maximumAge?: number; }; } interface IHeadingComponent$1 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$1 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$1 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$1 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$1 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$1 | INumberInputComponent$1 | IEmailInputComponent$1 | ITextareaComponent | ISelectComponent | IRadioComponent | ICheckboxComponent | ISegmentComponent | IDateComponent | IDatePickerComponent$1 | IDateTimePickerComponent$1 | IFileComponent$1 | IFileUploadComponent | ILocationComponent$1 | IHeadingComponent$1 | IDividerComponent | IInstructionComponent$1 | ISignatureComponent | ISectionComponent$1 | ITableComponent$1 | IDataGridComponent$1; interface FormComponentProps { id: string; properties: FormComponentType; validationErrors?: IFormValidationErrors; formValue?: any; inputType?: TInputComponentType$1; 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$1; 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' | 'pattern' | 'email' | 'custom'; value?: any; message?: string; } interface ValidationResult$1 { 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 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>; 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 TInputComponentType = 'text' | 'number' | 'email'; interface IBaseInputComponent extends IBaseComponent { inputType: TInputComponentType; } interface IBaseComponent { id: string; _id: string; name: TComponentName; category: TComponentCategory; basic: IBaseProps; validation: IBaseValidationProps; styles: IBaseStyleProps; position: number; options: any[]; conditional: IConditionalLogic$1; } interface ITextInputBasicProps extends IBaseProps { placeholder: string; defaultValue: string; } interface ITextInputValidationProps extends IBaseValidationProps { minLength: number; maxLength: number; pattern: string; } interface ITextInputStyleProps extends IBaseStyleProps { labelAlignment: ELabelAlignment; } interface ITextInputComponent extends IBaseInputComponent { id: string; name: 'text-input'; category: TComponentCategory; inputType: TInputComponentType; basic: ITextInputBasicProps; validation: ITextInputValidationProps; styles: ITextInputStyleProps; } interface INumberInputBasicProps extends IBaseProps { placeholder: string; defaultValue: number; decimalPlaces: number; } interface INumberInputValidationProps extends IBaseValidationProps { minLength: number; maxLength: number; integerOnly: boolean; } interface INumberInputStyleProps extends IBaseStyleProps { labelAlignment: ELabelAlignment; } interface INumberInputComponent extends IBaseInputComponent { id: string; name: 'number-input'; inputType: 'number'; basic: INumberInputBasicProps; validation: INumberInputValidationProps; styles: INumberInputStyleProps; } interface IEmailInputBasicProps extends IBaseProps { placeholder: string; defaultValue: string; } interface IEmailInputValidationProps extends IBaseValidationProps { minLength: number; maxLength: number; } interface IEmailInputStyleProps extends IBaseStyleProps { labelAlignment: ELabelAlignment; } interface IEmailInputComponent extends IBaseInputComponent { id: string; name: 'email-input'; inputType: 'email'; basic: IEmailInputBasicProps; validation: IEmailInputValidationProps; styles: IEmailInputStyleProps; } interface ITextareaInputBasicProps extends IBaseProps { placeholder: string; defaultValue: string; rows: number; autoExpand?: boolean; } interface ITextareaInputValidationProps extends IBaseValidationProps { minLength: number; maxLength: number; } interface ITextareaInputComponent extends IBaseComponent { id: string; name: 'textarea'; category: TComponentCategory; basic: ITextareaInputBasicProps; validation: ITextareaInputValidationProps; styles: IBaseStyleProps; } interface ISelectInputBasicProps extends IBaseProps { placeholder: string; options: IOption[]; } interface ISelectInputComponent extends IBaseComponent { id: string; name: 'select'; category: TComponentCategory; basic: ISelectInputBasicProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } interface ICheckboxGroupBasicProps extends Omit<IBaseProps, 'value' | 'defaultValue'> { options: IOption[]; value: TCheckboxValue; defaultValue: TCheckboxValue; inlineLayout: boolean; } interface ICheckboxGroupBase extends Omit<IBaseComponent, 'basic'> { basic: ICheckboxGroupBasicProps; } interface ICheckboxGroupValidationProps extends IBaseValidationProps { minCheckedNumber: number; maxCheckedNumber: number; } interface ICheckboxGroupComponent extends ICheckboxGroupBase { id: string; name: 'checkbox'; category: TComponentCategory; basic: ICheckboxGroupBasicProps; validation: ICheckboxGroupValidationProps; styles: IBaseStyleProps; } interface IRadioGroupBasicProps extends IBaseProps { options: IOption[]; defaultValue: string; inlineLayout: boolean; } interface IRadioGroupComponent extends IBaseComponent { id: string; name: 'radio'; category: TComponentCategory; basic: IRadioGroupBasicProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } interface ISegmentGroupBasicProps extends IBaseProps { options: IOption[]; defaultValue: string; inlineLayout: boolean; } interface ISegmentGroupComponent extends IBaseComponent { id: string; name: 'segment'; category: TComponentCategory; basic: ISegmentGroupBasicProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } interface IDateTimePickerBasicProps extends IBaseProps { placeholder: string; defaultValue: string; timeFormat: '12hr' | '24hr'; minDateTime: string; maxDateTime: string; } interface IDateTimePickerComponent extends IBaseComponent { id: string; name: 'datetime-picker'; category: TComponentCategory; basic: IDateTimePickerBasicProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } interface IDatePickerBasicProps extends IBaseProps { placeholder: string; defaultValue: string; timeFormat: '12hr' | '24hr'; minDate: string; maxDate: string; } interface IDatePickerComponent extends IBaseComponent { id: string; name: 'date-picker'; category: TComponentCategory; basic: IDatePickerBasicProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } interface ISignatureInputBasicProps extends IBaseProps { height: number; penColor: string; backgroundColor: string; } interface ISignatureInputComponent extends IBaseComponent { id: string; name: 'signature'; category: TComponentCategory; basic: ISignatureInputBasicProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } interface IHeadingBasicProps extends IBaseProps { } interface IHeadingComponent extends IBaseComponent { id: string; name: 'heading'; category: TComponentCategory; basic: IHeadingBasicProps; } interface IInstructionBasicProps extends IBaseProps { instructions?: string[]; } interface IInstructionComponent extends IBaseComponent { id: string; name: 'instructions'; category: TComponentCategory; basic: IInstructionBasicProps; validation: IBaseValidationProps & { listStyle?: 'none' | 'numbers' | 'bullets' | 'alpha'; }; } interface ISectionBasicProps extends IBaseProps { description?: string; collapsed?: boolean; } interface ISectionComponent extends IBaseComponent { id: string; name: 'section'; category: TComponentCategory; basic: ISectionBasicProps; children: TFormComponent$1[]; } interface ITableBasicProps extends IBaseProps { description?: string; collapsed?: boolean; rows?: number; columns?: number; } interface ITableComponent extends IBaseComponent { id: string; name: 'table'; category: TComponentCategory; basic: ITableBasicProps; table: { rows: number; columns: number; addAnotherText?: string; removeText?: string; displayAsTable: boolean; columnNames: string; showColumns: boolean; }; cells: Array<Array<{ id: string; row: number; column: number; components: TFormComponent$1[]; styles?: { backgroundColor?: string; borderColor?: string; padding?: string; minHeight?: string; verticalAlign?: 'top' | 'middle' | 'bottom'; }; }>>; } interface IDataGridComponent extends IBaseComponent { id: string; name: 'datagrid'; category: TComponentCategory; basic: IBaseProps; datagrid: { maxEntries?: number; minEntries?: number; allowAddRemoveEntries?: boolean; addAnotherText?: string; removeText?: string; displayAsGrid?: boolean; }; entries: Array<{ id: string; index: number; components: TFormComponent$1[]; styles?: { backgroundColor?: string; borderColor?: string; padding?: string; minHeight?: string; verticalAlign?: 'top' | 'middle' | 'bottom'; }; }>; } interface ICondition { id: string; when: string; operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual'; value: string | number | boolean; } interface IConditionalLogic$1 { action: 'show' | 'hide' | 'always'; when: 'all' | 'any'; conditions: ICondition[]; } interface IFileComponent extends IBaseComponent { id: string; name: 'file'; category: TComponentCategory; basic: IBaseProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } interface ILocationComponent extends IBaseComponent { id: string; name: 'location'; category: TComponentCategory; basic: IBaseProps; validation: IBaseValidationProps; styles: IBaseStyleProps; } type TFormComponent$1 = ITextInputComponent | INumberInputComponent | IEmailInputComponent | ITextareaInputComponent | ISelectInputComponent | IRadioGroupComponent | ISegmentGroupComponent | ICheckboxGroupComponent | IDateTimePickerComponent | ISignatureInputComponent | IDatePickerComponent | IHeadingComponent | IInstructionComponent | ISectionComponent | ITableComponent | IDataGridComponent | IFileComponent | ILocationComponent; type TFormComponentName = TFormComponent$1['name']; interface ISegmentOptionTemplate { name: string; label: string; options: IOption[]; } declare const SEGMENT_OPTION_TEMPLATES: ISegmentOptionTemplate[]; interface SegmentOptionTemplatesProps { onSelectTemplate: (template: ISegmentOptionTemplate) => void; } declare const SegmentOptionTemplates: React.FC<SegmentOptionTemplatesProps>; declare enum EFormTemplateStatus { DRAFTED = "drafted", PUBLISHED = "published", SUBMITTED = "submitted" } declare enum EFormTemplateSortBy { TITLE = "title", CREATED_AT = "createdAt", UPDATED_AT = "updatedAt" } declare enum EFormTemplateSortOrder { ASC = "asc", DESC = "desc" } interface ITranslation { label?: string; description?: string; } interface TFormComponent { id: string; _id: string; name: string; category: string; basic: { label?: string; value: string; defaultValue: string; placeholder: string; options: any[]; inlineLayout?: boolean; comments?: string; description?: string; collapsed?: boolean; showLabel?: boolean; valid?: boolean; rows?: number; decimalPlaces?: number; timeFormat?: string; minDateTime?: string; maxDateTime?: string; minDate?: string; maxDate?: string; height?: number; penColor?: string; backgroundColor?: string; translations?: Record<string, ITranslation> | Map<string, ITranslation>; enableNotes?: boolean; enableAttachment?: boolean; enableRaiseIssue?: boolean; enableSendEmail?: boolean; }; validation: { required: boolean; customValidationMessage: string; readonly: boolean; }; styles: { labelAlignment: string; 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; }; position: number; options: any[]; conditional: { action: 'show' | 'hide' | 'always'; when: 'all' | 'any'; conditions: Array<{ id: string; when: string; operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual'; value: string | number | boolean; }>; }; threshold?: { conditions: Array<{ id: string; operator: 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'equals' | 'notEquals'; value: number | string; enableNotes?: boolean; enableAttachment?: boolean; enableRaiseIssue?: boolean; }>; }; table?: { rows: number; columns: number; displayAsTable: boolean; columnNames: string; showColumns: boolean; }; cells?: Array<Array<{ id: string; row: number; column: number; components: TFormComponent[]; styles?: { backgroundColor?: string; borderColor?: string; padding?: string; minHeight?: string; verticalAlign?: 'top' | 'middle' | 'bottom'; }; }>>; [key: string]: any; } interface IGetFormTemplateResponse { _id: string; title: string; description: string; projectId: string; createdById: string; createdAt: string; updatedById: string; updatedAt: string; versionNumber: string; parentVersionId: string; status: EFormTemplateStatus; components: TFormComponent[]; tags: IFormTag[]; } interface IGetFormSubmissionRequest extends Omit<IUpdateFormTemplateRequest, 'updatedAt'> { formTemplateId: string; } interface IUpdateFormTemplateRequest { title?: string; description?: string; projectId: string; createdById: string; updatedAt: string; updatedById: string; components: TFormComponent[]; tags?: IFormTag[]; status: EFormTemplateStatus; isStandalone?: boolean; } interface IFormTag { _id?: string; id: string; name: string; } /** * Issues API interfaces */ interface IIssue { _id: string; issueNumber: string; title: string; description: string; priority: 'High' | 'Medium' | 'Low'; assetNumber?: string; workOrderNumber?: string | null; createdBy: string; assignee?: string; status: 'Open' | 'In-Progress' | 'Rejected' | 'Resolved'; formTemplateId?: string; createdAt: string; updatedAt: string; component?: any; comments?: string; isDeleted?: boolean; updatedBy?: string; __v?: number; } interface IGetIssuesQueryParams { formTemplateId?: string; projectId?: string; status?: string; priority?: string; page?: number; limit?: number; } interface IGetIssuesResponse { Response: IIssue[]; Success: boolean; pagination?: { page: number; limit: number; total: number; totalPages: number; }; } interface ICreateIssueRequest { title: string; workOrderNumber?: string; assetNumber?: string; component: any; description: string; formTemplateId: string; assignee?: string; priority: 'High' | 'Medium' | 'Low'; comments?: string; } interface IUpdateIssueRequest { title: string; description: string; workOrderNumber?: string; assetNumber?: string; formTemplateId: string; component: any; priority: 'High' | 'Medium' | 'Low'; assignee?: string; status: string; comments?: string; } interface IRaiseIssueModalProps { isOpen: boolean; onClose: () => void; onSuccess?: () => void; component?: TFormComponent; formTemplateId?: string; notes?: string; attachments?: File[] | null; issue?: IIssue | null; } declare const RaiseIssueModal: React.FC<IRaiseIssueModalProps>; interface IComponentActionFeaturesProps { component: TFormComponent; mode: 'edit' | 'preview' | 'test'; formTemplateId?: string; formValue?: any; onNotesChange?: (notes: string) => void; onAttachmentChange?: (files: File[] | null) => void; notes?: string; attachments?: File[] | null; } declare const ComponentActionFeatures: React.FC<IComponentActionFeaturesProps>; interface DfFormInputProps { id: string; properties: ITextInputComponent$1 | INumberInputComponent$1 | IEmailInputComponent$1; validationErrors?: IFormValidationErrors; formValue?: string; inputType?: TInputComponentType$1; 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 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 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 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 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 DfFormHeadingProps { id: string; properties: IHeadingComponent$1; mode?: 'edit' | 'preview' | 'test'; className?: string; hideLabel?: boolean; } declare const DfFormHeading: React.FC<DfFormHeadingProps>; 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$1; 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>; 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 DfFormInstructionProps { id: string; properties: IInstructionComponent$1; mode?: 'edit' | 'preview' | 'test'; onValueChange?: (change: IFormControlChange) => void; className?: string; hideLabel?: boolean; } declare const DfFormInstruction: React.FC<DfFormInstructionProps>; interface DfFormSectionProps { id: string; properties: ISectionComponent$1; 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$1) => 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; } declare const DfFormSection: React.FC<DfFormSectionProps>; interface DfFormDataGridProps { id: string; properties: IDataGridComponent$1; 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$1) => 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$1>) => void; onEntryAdd?: () => void; onEntryRemove?: (entryIndex: number) => void; } declare const DfFormDataGrid: React.FC<DfFormDataGridProps>; interface DfFormTableProps { id: string; properties: ITableComponent$1; 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$1) => 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$1>) => 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; } declare const DfFormTable: React.FC<DfFormTableProps>; declare const API_ENDPOINTS: { KEYCLOAK_AUTH: { LOGIN: string; REGISTER: string; REFRESH_TOKEN: string; LOGOUT: string; SEND_OTP: string; CHECK_USER_EXIST: string; RESET_PASSWORD: string; }; getAllComponents: () => string; getAllProjects: () => string; getProjectById: (projectId: string) => string; createProject: () => string; updateProject: (projectId: string) => string; deleteProject: (projectId: string) => string; getAllFormTemplates: (projectId: string) => string; getFormTemplate: (formTemplateId: string) => string; createFormTemplate: () => string; updateFormTemplate: (formTemplateId: string) => string; deleteFormTemplate: (formTemplateId: string) => string; getAllTags: () => string; createForm: () => string; submitForm: () => string; getForms: (projectId: string, formTemplateId: string) => string; getForm: (formId: string) => string; updateForm: (formId: string) => string; deleteForms: () => string; generateForm: () => string; getDefaultAIPrompt: () => string; getAllIssues: () => string; getIssueById: (issueId: string) => string; createIssue: () => string; updateIssue: (issueId: string) => string; getAllFormTemplatesByUserId: (userId?: string) => string; }; interface IReturnStatusFields { ReturnStatus: 'S' | 'E'; ReturnMessage: string; } interface IApiResponse<T> { Response: T; Success: boolean; } interface IApiErrorResponse { Response: IReturnStatusFields[]; Success: boolean; } interface IPagination { total: number; page: number; limit: number; } interface IApiPaginationResponse<T> extends IApiResponse<T> { pagination: IPagination; } interface IAvailableComponent { id: string; label: string; type: string; key: string; } interface IConditionalLogic { action: 'show' | 'hide' | 'always'; when: 'all' | 'any'; conditions: ICondition[]; } interface IConditionalEvaluationResult { shouldShow: boolean; evaluatedConditions: Array<{ condition: ICondition; result: boolean; componentValue: any; }>; } declare class ConditionalLogicService { private static instance; private constructor(); static getInstance(): ConditionalLogicService; /** * Get all available components in the form for conditional logic * @param formSchema - The current form schema containing all components * @param excludeComponentId - Optional component ID to exclude from the list * @returns Array of available components with their metadata */ getAvailableComponentsForConditional(formSchema: TFormComponent$1[], excludeComponentId?: string): IAvailableComponent[]; getApplicableOperators(componentType: string): string[]; validateConditionalLogic(conditional: IConditionalLogic, formSchema: TFormComponent$1[]): { isValid: boolean; errors: string[]; }; /** * Evaluate whether a component should be shown based on conditional logic * @param conditional - The conditional logic to evaluate * @param formSchema - The current form schema * @param formValues - Current form values (component values) * @returns Evaluation result with details */ evaluateConditionalLogic(conditional: IConditionalLogic, formSchema: TFormComponent$1[], formValues: Record<string, any>): IConditionalEvaluationResult; /** * Get the current value of a component * @param componentId - The component ID to get value for * @param formSchema - The current form schema * @param formValues - Current form values * @returns The component value or undefined if not found */ private getComponentValue; /** * Evaluate a single condition * @param condition - The condition to evaluate * @param componentValue - The current value of the component * @returns Boolean result of the condition evaluation */ private evaluateCondition; /** * Evaluate checkbox-specific conditions (checked/notChecked) * @param componentValue - The current value of the checkbox component * @param expectedValue - Either 'checked' or 'notChecked' * @returns Boolean result of the checkbox condition evaluation */ private evaluateCheckboxCondition; /** * Determine if a checkbox component is checked based on its value * @param componentValue - The current value of the checkbox component * @returns Boolean indicating if checkbox is checked */ private isCheckboxChecked; /** * Determine final result based on 'when' condition (all/any) and action (show/hide) * @param conditional - The conditional logic configuration * @param evaluatedConditions - Array of evaluated conditions * @returns Final boolean result */ 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: TFormComponent$1[]): string; private formatConditionValue; } declare const conditionalLogicService: ConditionalLogicService; interface IFormDataValue { value: string | number | string[] | boolean; label: string; type: string; children?: TFormComponent$1[]; } interface IFormData { [componentId: string]: IFormDataValue; } interface IFormMetadata { exportedAt: string; version: string; componentCount: number; } interface IFormExport { components: TFormComponent$1[]; metadata: IFormMetadata; } declare class FormService { private static instance; private components; private constructor(); static getInstance(): FormService; getComponents(): TFormComponent$1[]; getComponentById(id: string): TFormComponent$1 | undefined; addComponent(componentType: TFormComponentName): TFormComponent$1; updateComponent(id: string, updates: Partial<TFormComponent$1>): TFormComponent$1 | null; updateComponentProperty(id: string, section: 'basic' | 'validation' | 'styles' | 'conditional', key: string, value: string | number | boolean | string[] | object): TFormComponent$1 | null; updateComponentOptions(id: string, options: Array<{ label: string; value: string; }>): TFormComponent$1 | null; removeComponent(id: string): boolean; duplicateComponent(id: string): TFormComponent$1 | null; reorderComponents(componentIds: string[]): void; validateComponent(component: TFormComponent$1): { isValid: boolean; errors: string[]; }; getFormData(): IFormData; validateForm(): { isValid: boolean; errors: Record<string, string[]>; }; exportForm(): IFormExport; importForm(config: { components: TFormComponent$1[]; }): void; clearForm(): void; private generateId; private listeners; subscribe(listener: (components: TFormComponent$1[]) => void): () => void; private notifyListeners; updateComponentWithNotification(id: string, updates: Partial<TFormComponent$1>): TFormComponent$1 | null; addComponentWithNotification(componentType: TFormComponentName): TFormComponent$1; removeComponentWithNotification(id: string): boolean; } declare const formService: FormService; interface IHttpOptions { headers?: Record<string, string>; params?: Record<string, string>; } declare class HttpService { constructor(); private handleError; private getHeaders; /** * Builds HTTP query parameters from an object, excluding undefined values. * This prevents empty parameters from being sent to the API, which can * cause unintended filtering behavior (e.g., search= vs no search param). * * @param baseParams - Object containing parameter key-value pairs * @returns URLSearchParams object with only defined values */ private getHttpParams; private buildUrl; get<T>(url: string, options?: IHttpOptions): Promise<T>; post<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>; postUnauthenticated<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>; put<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>; delete<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>; } declare const httpService: HttpService; declare class IssuesApiService { /** * Get all issues * @param queryParams - Query parameters for filtering issues * @returns Promise<IIssue[]> - Array of issues */ getAllIssues(queryParams?: IGetIssuesQueryParams): Promise<IIssue[]>; /** * Get issue by ID * @p