@iapps/ng-dhis2-ui 1.1.47 → 1.1.49

package/fesm2022/iapps-ng-dhis2-ui.mjs

@@ -25,9 +25,9 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
-import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, Chip, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
-import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, isEmpty } from 'lodash';
+import { isObject, isString, sortBy, isArray, find, camelCase, flatten, debounce, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { map as map$1, switchMap } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
@@ -1564,6 +1564,62 @@ TransferOption.propTypes = {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// Helper function to generate a unique class name
+const generateClassName$2 = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS$2 = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === 'object' && key.startsWith('@media')) {
+            const mediaStyles = convertStylesToCSS$2(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith('&:')) {
+            const pseudoClass = key.replace('&', '');
+            cssString += `${pseudoClass} { ${convertStylesToCSS$2('', styles[key])} }`;
+        }
+        else {
+            const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+            cssString += `${cssKey}: ${styles[key]}; `;
+        }
+    }
+    cssString += '}';
+    return cssString;
+};
+// Custom hook for dynamic styles with generics
+const useDynamicStyles$2 = (stylesObj) => {
+    const [classNames, setClassNames] = useState({});
+    useEffect(() => {
+        const convertedStyles = Object.keys(stylesObj).map((key) => {
+            const className = generateClassName$2(key);
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = convertStylesToCSS$2(className, stylesObj[key]);
+            document.head.appendChild(styleElement);
+            return {
+                key,
+                className,
+                styleElement,
+            };
+        });
+        setClassNames(convertedStyles.reduce((classNameEntity, convertedStyle) => {
+            return {
+                ...classNameEntity,
+                [convertedStyle.key]: convertedStyle.className,
+            };
+        }, {}));
+        return () => {
+            convertedStyles.forEach((convertedStyle) => {
+                document.head.removeChild(convertedStyle.styleElement);
+            });
+        };
+    }, []);
+    return classNames;
+};
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
 // Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -3364,6 +3420,9 @@ class LineListTableComponent extends ReactWrapperModule {
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
             const [filters, setFilters] = useState(false);
+            //TODO: this will be migrated on the parent component
+            const [checkValue, setCheckValue] = useState([]);
+            const [valueMatch, setValuesMatch] = useState(false);
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -3413,10 +3472,16 @@ class LineListTableComponent extends ReactWrapperModule {
                         const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.filters);
                         entityColumns = columns;
                         entityData = data;
-                        let firstTei = response.data
-                            ?.trackedEntityInstances?.[0]?.trackedEntityInstance;
-                        if (firstTei) {
-                            this.firstValue.emit(firstTei);
+                        //TODO: Should be done on the parent
+                        let checkValues = [
+                            ...new Set(response.data?.trackedEntityInstances?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
+                                .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
+                                .map((dataValue) => dataValue.value))),
+                        ];
+                        if (checkValues) {
+                            // this.firstValue.emit(firstTei);
+                            setCheckValue(checkValues);
+                            setValuesMatch(!checkValues.includes(this.buttonFilter));
                         }
                         //  setFilteredColumns(filteredEntityColumns);
                         // Ensure filter inputs do not disappear when no data is returned
@@ -3508,9 +3573,12 @@ class LineListTableComponent extends ReactWrapperModule {
                         padding: 8,
                         marginBottom: 16,
                     } },
