@iapps/ng-dhis2-ui 1.2.83 → 1.2.85

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

@@ -3330,7 +3330,6 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                     //date={tempStartDateState || "yyyy-mm-dd"}
                     clearable: !!tempStartDateState && tempStartDateState !== 'yyyy-mm-dd', date: tempStartDateState || 'yyyy-mm-dd', onDateSelect: (selectedDate) => {
                         setTempStartDateState(selectedDate.calendarDateString);
-                        console.log('selectedDate', selectedDate);
                         if (selectedDate.calendarDateString === null) {
                             setStartDateState(selectedDate.calendarDateString);
                         }
@@ -3347,7 +3346,6 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                         handleDateSelect(key, selectedDate);
                         const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
                         if (selectedDate.calendarDateString === null) {
-                            console.log('selectedDate', selectedDate);
                             setDataQueryFiltersState(filteredFilters);
                         }
                     } }));
@@ -3392,36 +3390,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
             React__default.createElement(Button$1, { onClick: handleSearch }, "Search"),
             React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))));
 
-// export const TableHeader = ({
-//   columns,
-//   data,
-// }: {
-//   columns: any[];
-//   data: TableRow;
-// }) => {
-//   const [checked, setChecked] = useState(false);
-//   const handleCheckboxChange = () => {
-//     const newChecked = !checked;
-//     setChecked(newChecked);
-//     console.log('Header checkbox toggled. Checked:', newChecked);
-//     console.log('Row selected:', data);
-//   };
-//   return (
-//     <TableHead>
-//       <DataTableRow>
-//         <DataTableColumnHeader width="48px">
-//           <Checkbox checked={checked} onChange={handleCheckboxChange} />
-//         </DataTableColumnHeader>
-//         {columns.map((col) => (
-//           <DataTableColumnHeader key={col.key}>
-//             {col.label}
-//           </DataTableColumnHeader>
-//         ))}
-//       </DataTableRow>
-//     </TableHead>
-//   );
-// };
-const TableHeader = ({ columns, allSelected, onSelectAll, selectable, showActionButtons }) => {
+const TableHeader = ({ columns, allSelected, onSelectAll, selectable, showActionButtons, }) => {
     const handleCheckboxChange = () => {
         onSelectAll(!allSelected);
     };
@@ -3592,62 +3561,7 @@ const TableCell = ({ cell, getTextColorFromBackGround, }) => {
         React__default.createElement("div", { className: "text-sm text-gray-800" }, cell?.value || '-')));
 };
 
-// export const TableRow = ({
-//   row,
-//   columns,
-//   getTextColorFromBackGround,
-//   actionOptions,
-//   actionOptionOrientation,
-//   actionSelected,
-// }: any) => {
-//   const [isChecked, setIsChecked] = useState(false);
-//   const handleCheckBoxChange = () => {
-//     const newState = !isChecked;
-//     setIsChecked(newState);
-//     console.log('Row selected:', row, 'Checked:', newState);
-//   };
-//   return (
-//     <DataTableRow key={row.index.value}>
-//       <DataTableCell width="48px">
-//         <Checkbox
-//           onChange={handleCheckBoxChange}
-//           value="id_1"
-//           checked={isChecked}
-//         />
-//       </DataTableCell>
-//       {columns.map((col: any) => {
-//         if (col.key === 'actions') {
-//           return (
-//             <DataTableCell key={col.key}>
-//               {actionOptions && (
-//                 <DataTableActions
-//                   actionOptions={actionOptions}
-//                   actionOptionOrientation={actionOptionOrientation}
-//                   onClick={(option) => {
-//                     const data = row['responseData']?.['value'];
-//                     if (option.onClick) option.onClick(data);
-//                     actionSelected.emit({
-//                       action: option.label,
-//                       data,
-//                     });
-//                   }}
-//                 />
-//               )}
-//             </DataTableCell>
-//           );
-//         }
-//         return (
-//           <TableCell
-//             key={col.key}
-//             cell={row[col.key]}
-//             getTextColorFromBackGround={getTextColorFromBackGround}
-//           />
-//         );
-//       })}
-//     </DataTableRow>
-//   );
-// };
-const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, isChecked, onToggle, selectable, showActionButtons }) => {
+const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, isChecked, onToggle, selectable, showActionButtons, }) => {
     const handleCheckBoxChange = () => {
         onToggle(row);
     };
@@ -6014,6 +5928,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.form = model.required();
         this.isValid = input();
         this.isValueAssigned = input();
+        this.dataId = input();
         this.value = model();
         this.value$ = toObservable(this.value);
         this.isValueAssigned$ = toObservable(this.isValueAssigned);
@@ -6035,13 +5950,6 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.component = this.InputField;
         this.render();
     }
