@iapps/ng-dhis2-ui 1.1.53 → 1.1.55

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

@@ -1,7 +1,7 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, inject, NgZone, input, ChangeDetectionStrategy, Injectable, model, signal, computed, ViewChildren } from '@angular/core';
+import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, inject, NgZone, input, ChangeDetectionStrategy, Injectable, model, computed, signal, effect, ViewChildren } from '@angular/core';
 import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider, useDataEngine, Provider } from '@dhis2/app-runtime';
 import * as i1 from '@iapps/ngx-dhis2-http-client';
 import { NgxDhis2HttpClientService } from '@iapps/ngx-dhis2-http-client';
@@ -25,8 +25,8 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
-import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, Chip, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
-import { isObject, isString, sortBy, isArray, find, camelCase, flatten, debounce, isUndefined, head, isEmpty } from 'lodash';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, Chip, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { isObject, isString, sortBy, isArray, find, camelCase, flatten, isUndefined, debounce, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { map as map$1, switchMap } from 'rxjs/operators';
@@ -3295,15 +3295,24 @@ class LineListService {
     getProgramMetadata(programId) {
         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, ouMode) {
+    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode, filterRootOrgUnit) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
         const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
         return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,orgUnit,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=created:desc`).pipe(map$1((response) => {
-            //TODO: use the api to to order by desc
-            // response.trackedEntityInstances.reverse();
+            if (filterRootOrgUnit) {
+                response.trackedEntityInstances = response.trackedEntityInstances.filter((tei) => tei.orgUnit !== orgUnit // Exclude TEIs with the root orgUnit
+                );
+            }
             return response;
         }));
+        // pipe(
+        //   map((response: any) => {
+        //    //TODO: use the api to to order by desc
+        //   // response.trackedEntityInstances.reverse();
+        //     return response;
+        //   })
+        // );
     }
     getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
@@ -3317,7 +3326,7 @@ class LineListService {
         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, ouMode) {
+    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode, filterRootOrgUnit) {
         return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
             if (programStageId) {
                 return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
@@ -3326,7 +3335,7 @@ class LineListService {
                 })));
             }
             if (programMetadata.programType === 'WITH_REGISTRATION') {
-                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((teis) => ({
+                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode, filterRootOrgUnit).pipe(map$1((teis) => ({
                     metadata: programMetadata,
                     data: teis,
                 })));
@@ -3378,7 +3387,10 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     //organisation units from metadata
     let orgUnitsFromMetaData = response.metadata.organisationUnits;
     //a Map to efficiently look up orgUnit names by ID
-    const orgUnitMap = new Map(orgUnitsFromMetaData.map((ou) => [ou.id, ou.name]));
+    const orgUnitMap = new Map(orgUnitsFromMetaData.map((ou) => [
+        ou.id,
+        ou.name,
+    ]));
     const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
         displayInList: attr.displayInList,
         searchable: attr.searchable,
@@ -3449,11 +3461,17 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             ? matchingEnrollment.attributes
             : tei.attributes;
         attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
+        //include orgUnit in the row for id access
+        row['orgUnitId'] = tei.orgUnit;
         // Access the name of the orgUnit using the Map
         row['orgUnit'] = orgUnitMap.get(tei.orgUnit) || tei.orgUnit || 'N/A';
         return row;
     });
-    return { columns: entityColumns, data: attributesData, filteredEntityColumns: filteredEntityColumns };
+    return {
+        columns: entityColumns,
+        data: attributesData,
+        filteredEntityColumns: filteredEntityColumns,
+    };
 };
 const getEventData = (response, pager) => {
     const events = response.data.events;
@@ -3497,6 +3515,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.isButtonLoading = false;
         this.buttonLabel = '';
         this.firstValue = new EventEmitter();
+        this.filterRootOrgUnit = false;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
         };
@@ -3556,7 +3575,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, 
                 // this.attributeFilters,
-                this.startDate, this.endDate, this.ouMode)
+                this.startDate, this.endDate, this.ouMode, this.filterRootOrgUnit)
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
@@ -3782,7 +3801,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -3821,6 +3840,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Output
             }], buttonFilter: [{
                 type: Input
+            }], filterRootOrgUnit: [{
+                type: Input
             }] } });
 
 class LineListModule {
@@ -4040,6 +4061,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 }]
         }] });
 
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+const useFieldValidation = (props) => {
+    const { form, touched, field, value } = props;
+    const hasError = useMemo(() => {
+        return touched && (form.get(field.id) || form.get(field.key))?.invalid;
+    }, [value, touched]);
+    const validationError = useMemo(() => {
+        if (!touched) {
+            return undefined;
+        }
+        const error = (form.get(field.id) || form.get(field.key))?.errors;
+        if (!error) {
+            return undefined;
+        }
+        if (error['min']) {
+            return `${field.label || 'Value'} should not be less than ${error['min'].min}!`;
+        }
+        else if (error['max']) {
+            return `${field.label || 'Value'} should not be greater than ${error['max'].max}!`;
+        }
+        else if (error['pattern']) {
+            if (field.type === 'email') {
+                return `The email address provided is not valid`;
+            }
+            else if (field.type === 'tel') {
+                return 'Phone number provided is not valid';
+            }
+            else {
+                return `${field.label || 'Value'} should have appropriate format`;
+            }
+        }
+        return error['required']
+            ? `${field.label || 'Value'} is required`
+            : undefined;
+    }, [hasError]);
+    return { hasError, validationError };
+};
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
 class FormField {
     constructor(options = {}) {
         this.value = options.value || '';
@@ -4053,11 +4118,10 @@ class FormField {
         this.controlType = options.controlType;
         this.type = options.type || '';
         this.options = options.options || [];
-        this.disabled = options.disabled || false;
+        this.disabled = options.disabled ?? false;
         this.placeholder = options.placeholder || '';
         this.min = options.min;
-        this.max =
-            options.max || (this.controlType === 'date' ? new Date() : undefined);
+        this.max = this.setMax(options);
         this.maxLength = options.maxLength;
         this.hidden = options.hidden || false;
         this.unique = options.unique || false;
@@ -4082,6 +4146,16 @@ class FormField {
             options.availableOptionsLabel ?? 'Available options';
         this.selectedOptionsLabel =
             options.availableOptionsLabel ?? 'Selected options';
+        this.allowFutureDate = options.allowFutureDate;
+    }
+    setMax(field) {
+        if (field.controlType !== 'date') {
+            return field.max;
+        }
+        if (field.allowFutureDate) {
+            return undefined;
+        }
+        return format(new Date(), 'yyyy-MM-dd');
     }
 }
 
@@ -4562,8 +4636,9 @@ class FormFieldGroup {
 }
 
 class MetadataRuleAction {
-    constructor(ruleAction) {
+    constructor(ruleAction, ruleVariables) {
         this.ruleAction = ruleAction;
+        this.ruleVariables = ruleVariables;
     }
     get field() {
         return (this.ruleAction.dataElement?.id ||
@@ -4572,10 +4647,36 @@ class MetadataRuleAction {
     get actionType() {
         return this.ruleAction.programRuleActionType;
     }
+    get assignedData() {
+        const regex = /(A|#|V)\{([^}]+)\}/g;
+        return this.ruleAction?.data?.replace(regex, (match, _, dataVariable) => {
+            const ruleVariableObject = this.ruleVariables?.find((variable) => variable.name === dataVariable);
+            if (!ruleVariableObject) {
+                return `{${dataVariable}}`;
+            }
+            const code = camelCase(ruleVariableObject?.dataElement?.code) ||
+                ruleVariableObject?.dataElement?.id ||
+                camelCase(ruleVariableObject?.trackedEntityAttribute?.code) ||
+                ruleVariableObject?.trackedEntityAttribute?.id;
+            return `{${code}}`;
+        });
+    }
+    get displayedContent() {
+        return this.ruleAction.displayContent;
+    }
+    get options() {
+        if (this.ruleAction.option) {
+            return [this.ruleAction.option];
+        }
+        return this.ruleAction.optionGroup?.options || [];
+    }
     toJson() {
         return {
             field: this.field,
             actionType: this.actionType,
+            assignedData: this.assignedData,
+            displayedContent: this.ruleAction.displayContent,
+            options: this.options,
         };
     }
 }
@@ -4585,10 +4686,10 @@ class MetadataRule {
         this.ruleVariables = ruleVariables;
     }
     get actions() {
-        return (this.rule?.programRuleActions || []).map((action) => new MetadataRuleAction(action));
+        return (this.rule?.programRuleActions || []).map((action) => new MetadataRuleAction(action, this.ruleVariables));
     }
     get condition() {
-        const regex = /(A|#)\{([^}]+)\}/g;
+        const regex = /(A|#|V)\{([^}]+)\}/g;
         return this.rule?.condition?.replace(regex, (match, _, ruleVariable) => {
             const ruleVariableObject = this.ruleVariables?.find((variable) => variable.name === ruleVariable);
             const code = camelCase(ruleVariableObject?.dataElement?.code) ||
@@ -4617,6 +4718,7 @@ class FormMetadataSection {
                 formName: (programTrackedEntityAttribute['trackedEntityAttribute'] || {})['name'],
                 sortOrder: programTrackedEntityAttribute['sortOrder'],
                 mandatory: programTrackedEntityAttribute['mandatory'],
+                allowFutureDate: programTrackedEntityAttribute['allowFutureDate'],
                 metaType: 'ATTRIBUTE',
             };
         });
@@ -4629,6 +4731,7 @@ class FormMetadataSection {
                     ...(stageDataElement['dataElement'] ||
                         {}),
                     mandatory: stageDataElement['compulsory'],
+                    allowFutureDate: stageDataElement['allowFutureDate'],
                     stepId: programStage['id'],
                     metaType: 'DATA_ELEMENT',
                 };
@@ -4803,6 +4906,7 @@ class FormMetaData {
                                 code: 'enrollmentDate',
                                 key: 'enrollmentDate',
                                 required: true,
+                                disabled: this.params.disableEnrollmentDate,
                             }),
                             program.displayIncidentDate
                                 ? new DateField({
@@ -4887,6 +4991,7 @@ class FormMetaData {
                                 code: 'enrollmentDate',
                                 key: 'enrollmentDate',
                                 required: true,
+                                disabled: this.params.disableEnrollmentDate,
                             }),
                             program.displayIncidentDate
                                 ? new DateField({
@@ -4976,47 +5081,62 @@ class FormValue {
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-const useFieldValidation = (props) => {
-    const { form, touched, field, value } = props;
-    const hasError = useMemo(() => {
-        return touched && (form.get(field.id) || form.get(field.key))?.invalid;
-    }, [value, touched]);
-    const validationError = useMemo(() => {
-        if (!touched) {
-            return undefined;
-        }
-        const error = (form.get(field.id) || form.get(field.key))?.errors;
-        if (!error) {
+const FileUploadField = (props) => {
+    const { label, id, uploadUrl, performUpload, validationText, required, hasError, onChange, onUploadSuccess, } = props;
+    const d2 = window?.d2Web;
+    const [file, setFile] = useState(null);
+    const [uploading, setUploading] = useState();
+    const valid = useMemo(() => {
+        if (isUndefined(hasError)) {
             return undefined;
         }
-        if (error['min']) {
-            return `${field.label || 'Value'} should not be less than ${error['min'].min}!`;
-        }
-        else if (error['max']) {
-            return `${field.label || 'Value'} should not be greater than ${error['max'].max}!`;
-        }
-        else if (error['pattern']) {
-            if (field.type === 'email') {
-                return `The email address provided is not valid`;
+        return !hasError;
+    }, [hasError]);
+    const uploadFile = async (fileItem) => {
+        if (fileItem) {
+            setUploading(true);
+            const formData = new FormData();
+            formData.append('file', fileItem);
+            try {
+                const fileUploadResponse = await d2.httpInstance.post(uploadUrl, formData);
+                setUploading(false);
+                const fileId = fileUploadResponse?.data?.response?.fileResource
+                    ?.id;
+                if (fileId) {
+                    onUploadSuccess(fileId);
+                }
             }
-            else if (field.type === 'tel') {
-                return 'Phone number provided is not valid';
+            catch (error) {
+                setUploading(false);
+            }
+        }
+    };
+    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: label, name: id, required: required, validationText: validationText, onChange: (event) => {
+            const fileItem = (event?.files || [])[0];
+            setFile(fileItem);
+            if (performUpload) {
+                uploadFile(fileItem);
             }
             else {
-                return `${field.label || 'Value'} should have appropriate format`;
+                onChange(file);
             }
-        }
-        return error['required']
-            ? `${field.label || 'Value'} is required`
-            : undefined;
-    }, [hasError]);
-    return { hasError, validationError };
+            // this.ngZone.run(() => {
+            //   this.form().get(this.field().id) ||
+            //     this.form()
+            //       .get(this.field().key)
+            //       ?.setValue((event?.files || [])[0]);
+            //   this.update.emit({
+            //     form: this.form(),
+            //     value: (event?.files || [])[0],
+            //   });
+            // });
+            // setValue((event?.files || [])[0]);
+            // setTouched(true);
+        } }, file && (React__default.createElement(FileListItem, { cancelText: "Cancel", label: file.name, loading: uploading, onRemove: () => {
+            setFile(null);
+        }, removeText: "Remove" }))));
 };
 
-// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -5201,65 +5321,6 @@ const OrgUnitFormField = (props) => {
                     React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
 };
 
-// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-const FileUploadField = (props) => {
-    const { label, id, uploadUrl, performUpload, validationText, required, hasError, onChange, onUploadSuccess, } = props;
-    const d2 = window?.d2Web;
-    const [file, setFile] = useState(null);
-    const [uploading, setUploading] = useState();
-    const valid = useMemo(() => {
-        if (isUndefined(hasError)) {
-            return undefined;
-        }
-        return !hasError;
-    }, [hasError]);
-    const uploadFile = async (fileItem) => {
-        if (fileItem) {
-            setUploading(true);
-            const formData = new FormData();
-            formData.append('file', fileItem);
-            try {
-                const fileUploadResponse = await d2.httpInstance.post(uploadUrl, formData);
-                setUploading(false);
-                const fileId = fileUploadResponse?.data?.response?.fileResource
-                    ?.id;
-                if (fileId) {
-                    onUploadSuccess(fileId);
-                }
-            }
-            catch (error) {
-                setUploading(false);
-            }
-        }
-    };
-    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: label, name: id, required: required, validationText: validationText, onChange: (event) => {
-            const fileItem = (event?.files || [])[0];
-            setFile(fileItem);
-            if (performUpload) {
-                uploadFile(fileItem);
-            }
-            else {
-                onChange(file);
-            }
-            // this.ngZone.run(() => {
-            //   this.form().get(this.field().id) ||
-            //     this.form()
-            //       .get(this.field().key)
-            //       ?.setValue((event?.files || [])[0]);
-            //   this.update.emit({
-            //     form: this.form(),
-            //     value: (event?.files || [])[0],
-            //   });
-            // });
-            // setValue((event?.files || [])[0]);
-            // setTouched(true);
-        } }, file && (React__default.createElement(FileListItem, { cancelText: "Cancel", label: file.name, loading: uploading, onRemove: () => {
-            setFile(null);
-        }, removeText: "Remove" }))));
-};
-
 // Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -5273,43 +5334,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.fieldConfig = input(new FieldConfig());
         this.form = model.required();
         this.isValid = input();
-        this.uploadedFiles = [];
+        this.isValueAssigned = input();
         this.value = model();
         this.value$ = toObservable(this.value);
-        this.FieldOrgUnitSelector = (props) => {
-            const { onSelectOrgUnit, selectedOrgUnits } = props;
-            const [selected, setSelected] = useState(selectedOrgUnits);
-            const [rootOrgUnits, setRootOrgUnits] = useState();
-            const [config, setConfig] = useState();
-            useEffect(() => {
-                zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
-                    next: ([appConfig, rootOrgUnits]) => {
-                        setConfig(appConfig);
-                        setRootOrgUnits(rootOrgUnits);
-                    },
-                    error: (error) => console.error(error),
-                });
-            }, []);
-            return config ? (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(Modal$1, { position: "middle", large: true },
-                React__default.createElement(ModalTitle$1, null,
-                    "Select ",
-                    this.field().label),
-                React__default.createElement(ModalContent$1, null,
-                    React__default.createElement(OrgUnitDimension, { selected: selected, allowSingleSelection: true, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
-                            setSelected(selectionEvent.items);
-                            onSelectOrgUnit(selectionEvent.items);
-                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits }))))) : (React__default.createElement(CircularLoader$1, { small: true }));
-        };
-        this.showOrgUnitTree = signal(false);
-        this.orgUnitSelectionConfig = {
-            hideGroupSelect: true,
-            hideLevelSelect: true,
-            hideUserOrgUnits: true,
-            allowSingleSelection: true,
-            usageType: 'DATA_ENTRY',
-        };
-        this.selectedOrgUnit = signal(null);
-        this.selectedOrgUnit$ = toObservable(this.selectedOrgUnit);
+        this.isValueAssigned$ = toObservable(this.isValueAssigned);
         this.label = computed(() => {
             return !this.fieldConfig()?.hideLabel ? this.field().label : undefined;
         });
@@ -5338,10 +5366,16 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         return () => {
             const [value, setValue] = useState(this.form().get(this.field().id)?.value ||
                 this.form().get(this.field().key)?.value);
-            const [displayValue, setDisplayValue] = useState(null);
             const [selected, setSelected] = useState();
             const [touched, setTouched] = useState(false);
-            const [showOrgUnit, setShowOrgUnit] = useState(false);
+            const [disabled, setDisabled] = useState(this.field()?.disabled ?? this.field()?.generated ?? false);
+            useEffect(() => {
+                if (this.isValueAssigned()) {
+                    setDisabled(true);
+                    setValue(this.form().get(this.field().id)?.value ||
+                        this.form().get(this.field().key)?.value);
+                }
+            }, [this.isValueAssigned()]);
             const onChange = (payload) => setSelected(payload.selected);
             const arrayValue = useMemo(() => {
                 if (value && value.length > 0) {
@@ -5404,10 +5438,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             this.update.emit({ form: this.form(), value });
                         } }));
                 case 'checkbox':
-                    return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: this.field()?.disabled ||
-                            this.field()?.generated ||
-                            this.field()?.unique ||
-                            false, onChange: (event) => {
+                    return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: disabled, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.checked);
@@ -5420,10 +5451,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                         } }));
                 case 'dropdown':
-                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled ||
-                            this.field()?.generated ||
-                            this.field()?.unique ||
-                            false, required: this.field().required, className: "select", label: this.label(), selected: value, onChange: (event) => {
+                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, required: this.field().required, className: "select", label: this.label(), selected: value, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.selected);
@@ -5436,10 +5464,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             setTouched(true);
                         } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.key, label: option.label, value: option.value })))));
                 case 'multi-dropdown':
-                    return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: this.field()?.disabled ||
-                            this.field()?.generated ||
-                            this.field()?.unique ||
-                            false, label: this.label(), required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                    return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, label: this.label(), required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
                             const selectedValue = (event.selected || []).join(',');
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
@@ -5467,13 +5492,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                 setTouched(true);
                             } })));
                 default:
-                    return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, disabled: this.field()?.disabled ||
-                            this.field()?.generated ||
-                            this.field()?.unique ||
-                            false, readOnly: this.field()?.disabled ||
-                            this.field()?.generated ||
-                            this.field()?.unique ||
-                            false, onChange: (event) => {
+                    return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
                             this.ngZone.run(() => {
                                 (this.form().get(this.field().id) ||
                                     this.form().get(this.field().key))?.setValue(event.value);
@@ -5495,54 +5514,8 @@ class BaseFormFieldComponent extends ReactWrapperModule {
     onChange(event) {
         this.value.set(event);
     }
-    onSelectOrgUnit(selectedOrgUnits) {
-        this.showOrgUnitTree.set(false);
-        if ((selectedOrgUnits || [])[0]) {
-            this.selectedOrgUnit.set(selectedOrgUnits[0]);
-        }
-    }
-    onCancelOrgUnit() {
-        this.showOrgUnitTree.set(false);
-    }
-    getAppConfig() {
-        return this.httpClient.systemInfo().pipe(map((response) => {
-            const systemInfo = response;
-            return {
-                baseUrl: (document?.location?.host?.includes('localhost')
-                    ? `${document.location.protocol}//${document.location.host}`
-                    : systemInfo['contextPath']),
-                apiVersion: Number(((systemInfo['version'] || '')?.split('.') || [])[1]),
-            };
-        }));
-    }
-    getOrgUnitAttributeByUsage(usageType) {
-        switch (usageType) {
-            case 'DATA_ENTRY':
-                return 'organisationUnits';
-            case 'DATA_VIEW':
-                return 'dataViewOrganisationUnits';
-            default:
-                return 'organisationUnits';
-        }
-    }
-    getRootOrgUnits() {
-        const orgUnitAttribute = this.getOrgUnitAttributeByUsage(this.orgUnitSelectionConfig.usageType);
-        return this.httpClient
-            .me()
-            .pipe(map((user) => (user ? user[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id)));
-    }
-    getOrgUnitGroups() {
-        return firstValueFrom(this.httpClient
-            .get('organisationUnitGroups.json?fields=id,displayName,name&paging=false')
-            .pipe(map((res) => res?.['organisationUnitGroups'])));
-    }
-    getOrgUnitLevels() {
-        return firstValueFrom(this.httpClient
-            .get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false')
-            .pipe(map((res) => res?.['organisationUnitLevels'])));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isValueAssigned: { classPropertyName: "isValueAssigned", publicName: "isValueAssigned", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormFieldComponent, decorators: [{
             type: Directive
@@ -5568,6 +5541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 class FormFieldComponent {
     constructor() {
         this.field = input.required();
+        this.programRuleActions = input([]);
         this.maxDate = new Date();
         this.color = 'primary';
         this.fieldUpdate = new EventEmitter();
@@ -5578,6 +5552,10 @@ class FormFieldComponent {
         this.runtimeOptions = [];
         this.fieldFilterControl = new FormControl();
         this._onDestroy = new Subject();
+        this.isValueAssigned = signal(false);
+        this.ruleProcessor = effect(() => {
+            this.#processRules(this.programRuleActions());
+        });
     }
     ngOnChanges(changes) {
         if (changes && changes['dataEntities'] && this.field()?.dependentField) {
@@ -5602,9 +5580,33 @@ class FormFieldComponent {
             this.optionSearchTerm = this.fieldFilterControl.value;
         });
     }
+    #processRules(ruleActions) {
+        ruleActions
+            .filter((ruleAction) => ruleAction.field === this.field().id)
+            .forEach((ruleAction) => {
+            switch (ruleAction.actionType) {
+                case 'ASSIGN': {
+                    if (ruleAction.assignedData) {
+                        const currentValue = this.form?.get(this.field().key)?.value;
+                        if (currentValue != ruleAction.assignedData) {
+                            this.form
+                                ?.get(this.field().key)
+                                ?.setValue(ruleAction.assignedData);
+                            this.isValueAssigned.set(true);
+                            this.onValueChange();
+                        }
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+    }
     ngOnDestroy() {
         this._onDestroy.next();
         this._onDestroy.complete();
+        this.ruleProcessor.destroy();
     }
     get isValid() {
         return this.form?.controls[this.field().id]?.valid;
@@ -5707,12 +5709,12 @@ class FormFieldComponent {
         this._runtimeOptions = [...options];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
-        }], propDecorators: { fieldConfig: [{
+            args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fieldConfig: [{
                 type: Input
             }], form: [{
                 type: Input
@@ -5720,8 +5722,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], fieldClass: [{
                 type: Input
-            }], programRuleActions: [{
-                type: Input
             }], dataEntities: [{
                 type: Input
             }], minDate: [{
@@ -5737,18 +5737,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class FormComponent {
-    constructor() {
-        this.formConfig = input();
-        this.configuration = computed(() => {
-            if (!this.formConfig()) {
-                return new FormConfig({
-                    direction: this.isFormHorizontal ? 'horizontal' : 'vertical',
-                });
-            }
-            return this.formConfig();
-        });
-        this.formUpdate = new EventEmitter();
-    }
     get sanitizedFields() {
         return (this.fields || []).filter((field) => {
             if (field.hidden) {
@@ -5761,17 +5749,14 @@ class FormComponent {
             if (!elementItem) {
                 return true;
             }
-            const availableRule = head((this.programRuleActions || []).filter((ruleAction) => {
-                const fieldId = ruleAction.field || ruleAction[type]?.id;
-                return (fieldId === elementItem.id &&
-                    (ruleAction.programRuleActionType === 'HIDEFIELD' ||
-                        ruleAction.actionType === 'HIDEFIELD'));
+            const availableRule = head((this.programRuleActions() || []).filter((ruleAction) => {
+                return (ruleAction.field === elementItem.id &&
+                    ruleAction.actionType === 'HIDEFIELD');
             }));
             if (!availableRule) {
                 return true;
             }
-            const actionType = availableRule?.programRuleActionType || availableRule?.actionType;
-            return actionType !== 'HIDEFIELD';
+            return availableRule.actionType !== 'HIDEFIELD';
         });
     }
     get layoutCssClass() {
@@ -5787,29 +5772,44 @@ class FormComponent {
         }
         return 'col-sm-4';
     }
-    onUpdateFields(programRuleActions) {
-        this.fields = (this.fields || []).filter((field) => {
-            const type = field.isDataElement
-                ? 'dataElement'
-                : 'trackedEntityAttribute';
-            const elementItem = field[type] || field;
-            if (!elementItem) {
-                return true;
-            }
-            const availableRule = head((programRuleActions || []).filter((rule) => {
-                return (rule[type] &&
-                    rule[type].id === elementItem.id &&
-                    rule.programRuleActionType === 'HIDEFIELD');
-            }));
-            if (!availableRule) {
-                return true;
+    constructor() {
+        this.formConfig = input();
+        this.programRuleActions = input([]);
+        this.configuration = computed(() => {
+            if (!this.formConfig()) {
+                return new FormConfig({
+                    direction: this.isFormHorizontal ? 'horizontal' : 'vertical',
+                });
             }
-            return (availableRule && availableRule.programRuleActionType !== 'HIDEFIELD');
+            return this.formConfig();
+        });
+        this.formUpdate = new EventEmitter();
+        this.ruleProcessor = effect(() => {
+            this.#processRules(this.programRuleActions());
         });
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         this.values = this.form.getRawValue();
     }
+    #processRules(ruleActions) {
+        ruleActions.forEach((ruleAction) => {
+            switch (ruleAction.actionType) {
+                case 'HIDEFIELD': {
+                    const fieldToRemove = this.fields.find((field) => field.id === ruleAction.field);
+                    if (fieldToRemove) {
+                        const currentValue = this.form.get(fieldToRemove.key)?.value;
+                        if (currentValue != null) {
+                            this.form.get(fieldToRemove.key)?.setValue(null);
+                            this.onFieldUpdate(this.form, fieldToRemove);
+                        }
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+    }
     onSubmit() {
         this.formUpdate.emit(this.form.getRawValue());
     }
@@ -5832,13 +5832,16 @@ class FormComponent {
             fieldToUpdate?.onUpdateRuntimeOptions(parentOption?.options || []);
         }
     }
+    ngOnDestroy() {
+        this.ruleProcessor.destroy();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: false, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: false, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form\"\n      [fieldClass]=\"fieldClass\"\n      [dataEntities]=\"dataEntities\"\n      [programRuleActions]=\"programRuleActions\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: false, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: false, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form\"\n      [fieldClass]=\"fieldClass\"\n      [dataEntities]=\"dataEntities\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<form [formGroup]=\"form\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form\"\n      [fieldClass]=\"fieldClass\"\n      [dataEntities]=\"dataEntities\"\n      [programRuleActions]=\"programRuleActions\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"] }]
-        }], propDecorators: { fields: [{
+            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<form [formGroup]=\"form\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form\"\n      [fieldClass]=\"fieldClass\"\n      [dataEntities]=\"dataEntities\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fields: [{
                 type: Input
             }], form: [{
                 type: Input
@@ -5852,8 +5855,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], shouldRenderAsCheckBoxesButton: [{
                 type: Input
-            }], programRuleActions: [{
-                type: Input
             }], dataEntities: [{
                 type: Input
             }], formUpdate: [{
@@ -5947,7 +5948,7 @@ class SectionFormComponent {
         this.formGroups = {};
         this.formValueEntity = {};
         this.repeatableFormValueEntity = {};
-        this.ruleActions = [];
+        this.ruleActions = signal([]);
         this.save = new EventEmitter();
         this.formUpdate = new EventEmitter();
         this.cancel = new EventEmitter();
@@ -5972,10 +5973,10 @@ class SectionFormComponent {
                 });
             });
             this.inValid.set(this.checkIfInValid());
-            this.ruleActions = new ProgramRuleEngine()
+            this.ruleActions.set(new ProgramRuleEngine()
                 .setRules(this.formMetaData().rules)
                 .setDataValues(this.#getDataValue())
-                .execute();
+                .execute());
         }
     }
     onUpdateRepeatableStage(repeatableData, fieldGroup) {
@@ -5991,10 +5992,10 @@ class SectionFormComponent {
         this.formValueEntity[fieldGroupId] = formValue;
         this.inValid.set(this.checkIfInValid());
         const dataValues = this.#getDataValue();
-        this.ruleActions = new ProgramRuleEngine()
+        this.ruleActions.set(new ProgramRuleEngine()
             .setRules(this.formMetaData().rules)
             .setDataValues(dataValues)
-            .execute();
+            .execute());
         this.formUpdate.emit(dataValues);
     }
     onSubmit() {
@@ -6037,11 +6038,11 @@ class SectionFormComponent {
         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 }, 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"] }] }); }
+    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=\"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"] }]
+            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: [{
@@ -6440,18 +6441,22 @@ class TrackerFormComponent {
             this.formMetaData = new FormMetaData({
                 programs: [program],
                 programStage: this.programStage(),
+                disableEnrollmentDate: true,
             }).toJson();
-            console.log(this.formMetaData, this.instance.enrollmentDate);
         }
     }
+    onFormUpdate(values) {
+        const instance = this.instance;
+        instance?.updateDataValues(values);
+    }
     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 }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: false, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"instance\"\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"] }] }); }
+    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 }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: false, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"instance\"\n  (formUpdate)=\"onFormUpdate($event)\"\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]=\"instance\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n" }]
+            args: [{ selector: 'ng-dhis2-ui-tracker-form', standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"instance\"\n  (formUpdate)=\"onFormUpdate($event)\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n" }]
         }] });
 
 class TrackerFormModule {
@@ -6472,9 +6477,68 @@ 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 EventFormComponent {
+    constructor() {
+        this.program = input.required();
+        this.programStage = input.required();
+        this.eventId = input();
+        this.enrollment = input();
+        this.trackedEntity = input();
+        this.d2 = window.d2Web;
+    }
+    async ngOnInit() {
+        this.eventQuery = this.d2.eventModule.event
+            .setProgram(this.program())
+            .setProgramStage(this.programStage())
+            .setEnrollment(this.enrollment())
+            .setTrackedEntity(this.trackedEntity());
+        const program = await this.eventQuery.getMetaData();
+        this.instance = this.eventId()
+            ? (await this.eventQuery.setEvent(this.eventId()).get())
+                .data || (await this.eventQuery.create())
+            : await this.eventQuery.create();
+        if (program) {
+            this.formMetaData = new FormMetaData({
+                programs: [program],
+                programStage: this.programStage(),
+            }).toJson();
+        }
+    }
+    onFormUpdate(values) {
+        const instance = this.instance;
+        instance?.updateDataValues(values);
+    }
+    onSave(event) { }
+    onCancel() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EventFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: EventFormComponent, isStandalone: false, selector: "ng-dhis2-ui-event-form", inputs: { program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: true, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: true, transformFunction: null }, eventId: { classPropertyName: "eventId", publicName: "eventId", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"instance\"\n  (formUpdate)=\"onFormUpdate($event)\"\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: EventFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-event-form', standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"instance\"\n  (formUpdate)=\"onFormUpdate($event)\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n" }]
+        }] });
+
+class EventFormModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EventFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: EventFormModule, declarations: [EventFormComponent], imports: [CommonModule, D2FormModule], exports: [EventFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EventFormModule, imports: [CommonModule, D2FormModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EventFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, D2FormModule],
+                    declarations: [EventFormComponent],
+                    exports: [EventFormComponent],
+                }]
+        }] });
+
+// 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, BreadcrumbComponent, BreadcrumbModule, 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 };
+export { Boolean$1 as Boolean, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DataTableUIComponent, DataTableUIModule, DateField, DateRangeValue, Dropdown, EventFormComponent, EventFormModule, 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