-                    this.dispatchTeis &&
-                        (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (React__default.createElement(Button$1, { style: {
-                                backgroundColor: '#3b82f6', // Blue color
+                    valueMatch &&
+                        this.dispatchTeis &&
+                        (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (
+                        //TODO: this implementation should be done where the library will be consumed
+                        React__default.createElement(Button$1, { style: {
+                                backgroundColor: '#3b82f6',
                                 color: 'white',
                                 padding: '8px 16px',
                                 borderRadius: '4px',
@@ -3559,7 +3627,7 @@ class LineListTableComponent extends ReactWrapperModule {
                         React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
                     React__default.createElement(TableBody, null, data.length > 0 ? (data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions' ? (React__default.createElement(DropdownMenu$1, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key] || '--' // Display '--' if value is undefined or null
                     )))))))) : (React__default.createElement(DataTableRow, null,
-                        React__default.createElement(DataTableCell, { colSpan: columns.length, style: {
+                        React__default.createElement(DataTableCell, { colSpan: columns.length?.toString(), style: {
                                 textAlign: 'center',
                                 fontWeight: 'bold',
                                 color: 'grey',
@@ -3612,7 +3680,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -3649,6 +3717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], firstValue: [{
                 type: Output
+            }], buttonFilter: [{
+                type: Input
             }] } });
 
 class LineListModule {
@@ -3818,7 +3888,7 @@ class DataTableUIComponent extends ReactWrapperModule {
                         React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
                 React__default.createElement(TableFoot, null,
                     React__default.createElement(DataTableRow, null,
-                        React__default.createElement(DataTableCell, { colSpan: columns.length + 1 })))))));
+                        React__default.createElement(DataTableCell, { colSpan: (columns.length || 0 + 1).toString() })))))));
         };
     }
     async ngAfterViewInit() {
@@ -4801,6 +4871,289 @@ class FormValue {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+const useFieldValidation = (props) => {
+    const { form, touched, field, value } = props;
+    const hasError = useMemo(() => {
+        return touched && (form.get(field.id) || form.get(field.key))?.invalid;
+    }, [value, touched]);
+    const validationError = useMemo(() => {
+        if (!touched) {
+            return undefined;
+        }
+        const error = (form.get(field.id) || form.get(field.key))?.errors;
+        if (!error) {
+            return undefined;
+        }
+        if (error['min']) {
+            return `${field.label || 'Value'} should not be less than ${error['min'].min}!`;
+        }
+        else if (error['max']) {
+            return `${field.label || 'Value'} should not be greater than ${error['max'].max}!`;
+        }
+        else if (error['pattern']) {
+            if (field.type === 'email') {
+                return `The email address provided is not valid`;
+            }
+            else if (field.type === 'tel') {
+                return 'Phone number provided is not valid';
+            }
+            else {
+                return `${field.label || 'Value'} should have appropriate format`;
+            }
+        }
+        return error['required']
+            ? `${field.label || 'Value'} is required`
+            : undefined;
+    }, [hasError]);
+    return { hasError, validationError };
+};
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+// @flow
+const orgUnitFieldStyles = {
+    container: {
+        border: '1px solid',
+        borderColor: colors$1.grey400,
+        borderRadius: '3px',
+        height: '100%',
+        width: '100%',
+        zIndex: 0,
+        backgroundColor: 'white',
+    },
+    searchField: {
+        height: '40px',
+        overflow: 'hidden',
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        boxShadow: 'none',
+        border: 'none',
+    },
+    debounceFieldContainer: {
+        padding: '8px',
+        background: colors$1.grey100,
+        borderTopLeftRadius: '3px',
+        borderTopRightRadius: '3px',
+    },
+    orgUnitTreeContainer: {
+        borderBottomLeftRadius: '3px',
+        borderBottomRightRadius: '3px',
+        overflow: 'auto',
+    },
+    orgUnitTreeLoader: {
+        padding: '8px',
+    },
+    orgUnitFieldLabel: {
+        marginBottom: '8px',
+        display: 'block',
+        boxSizing: 'border-box',
+        fontSize: '14px',
+        lineHeight: '19px',
+        color: 'rgb(33, 41, 52)',
+        padding: '0',
+    },
+    orgUnitFieldRequiredLabel: {
+        paddingInlineStart: '4px',
+    },
+};
+const OrgUnitFormField = (props) => {
+    const { onSelectOrgUnit, label, required, selected, disabled, key } = props;
+    const d2 = window?.d2Web;
+    const classes = useDynamicStyles$2(orgUnitFieldStyles);
+    const config = useMemo(() => {
+        return d2.systemInfo?.toInitObject();
+    }, []);
+    const rootOrgUnits = useMemo(() => {
+        return d2.currentUser?.organisationUnits || [];
+    }, []);
+    const getExpandedItems = () => {
+        if (rootOrgUnits && rootOrgUnits.length === 1) {
+            return [`/${rootOrgUnits[0].id}`];
+        }
+        else if (rootOrgUnits?.length > 1) {
+            return rootOrgUnits.map((root) => root.path);
+        }
+        return undefined;
+    };
+    const initiallyExpanded = getExpandedItems();
+    const [searchText, setSearchText] = useState(undefined);
+    const [loading, setLoading] = useState(true);
+    const [searchLoading, setSearchLoading] = useState();
+    const [searchData, setSearchData] = useState();
+    const [selectedOrgUnit, setSelectedOrgUnit] = React__default.useState();
+    const [expanded, setExpanded] = React__default.useState(initiallyExpanded);
+    const [showOrgUnitTree, setShowOrgUnitTree] = useState(!selected);
+    useEffect(() => {
+        setLoading(true);
+        if (selected) {
+            d2.httpInstance
+                .get(`organisationUnits/${selected}.json?fields=id,name,path,code,ancestors[id,name]`)
+                .then((response) => {
+                if (response.data) {
+                    setSelectedOrgUnit(response.data);
+                    handleExpand({ path: response.data['path'] });
+                    setLoading(false);
+                }
+            });
+        }
+        else {
+            setLoading(false);
+        }
+    }, [selected]);
+    const highlighted = useMemo(() => {
+        if (selectedOrgUnit) {
+            return [selectedOrgUnit['path']];
+        }
+        return undefined;
+    }, [selectedOrgUnit]);
+    const selectedOrgUnitLabel = useMemo(() => {
+        if (selectedOrgUnit) {
+            return [
+                ...(selectedOrgUnit['ancestors'] || []),
+                selectedOrgUnit,
+            ]
+                .map((orgUnit) => orgUnit['name'])
+                .join(' / ');
+        }
+        return '';
+    }, [selectedOrgUnit]);
+    const handleExpand = ({ path }) => {
+        if (expanded && !expanded.includes(path)) {
+            setExpanded([...expanded, path]);
+        }
+    };
+    const handleCollapse = ({ path }) => {
+        const pathIndex = expanded?.indexOf(path);
+        if (pathIndex && pathIndex !== -1 && expanded) {
+            const updatedExpanded = pathIndex === 0
+                ? expanded.slice(1)
+                : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
+            setExpanded(updatedExpanded);
+        }
+    };
+    const handleOrgUnitSearch = async (query) => {
+        setSearchLoading(true);
+        try {
+            const searchResponse = await d2.httpInstance.get(`organisationUnits.json?fields=id,displayName,path,publicAccess,access,lastUpdated,children[id,displayName,publicAccess,access,path,children::isNotEmpty]&paging=true&query=${query}&withinUserSearchHierarchy=true&pageSize=15`);
+            setSearchData((searchResponse.data || {})['organisationUnits']);
+            setSearchLoading(false);
+        }
+        catch (e) {
+            setSearchLoading(false);
+        }
+    };
+    const debouncedSearch = useCallback(debounce((value) => {
+        handleOrgUnitSearch(value);
+    }, 500), []);
+    const handleFilterChange = (event) => {
+        setSearchText(event.value);
+        debouncedSearch(event.value);
+    };
+    const ready = useMemo(() => {
+        return searchText?.length ? !searchLoading : !loading;
+    }, [searchText, searchLoading, loading]);
+    const renderOrgUnitTree = () => {
+        if (searchText && searchText?.length > 0) {
+            if (searchLoading) {
+                return (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                    React__default.createElement(CircularLoader$1, { small: true })));
+            }
+            return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+                    setSelectedOrgUnit(event);
+                    onSelectOrgUnit(event.id);
+                } })));
+        }
+        return (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+                setSelectedOrgUnit(event);
+                onSelectOrgUnit(event.id);
+            } }));
+    };
+    const handleBlur = () => {
+        // onBlur && onBlur(null);
+    };
+    return (config && (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
+        React__default.createElement("div", null,
+            label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
+                React__default.createElement("span", null, label),
+                required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
+            selected && !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
+                React__default.createElement(Chip, { onRemove: () => {
+                        setShowOrgUnitTree(true);
+                    } }, selectedOrgUnit.name))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                React__default.createElement(CircularLoader$1, { small: true })))) : (React__default.createElement("div", { className: classes.container },
+                React__default.createElement("div", { className: classes.debounceFieldContainer },
+                    React__default.createElement(InputField$1, { placeholder: "Search", value: searchText, disabled: disabled, onChange: handleFilterChange })),
+                loading ? (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                    React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
+};
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+const FileUploadField = (props) => {
+    const { label, id, uploadUrl, performUpload, validationText, required, hasError, onChange, onUploadSuccess, } = props;
+    const d2 = window?.d2Web;
+    const [file, setFile] = useState(null);
+    const [uploading, setUploading] = useState();
+    const valid = useMemo(() => {
+        if (isUndefined(hasError)) {
+            return undefined;
+        }
+        return !hasError;
+    }, [hasError]);
+    const uploadFile = async (fileItem) => {
+        if (fileItem) {
+            setUploading(true);
+            const formData = new FormData();
+            formData.append('file', fileItem);
+            try {
+                const fileUploadResponse = await d2.httpInstance.post(uploadUrl, formData);
+                setUploading(false);
+                const fileId = fileUploadResponse?.data?.response?.fileResource
+                    ?.id;
+                if (fileId) {
+                    onUploadSuccess(fileId);
+                }
+            }
+            catch (error) {
+                setUploading(false);
+            }
+        }
+    };
+    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: label, name: id, valid: valid, required: required, validationText: validationText, onChange: (event) => {
+            const fileItem = (event?.files || [])[0];
+            setFile(fileItem);
+            if (performUpload) {
+                uploadFile(fileItem);
+            }
+            else {
+                onChange(file);
+            }
+            // this.ngZone.run(() => {
+            //   this.form().get(this.field().id) ||
+            //     this.form()
+            //       .get(this.field().key)
+            //       ?.setValue((event?.files || [])[0]);
+            //   this.update.emit({
+            //     form: this.form(),
+            //     value: (event?.files || [])[0],
+            //   });
+            // });
+            // setValue((event?.files || [])[0]);
+            // setTouched(true);
+        } }, file && (React__default.createElement(FileListItem, { cancelText: "Cancel", label: file.name, loading: uploading, onRemove: () => {
+            setFile(null);
+        }, removeText: "Remove" }))));
+};
+
 // Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -4890,45 +5243,15 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 }
                 return [];
             }, [value]);