-    ngOnChanges(changes) {
-        if (!(changes['field'] || {})?.firstChange) {
-            this.InputField = this.#getInputField();
-            this.component = this.#getInputField();
-            this.render();
-        }
-    }
     #getInputField() {
         return () => {
             const [value, setValue] = useState(this.form().get(this.field().id)?.value ||
@@ -6053,19 +5961,25 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             const [recordExistError, setRecordExistError] = useState();
             const [checkingUniqueness, setCheckingUniqueness] = useState();
             useEffect(() => {
-                if (this.isValueAssigned()) {
-                    const value = this.form().get(this.field().id)?.value ||
-                        this.form().get(this.field().key)?.value;
-                    setDisabled(true);
-                    setValue(value);
-                    checkValueUniqueness();
-                }
-            }, [this.isValueAssigned()]);
+                const isAssignedSubscription = this.isValueAssigned$
+                    .pipe(filter((isValueAssigned) => isValueAssigned === true))
+                    .subscribe({
+                    next: () => {
+                        const value = this.form().get(this.field().id)?.value ||
+                            this.form().get(this.field().key)?.value;
+                        setValue(value);
+                        setDisabled(true);
+                        checkValueUniqueness();
+                    },
+                });
+                return () => {
+                    isAssignedSubscription.unsubscribe();
+                };
+            }, []);
             // TODO: Review error handling as take() has potential to missed any other updated error information
             useEffect(() => {
                 const fieldErrorSubscription = this.fieldError$
-                    .pipe(filter((error) => error !== initialError), take(1) // Take only the first emitted value, then unsubscribe
-                )
+                    .pipe(filter((error) => error !== initialError), take(1))
                     .subscribe({
                     next: (error) => {
                         setInitialError(error);
@@ -6075,7 +5989,6 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                     fieldErrorSubscription.unsubscribe();
                 };
             }, [initialError]); // Add initialError as a dependency to avoid stale closures
-            const onChange = (payload) => setSelected(payload.selected);
             const arrayValue = useMemo(() => {
                 if (value && value.length > 0) {
                     return value.split(',');
@@ -6097,24 +6010,26 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 value,
                 touched,
             });
+            const onValueChange = (value) => {
+                this.ngZone.run(() => {
+                    (this.form().get(this.field().id) ||
+                        this.form().get(this.field().key))?.setValue(value);
+                    this.update.emit({
+                        form: this.form(),
+                        value,
+                    });
+                });
+                setValue(value);
+                setTouched(true);
+            };
             const checkValueUniqueness = async () => {
-                if (this.field().unique && this.field().trackedEntityType) {
+                if (this.field().unique && value && value.length > 0 && touched) {
                     setCheckingUniqueness(true);
                     setRecordExistError(undefined);
-                    const d2 = window.d2Web;
                     try {
-                        const response = (await d2.trackerModule.trackedEntity
-                            .setTrackedEntityType(this.field().trackedEntityType)
-                            .setOuMode('ACCESSIBLE')
-                            .setFilters([
-                            new DataQueryFilter()
-                                .setAttribute(this.field().id)
-                                .setCondition(DataFilterCondition.Equal)
-                                .setValue(value),
-                        ])
-                            .get())?.data;
+                        const isDuplicate = await this.searchForDuplicates(value);
                         setCheckingUniqueness(false);
-                        if (response?.length > 0) {
+                        if (isDuplicate) {
                             const customError = `Record with this ${this.label()} is already registered`;
                             (this.form().controls[this.field().id] ||
                                 this.form().controls[this.field().key])?.setErrors({
@@ -6133,34 +6048,13 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 switch (this.field().controlType) {
                     case 'textarea':
                         return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, disabled: disabled, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => {
-                                this.ngZone.run(() => {
-                                    (this.form().get(this.field().id) ||
-                                        this.form().get(this.field().key))?.setValue(event.value);
-                                    this.immediateUpdate.emit({
-                                        form: this.form(),
-                                        value: event.value,
-                                    });
-                                });
-                                setValue(event.value);
-                                setTouched(true);
+                                onValueChange(event.value);
                             }, onBlur: () => {
                                 checkValueUniqueness();
-                                this.ngZone.run(() => {
-                                    this.update.emit({ form: this.form(), value });
-                                });
                             } }));
                     case 'org-unit':
                         return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, disabled: disabled, onSelectOrgUnit: (selectedOrgUnit) => {
-                                this.ngZone.run(() => {
-                                    (this.form().get(this.field().id) ||
-                                        this.form().get(this.field().key))?.setValue(selectedOrgUnit);
-                                    this.update.emit({
-                                        form: this.form(),
-                                        value: selectedOrgUnit,
-                                    });
-                                });
-                                setValue(selectedOrgUnit);
-                                setTouched(true);
+                                onValueChange(selectedOrgUnit);
                             }, selected: value }));
                     case 'transfer':
                         return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: {
@@ -6170,91 +6064,37 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                     fontSize: 14,
                                     padding: '8px 4px',
                                 } }, this.field().selectedOptionsLabel), options: this.field().options, onChange: (event) => {
-                                onChange({ selected: event.selected });
-                                this.ngZone.run(() => {
-                                    (this.form().get(this.field().id) ||
-                                        this.form().get(this.field().key))?.setValue(event.selected);
-                                });
-                                setValue(event.selected);
-                                setTouched(true);
-                                this.update.emit({ form: this.form(), value });
+                                onValueChange(event.selected);
                             } }));
                     case 'checkbox':
                         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);
