@iapps/ng-dhis2-ui 1.1.1 → 1.1.3

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

@@ -27,7 +27,7 @@ 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, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
-import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, range } from 'lodash';
+import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { map as map$1, switchMap } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
@@ -1018,7 +1018,7 @@ HeaderBar.propTypes = {
 };
 
 window.React = React;
-class ReactWrapperComponent {
+class ReactWrapperModule {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
@@ -1047,14 +1047,13 @@ class ReactWrapperComponent {
                 " "));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ReactWrapperComponent, isStandalone: false, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ReactWrapperModule, isStandalone: true, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-dhis2-ui-wrapper',
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { props: [{
                 type: Input
@@ -1065,25 +1064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 args: ['ngDhis2UiContent']
             }] } });
 
-class ReactWrapperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, declarations: [ReactWrapperComponent], imports: [CommonModule], exports: [ReactWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [ReactWrapperComponent],
-                    exports: [ReactWrapperComponent],
-                }]
-        }] });
-
-// 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.
-
-class HeaderBarComponent extends ReactWrapperComponent {
+class HeaderBarComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -1107,7 +1088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             args: [{
                     selector: 'ng-dhis2-ui-header-bar',
                     template: `<ng-container></ng-container>`,
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }] });
 
@@ -1129,7 +1110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-class ButtonComponent extends ReactWrapperComponent {
+class ButtonComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.buttonClick = new EventEmitter();
@@ -1164,7 +1145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             args: [{
                     selector: 'ng-dhis2-ui-button',
                     template: '<ng-content></ng-content>',
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { label: [{
                 type: Input
@@ -2251,7 +2232,7 @@ PeriodDimension.defaultProps = {
     selectedPeriods: [],
 };
 
-class PeriodSelectorModalComponent extends ReactWrapperComponent {
+class PeriodSelectorModalComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2321,7 +2302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Output
             }] } });
 
-class PeriodSelectorComponent extends ReactWrapperComponent {
+class PeriodSelectorComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient, ngZone) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2758,7 +2739,7 @@ class OrganisationUnitSelectionConfig {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-class OrganisationUnitSelectorComponent extends ReactWrapperComponent {
+class OrganisationUnitSelectorComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient, ngZone) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2839,7 +2820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Output
             }] } });
 