-            const hasError = useMemo(() => {
-                return (touched &&
-                    (this.form().get(this.field().id) ||
-                        this.form().get(this.field().key))?.invalid);
-            }, [value, touched]);
-            const validationError = useMemo(() => {
-                if (!touched) {
-                    return undefined;
-                }
-                const field = this.field();
-                const error = (this.form().get(field.id) || this.form().get(field.key))
-                    ?.errors;
-                if (!error) {
-                    return undefined;
-                }
-                if (error['min']) {
-                    return `${this.label() || 'Value'} should not be less than ${error['min'].min}!`;
-                }
-                else if (error['max']) {
-                    return `${this.label() || 'Value'} should not be greater than ${error['max'].max}!`;
-                }
-                else if (error['pattern']) {
-                    if (field.type === 'email') {
-                        return `The email address provided is not valid`;
-                    }
-                    else if (field.type === 'tel') {
-                        return 'Phone number provided is not valid';
-                    }
-                    else {
-                        return `${this.label() || 'Value'} should have appropriate format`;
-                    }
-                }
-                return error['required']
-                    ? `${this.label() || 'Value'} is required`
-                    : undefined;
-            }, [hasError]);
+            const { hasError, validationError } = useFieldValidation({
+                field: this.field(),
+                form: this.form(),
+                value,
+                touched,
+            });
             switch (this.field().controlType) {
                 case 'textarea':
-                    return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, placeholder: this.placeholder(), value: value, onChange: (event) => {
+                    return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.value);
@@ -4945,34 +5268,14 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                         } }));
                 case 'org-unit':