-                                });
-                                setValue(event.checked);
-                                setTouched(true);
+                                onValueChange(event.checked);
                             }, onBlur: () => {
                                 checkValueUniqueness();
-                                this.ngZone.run(() => {
-                                    this.update.emit({ form: this.form(), value });
-                                });
                             } }));
                     case 'dropdown':
                         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);
-                                    this.update.emit({
-                                        form: this.form(),
-                                        value: event.selected,
-                                    });
-                                });
-                                setValue(event.selected);
-                                setTouched(true);
+                                onValueChange(event.selected);
                             }, onBlur: () => {
                                 checkValueUniqueness();
                             } }, (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: 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) ||
-                                        this.form().get(this.field().key))?.setValue(selectedValue);
-                                    this.update.emit({
-                                        form: this.form(),
-                                        value: selectedValue,
-                                    });
-                                });
-                                setValue(selectedValue);
-                                setTouched(true);
+                                onValueChange(selectedValue);
                             }, onBlur: () => {
                                 checkValueUniqueness();
                             }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
                     case 'file':
                         return (React__default.createElement(React__default.Fragment, null,
                             React__default.createElement(FileUploadField, { label: this.label(), id: this.field().id, hasError: hasError, required: this.field().required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => {
-                                    this.ngZone.run(() => {
-                                        this.form().get(this.field().id) ||
-                                            this.form().get(this.field().key)?.setValue(fileId);
-                                        this.update.emit({
-                                            form: this.form(),
-                                            value: fileId,
-                                        });
-                                    });
-                                    setValue(fileId);
-                                    setTouched(true);
+                                    onValueChange(fileId);
                                 }, extension: this.field()?.extension })));
                     default:
                         return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: 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);
-                                    this.immediateUpdate.emit({
-                                        form: this.form(),
-                                        value: event.value,
-                                    });
-                                });
-                                setValue(event.value);
-                                setTouched(true);
+                                onValueChange(event.value);
                             }, onBlur: () => {
                                 checkValueUniqueness();
-                                this.ngZone.run(() => {
-                                    this.update.emit({ form: this.form(), value });
-                                });
                             } }));
                 }
             };
@@ -6275,8 +6115,44 @@ class BaseFormFieldComponent extends ReactWrapperModule {
     onChange(event) {
         this.value.set(event);
     }
+    async searchForDuplicates(value) {
+        const d2 = window.d2Web;
+        if (!value) {
+            return false;
+        }
+        switch (this.field().metaType) {
+            case 'ATTRIBUTE': {
+                const data = (await d2.trackerModule.trackedEntity
+                    .setTrackedEntityType(this.field().trackedEntityType)
+                    .setOuMode('ACCESSIBLE')
+                    .setFilters([
+                    new DataQueryFilter()
+                        .setAttribute(this.field().id)
+                        .setCondition(DataFilterCondition.Equal)
+                        .setValue(value),
+                ])
+                    .get())?.data;
+                return (data?.filter((trackedEntity) => trackedEntity.trackedEntity !== this.dataId())?.length > 0);
+            }
+            case 'DATA_ELEMENT': {
+                const data = (await d2.eventModule.event
+                    .setOuMode('ACCESSIBLE')
+                    .setFilters([
+                    new DataQueryFilter()
+                        .setAttribute(this.field().id)
+                        .setCondition(DataFilterCondition.Equal)
+                        .setValue(value)
+                        .setType('DATA_ELEMENT'),
+                ])
+                    .get())?.data;
+                return (data?.filter((event) => event.event !== this.dataId())?.length > 0);
+            }
+            default:
+                return false;
+        }
+    }
     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 }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, 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 }); }