-class OrganisationUnitSelectorModalComponent extends ReactWrapperComponent {
+class OrganisationUnitSelectorModalComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2967,6 +2948,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+const dropdownStyles$1 = {
+    layer: {
+        zIndex: '1 !important',
+    },
+};
+
+// Helper function to generate a unique class name
+const generateClassName$1 = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS$1 = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === "object" && key.startsWith("@media")) {
+            const mediaStyles = convertStylesToCSS$1(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith("&:")) {
+            const pseudoClass = key.replace("&", "");
+            cssString += `${pseudoClass} { ${convertStylesToCSS$1("", 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$1 = (stylesObj) => {
+    const [classNames, setClassNames] = useState({});
+    useEffect(() => {
+        const convertedStyles = Object.keys(stylesObj).map((key) => {
+            const className = generateClassName$1(key);
+            const styleElement = document.createElement("style");
+            styleElement.innerHTML = convertStylesToCSS$1(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;
+};
+
+const useCurrentModal$1 = () => {
+    const [CurrentModal, setCurrentModal] = useState();
+    return [
+        CurrentModal,
+        (Modal) => {
+            // As setState supports functional updates, we can't pass functional
+            // components directly
+            setCurrentModal(() => Modal);
+        },
+    ];
+};
+const ContextMenu$1 = (params) => {
+    const { onClose, onMenuClick, anchorRef, dropDownOptions } = params;
+    const [CurrentModal, setCurrentModal] = useCurrentModal$1();
+    const styles = useDynamicStyles$1(dropdownStyles$1);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Layer$1, { onBackdropClick: (event, data) => onClose(event, data), className: styles.layer },
+            React__default.createElement(Popper, { reference: anchorRef, placement: "bottom-start" },
+                React__default.createElement(FlyoutMenu, null, dropDownOptions.map((dropDownOption, index) => (React__default.createElement(MenuItem$1, { key: index, destructive: dropDownOption.destructive, label: dropDownOption.label, icon: dropDownOption.icon, onClick: () => {
+                        onMenuClick(dropDownOption);
+                        onClose();
+                    }, dense: true })))))),
+        CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
+                onClose();
+                setCurrentModal(null);
+            } }))));
+};
+const DropdownMenu$1 = (props) => {
+    const ref = useRef();
+    const [visible, setVisible] = useState(false);
+    const { dropdownOptions, onClick } = props;
+    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
+        React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors$1.grey600 }), onClick: () => setVisible(true) }),
+        visible && (React__default.createElement(ContextMenu$1, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
+                onClick(dropDownOption);
+            } }))));
+};
+
 // export function buildFilters(filters: AttributeFilter[]): string {
 //   return filters
 //     .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
@@ -3031,12 +3108,13 @@ class LineListService {
         this.httpClient = httpClient;
     }
     getProgramMetadata(programId) {
-        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name]`);
+        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name],*`);
     }
-    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
-        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`).pipe(map$1((response) => {
+        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
+        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`).pipe(map$1((response) => {
             response.trackedEntityInstances.forEach((tei) => {
                 // Filter attributes to only include those with displayInList=true
                 tei.attributes = tei.attributes.filter((attr) => attr.displayInList);
@@ -3044,32 +3122,34 @@ class LineListService {
             return response;
         }));
     }
-    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
-        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
+        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
+        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
-    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
-        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
+        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
+        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
-    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate) {
+    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode) {
         return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
             if (programStageId) {
-                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
+                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
                     metadata: programMetadata,
                     data: events,
                 })));
             }
             if (programMetadata.programType === 'WITH_REGISTRATION') {
-                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((teis) => ({
+                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((teis) => ({
                     metadata: programMetadata,
                     data: teis,
                 })));
             }
             else {
-                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
+                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
                     metadata: programMetadata,
                     data: events,
                 })));
@@ -3083,102 +3163,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
 
-const dropdownStyles = {
-    layer: {
-        zIndex: '1 !important',
-    },
-};
-
-// Helper function to generate a unique class name
-const generateClassName = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
-// Helper function to convert camelCased properties to hyphenated CSS properties
-const convertStylesToCSS = (className, styles) => {
-    let cssString = `.${className} {`;
-    for (const key in styles) {
-        if (typeof styles[key] === "object" && key.startsWith("@media")) {
-            const mediaStyles = convertStylesToCSS(className, styles[key]);
-            cssString += `${key} { ${mediaStyles} }`;
-        }
-        else if (key.startsWith("&:")) {
-            const pseudoClass = key.replace("&", "");
-            cssString += `${pseudoClass} { ${convertStylesToCSS("", 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 = (stylesObj) => {
-    const [classNames, setClassNames] = useState({});
-    useEffect(() => {
-        const convertedStyles = Object.keys(stylesObj).map((key) => {
-            const className = generateClassName(key);
-            const styleElement = document.createElement("style");
-            styleElement.innerHTML = convertStylesToCSS(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;
-};
-
-const useCurrentModal = () => {
-    const [CurrentModal, setCurrentModal] = useState();
-    return [
-        CurrentModal,
-        (Modal) => {
-            // As setState supports functional updates, we can't pass functional
-            // components directly
-            setCurrentModal(() => Modal);
-        },
-    ];
-};
-const ContextMenu = (params) => {
-    const { onClose, onMenuClick, anchorRef, dropDownOptions } = params;
-    const [CurrentModal, setCurrentModal] = useCurrentModal();
-    const styles = useDynamicStyles(dropdownStyles);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Layer$1, { onBackdropClick: (event, data) => onClose(event, data), className: styles.layer },
-            React__default.createElement(Popper, { reference: anchorRef, placement: "bottom-start" },
-                React__default.createElement(FlyoutMenu, null, dropDownOptions.map((dropDownOption, index) => (React__default.createElement(MenuItem$1, { key: index, destructive: dropDownOption.destructive, label: dropDownOption.label, icon: dropDownOption.icon, onClick: () => {
-                        onMenuClick(dropDownOption);
-                        onClose();
-                    }, dense: true })))))),
-        CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
-                onClose();
-                setCurrentModal(null);
-            } }))));
-};
-const DropdownMenu = (props) => {
-    const ref = useRef();
-    const [visible, setVisible] = useState(false);
-    const { dropdownOptions, onClick } = props;
-    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
-        React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors$1.grey600 }), onClick: () => setVisible(true) }),
-        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
-                onClick(dropDownOption);
-            } }))));
-};
-
 const getProgramStageData = (response, programStageId, pager) => {
     const events = response.data.events;
     const allDataElements = new Set();
@@ -3207,6 +3191,14 @@ const getProgramStageData = (response, programStageId, pager) => {
 const getTrackedEntityData = (response, programId, pager, filters) => {
     let teis = response.data
         .trackedEntityInstances;
+    let programMetaData = response.metadata.programTrackedEntityAttributes;
+    const programAttributesMap = programMetaData.reduce((acc, attribute) => {
+        if (attribute.displayInList) {
+            acc[attribute.id] = attribute.displayName;
+        }
+        return acc;
+    }, {});
+    console.log('metadata', programAttributesMap);
     if (filters) {
         teis = getFilteredTrackedEntityInstances(teis, filters);
     }
@@ -3218,7 +3210,12 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             : tei.attributes;
         attributes.forEach((attr) => allAttributes.add(attr.attribute));
     });
-    const entityColumns = Array.from(allAttributes).map((attrId) => {
+    console.log('all of the attributes', allAttributes);
+    // const filteredAttributes = new Set(
+    //   [...allAttributes].filter((attributeId) => programAttributesMap[attributeId])
+    // );
+    // console.log('Filtered All Attributes:', filteredAttributes);
+    let entityColumns = Array.from(allAttributes).map((attrId) => {
         const foundAttribute = teis
             .flatMap((tei) => {
             const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
@@ -3232,6 +3229,10 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             key: attrId,
         };
     });
+    entityColumns = entityColumns.filter((column) => {
+        // Check if the column label is part of any value in programAttributesMap
+        return Object.values(programAttributesMap).some((value) => value.includes(column.label));
+    });
     const attributesData = teis.map((tei, idx) => {
         let row = {
             trackedEntityInstance: tei.trackedEntityInstance,
@@ -3278,7 +3279,7 @@ const addActionsColumn = (columns, actionOptions) => {
 };
 
 // src/app/line-list-table.component.ts
-class LineListTableComponent extends ReactWrapperComponent {
+class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.actionSelected = new EventEmitter();
@@ -3332,7 +3333,7 @@ class LineListTableComponent extends ReactWrapperComponent {
             useEffect(() => {
                 setLoading(true);
                 this.lineListService
-                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate)
+                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
@@ -3384,23 +3385,31 @@ class LineListTableComponent extends ReactWrapperComponent {
                     },
                 }));
             };
-            return (React__default.createElement("div", null, loading ? (React__default.createElement(CircularLoader$1, null)) :
-                (React__default.createElement(DataTable, null,
-                    React__default.createElement(TableHead, null,
-                        React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
-                    React__default.createElement(TableBody, null, 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, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key])))))))),
-                    React__default.createElement(TableFoot, null,
-                        React__default.createElement(DataTableRow, null,
-                            React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
-                                React__default.createElement("div", null,
-                                    React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
-                                            const newPageSize = Number(pageSize);
-                                            setPager((prev) => ({
-                                                ...prev,
-                                                page: 1,
-                                                pageSize: newPageSize,
-                                            }));
-                                        }, pageSizes: ['5', '10', '20', '50'] })))))))));
+            return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: 8,
+                } },
+                React__default.createElement(CircularLoader$1, { small: true }),
+                React__default.createElement("div", { style: {
+                        fontSize: 14,
+                    } }, "Loading"))) : (React__default.createElement(DataTable, null,
+                React__default.createElement(TableHead, null,
+                    React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
+                React__default.createElement(TableBody, null, 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])))))))),
+                React__default.createElement(TableFoot, null,
+                    React__default.createElement(DataTableRow, null,
+                        React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
+                            React__default.createElement("div", null,
+                                React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
+                                        const newPageSize = Number(pageSize);
+                                        setPager((prev) => ({
+                                            ...prev,
+                                            page: 1,
+                                            pageSize: newPageSize,
+                                        }));
+                                    }, pageSizes: ['5', '10', '20', '50'] })))))))));
         };
     }
     ngOnChanges(changes) {
@@ -3433,7 +3442,7 @@ class LineListTableComponent extends ReactWrapperComponent {
         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" }, outputs: { actionSelected: "actionSelected" }, 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" }, outputs: { actionSelected: "actionSelected" }, 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,
@@ -3454,6 +3463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], filters: [{
                 type: Input
+            }], ouMode: [{
+                type: Input
             }], actionSelected: [{
                 type: Output
             }] } });