-                    return (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, prefixIcon: React__default.createElement(IconDimensionOrgUnit16, null), required: this.field().required, name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: displayValue, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, onFocus: () => {
-                                setShowOrgUnit(true);
-                            }, onBlur: () => {
-                                this.ngZone.run(() => {
-                                    this.update.emit({ form: this.form(), value });
-                                });
-                                setTouched(true);
-                            } }),
-                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { selectedOrgUnits: [], onSelectOrgUnit: (selectedOrgUnits) => {
-                                if ((selectedOrgUnits || [])[0]) {
-                                    const selectedOrgUnit = selectedOrgUnits[0];
-                                    setDisplayValue(selectedOrgUnit.name);
-                                    setValue(selectedOrgUnit.id);
-                                    setShowOrgUnit(false);
-                                    setTouched(true);
-                                    this.ngZone.run(() => {
-                                        (this.form().get(this.field().id) ||
-                                            this.form().get(this.field().key))?.setValue(selectedOrgUnit.id);
-                                        this.immediateUpdate.emit({
-                                            form: this.form(),
-                                            value: selectedOrgUnit.id,
-                                        });
-                                    });
-                                }
-                            } }))));
+                    return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, onSelectOrgUnit: (selectedOrgUnit) => {
+                            setValue(selectedOrgUnit);
+                            this.ngZone.run(() => {
+                                this.update.emit({ form: this.form(), value });
+                            });
+                        }, selected: value }));
                 case 'transfer':