+    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 }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, 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 }, dataId: { classPropertyName: "dataId", publicName: "dataId", 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, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormFieldComponent, decorators: [{
             type: Directive
@@ -6302,8 +6178,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 class FormFieldComponent {
     constructor() {
         this.field = input.required();
+        this.fieldConfig = input.required();
+        this.isCheckBoxButton = input();
+        this.fieldClass = input('');
         this.programRuleActions = input([]);
-        this.maxDate = new Date();
+        this.dataEntities = input({});
+        this.minDate = input();
+        this.maxDate = input(new Date());
+        this.dataId = input();
         this.color = 'primary';
         this.fieldUpdate = new EventEmitter();
         this.immediateFieldUpdate = new EventEmitter();
@@ -6482,24 +6364,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: 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    [fieldError]=\"runtimeError()\"\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" }] }); }
+    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: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, 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    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig()\"\n    [(form)]=\"form\"\n    [dataId]=\"dataId()\"\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    [fieldError]=\"runtimeError()\"\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
-            }], isCheckBoxButton: [{
-                type: Input
-            }], fieldClass: [{
-                type: Input
-            }], dataEntities: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
+            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    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig()\"\n    [(form)]=\"form\"\n    [dataId]=\"dataId()\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { form: [{
                 type: Input
             }], fieldUpdate: [{
                 type: Output
@@ -6511,7 +6381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 
 class FormComponent {
     get sanitizedFields() {
-        return (this.fields || []).filter((field) => {
+        return (this.fields() || []).filter((field) => {
             if (field.hidden) {
                 return false;
             }
@@ -6533,7 +6403,7 @@ class FormComponent {
         });
     }
     get layoutCssClass() {
-        if (!this.isFormHorizontal) {
+        if (!this.isFormHorizontal()) {
             return 'col-12';
         }
         const numberOfFields = this.sanitizedFields.length;
@@ -6547,11 +6417,20 @@ class FormComponent {
     }
     constructor() {
         this.formConfig = input();
+        this.fields = input.required();
+        this.form = input.required();
+        this.isFormHorizontal = input(false);
+        this.showSaveButton = input(false);
+        this.fieldsData = input();
+        this.fieldClass = input('');
+        this.shouldRenderAsCheckBoxesButton = input(false);
         this.programRuleActions = input([]);
+        this.dataEntities = input(undefined);
+        this.dataId = input();
         this.configuration = computed(() => {
             if (!this.formConfig()) {
                 return new FormConfig({
-                    direction: this.isFormHorizontal ? 'horizontal' : 'vertical',
+                    direction: this.isFormHorizontal() ? 'horizontal' : 'vertical',
                 });
             }
             return this.formConfig();
@@ -6562,18 +6441,19 @@ class FormComponent {
         });
     }
     ngOnChanges(changes) {
-        this.values = this.form.getRawValue();
+        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);
+                    const fieldToRemove = this.fields().find((field) => field.id === ruleAction.field);
                     if (fieldToRemove) {
-                        const currentValue = this.form.get(fieldToRemove.key)?.value;
+                        const form = this.form();
+                        const currentValue = form.get(fieldToRemove.key)?.value;
                         if (currentValue != null) {
-                            this.form.get(fieldToRemove.key)?.setValue(null);
-                            this.onFieldUpdate(this.form, fieldToRemove);
+                            form.get(fieldToRemove.key)?.setValue(null);
+                            this.onFieldUpdate(form, fieldToRemove);
                         }
                     }
                     break;
@@ -6584,24 +6464,24 @@ class FormComponent {
         });
     }
     onSubmit() {
-        this.formUpdate.emit(this.form.getRawValue());
+        this.formUpdate.emit(this.form().getRawValue());
     }
     onFieldUpdate(form, field) {
-        if (!this.showSaveButton && form) {
-            this.formUpdate.emit(new FormValue(this.form, this.fields, field));
+        if (!this.showSaveButton() && form) {
+            this.formUpdate.emit(new FormValue(this.form(), this.fields(), field));
             this.values = form.getRawValue();
         }
     }
     onClear() {
-        this.form.reset();
+        this.form().reset();
     }
     isFormInValid() {
-        return this.form.invalid;
+        return this.form().invalid;
     }
     onRunTimeOptionUpdate(result) {
         if (this.fieldComponents) {
             const fieldToUpdate = this.fieldComponents.find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
-            const parentOption = result?.options.find((option) => option.code === this.form?.value[result?.field?.id]);
+            const parentOption = result?.options.find((option) => option.code === this.form()?.value[result?.field?.id]);
             fieldToUpdate?.onUpdateRuntimeOptions(parentOption?.options || []);
         }
     }
@@ -6609,28 +6489,12 @@ class FormComponent {
         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: 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"] }] }); }
+    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: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, 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      [dataId]=\"dataId()\"\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", "dataId"], 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"] }]
-        }], ctorParameters: () => [], propDecorators: { fields: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], isFormHorizontal: [{
-                type: Input
-            }], showSaveButton: [{
-                type: Input
-            }], fieldsData: [{
-                type: Input
-            }], fieldClass: [{
-                type: Input
-            }], shouldRenderAsCheckBoxesButton: [{
-                type: Input
-            }], dataEntities: [{
-                type: Input
-            }], formUpdate: [{
+            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      [dataId]=\"dataId()\"\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: { formUpdate: [{
                 type: Output
             }], fieldComponents: [{
                 type: ViewChildren,
@@ -6687,7 +6551,7 @@ class RepeatableFormComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { events: "eventsChange", repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { events: "eventsChange", repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId"], outputs: ["formUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, decorators: [{
             type: Component,
@@ -6811,7 +6675,7 @@ 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", "dataId"], 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,
@@ -6835,6 +6699,7 @@ class BaseFormWrapperComponent {
         this.fields = input.required();
         this.rules = input([]);
         this.dataValues = input({});
+        this.dataId = input();
         this.ruleActions = signal([]);
         this.isFormValid = signal(true);
         this.#updatedDataValues = signal({});
@@ -6866,7 +6731,7 @@ class BaseFormWrapperComponent {
         this.ruleProcessor.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: BaseFormWrapperComponent, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: true, isRequired: false, transformFunction: null }, dataValues: { classPropertyName: "dataValues", publicName: "dataValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSave: "formSave", formUpdate: "formUpdate", formCancel: "formCancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: BaseFormWrapperComponent, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: true, isRequired: false, transformFunction: null }, dataValues: { classPropertyName: "dataValues", publicName: "dataValues", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSave: "formSave", formUpdate: "formUpdate", formCancel: "formCancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormWrapperComponent, decorators: [{
             type: Directive
@@ -6894,16 +6759,15 @@ class FlatFormComponent extends BaseFormWrapperComponent {
         this.onFormUpdate();
     }
     onFormUpdate() {
-        console.log('WE ARE UPDATING HERE');
         this.updateDataValues(this.formGroup.getRawValue());
         this.updateFormValidity(this.formGroup.valid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FlatFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: FlatFormComponent, isStandalone: false, selector: "ng-dhis2-ui-flat-form", usesInheritance: true, ngImport: i0, template: "<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n", dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: FlatFormComponent, isStandalone: false, selector: "ng-dhis2-ui-flat-form", usesInheritance: true, ngImport: i0, template: "<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [dataId]=\"dataId()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n", dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId"], outputs: ["formUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FlatFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-flat-form', standalone: false, template: "<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
+            args: [{ selector: 'ng-dhis2-ui-flat-form', standalone: false, template: "<ng-dhis2-ui-form\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [dataId]=\"dataId()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
         }] });
 
 class D2FormModule {
@@ -7801,6 +7665,9 @@ class ProgramEntryFormModule {
         this.FormLoader = () => {
             return React__default.createElement(CircularLoader$1, { small: true });
         };
+        this.dataId = computed(() => {
+            return this.instance()?.trackedEntity || this.instance()?.event;
+        });
         this.FormActionButtons = computed(() => {
             if (this.config().hideActionButtons) {
                 return React__default.createElement(React__default.Fragment, null);
@@ -7955,11 +7822,11 @@ class ProgramEntryFormModule {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ProgramEntryFormModule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form" }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form" }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ProgramEntryFormModule, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-program-entry-form', imports: [CommonModule, D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-program-entry-form', imports: [CommonModule, D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n\n  <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
         }], propDecorators: { instanceSave: [{
                 type: Output
             }], instanceSaveCompleted: [{