@@ -3473,6 +3484,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 }]
         }] });
 
+const dropdownStyles = {
+    layer: {
+        zIndex: '1 !important',
+    },
+};
+
+// Helper function to generate a unique class name
+const generateClassName = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === "object" && key.startsWith("@media")) {
+            const mediaStyles = convertStylesToCSS(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith("&:")) {
+            const pseudoClass = key.replace("&", "");
+            cssString += `${pseudoClass} { ${convertStylesToCSS("", 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 = (stylesObj) => {
+    const [classNames, setClassNames] = useState({});
+    useEffect(() => {
+        const convertedStyles = Object.keys(stylesObj).map((key) => {
+            const className = generateClassName(key);
+            const styleElement = document.createElement("style");
+            styleElement.innerHTML = convertStylesToCSS(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;
+};
+
+const useCurrentModal = () => {
+    const [CurrentModal, setCurrentModal] = useState();
+    return [
+        CurrentModal,
+        (Modal) => {
+            // As setState supports functional updates, we can't pass functional
+            // components directly
+            setCurrentModal(() => Modal);
+        },
+    ];
+};
+const ContextMenu = (params) => {
+    const { onClose, onMenuClick, anchorRef, dropDownOptions } = params;
+    const [CurrentModal, setCurrentModal] = useCurrentModal();
+    const styles = useDynamicStyles(dropdownStyles);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Layer$1, { onBackdropClick: (event, data) => onClose(event, data), className: styles.layer },
+            React__default.createElement(Popper, { reference: anchorRef, placement: "bottom-start" },
+                React__default.createElement(FlyoutMenu, null, dropDownOptions.map((dropDownOption, index) => (React__default.createElement(MenuItem$1, { key: index, destructive: dropDownOption.destructive, label: dropDownOption.label, icon: dropDownOption.icon, onClick: () => {
+                        onMenuClick(dropDownOption);
+                        onClose();
+                    }, dense: true })))))),
+        CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
+                onClose();
+                setCurrentModal(null);
+            } }))));
+};
+const DropdownMenu = (props) => {
+    const ref = useRef();
+    const [visible, setVisible] = useState(false);
+    const { dropdownOptions, onClick } = props;
+    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
+        React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors$1.grey600 }), onClick: () => setVisible(true) }),
+        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
+                onClick(dropDownOption);
+            } }))));
+};
+
+class DataTableUIComponent extends ReactWrapperModule {
+    constructor() {
+        super(...arguments);
+        this.actionSelected = new EventEmitter();
+        this.DataTableUI = () => {
+            const [columns, setColumns] = useState([]);
+            const [tableData, setTableData] = useState([]);
+            useEffect(() => {
+                if (!this.data || !this.columnDefinitions)
+                    return;
+                const filteredColumns = this.columnDefinitions.filter((col) => col.visible !== false);
+                const sortedColumns = filteredColumns.sort((a, b) => {
+                    const indexA = Number(a.index) || 0;
+                    const indexB = Number(b.index) || 0;
+                    return indexA - indexB;
+                });
+                setColumns(sortedColumns);
+                setTableData(this.data);
+            }, [this.data, this.columnDefinitions]);
+            const getDropdownOptions = (row) => {
+                return (this.actionOptions || []).map((option) => ({
+                    ...option,
+                    onClick: () => {
+                        // Ensure the onClick is called with the correct context
+                        if (option.onClick) {
+                            option.onClick(row); // Passing row to the handler
+                        }
+                        this.actionSelected.emit({ action: option.label, row }); // Emit action and row details
+                    },
+                }));
+            };
+            return (React__default.createElement("div", null,
+                React__default.createElement(DataTable, null,
+                    React__default.createElement(TableHead, null,
+                        React__default.createElement(DataTableRow, null,
+                            columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.column }, col.display))),
+                            this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableColumnHeader, null, "Actions")))),
+                    React__default.createElement(TableBody, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
+                        columns.map((col) => (React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-'))),
+                        this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableCell, null,
+                            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 }))))));
+        };
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = this.DataTableUI;
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: DataTableUIComponent, isStandalone: false, selector: "app-data-table-ui", inputs: { data: "data", columnDefinitions: "columnDefinitions", actionOptions: "actionOptions" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-table-ui', standalone: false, template: '<ng-content></ng-content>' }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], columnDefinitions: [{
+                type: Input
+            }], actionOptions: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
+            }] } });
+
+class DataTableUIModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, declarations: [DataTableUIComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [DataTableUIComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DataTableUIComponent],
+                    exports: [DataTableUIComponent],
+                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule],
+                    providers: [],
+                }]
+        }] });
+
 class FormField {
     constructor(options = {}) {
         this.value = options.value || '';
@@ -3911,6 +4102,13 @@ class FormValueUtil {
     }
 }
 
+class TranslationUtil {
+    static getTranslatedFormName(field, locale = 'sw') {
+        const translation = (field['translations'] || []).find((translation) => translation['locale'] == locale && translation['property'] == 'NAME');
+        return (translation ? translation['value'] : field['formName'] || field['name']);
+    }
+}
+
 // 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.
@@ -3922,6 +4120,9 @@ class FormFieldGroup {
         const fields = this.params.formFieldGroup?.fields || [];
         return fields
             .map((field) => {
+            if (field instanceof FormField) {
+                return field;
+            }
             const fieldMetaData = this.params.fieldMetaData.find((attribute) => attribute['id'] === field.id);
             if (!fieldMetaData) {
                 return null;
@@ -3964,7 +4165,7 @@ class FormFieldGroup {
     toJson() {
         return {
             id: this.params.formFieldGroup?.id,
-            name: this.params.formFieldGroup?.name,
+            name: TranslationUtil.getTranslatedFormName(this.params.formFieldGroup, this.params.locale),
             isFormHorizontal: this.params.formFieldGroup?.isFormHorizontal,
             repeatDependentField: this.params.formFieldGroup?.repeatDependentField,
             dataKey: this.params.formFieldGroup?.dataKey,
@@ -4071,7 +4272,11 @@ class FormMetaData {
         this.params = params;
     }
     get sections() {
-        return (this.params.formMetaData.sections || [])
+        const customSections = this.params.customFormMetaData?.sections;
+        if (!customSections) {
+            return this.#getSectionFromPrograms(this.params.programs);
+        }
+        return (this.params.customFormMetaData?.sections || [])
             .map((section) => {
             const program = this.params.programs.find((program) => section.program === program['id']);
             if (!program) {
@@ -4091,7 +4296,7 @@ class FormMetaData {
     get rules() {
         let ruleVariables = [];
         return [
-            ...(this.params.formMetaData.rules || []),
+            ...(this.params.customFormMetaData?.rules || []),
             ...(flatten(this.params.programs.map((program) => {
                 ruleVariables = [
                     ...ruleVariables,
@@ -4101,10 +4306,131 @@ class FormMetaData {
             })) || []).map((rule) => new MetadataRule(rule, ruleVariables).toJson()),
         ];
     }
+    #getSectionFromPrograms(programs) {
+        const sections = flatten(programs.map((program) => {
+            return [
+                this.#getReportingDetailsSection(program),
+                new FormMetadataSection({
+                    section: {
+                        id: 'registration',
+                        name: 'Registration',
+                        fieldGroups: (program.programSections || []).length > 0
+                            ? program.programSections.map((programSection) => {
+                                return {
+                                    id: programSection.id,
+                                    name: programSection.name,
+                                    sortOrder: programSection.sortOrder,
+                                    fields: programSection.trackedEntityAttributes,
+                                };
+                            })
+                            : [
+                                {
+                                    id: 'registration',
+                                    name: '',
+                                    sortOrder: 1,
+                                    fields: (program.programTrackedEntityAttributes || []).map((programTrackedEntityAttribute) => {
+                                        return {
+                                            id: programTrackedEntityAttribute
+                                                .trackedEntityAttribute?.id,
+                                        };
+                                    }),
+                                },
+                            ],
+                    },
+                    program,
+                    locale: this.params.locale,
+                }).toJson(),
+                ...(program.programStages || []).map((programStage) => {
+                    return new FormMetadataSection({
+                        section: {
+                            id: programStage.id,
+                            name: programStage.name,
+                            fieldGroups: (programStage.programStageSections || []).length > 0
+                                ? programStage.programStageSections.map((programStageSection) => {
+                                    return {
+                                        id: programStageSection.id,
+                                        name: programStageSection.name,
+                                        dataKey: camelCase(programStage.code),
+                                        repeatableStage: programStage.repeatable
+                                            ? programStage.id
+                                            : undefined,
+                                        sortOrder: programStageSection.sortOrder,
+                                        fields: programStageSection.dataElements,
+                                    };
+                                })
+                                : [
+                                    {
+                                        id: programStage.id,
+                                        dataKey: camelCase(programStage.code),
+                                        repeatableStage: programStage.repeatable
+                                            ? programStage.id
+                                            : undefined,
+                                        fields: (programStage.programStageDataElements || []).map((programStageDataElement) => {
+                                            return {
+                                                id: programStageDataElement.dataElement?.id,
+                                            };
+                                        }),
+                                    },
+                                ],
+                        },
+                        program,
+                        locale: this.params.locale,
+                    }).toJson();
+                }),
+            ];
+        }));
+        if (sections.length === 0) {
+            return [];
+        }
+        return sections;
+    }
+    #getReportingDetailsSection(program) {
+        return new FormMetadataSection({
+            section: {
+                id: 'reporting_details',
+                name: 'Reporting details',
+                fieldGroups: [
+                    {
+                        id: 'reporting_details',
+                        sortOrder: 1,
+                        isFormHorizontal: true,
+                        fields: [
+                            new FormField({
+                                id: 'orgUnit',
+                                key: 'orgUnit',
+                                label: 'Organisation unit',
+                                code: 'orgUnit',
+                                required: true,
+                                controlType: 'org-unit',
+                            }),
+                            new DateField({
+                                id: 'enrollmentDate',
+                                label: program.enrollmentDateLabel || 'Enrollment date',
+                                code: 'enrollmentDate',
+                                key: 'enrollmentDate',
+                                required: true,
+                            }),
+                            program.displayIncidentDate
+                                ? new DateField({
+                                    id: 'incidentDate',
+                                    label: program.incidentDateLabel || 'Incident date',
+                                    code: 'incidentDate',
+                                    key: 'incidentDate',
+                                    required: true,
+                                })
+                                : null,
+                        ].filter((field) => field),
+                    },
+                ],
+            },
+            program,
+            locale: this.params.locale,
+        }).toJson();
+    }
     toJson() {
         return {
-            id: this.params.formMetaData?.id,
-            name: this.params.formMetaData?.name,
+            id: this.params.customFormMetaData?.id,
+            name: TranslationUtil.getTranslatedFormName(this.params.customFormMetaData || {}, this.params.locale),
             fields: this.fields,
             sections: this.sections,
             rules: this.rules,
@@ -4124,16 +4450,18 @@ class FormValue {
     clear() {
         this.form.reset();
     }
-    getValues() {
+    getValues(options) {
         const newValues = {};
         const formValues = this.form?.getRawValue();
+        if (options?.valueOnly) {
+            return formValues;
+        }
         Object.keys(formValues).forEach((key) => {
             const field = find(this.fields, ['key', key]);
             if (field) {
                 newValues[key] = {
-                    id: field.id,
+                    ...field,
                     value: formValues[key],
-                    options: field.options,
                 };
             }
         });
@@ -4148,7 +4476,7 @@ class FormValue {
 // 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.
-class BaseFormFieldComponent extends ReactWrapperComponent {
+class BaseFormFieldComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.ngZone = inject(NgZone);
@@ -4774,12 +5102,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class RepeatableFormComponent {
+    #eventFormValue$;
+    #showForm$;
+    #events$;
     constructor() {
+        this.ngZone = inject(NgZone);
         this.fieldGroup = input.required();
+        this.events = model();
         this.dataEntities = input.required();
         this.repeatableEvents = [];
         this.repeatableData = {};
         this.repeatableStageUpdate = new EventEmitter();
+        this.eventFormValue = signal(null);
+        this.showForm = signal(false);
+        this.eventIndex = signal(0);
+        this.#eventFormValue$ = toObservable(this.eventFormValue);
+        this.#showForm$ = toObservable(this.showForm);
+        this.#events$ = toObservable(this.events);
     }
     get isValid() {
         return !Object.keys(this.repeatableData).some((index) => {
@@ -4788,9 +5127,9 @@ class RepeatableFormComponent {
         });
     }
     ngOnInit() {
-        this.repeatableEvents = (this.events?.length > 0
-            ? this.events
-            : range(this.numberOfRows).map(() => ({}))).map((event, index) => {
+        this.eventForm = FormUtil.getFormGroup(this.fieldGroup().fields, {});
+        this.eventFormValue.set(new FormValue(this.eventForm, this.fieldGroup().fields));
+        this.repeatableEvents = (this.events() || []).map((event, index) => {
             const fieldControls = (this.fieldGroup().fields || []).reduce((fieldObject, field) => {
                 const value = (event.dataValueEntities || {})[field.key] || '';
                 return {
@@ -4804,19 +5143,20 @@ class RepeatableFormComponent {
         });
         this.repeatableStageUpdate.emit(this.repeatableData);
     }
-    onFormUpdate(formValue, eventIndex) {
-        this.repeatableData = { ...this.repeatableData, [eventIndex]: formValue };
-        if (this.isValid) {
-            this.repeatableStageUpdate.emit(this.repeatableData);
-        }
+    onFormUpdate(formValue) {
+        this.eventFormValue.set(formValue);
+        this.repeatableData = {
+            ...this.repeatableData,
+            [this.eventIndex()]: formValue,
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div>\n  <div\n    *ngFor=\"let repeatableEvent of repeatableEvents; let i = index\"\n    class=\"card p-3 mb-2\"\n  >\n    <div class=\"font-weight-bold h6\">{{ fieldGroup().name }}: #{{ i + 1 }}</div>\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"repeatableEvent.form\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"repeatableEvent\"\n      [isFormHorizontal]=\"true\"\n      (formUpdate)=\"onFormUpdate($event, i)\"\n    />\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { events: "eventsChange", repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-repeatable-form', standalone: false, template: "<div>\n  <div\n    *ngFor=\"let repeatableEvent of repeatableEvents; let i = index\"\n    class=\"card p-3 mb-2\"\n  >\n    <div class=\"font-weight-bold h6\">{{ fieldGroup().name }}: #{{ i + 1 }}</div>\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"repeatableEvent.form\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"repeatableEvent\"\n      [isFormHorizontal]=\"true\"\n      (formUpdate)=\"onFormUpdate($event, i)\"\n    />\n  </div>\n</div>\n" }]
-        }], propDecorators: { formObject: [{
+            args: [{ selector: 'ng-dhis2-ui-repeatable-form', standalone: false, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formObject: [{
                 type: Input
             }], formData: [{
                 type: Input
@@ -4826,8 +5166,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], programRuleActions: [{
                 type: Input
-            }], events: [{
-                type: Input
             }], program: [{
                 type: Input
             }], programStage: [{
@@ -4840,8 +5178,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 
 class SectionFormComponent {
     constructor() {
+        this.ngZone = inject(NgZone);
         this.loading = input();
-        this.isLabResulst = false;
         this.formMetaData = input.required();
         this.dataValueEntities = input.required();
         this.formGroups = {};
@@ -4851,43 +5189,27 @@ class SectionFormComponent {
         this.save = new EventEmitter();
         this.formUpdate = new EventEmitter();
         this.cancel = new EventEmitter();
-    }
-    get inValid() {
-        const valueValidity = Object.keys(this.formValueEntity)
-            .map((key) => {
-            return (this.formValueEntity[key] || {}).isValid;
-        })
-            .some((validity) => !validity);
-        const repeatableDataValidity = Object.keys(this.repeatableFormValueEntity)
-            .map((key) => {
-            return Object.keys(this.repeatableFormValueEntity[key]).some((valueIndex) => {
-                return ((this.repeatableFormValueEntity[key] || {})[+valueIndex] || {}).isValid;
-            });
-        })
-            .some((validity) => !validity);
-        return valueValidity && repeatableDataValidity;
+        this.inValid = signal(true);
+        this.inValid$ = toObservable(this.inValid);
     }
     ngOnInit() {
         if (this.formMetaData().sections) {
             (this.formMetaData().sections || []).forEach((formSection) => {
                 (formSection.fieldGroups || []).forEach((fieldGroup) => {
                     const formGroup = FormUtil.getFormGroup(fieldGroup.fields, this.dataValueEntities());
-                    // Set bookingId as default value for `travelerReferenceId` after search refLabNum
-                    const refLabNum = formGroup.get('refLabNum');
-                    const travelerReferenceIdControl = formGroup.get('travelerReferenceId');
-                    if (travelerReferenceIdControl) {
-                        const defaultValue = this.clientId ? this.clientId : '';
-                        travelerReferenceIdControl.setValue(defaultValue);
-                    }
-                    else if (refLabNum) {
-                        const defaultValue = this.labNumber ? this.labNumber : '';
-                        refLabNum.setValue(defaultValue);
-                    }
                     const formValue = new FormValue(formGroup, fieldGroup.fields);
-                    this.formValueEntity[fieldGroup.id] = formValue;
                     this.formGroups[fieldGroup.id] = formGroup;
+                    if (!fieldGroup.repeatableStage) {
+                        this.formValueEntity[fieldGroup.id] = formValue;
+                    }
+                    else {
+                        this.repeatableFormValueEntity[fieldGroup.dataKey || fieldGroup.id] = {
+                            0: formValue,
+                        };
+                    }
                 });
             });
+            this.inValid.set(this.checkIfInValid());
             this.ruleActions = new ProgramRuleEngine()
                 .setRules(this.formMetaData().rules)
                 .setDataValues(this.#getDataValue())
@@ -4895,13 +5217,17 @@ class SectionFormComponent {
         }
     }
     onUpdateRepeatableStage(repeatableData, fieldGroup) {
-        this.repeatableFormValueEntity[fieldGroup.dataKey || fieldGroup.id] =
-            repeatableData;
-        const dataValues = this.#getDataValue();
-        this.formUpdate.emit(dataValues);
+        if (!isEmpty(repeatableData)) {
+            this.repeatableFormValueEntity[fieldGroup.dataKey || fieldGroup.id] =
+                repeatableData;
+            this.inValid.set(this.checkIfInValid());
+            const dataValues = this.#getDataValue();
+            this.formUpdate.emit(dataValues);
+        }
     }
     onFormUpdate(formValue, fieldGroupId) {
         this.formValueEntity[fieldGroupId] = formValue;
+        this.inValid.set(this.checkIfInValid());
         const dataValues = this.#getDataValue();
         this.ruleActions = new ProgramRuleEngine()
             .setRules(this.formMetaData().rules)
@@ -4909,13 +5235,12 @@ class SectionFormComponent {
             .execute();
         this.formUpdate.emit(dataValues);
     }
-    onSubmit(event) {
-        event.stopPropagation();
+    onSubmit() {
         const dataValues = this.#getDataValue();
         this.save.emit(dataValues);
     }
     onCancel(event) {
-        event.stopPropagation();
+        event?.stopPropagation();
         this.cancel.emit();
     }
     #getDataValue() {
@@ -4934,21 +5259,28 @@ class SectionFormComponent {
         }, {});
         return { ...dataValues, ...repeatableValues };
     }
+    checkIfInValid() {
+        const valueValidity = Object.keys(this.formValueEntity)
+            .map((key) => {
+            return (this.formValueEntity[key] || {}).isValid;
+        })
+            .some((validity) => !validity);
+        const repeatableDataValidity = Object.keys(this.repeatableFormValueEntity)
+            .map((key) => {
+            return Object.keys(this.repeatableFormValueEntity[key]).some((valueIndex) => {
+                return ((this.repeatableFormValueEntity[key] || {})[+valueIndex] || {}).isValid;
+            });
+        })
+            .some((validity) => !validity);
+        return valueValidity || repeatableDataValidity;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isLab: { classPropertyName: "isLab", publicName: "isLab", isSignal: false, isRequired: false, transformFunction: null }, isLabResulst: { classPropertyName: "isLabResulst", publicName: "isLabResulst", isSignal: false, isRequired: false, transformFunction: null }, clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: false, isRequired: false, transformFunction: null }, labNumber: { classPropertyName: "labNumber", publicName: "labNumber", isSignal: false, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"pt-3 pb-3 font-weight-bold text-left\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"p-2\">\n      <ng-container *ngIf=\"formSection\">\n        <div class=\"row\" *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"col-12\"\n            >\n              <div class=\"pt-2 pb-3 font-weight-bold text-left\">\n                {{ fieldGroup?.name }}\n              </div>\n            </div>\n            <div class=\"col-12\" *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                />\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                  /></ng-container>\n                </ng-container>\n                } @else { Normal event form }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"flex gap-2 m-2\">\n    <button mat-stroked-button (click)=\"onCancel($event)\">\n      {{ 'cancel' }}\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"!isLab || isLabResulst\"\n    >\n      <div *ngIf=\"isloading\" class=\"p-1\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n      <span *ngIf=\"!loading()\">{{ 'submit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Add sample' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Exit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["repeatableStageUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["eventsChange", "repeatableStageUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SectionFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-section-form', standalone: false, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"pt-3 pb-3 font-weight-bold text-left\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"p-2\">\n      <ng-container *ngIf=\"formSection\">\n        <div class=\"row\" *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"col-12\"\n            >\n              <div class=\"pt-2 pb-3 font-weight-bold text-left\">\n                {{ fieldGroup?.name }}\n              </div>\n            </div>\n            <div class=\"col-12\" *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                />\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                  /></ng-container>\n                </ng-container>\n                } @else { Normal event form }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"flex gap-2 m-2\">\n    <button mat-stroked-button (click)=\"onCancel($event)\">\n      {{ 'cancel' }}\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"!isLab || isLabResulst\"\n    >\n      <div *ngIf=\"isloading\" class=\"p-1\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n      <span *ngIf=\"!loading()\">{{ 'submit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Add sample' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Exit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n  </div>\n</ng-container>\n" }]
-        }], propDecorators: { isLab: [{
-                type: Input
-            }], isLabResulst: [{
-                type: Input
-            }], clientId: [{
-                type: Input
-            }], labNumber: [{
-                type: Input
-            }], save: [{
+            args: [{ selector: 'ng-dhis2-ui-section-form', standalone: false, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { save: [{
                 type: Output
             }], formUpdate: [{
                 type: Output
@@ -4962,11 +5294,16 @@ class D2FormModule {
             FormComponent,
             RepeatableFormComponent,
             SectionFormComponent,
-            FormFieldItemComponent], imports: [CommonModule, ReactiveFormsModule, OrganisationUnitSelectorModule], exports: [FormFieldComponent,
+            FormFieldItemComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            ReactWrapperModule,
+            OrganisationUnitSelectorModule], exports: [FormFieldComponent,
             FormComponent,
             RepeatableFormComponent,
             SectionFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, imports: [CommonModule, ReactiveFormsModule, OrganisationUnitSelectorModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            OrganisationUnitSelectorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, decorators: [{
             type: NgModule,
@@ -4978,7 +5315,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                         SectionFormComponent,
                         FormFieldItemComponent,
                     ],
-                    imports: [CommonModule, ReactiveFormsModule, OrganisationUnitSelectorModule],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        ReactWrapperModule,
+                        OrganisationUnitSelectorModule,
+                    ],
                     exports: [
                         FormFieldComponent,
                         FormComponent,
@@ -4992,9 +5334,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+class SelectionFiltersComponent extends ReactWrapperModule {
+    constructor() {
+        super(...arguments);
+        this.actionOptions = [];
+        this.attributeFilters = [];
+        this.dataElementFilters = [];
+        this.actionSelected = new EventEmitter();
+        this.SelectionFiltersUI = () => {
+            const [filters, setFilters] = useState({
+                attributeFilters: this.attributeFilters || [],
+                dataElementFilters: this.dataElementFilters || [],
+            });
+            useEffect(() => {
+                setFilters({
+                    attributeFilters: this.attributeFilters,
+                    dataElementFilters: this.dataElementFilters,
+                });
+            }, [this.attributeFilters, this.dataElementFilters]);
+            const handleAttributeChange = (index, selectedValue) => {
+                setFilters((prevFilters) => {
+                    const updatedFilters = [...prevFilters.attributeFilters];
+                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
+                    return { ...prevFilters, attributeFilters: updatedFilters };
+                });
+            };
+            const handleDataElementChange = (index, selectedValue) => {
+                setFilters((prevFilters) => {
+                    const updatedFilters = [...prevFilters.dataElementFilters];
+                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
+                    return { ...prevFilters, dataElementFilters: updatedFilters };
+                });
+            };
+            const handleSearch = () => {
+                this.actionSelected.emit(filters);
+            };
+            // Grid Column Span Logic for Attribute Filters
+            const getAttributeColumnSpan = (index) => {
+                const totalItems = filters.attributeFilters.length;
+                if (totalItems <= 4) {
+                    // If 1 to 4 items, place them in a single row (span all columns if there's only one item)
+                    if (totalItems === 1) {
+                        return 'span 4'; // One item spans all four columns
+                    }
+                    if (totalItems === 2) {
+                        return 'span 2'; // Two items, each spans 2 columns
+                    }
+                    if (totalItems === 3) {
+                        return 'span 1'; // Three items, each spans one column
+                    }
+                    if (totalItems === 4) {
+                        return 'span 1'; // Four items, each spans one column
+                    }
+                }
+                else {
+                    // More than 4 items, recursively adjust the placement
+                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    if (index % 2 === 0) {
+                        // For first item in each row, span 2 columns
+                        return 'span 2';
+                    }
+                    else if (index === totalItems - 1) {
+                        // Last item, spans the full row (4 columns)
+                        return 'span 4';
+                    }
+                    else {
+                        // For other items, span 2 columns
+                        return 'span 2';
+                    }
+                }
+                return 'span 1'; // Default behavior
+            };
+            // Grid Column Span Logic for Data Element Filters
+            const getDataElementColumnSpan = (index) => {
+                const totalItems = filters.dataElementFilters.length;
+                if (totalItems <= 4) {
+                    // If 1 to 4 items, place them in a single row (span all columns if there's only one item)
+                    if (totalItems === 1) {
+                        return 'span 4'; // One item spans all four columns
+                    }
+                    if (totalItems === 2) {
+                        return 'span 2'; // Two items, each spans 2 columns
+                    }
+                    if (totalItems === 3) {
+                        return 'span 1'; // Three items, each spans one column
+                    }
+                    if (totalItems === 4) {
+                        return 'span 1'; // Four items, each spans one column
+                    }
+                }
+                else {
+                    // More than 4 items, recursively adjust the placement
+                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    if (index % 2 === 0) {
+                        // For first item in each row, span 2 columns
+                        return 'span 2';
+                    }
+                    else if (index === totalItems - 1) {
+                        // Last item, spans the full row (4 columns)
+                        return 'span 4';
+                    }
+                    else {
+                        // For other items, span 2 columns
+                        return 'span 2';
+                    }
+                }
+                return 'span 1'; // Default behavior
+            };
+            return (React__default.createElement("div", { style: {
+                    fontFamily: 'Arial, sans-serif',
+                    padding: '20px',
+                    backgroundColor: '#f9f9f9',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+                } },
+                React__default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                        gap: '16px',
+                    } }, filters.attributeFilters.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: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
+                React__default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                        gap: '16px',
+                    } }, filters.dataElementFilters.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: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", 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"))));
+        };
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = this.SelectionFiltersUI;
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", attributeFilters: "attributeFilters", dataElementFilters: "dataElementFilters", startDate: "startDate", endDate: "endDate" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }]
+        }], propDecorators: { actionOptions: [{
+                type: Input
+            }], attributeFilters: [{
+                type: Input
+            }], dataElementFilters: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
+            }] } });
+
+class SelectionFiltersUiModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [SelectionFiltersComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SelectionFiltersComponent],
+                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule],
+                    exports: [SelectionFiltersComponent],
+                }]
+        }] });
+
+class TrackerFormComponent {
+    constructor() {
+        this.program = input.required();
+        this.d2 = window.d2Web;
+    }
+    async ngOnInit() {
+        this.trackerQuery = this.d2.trackerModule.trackedEntity.setProgram(this.program());
+        const program = await this.trackerQuery.getMetaData();
+        const instance = await this.trackerQuery.create();
+        if (program) {
+            this.formMetaData = new FormMetaData({
+                programs: [program],
+            }).toJson();
+        }
+    }
+    onSave(event) { }
+    onCancel() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: TrackerFormComponent, isStandalone: false, selector: "ng-dhis2-ui-tracker-form", inputs: { program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"{}\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n", dependencies: [{ kind: "component", type: SectionFormComponent, selector: "ng-dhis2-ui-section-form", inputs: ["loading", "formMetaData", "dataValueEntities"], outputs: ["save", "formUpdate", "cancel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-tracker-form', standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"{}\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n" }]
+        }] });
+
+class TrackerFormModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, declarations: [TrackerFormComponent], imports: [CommonModule, D2FormModule], exports: [TrackerFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, imports: [CommonModule, D2FormModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, D2FormModule],
+                    declarations: [TrackerFormComponent],
+                    exports: [TrackerFormComponent],
+                }]
+        }] });
+
+// 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.
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Boolean$1 as Boolean, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DateField, DateRangeValue, Dropdown, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent };
+export { Boolean$1 as Boolean, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DataTableUIComponent, DataTableUIModule, DateField, DateRangeValue, Dropdown, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, SelectionFiltersComponent, SelectionFiltersUiModule, TrackerFormComponent, TrackerFormModule, TranslationUtil };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map