-                    return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, required: this.field().required, name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: selected, leftHeader: React__default.createElement("div", { style: {
+                    return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: {
                                 fontSize: 14,
                                 padding: '8px 4px',
                             } }, this.field().availableOptionsLabel), rightHeader: React__default.createElement("div", { style: {
@@ -4989,7 +5292,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             this.update.emit({ form: this.form(), value });
                         } }));
                 case 'checkbox':
-                    return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, onChange: (event) => {
+                    return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.checked);
@@ -5002,7 +5308,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                         } }));
                 case 'dropdown':
-                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, required: this.field().required, name: this.field().id, className: "select", label: this.label(), selected: value, onChange: (event) => {
+                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, required: this.field().required, className: "select", label: this.label(), selected: value, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.selected);
@@ -5015,7 +5324,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             setTouched(true);
                         } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.key, label: option.label, value: option.value })))));
                 case 'multi-dropdown':
-                    return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, label: this.label(), name: this.field().id, required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                    return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, label: this.label(), required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
                             const selectedValue = (event.selected || []).join(',');
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
@@ -5029,29 +5341,27 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             setTouched(true);
                         }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
                 case 'file':
-                    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: this.label(), name: this.field().id, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, files: this.uploadedFiles, onChange: (event) => {
-                            this.uploadedFiles.push((event?.files || [])[0]);
-                            this.ngZone.run(() => {
-                                this.form().get(this.field().id) ||
-                                    this.form()
-                                        .get(this.field().key)
-                                        ?.setValue((event?.files || [])[0]);
-                                this.update.emit({
-                                    form: this.form(),
-                                    value: (event?.files || [])[0],
+                    return (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(FileUploadField, { label: this.label(), id: this.field().id, hasError: hasError, required: this.field().required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => {
+                                this.ngZone.run(() => {
+                                    this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key)?.setValue(fileId);
+                                    this.update.emit({
+                                        form: this.form(),
+                                        value: fileId,
+                                    });
                                 });
-                            });
-                            setValue((event?.files || [])[0]);
-                            setTouched(true);
-                        } }, this.uploadedFiles.map((file, index) => (React__default.createElement(FileListItem, { key: index, cancelText: "Cancel", label: file.name, onCancel: () => { }, onRemove: () => {
-                            this.ngZone.run(() => {
-                                this.uploadedFiles.splice(index, 1);
-                                setValue(this.uploadedFiles);
+                                setValue(fileId);
                                 setTouched(true);
-                            });
-                        }, removeText: "Remove" })))));
+                            } })));
                 default:
-                    return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, disabled: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, readOnly: this.field()?.disabled || this.field()?.generated || this.field()?.unique || false, onChange: (event) => {
+                    return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, disabled: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, readOnly: this.field()?.disabled ||
+                            this.field()?.generated ||
+                            this.field()?.unique ||
+                            false, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.value);
@@ -5881,8 +6191,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                                     setTouched(true);
                                 }
                             } }))),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "DATE", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }), style: { width: '100%', height: '100%' } }),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "DATE", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }), style: { width: '100%', height: '100%' } }),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "date", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }) }),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "date", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }) }),
                     React__default.createElement("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
@@ -5901,12 +6211,12 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                             display: 'grid',
                             gridTemplateColumns: 'repeat(4, 1fr)',
                             gap: '16px',
-                        } }, filters.programAttributesFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', type: filter.valueType, selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', type: filter.valueType, value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
+                        } }, filters.programAttributesFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', type: filter.valueType, value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
                     React__default.createElement("div", { style: {
                             display: 'grid',
                             gridTemplateColumns: 'repeat(4, 1fr)',
                             gap: '16px',
-                        } }, filters.programStageDataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', type: filter.valueType, selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", type: filter.valueType, label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
+                        } }, filters.programStageDataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", type: filter.valueType, label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
                     React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
                         React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))))));
         };