@iapps/ng-dhis2-ui 1.2.102 → 1.2.104

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, computed, signal, effect, ViewChildren } from '@angular/core';
+import { NgModule, ContentChild, Input, Directive, 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 * as React from 'react';
@@ -24,7 +24,7 @@ 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionOrgUnit16, IconClock16, IconDimensionData16, 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { isObject, isString, debounce, sortBy, isArray, find, camelCase, flatten, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
@@ -38,11 +38,11 @@ import { toObservable } from '@angular/core/rxjs-interop';
 import moment from 'moment';
 
 class SharedDhis2UiModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SharedDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SharedDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -1041,16 +1041,13 @@ class ReactWrapperModule {
             const jsxContent = this.content?.nativeElement?.outerHTML
                 ? parse(this.content?.nativeElement?.outerHTML)
                 : undefined;
-            this.reactDomRoot.render(React.createElement(this.component, { ...this.props },
-                " ",
-                jsxContent || '',
-                " "));
+            this.reactDomRoot.render(React.createElement(this.component, this.props, jsxContent || ''));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ReactWrapperModule, isStandalone: true, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReactWrapperModule, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ReactWrapperModule, isStandalone: true, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReactWrapperModule, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-dhis2-ui-wrapper',
@@ -1076,14 +1073,20 @@ class HeaderBarComponent extends ReactWrapperModule {
         const manifest = await firstValueFrom(this.httpClient.manifest());
         const data = await firstValueFrom(new HeaderBarData(this.httpClient).get());
         this.component = data
-            ? () => (React__default.createElement(DataProvider, null, React__default.createElement(HeaderBar, { appName: manifest?.name, data: data })))
-            : () => React__default.createElement("div", null, "Something went wrong");
+            ? () => {
+                const headerBarElement = React__default.createElement(HeaderBar, {
+                    appName: manifest?.name,
+                    data: data,
+                });
+                return React__default.createElement(DataProvider, null, headerBarElement);
+            }
+            : () => React__default.createElement('div', null, 'Something went wrong');
         this.render();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: HeaderBarComponent, isStandalone: false, selector: "ng-dhis2-ui-header-bar", usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: HeaderBarComponent, isStandalone: false, selector: "ng-dhis2-ui-header-bar", usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-header-bar',
@@ -1093,11 +1096,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }] });
 
 class HeaderBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarModule, declarations: [HeaderBarComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [HeaderBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarModule, declarations: [HeaderBarComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [HeaderBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
@@ -1119,9 +1122,21 @@ class ButtonComponent extends ReactWrapperModule {
         if (!this.elementRef)
             throw new Error('No element ref');
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
-        this.component = () => (React__default.createElement(Button$1, { onClick: (e) => {
-                this.onButtonClick(e);
-            }, primary: this.primary, secondary: this.secondary, destructive: this.destructive, disabled: this.disabled, small: this.small, large: this.large, ...this.props }, this.label));
+        this.component = () => {
+            const buttonProps = {
+                onClick: (e) => {
+                    this.onButtonClick(e);
+                },
+                primary: this.primary,
+                secondary: this.secondary,
+                destructive: this.destructive,
+                disabled: this.disabled,
+                small: this.small,
+                large: this.large,
+                ...this.props,
+            };
+            return React__default.createElement(Button$1, buttonProps, this.label);
+        };
         this.render();
     }
     ngOnInit() {
@@ -1137,10 +1152,10 @@ class ButtonComponent extends ReactWrapperModule {
     onButtonClick(event) {
         this.buttonClick.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: ButtonComponent, isStandalone: false, selector: "ng-dhis2-ui-button", inputs: { label: "label", primary: "primary", secondary: "secondary", destructive: "destructive", disabled: "disabled", small: "small", large: "large" }, outputs: { buttonClick: "buttonClick" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ButtonComponent, isStandalone: false, selector: "ng-dhis2-ui-button", inputs: { label: "label", primary: "primary", secondary: "secondary", destructive: "destructive", disabled: "disabled", small: "small", large: "large" }, outputs: { buttonClick: "buttonClick" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-button',
@@ -1166,11 +1181,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class ButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [ButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [ButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ButtonComponent],
@@ -1667,7 +1682,7 @@ class BreadcrumbComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.#ngZone = inject(NgZone);
-        this.breadcrumbs = input.required();
+        this.breadcrumbs = input.required(...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
         this.selectBreadcrumb = new EventEmitter();
     }
     #ngZone;
@@ -1683,20 +1698,23 @@ class BreadcrumbComponent extends ReactWrapperModule {
         };
         this.component = () => {
             const classes = useDynamicStyles$2(breadcrumbStyles);
-            return (React__default.createElement("div", { className: classes.container }, this.breadcrumbs().map((breadcrumb, index) => (React__default.createElement(React__default.Fragment, { key: index },
-                React__default.createElement(BreadcrumbItemComponent, { key: index, breadcrumb: breadcrumb, onClick: () => {
-                        this.#ngZone.run(() => {
-                            this.selectBreadcrumb.emit(breadcrumb);
-                        });
-                    } }),
-                index < this.breadcrumbs().length - 1 && (React__default.createElement(IconChevronRight16, { color: colors$1.grey800 })))))));
+            return React__default.createElement('div', { className: classes.container }, this.breadcrumbs().map((breadcrumb, index) => React__default.createElement(React__default.Fragment, { key: index }, React__default.createElement(BreadcrumbItemComponent, {
+                key: index,
+                breadcrumb: breadcrumb,
+                onClick: () => {
+                    this.#ngZone.run(() => {
+                        this.selectBreadcrumb.emit(breadcrumb);
+                    });
+                },
+            }), index < this.breadcrumbs().length - 1 &&
+                React__default.createElement(IconChevronRight16, { color: colors$1.grey800 }))));
         };
         this.render();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: BreadcrumbComponent, isStandalone: false, selector: "ng-dhis2-ui-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectBreadcrumb: "selectBreadcrumb" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: BreadcrumbComponent, isStandalone: false, selector: "ng-dhis2-ui-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectBreadcrumb: "selectBreadcrumb" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-breadcrumb',
@@ -1709,11 +1727,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class BreadcrumbModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule], exports: [BreadcrumbComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule], exports: [BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [BreadcrumbComponent],
@@ -2425,18 +2443,22 @@ class PeriodSelectorModalComponent extends ReactWrapperModule {
         const excludedPeriodTypes = this.getExcludedPeriodTypes(systemInfo);
         this.component = () => {
             const [selected, setSelected] = useState(this.selectedPeriods);
-            return (React__default.createElement(DataProvider, null, React__default.createElement(Modal$1, { position: "middle", large: true },
-                React__default.createElement(ModalTitle$1, null, "Period"),
-                React__default.createElement(ModalContent$1, null,
-                    React__default.createElement(PeriodDimension, { selectedPeriods: selected, onSelect: (selectionEvent) => setSelected(selectionEvent.items), excludedPeriodTypes: excludedPeriodTypes, systemInfo: systemInfo })),
-                React__default.createElement(ModalActions$1, null,
-                    React__default.createElement(ButtonStrip$1, { end: true },
-                        React__default.createElement(Button$1, { onClick: () => {
-                                this.onCancel();
-                            } }, "Cancel"),
-                        React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
-                                this.onConfirm(selected);
-                            } }, "Confirm"))))));
+            return React__default.createElement(DataProvider, null, React__default.createElement(Modal$1, { position: 'middle', large: true }, React__default.createElement(ModalTitle$1, null, 'Period'), React__default.createElement(ModalContent$1, null, React__default.createElement(PeriodDimension, {
+                selectedPeriods: selected,
+                onSelect: (selectionEvent) => setSelected(selectionEvent.items),
+                excludedPeriodTypes: excludedPeriodTypes,
+                systemInfo: systemInfo,
+            })), React__default.createElement(ModalActions$1, null, React__default.createElement(ButtonStrip$1, { end: true }, React__default.createElement(Button$1, {
+                onClick: () => {
+                    this.onCancel();
+                },
+            }, 'Cancel'), React__default.createElement(Button$1, {
+                primary: true,
+                disabled: selected.length === 0,
+                onClick: () => {
+                    this.onConfirm(selected);
+                },
+            }, 'Confirm')))));
         };
         this.render();
     }
@@ -2446,10 +2468,10 @@ class PeriodSelectorModalComponent extends ReactWrapperModule {
     onConfirm(selectedItems) {
         this.confirm.emit(selectedItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: PeriodSelectorModalComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector-modal", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PeriodSelectorModalComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector-modal", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-period-selector-modal', template: `<ng-container></ng-container>`, standalone: false, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedPeriods: [{
@@ -2498,18 +2520,23 @@ class PeriodSelectorComponent extends ReactWrapperModule {
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
         const systemInfo = this.d2.systemInfo;
         const excludedPeriodTypes = this.getExcludedPeriodTypes(systemInfo);
-        this.component = () => (React__default.createElement(DataProvider, null, React__default.createElement(PeriodDimension, { selectedPeriods: this.selectedPeriods, onSelect: (selectionEvent) => this.ngZone.run(() => {
+        this.component = () => (React__default.createElement(DataProvider, null, React__default.createElement(PeriodDimension, {
+            selectedPeriods: this.selectedPeriods,
+            onSelect: (selectionEvent) => this.ngZone.run(() => {
                 this.onSelectItems(selectionEvent);
-            }), excludedPeriodTypes: excludedPeriodTypes, systemInfo: systemInfo })));
+            }),
+            excludedPeriodTypes: excludedPeriodTypes,
+            systemInfo: systemInfo
+        })));
         this.render();
     }
     onSelectItems(selectionEvent) {
         this.selectPeriods.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: PeriodSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { selectPeriods: "selectPeriods" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PeriodSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { selectPeriods: "selectPeriods" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-period-selector', template: `<ng-container></ng-container>`, standalone: false, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { selectedPeriods: [{
@@ -2519,11 +2546,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class PeriodSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModule, declarations: [PeriodSelectorComponent, PeriodSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [PeriodSelectorComponent, PeriodSelectorModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorModule, declarations: [PeriodSelectorComponent, PeriodSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [PeriodSelectorComponent, PeriodSelectorModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PeriodSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
@@ -2919,9 +2946,24 @@ class OrganisationUnitSelectorComponent extends ReactWrapperModule {
         const rootOrgUnits = await this.getRootOrgUnits();
         const config = await this.getAppConfig();
         if (config) {
-            this.component = () => (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(OrgUnitDimension, { selected: this.selectedOrgUnits, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => this.ngZone.run(() => {
-                    this.onSelectItems(selectionEvent);
-                }), orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })));
+            this.component = () => React__default.createElement(Provider, {
+                config: config,
+                plugin: false,
+                parentAlertsAdd: undefined,
+                showAlertsInPlugin: false,
+                children: React__default.createElement(OrgUnitDimension, {
+                    selected: this.selectedOrgUnits,
+                    hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect,
+                    hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect,
+                    hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits,
+                    onSelect: (selectionEvent) => this.ngZone.run(() => {
+                        this.onSelectItems(selectionEvent);
+                    }),
+                    orgUnitGroupPromise: this.getOrgUnitGroups(),
+                    orgUnitLevelPromise: this.getOrgUnitLevels(),
+                    roots: rootOrgUnits,
+                }),
+            });
             this.render();
         }
     }
@@ -2967,10 +3009,10 @@ class OrganisationUnitSelectorComponent extends ReactWrapperModule {
     onSelectItems(selectionEvent) {
         this.selectOrgUnits.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: OrganisationUnitSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-org-unit-selector", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: OrganisationUnitSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-org-unit-selector", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-org-unit-selector',
@@ -3009,20 +3051,34 @@ class OrganisationUnitSelectorModalComponent extends ReactWrapperModule {
         if (config) {
             this.component = () => {
                 const [selected, setSelected] = useState(this.selectedOrgUnits);
-                return (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, "Organisation unit"),
-                    React__default.createElement(ModalContent$1, null,
-                        React__default.createElement(OrgUnitDimension, { selected: selected, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
-                                setSelected(selectionEvent.items);
-                            }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })),
-                    React__default.createElement(ModalActions$1, null,
-                        React__default.createElement(ButtonStrip$1, { end: true },
-                            React__default.createElement(Button$1, { onClick: () => {
-                                    this.onCancel();
-                                } }, "Cancel"),
-                            React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
-                                    this.onConfirm(selected);
-                                } }, "Confirm"))))));
+                return React__default.createElement(Provider, {
+                    config: config,
+                    plugin: false,
+                    parentAlertsAdd: undefined,
+                    showAlertsInPlugin: false,
+                    children: React__default.createElement(Modal$1, { position: 'middle', large: true }, React__default.createElement(ModalTitle$1, null, 'Organisation unit'), React__default.createElement(ModalContent$1, null, React__default.createElement(OrgUnitDimension, {
+                        selected: selected,
+                        hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect,
+                        hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect,
+                        hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits,
+                        onSelect: (selectionEvent) => {
+                            setSelected(selectionEvent.items);
+                        },
+                        orgUnitGroupPromise: this.getOrgUnitGroups(),
+                        orgUnitLevelPromise: this.getOrgUnitLevels(),
+                        roots: rootOrgUnits,
+                    })), React__default.createElement(ModalActions$1, null, React__default.createElement(ButtonStrip$1, { end: true }, React__default.createElement(Button$1, {
+                        onClick: () => {
+                            this.onCancel();
+                        },
+                    }, 'Cancel'), React__default.createElement(Button$1, {
+                        primary: true,
+                        disabled: selected.length === 0,
+                        onClick: () => {
+                            this.onConfirm(selected);
+                        },
+                    }, 'Confirm')))),
+                });
             };
             this.render();
         }
@@ -3075,10 +3131,10 @@ class OrganisationUnitSelectorModalComponent extends ReactWrapperModule {
     onSelectItems(selectionEvent) {
         this.selectOrgUnits.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: OrganisationUnitSelectorModalComponent, isStandalone: false, selector: "ng-dhis2-ui-org-unit-selector-modal", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits", cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: OrganisationUnitSelectorModalComponent, isStandalone: false, selector: "ng-dhis2-ui-org-unit-selector-modal", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits", cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-org-unit-selector-modal', template: '<ng-container><ng-container>', standalone: false, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedOrgUnits: [{
@@ -3094,13 +3150,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class OrganisationUnitSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModule, declarations: [OrganisationUnitSelectorComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorModule, declarations: [OrganisationUnitSelectorComponent,
             OrganisationUnitSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [OrganisationUnitSelectorComponent,
             OrganisationUnitSelectorModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
@@ -3337,7 +3393,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                 React__default.createElement(DropdownButton, { name: "customDropdown", open: isOpenOrgUnitDropdown, onClick: () => setIsOpenOrgUnitDropdown(!isOpenOrgUnitDropdown), component: React__default.createElement("div", null,
                         React__default.createElement(FlyoutMenu, null,
                             React__default.createElement("div", { style: { padding: '16px' } },
-                                React__default.createElement(InputField$1, { key: "location", placeholder: orgUnitLabel ? orgUnitLabel : 'registering unit', value: selectedOrgUnit, onFocus: () => {
+                                React__default.createElement(InputField$1, { key: "location", placeholder: orgUnitLabel ? orgUnitLabel : 'Registering unit', value: selectedOrgUnit, onFocus: () => {
                                         SetOrgUnitModalVisible(true);
                                         setHide(false);
                                     } }),
@@ -3351,15 +3407,15 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                                 setPrevSelectedOrgUnit(selectedOrgUnit);
                                                 handleOrgUnitFilter();
                                                 setIsOpenOrgUnitDropdown(false);
-                                            } }, "update"),
+                                            } }, "Update"),
                                         React__default.createElement(Button$1, { disabled: !selectedOrgUnit, onClick: () => {
                                                 setSelectedOrgUnit('');
                                                 setPrevSelectedOrgUnit('');
                                                 setOrgUnitState(defaultOrgUnit);
                                                 setTempOrgUnitState(defaultOrgUnit);
                                                 setIsOpenOrgUnitDropdown(false);
-                                            } }, "reset filter")))))) },
-                    orgUnitLabel ? orgUnitLabel : 'registering unit',
+                                            } }, "Reset")))))) },
+                    orgUnitLabel ? orgUnitLabel : 'Registering unit',
                     ' ',
                     prevSelectedOrgUnit && ':',
                     " ",
@@ -3399,15 +3455,15 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                                     handleStartDateFilter();
                                                     handleEndDateFilter();
                                                     setIsOpen(false);
-                                                } }, "update"),
+                                                } }, "Update"),
                                             React__default.createElement(Button$1, { onClick: () => {
                                                     setStartDateState(null);
                                                     setTempEndDateState(null);
                                                     setTempStartDateState(null);
                                                     setEndDateState(null);
                                                     setIsOpen(false);
-                                                } }, "reset")))))) },
-                        "registration dates ",
+                                                } }, "Reset")))))) },
+                        "Enrollment dates ",
                         (startDateState || endDateState) && ':',
                         ' ',
                         startDateState,
@@ -3423,7 +3479,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                             React__default.createElement(ClearIcon, { className: "my-icon-class" }))))))),
             (visibleFilters ?? []).map(({ label, key, valueType, options, type }) => {
                 if (valueType === 'DATE') {
-                    return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                    return (React__default.createElement(DropdownButton, { name: "customDropdown", key: key, open: openDropdownKey === key, onClick: () => {
                             setOpenDropdownKey(openDropdownKey === key ? null : key);
                         }, component: React__default.createElement("div", null,
                             React__default.createElement(FlyoutMenu, null,
@@ -3444,10 +3500,10 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                                     }));
                                                     handleAdditionalFilters();
                                                     setOpenDropdownKey(null);
-                                                } }, "update"),
+                                                } }, "Update"),
                                             React__default.createElement(Button$1, { onClick: () => {
                                                     setIsOpen(false);
-                                                } }, "reset")))))) },
+                                                } }, "Reset")))))) },
                         label,
                         " ",
                         prevDateStates[key] && ':',
@@ -3470,8 +3526,11 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                             }, style: { display: 'inline-flex', alignItems: 'center' } },
                             React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
                 }
+                {
+                    /* TODO: I HAVE DUPLICATED DROPDOWN AND CLEAR ICON IN MULTIPLE PLACES REQUIRED TO CREATE A REUSABLE DROPDOWN COMPONENT WITH THE CLEAR ICON TO AVOID DUPLICATION */
+                }
                 if (options && options.options.length > 0) {
-                    return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                    return (React__default.createElement(DropdownButton, { name: "customDropdown", key: key, open: openDropdownKey === key, onClick: () => {
                             setOpenDropdownKey(openDropdownKey === key ? null : key);
                         }, component: React__default.createElement("div", null,
                             React__default.createElement(FlyoutMenu, null,
@@ -3497,7 +3556,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                                     }));
                                                     handleAdditionalFilters();
                                                     setOpenDropdownKey(null);
-                                                } }, "update"),
+                                                } }, "Update"),
                                             React__default.createElement(Button$1, { disabled: !inputValues[key], onClick: () => {
                                                     setInputValues((prevValues) => ({
                                                         ...prevValues,
@@ -3512,7 +3571,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                                     setDataQueryFiltersState(filteredFilters);
                                                     setTempDataQueryFiltersState(filteredFilters);
                                                     setOpenDropdownKey(null);
-                                                } }, "reset")))))) },
+                                                } }, "Reset")))))) },
                         label,
                         " ",
                         prevInputValues[key] && ':',
@@ -3563,7 +3622,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                                 }));
                                                 handleAdditionalFilters();
                                                 setOpenDropdownKey(null);
-                                            } }, "update"),
+                                            } }, "Update"),
                                         React__default.createElement(Button$1, { disabled: !inputValues[key], onClick: () => {
                                                 setInputValues((prevValues) => ({
                                                     ...prevValues,
@@ -3578,7 +3637,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                                 setDataQueryFiltersState(filteredFilters);
                                                 setTempDataQueryFiltersState(filteredFilters);
                                                 setOpenDropdownKey(null);
-                                            } }, "reset")))))) },
+                                            } }, "Reset")))))) },
                     label,
                     " ",
                     prevInputValues[key] && ':',
@@ -3621,6 +3680,49 @@ function formatDateForDisplay(dateString) {
         return 'dd-mm-yyyy';
     }
 }
+// case 'date':
+//           case 'date-time':
+//             return (
+//               // <InputField
+//               //   error={hasError}
+//               //   validationText={validationError}
+//               //   type={this.field().type as any}
+//               //   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: any) => {
+//               //     onValueChange(event.value);
+//               //   }}
+//               //   onBlur={() => {
+//               //     checkValueUniqueness();
+//               //   }}
+//               // />
+//               <CalendarInput
+//                 label={this.label()}
+//                 error={hasError}
+//                 validationText={validationError}
+//                 date={value}
+//                 readOnly={disabled}
+//                 min={this.field().min?.toString()}
+//                 max={this.field().max?.toString()}
+//                 placeholder={this.placeholder()}
+//                 onDateSelect={(selectedDate: any) => {
+//                   onValueChange(selectedDate.calendarDateString);
+//                 }}
+//                 disabled={disabled}
+//                 inputWidth={inputWidth}
+//                 required={this.field().required}
+//                 calendar="gregory"
+//                 locale="en-GB"
+//                 timeZone="Africa/Dar_es_Salaam"
+//               />
+//             );
 
 const TableHeader = ({ columns, allSelected, onSelectAll, selectable, showActionButtons, }) => {
     const handleCheckboxChange = () => {
@@ -3957,10 +4059,10 @@ class LineListService {
             return orgUnitsMap;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService, deps: [{ token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListService, deps: [{ token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
 
@@ -3976,7 +4078,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
     const attributeColumns = metaData.displayInListTrackedEntityAttributes
         .sort((a, b) => a.sortOrder - b.sortOrder)
         .map((trackedEntityAttribute) => ({
-        label: trackedEntityAttribute.formName ?? trackedEntityAttribute.name,
+        label: trackedEntityAttribute.name ?? trackedEntityAttribute.formName,
         key: trackedEntityAttribute.id,
     }));
     const tableSearcheableDataElements = metaData
@@ -3985,7 +4087,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
         .programStageDataElements.filter((psde) => psde.displayInReports)
         .sort((a, b) => a.sortOrder - b.sortOrder)
         .map((psde) => ({
-        label: psde.dataElement.formName || psde.dataElement.name,
+        label: psde.dataElement.name || psde.dataElement.formName || 'default',
         key: psde.dataElement.id,
         valueType: psde.dataElement.valueType,
         options: psde.dataElement.optionSet,
@@ -3998,7 +4100,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
         .programStageDataElements.filter((psde) => psde.displayInReports)
         .sort((a, b) => a.sortOrder - b.sortOrder) // Sorts data elements within stage
         .map((psde) => ({
-        label: psde.dataElement.formName || psde.dataElement.name,
+        label: psde.dataElement.name || psde.dataElement.formName || 'default',
         key: psde.dataElement.id,
     })));
     const dataElementOptions = metaData.displayInListDataElements.map((element) => ({
@@ -4010,7 +4112,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
     }));
     const tableColumns = [
         {
-            label: orgUnitLabel || 'registering unit',
+            label: orgUnitLabel || 'Registering unit',
             key: 'orgUnit',
         },
         ...attributeColumns,
@@ -4619,28 +4721,103 @@ class LineListTableComponent extends ReactWrapperModule {
                 // Returns black for light backgrounds, white for dark backgrounds
                 return yiq >= 128 ? colors$1.grey700 : '#FFFFFF';
             }
-            return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 8,
-                    padding: 8,
-                } },
-                React__default.createElement(CircularLoader$1, { small: true }),
-                React__default.createElement("div", { style: {
-                        fontSize: 14,
-                    } }, "Loading"))) : (React__default.createElement("div", null,
-                this.showDownloadButton && (React__default.createElement("div", { style: {
-                        paddingBottom: '1rem',
+            return React__default.createElement('div', null, loading
+                ? React__default.createElement('div', {
+                    style: {
                         display: 'flex',
-                        justifyContent: 'flex-end',
-                    } },
-                    React__default.createElement(DropdownButton, { name: "Download", component: React__default.createElement("span", null,
-                            ' ',
-                            React__default.createElement(MenuItem$1, { label: "Download Csv", onClick: handleCsvDownload }),
-                            React__default.createElement(MenuItem$1, { label: "Download Excel", onClick: handleExcelDownload })), value: "Download" }, "Download"))),
-                orgUnitModalVisible && (React__default.createElement(OrgUnitSelector, { hide: hide, setHide: setHide, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, setTempOrgUnitState: setTempOrgUnitState, tempOrgUnitState: tempOrgUnitState })),
-                this.showFilters && (React__default.createElement(FilterToolbar, { orgUnitLabel: orgUnitLabel, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, defaultOrgUnit: defaultOrgUnit, setHide: setHide, startDateState: startDateState, setStartDateState: setStartDateState, endDateState: endDateState, setEndDateState: setEndDateState, visibleFilters: visibleFilters, dateStates: dateStates, inputValues: inputValues, setInputValues: setInputValues, handleInputChange: handleInputChange, handleInputChangeForSelectField: handleInputChangeForSelectField, handleDateSelect: handleDateSelect, showAllFilters: showAllFilters, setShowAllFilters: setShowAllFilters, setTempStartDateState: setTempStartDateState, setTempEndDateState: setTempEndDateState, setTempOrgUnitState: setTempOrgUnitState, tempStartDateState: tempStartDateState, tempEndDateState: tempEndDateState, tempOrgUnitState: tempOrgUnitState, dataQueryFiltersState: dataQueryFiltersState, setDataQueryFiltersState: setDataQueryFiltersState, SetOrgUnitModalVisible: setOrgUnitModalVisible, showEnrollmentDates: this.showEnrollmentDates, handleAdditionalFilters: handleAdditionalFilters, handleStartDateFilter: handleStartDateFilter, handleEndDateFilter: handleEndDateFilter, handleOrgUnitFilter: handleOrgUnitFilter, setDateStates: setDateStates, prevInputValues: prevInputValues, setPrevInputValues: setPrevInputValues, setTempDataQueryFiltersState: setTempDataQueryFiltersState, prevDateStates: prevDateStates, setPrevDateStates: setPrevDateStates, prevSelectedOrgUnit: prevSelectedOrgUnit, setPrevSelectedOrgUnit: setPrevSelectedOrgUnit })),
-                React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected, showActionButtons: showActionButtons, error: error })))));
+                        alignItems: 'center',
+                        gap: 8,
+                        padding: 8,
+                    },
+                }, React__default.createElement(CircularLoader$1, { small: true }), React__default.createElement('div', {
+                    style: {
+                        fontSize: 14,
+                    },
+                }, 'Loading'))
+                : React__default.createElement('div', null, this.showDownloadButton &&
+                    React__default.createElement('div', {
+                        style: {
+                            paddingBottom: '1rem',
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                        },
+                    }, React__default.createElement(DropdownButton, {
+                        name: 'Download',
+                        component: React__default.createElement('span', null, ' ', React__default.createElement(MenuItem$1, {
+                            label: 'Download Csv',
+                            onClick: handleCsvDownload,
+                        }), React__default.createElement(MenuItem$1, {
+                            label: 'Download Excel',
+                            onClick: handleExcelDownload,
+                        })),
+                        value: 'Download',
+                    }, 'Download')), orgUnitModalVisible &&
+                    React__default.createElement(OrgUnitSelector, {
+                        hide: hide,
+                        setHide: setHide,
+                        selectedOrgUnit: selectedOrgUnit,
+                        setSelectedOrgUnit: setSelectedOrgUnit,
+                        setOrgUnitState: setOrgUnitState,
+                        setTempOrgUnitState: setTempOrgUnitState,
+                        tempOrgUnitState: tempOrgUnitState,
+                    }), this.showFilters &&
+                    React__default.createElement(FilterToolbar, {
+                        orgUnitLabel: orgUnitLabel,
+                        selectedOrgUnit: selectedOrgUnit,
+                        setSelectedOrgUnit: setSelectedOrgUnit,
+                        setOrgUnitState: setOrgUnitState,
+                        defaultOrgUnit: defaultOrgUnit,
+                        setHide: setHide,
+                        startDateState: startDateState,
+                        setStartDateState: setStartDateState,
+                        endDateState: endDateState,
+                        setEndDateState: setEndDateState,
+                        visibleFilters: visibleFilters,
+                        dateStates: dateStates,
+                        inputValues: inputValues,
+                        setInputValues: setInputValues,
+                        handleInputChange: handleInputChange,
+                        handleInputChangeForSelectField: handleInputChangeForSelectField,
+                        handleDateSelect: handleDateSelect,
+                        showAllFilters: showAllFilters,
+                        setShowAllFilters: setShowAllFilters,
+                        setTempStartDateState: setTempStartDateState,
+                        setTempEndDateState: setTempEndDateState,
+                        setTempOrgUnitState: setTempOrgUnitState,
+                        tempStartDateState: tempStartDateState,
+                        tempEndDateState: tempEndDateState,
+                        tempOrgUnitState: tempOrgUnitState,
+                        dataQueryFiltersState: dataQueryFiltersState,
+                        setDataQueryFiltersState: setDataQueryFiltersState,
+                        SetOrgUnitModalVisible: setOrgUnitModalVisible,
+                        showEnrollmentDates: this.showEnrollmentDates,
+                        handleAdditionalFilters: handleAdditionalFilters,
+                        handleStartDateFilter: handleStartDateFilter,
+                        handleEndDateFilter: handleEndDateFilter,
+                        handleOrgUnitFilter: handleOrgUnitFilter,
+                        setDateStates: setDateStates,
+                        prevInputValues: prevInputValues,
+                        setPrevInputValues: setPrevInputValues,
+                        setTempDataQueryFiltersState: setTempDataQueryFiltersState,
+                        prevDateStates: prevDateStates,
+                        setPrevDateStates: setPrevDateStates,
+                        prevSelectedOrgUnit: prevSelectedOrgUnit,
+                        setPrevSelectedOrgUnit: setPrevSelectedOrgUnit,
+                        //  filteredFilters: filteredFilters
+                    }), React__default.createElement(LineListTable, {
+                    columns: columns,
+                    data: data,
+                    pager: pager,
+                    setPager: setPager,
+                    getTextColorFromBackGround: getTextColorFromBackGround,
+                    actionOptions: this.actionOptions,
+                    actionOptionOrientation: this.actionOptionOrientation,
+                    actionSelected: this.actionSelected,
+                    selectable: selectable,
+                    rowsSelected: this.rowsSelected,
+                    showActionButtons: showActionButtons,
+                    error: error,
+                })));
         };
     }
     ngOnChanges(changes) {
@@ -4688,10 +4865,10 @@ class LineListTableComponent extends ReactWrapperModule {
         this.component = this.LineList;
         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: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton", searcheableDataElements: "searcheableDataElements" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton", searcheableDataElements: "searcheableDataElements" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }]
         }], propDecorators: { triggerToken: [{
@@ -4753,11 +4930,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class LineListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [LineListTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [LineListTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LineListTableComponent],
@@ -4907,27 +5084,29 @@ class DataTableUIComponent extends ReactWrapperModule {
                     },
                 }));
             };
-            return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 8,
-                    padding: 8,
-                } },
-                React__default.createElement(CircularLoader$1, { small: true }),
-                React__default.createElement("div", { style: {
+            return React__default.createElement('div', null, loading
+                ? React__default.createElement('div', {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        padding: 8,
+                    },
+                }, React__default.createElement(CircularLoader$1, { small: true }), React__default.createElement('div', {
+                    style: {
                         fontSize: 14,
-                    } }, "Loading"))) : (React__default.createElement(DataTable, null,
-                React__default.createElement(TableHead, null,
-                    React__default.createElement(DataTableRow, null,
-                        columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.column }, col.display))),
-                        this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableColumnHeader, null, "Actions")))),
-                React__default.createElement(TableBody$1, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
-                    columns.map((col) => (React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-'))),
-                    this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableCell, null,
-                        React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
-                React__default.createElement(TableFoot, null,
-                    React__default.createElement(DataTableRow, null,
-                        React__default.createElement(DataTableCell, { colSpan: (columns.length || 0 + 1).toString() })))))));
+                    },
+                }, 'Loading'))
+                : React__default.createElement(DataTable, null, React__default.createElement(TableHead, null, React__default.createElement(DataTableRow, null, ...columns.map((col) => React__default.createElement(DataTableColumnHeader, { key: col.column }, col.display)), this.actionOptions && this.actionOptions.length > 0
+                    ? React__default.createElement(DataTableColumnHeader, null, 'Actions')
+                    : null)), React__default.createElement(TableBody$1, null, ...tableData.map((row, rowIndex) => React__default.createElement(DataTableRow, { key: rowIndex }, ...columns.map((col) => React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-')), this.actionOptions && this.actionOptions.length > 0
+                    ? React__default.createElement(DataTableCell, null, React__default.createElement(DropdownMenu, {
+                        dropdownOptions: getDropdownOptions(row),
+                        onClick: (option) => option.onClick?.(row),
+                    }))
+                    : null))), React__default.createElement(TableFoot, null, React__default.createElement(DataTableRow, null, React__default.createElement(DataTableCell, {
+                    colSpan: (columns.length + 1).toString(),
+                })))));
         };
     }
     async ngAfterViewInit() {
@@ -4946,10 +5125,10 @@ class DataTableUIComponent extends ReactWrapperModule {
             this.render();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: DataTableUIComponent, isStandalone: false, selector: "app-data-table-ui", inputs: { data: "data", columnDefinitions: "columnDefinitions", actionOptions: "actionOptions" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataTableUIComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DataTableUIComponent, isStandalone: false, selector: "app-data-table-ui", inputs: { data: "data", columnDefinitions: "columnDefinitions", actionOptions: "actionOptions" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataTableUIComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-data-table-ui', standalone: false, template: '<ng-content></ng-content>' }]
         }], propDecorators: { data: [{
@@ -4963,11 +5142,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class DataTableUIModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, declarations: [DataTableUIComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [DataTableUIComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataTableUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DataTableUIModule, declarations: [DataTableUIComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [DataTableUIComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataTableUIModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataTableUIModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DataTableUIComponent],
@@ -6409,24 +6588,24 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         super(...arguments);
         this.ngZone = inject(NgZone);
         this.fieldType = 'textbox';
-        this.field = input.required();
-        this.fieldError = input();
-        this.fieldConfig = input(new FieldConfig());
-        this.form = model.required();
-        this.isValid = input();
-        this.isValueAssigned = input();
-        this.dataId = input();
-        this.customOrgUnitRoots = input();
-        this.value = model();
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+        this.fieldError = input(...(ngDevMode ? [undefined, { debugName: "fieldError" }] : []));
+        this.fieldConfig = input(new FieldConfig(), ...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
+        this.form = model.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.isValid = input(...(ngDevMode ? [undefined, { debugName: "isValid" }] : []));
+        this.isValueAssigned = input(...(ngDevMode ? [undefined, { debugName: "isValueAssigned" }] : []));
+        this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
+        this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.value$ = toObservable(this.value);
         this.isValueAssigned$ = toObservable(this.isValueAssigned);
         this.fieldError$ = toObservable(this.fieldError);
         this.label = computed(() => {
             return !this.fieldConfig()?.hideLabel ? this.field().label : undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "label" }] : []));
         this.placeholder = computed(() => {
             return (this.field()?.placeholder || `Enter ${this.field()?.label || 'value'}`);
-        });
+        }, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.InputField = this.#getInputField();
         this.update = new EventEmitter();
         this.immediateUpdate = new EventEmitter();
@@ -6652,10 +6831,10 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 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 }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", 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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormFieldComponent, decorators: [{
             type: Directive
         }], propDecorators: { update: [{
                 type: Output
@@ -6664,10 +6843,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class FormFieldItemComponent extends BaseFormFieldComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: FormFieldItemComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field-item", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormFieldItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: FormFieldItemComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field-item", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormFieldItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-form-field-item',
@@ -6678,30 +6857,30 @@ 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.dataEntities = input({});
-        this.minDate = input();
-        this.maxDate = input(new Date());
-        this.dataId = input();
-        this.customOrgUnitRoots = input();
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+        this.fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
+        this.isCheckBoxButton = input(...(ngDevMode ? [undefined, { debugName: "isCheckBoxButton" }] : []));
+        this.fieldClass = input('', ...(ngDevMode ? [{ debugName: "fieldClass" }] : []));
+        this.programRuleActions = input([], ...(ngDevMode ? [{ debugName: "programRuleActions" }] : []));
+        this.dataEntities = input({}, ...(ngDevMode ? [{ debugName: "dataEntities" }] : []));
+        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+        this.maxDate = input(new Date(), ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
+        this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
         this.color = 'primary';
         this.fieldUpdate = new EventEmitter();
         this.immediateFieldUpdate = new EventEmitter();
         this.runtimeOptionChange = new EventEmitter();
-        this.value = signal('');
-        this.runtimeError = signal(undefined);
+        this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.runtimeError = signal(undefined, ...(ngDevMode ? [{ debugName: "runtimeError" }] : []));
         this._runtimeOptions = [];
         this.runtimeOptions = [];
         this.fieldFilterControl = new FormControl();
         this._onDestroy = new Subject();
-        this.isValueAssigned = signal(false);
+        this.isValueAssigned = signal(false, ...(ngDevMode ? [{ debugName: "isValueAssigned" }] : []));
         this.ruleProcessor = effect(() => {
             this.#processRules(this.programRuleActions());
-        });
+        }, ...(ngDevMode ? [{ debugName: "ruleProcessor" }] : []));
     }
     ngOnChanges(changes) {
         if (changes && changes['dataEntities'] && this.field()?.dependentField) {
@@ -6865,10 +7044,10 @@ class FormFieldComponent {
     onUpdateRuntimeOptions(options) {
         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: 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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", 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    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", 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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", 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    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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    [dataId]=\"dataId()\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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: [{
@@ -6918,18 +7097,18 @@ class FormComponent {
         return 'col-sm-4';
     }
     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.customOrgUnitRoots = input();
+        this.formConfig = input(...(ngDevMode ? [undefined, { debugName: "formConfig" }] : []));
+        this.fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : []));
+        this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.isFormHorizontal = input(false, ...(ngDevMode ? [{ debugName: "isFormHorizontal" }] : []));
+        this.showSaveButton = input(false, ...(ngDevMode ? [{ debugName: "showSaveButton" }] : []));
+        this.fieldsData = input(...(ngDevMode ? [undefined, { debugName: "fieldsData" }] : []));
+        this.fieldClass = input('', ...(ngDevMode ? [{ debugName: "fieldClass" }] : []));
+        this.shouldRenderAsCheckBoxesButton = input(false, ...(ngDevMode ? [{ debugName: "shouldRenderAsCheckBoxesButton" }] : []));
+        this.programRuleActions = input([], ...(ngDevMode ? [{ debugName: "programRuleActions" }] : []));
+        this.dataEntities = input(undefined, ...(ngDevMode ? [{ debugName: "dataEntities" }] : []));
+        this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
+        this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
         this.configuration = computed(() => {
             if (!this.formConfig()) {
                 return new FormConfig({
@@ -6937,12 +7116,12 @@ class FormComponent {
                 });
             }
             return this.formConfig();
-        });
+        }, ...(ngDevMode ? [{ debugName: "configuration" }] : []));
         this.formUpdate = new EventEmitter();
         this.formValidityUpdate = new EventEmitter();
         this.ruleProcessor = effect(() => {
             this.#processRules(this.programRuleActions());
-        });
+        }, ...(ngDevMode ? [{ debugName: "ruleProcessor" }] : []));
     }
     ngOnInit() {
         this.values = this.form().getRawValue();
@@ -7005,10 +7184,10 @@ class FormComponent {
     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: 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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, 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      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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", "customOrgUnitRoots"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", 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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, 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      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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", "customOrgUnitRoots"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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: [{
@@ -7026,15 +7205,15 @@ class RepeatableFormComponent {
     #events$;
     constructor() {
         this.ngZone = inject(NgZone);
-        this.fieldGroup = input.required();
-        this.events = model();
-        this.dataEntities = input.required();
+        this.fieldGroup = input.required(...(ngDevMode ? [{ debugName: "fieldGroup" }] : []));
+        this.events = model(...(ngDevMode ? [undefined, { debugName: "events" }] : []));
+        this.dataEntities = input.required(...(ngDevMode ? [{ debugName: "dataEntities" }] : []));
         this.repeatableEvents = [];
         this.repeatableData = {};
         this.repeatableStageUpdate = new EventEmitter();
-        this.eventFormValue = signal(null);
-        this.showForm = signal(false);
-        this.eventIndex = signal(0);
+        this.eventFormValue = signal(null, ...(ngDevMode ? [{ debugName: "eventFormValue" }] : []));
+        this.showForm = signal(false, ...(ngDevMode ? [{ debugName: "showForm" }] : []));
+        this.eventIndex = signal(0, ...(ngDevMode ? [{ debugName: "eventIndex" }] : []));
         this.#eventFormValue$ = toObservable(this.eventFormValue);
         this.#showForm$ = toObservable(this.showForm);
         this.#events$ = toObservable(this.events);
@@ -7069,10 +7248,10 @@ class RepeatableFormComponent {
             [this.eventIndex()]: formValue,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RepeatableFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-repeatable-form', standalone: false, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formObject: [{
@@ -7099,18 +7278,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 class SectionFormComponent {
     constructor() {
         this.ngZone = inject(NgZone);
-        this.loading = input();
-        this.formMetaData = input.required();
-        this.dataValueEntities = input.required();
+        this.loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : []));
+        this.formMetaData = input.required(...(ngDevMode ? [{ debugName: "formMetaData" }] : []));
+        this.dataValueEntities = input.required(...(ngDevMode ? [{ debugName: "dataValueEntities" }] : []));
         this.formGroups = {};
         this.formValueEntity = {};
         this.repeatableFormValueEntity = {};
-        this.ruleActions = signal([]);
+        this.ruleActions = signal([], ...(ngDevMode ? [{ debugName: "ruleActions" }] : []));
         this.save = new EventEmitter();
         this.formUpdate = new EventEmitter();
         this.cancel = new EventEmitter();
         this.formValidityUpdate = new EventEmitter();
-        this.inValid = signal(true);
+        this.inValid = signal(true, ...(ngDevMode ? [{ debugName: "inValid" }] : []));
         this.inValid$ = toObservable(this.inValid);
     }
     ngOnInit() {
@@ -7197,10 +7376,10 @@ class SectionFormComponent {
             .some((validity) => !validity);
         return valueValidity || repeatableDataValidity;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, 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", formValidityUpdate: "formValidityUpdate" }, 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", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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", formValidityUpdate: "formValidityUpdate" }, 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", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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"] }]
         }], ctorParameters: () => [], propDecorators: { save: [{
@@ -7220,15 +7399,15 @@ class BaseFormWrapperComponent {
     #updatedDataValues;
     constructor() {
         this.ngZone = inject(NgZone);
-        this.name = input();
-        this.fields = input.required();
-        this.rules = input([]);
-        this.dataValues = input({});
-        this.dataId = input();
-        this.customOrgUnitRoots = input();
-        this.ruleActions = signal([]);
-        this.isFormValid = signal(true);
-        this.#updatedDataValues = signal({});
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : []));
+        this.rules = input([], ...(ngDevMode ? [{ debugName: "rules" }] : []));
+        this.dataValues = input({}, ...(ngDevMode ? [{ debugName: "dataValues" }] : []));
+        this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
+        this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
+        this.ruleActions = signal([], ...(ngDevMode ? [{ debugName: "ruleActions" }] : []));
+        this.isFormValid = signal(true, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+        this.#updatedDataValues = signal({}, ...(ngDevMode ? [{ debugName: "#updatedDataValues" }] : []));
         this.formSave = new EventEmitter();
         this.formUpdate = new EventEmitter();
         this.formCancel = new EventEmitter();
@@ -7237,7 +7416,7 @@ class BaseFormWrapperComponent {
             if (this.#updatedDataValues()) {
                 this.executeRules();
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "ruleProcessor" }] : []));
     }
     updateDataValues(dataValues) {
         this.#updatedDataValues.set(dataValues);
@@ -7256,10 +7435,10 @@ class BaseFormWrapperComponent {
     ngOnDestroy() {
         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 }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSave: "formSave", formUpdate: "formUpdate", formCancel: "formCancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", 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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormWrapperComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { formSave: [{
                 type: Output
@@ -7288,17 +7467,17 @@ class FlatFormComponent extends BaseFormWrapperComponent {
         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  [dataId]=\"dataId()\"\n  [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FlatFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", 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  [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FlatFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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  [dataId]=\"dataId()\"\n  [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
         }] });
 
 class D2FormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, declarations: [FormFieldComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: D2FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: D2FormModule, declarations: [FormFieldComponent,
             FormComponent,
             RepeatableFormComponent,
             SectionFormComponent,
@@ -7311,11 +7490,11 @@ class D2FormModule {
             RepeatableFormComponent,
             SectionFormComponent,
             FlatFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: D2FormModule, imports: [CommonModule,
             ReactiveFormsModule,
             OrganisationUnitSelectorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: D2FormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -7385,22 +7564,38 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                     subscription.unsubscribe(); // Cleanup to avoid memory leaks
                 };
             }, []);
-            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, "Organisation unit"),
-                React__default.createElement(ModalContent$1, null,
-                    React__default.createElement(OrgUnitDimension, { selected: selected, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
+            return config
+                ? React__default.createElement(Provider, {
+                    config: config,
+                    plugin: false,
+                    parentAlertsAdd: undefined,
+                    showAlertsInPlugin: false,
+                    children: React__default.createElement(Modal$1, { position: 'middle', large: true }, React__default.createElement(ModalTitle$1, null, 'Organisation unit'), React__default.createElement(ModalContent$1, null, React__default.createElement(OrgUnitDimension, {
+                        selected: selected,
+                        hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect,
+                        hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect,
+                        hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits,
+                        onSelect: (selectionEvent) => {
                             setSelected(selectionEvent.items);
-                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })),
-                React__default.createElement(ModalActions$1, null,
-                    React__default.createElement(ButtonStrip$1, { end: true },
-                        React__default.createElement(Button$1, { onClick: () => {
-                                onCancelOrgUnit();
-                            } }, "Cancel"),
-                        React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
-                                onSelectOrgUnit(selected);
-                            } }, "Confirm")))))) : (React__default.createElement(CircularLoader$1, { small: true }));
+                        },
+                        orgUnitGroupPromise: this.getOrgUnitGroups(),
+                        orgUnitLevelPromise: this.getOrgUnitLevels(),
+                        roots: rootOrgUnits,
+                    })), React__default.createElement(ModalActions$1, null, React__default.createElement(ButtonStrip$1, { end: true }, React__default.createElement(Button$1, {
+                        onClick: () => {
+                            onCancelOrgUnit();
+                        },
+                    }, 'Cancel'), React__default.createElement(Button$1, {
+                        primary: true,
+                        disabled: selected.length === 0,
+                        onClick: () => {
+                            onSelectOrgUnit(selected);
+                        },
+                    }, 'Confirm')))),
+                })
+                : React__default.createElement(CircularLoader$1, { small: true });
         };
-        this.showOrgUnitTree = signal(false);
+        this.showOrgUnitTree = signal(false, ...(ngDevMode ? [{ debugName: "showOrgUnitTree" }] : []));
         this.orgUnitSelectionConfig = {
             hideGroupSelect: true,
             hideLevelSelect: true,
@@ -7408,7 +7603,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             allowSingleSelection: true,
             usageType: 'DATA_ENTRY',
         };
-        this.selectedOrgUnit = signal(null);
+        this.selectedOrgUnit = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrgUnit" }] : []));
         this.selectedOrgUnit$ = toObservable(this.selectedOrgUnit);
         this.SelectionFiltersUI = () => {
             const [filters, setFilters] = useState({
@@ -7536,66 +7731,144 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                 }
                 return 'span 1';
             };
-            return (React__default.createElement("div", { style: {
+            return React__default.createElement('div', {
+                style: {
                     fontFamily: 'Arial, sans-serif',
                     padding: '20px',
                     backgroundColor: '#f9f9f9',
                     borderRadius: '8px',
                     boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
-                } },
-                React__default.createElement("div", { style: {
+                },
+            }, React__default.createElement('div', {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr 1fr auto', // Ensure proper button sizing
+                    gap: '16px',
+                    alignItems: 'center', // Align inputs and button on the same row
+                    marginBottom: '16px',
+                },
+            }, 
+            /* Organization Unit Selector */
+            React__default.createElement('div', { style: { width: '100%' } }, React__default.createElement(InputField$1, {
+                value: displayValue,
+                label: 'Organization Unit',
+                readOnly: false,
+                onFocus: () => setShowOrgUnit(true),
+                onBlur: () => {
+                    setTouched(true);
+                },
+            }), showOrgUnit &&
+                React__default.createElement(this.FieldOrgUnitSelector, {
+                    onCancelOrgUnit: () => {
+                        setShowOrgUnit(false);
+                        setTouched(true);
+                    },
+                    onSelectOrgUnit: (selectedOrgUnits) => {
+                        if ((selectedOrgUnits || [])[0]) {
+                            const selectedOrgUnit = selectedOrgUnits[0];
+                            setDisplayValue(selectedOrgUnit.name);
+                            setSelected(selectedOrgUnit.id);
+                            setSelectedOrganisationUnit(selectedOrgUnit.id);
+                            setValue(selectedOrgUnit.id);
+                            setShowOrgUnit(false);
+                            setTouched(true);
+                        }
+                    },
+                })), 
+            /* Start Date */
+            React__default.createElement(InputField$1, {
+                className: 'input-field',
+                label: 'Start Date',
+                type: 'date',
+                value: filters.startDate,
+                onChange: (event) => setFilters({ ...filters, startDate: event.value }),
+            }), 
+            /* End Date */
+            React__default.createElement(InputField$1, {
+                className: 'input-field',
+                label: 'End Date',
+                type: 'date',
+                value: filters.endDate,
+                onChange: (event) => setFilters({ ...filters, endDate: event.value }),
+            }), 
+            /* Toggle Button with Hidden Label */
+            React__default.createElement('div', {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100%',
+                },
+            }, React__default.createElement('label', {
+                style: {
+                    color: 'transparent', // Hides label text but keeps spacing
+                    fontSize: '14px',
+                    marginBottom: '4px',
+                },
+            }, 'Toggle'), React__default.createElement(Button$1, {
+                style: { height: '40px' }, // Match input field height
+                onClick: () => setShowMoreFilters(!showMoreFilters),
+            }, showMoreFilters ? 'Hide Filters' : 'More Filters')), showMoreFilters &&
+                React__default.createElement(React__default.Fragment, null, 
+                /* Attribute Filters Grid */
+                React__default.createElement('div', {
+                    style: {
                         display: 'grid',
-                        gridTemplateColumns: '1fr 1fr 1fr auto', // Ensure proper button sizing
+                        gridTemplateColumns: 'repeat(4, 1fr)',
                         gap: '16px',
-                        alignItems: 'center', // Align inputs and button on the same row
-                        marginBottom: '16px',
-                    } },
-                    React__default.createElement("div", { style: { width: '100%' } },
-                        React__default.createElement(InputField$1, { value: displayValue, label: "Organization Unit", readOnly: false, onFocus: () => setShowOrgUnit(true), onBlur: () => {
-                                setTouched(true);
-                            } }),
-                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { onCancelOrgUnit: () => {
-                                setShowOrgUnit(false);
-                                setTouched(true);
-                            }, onSelectOrgUnit: (selectedOrgUnits) => {
-                                if ((selectedOrgUnits || [])[0]) {
-                                    const selectedOrgUnit = selectedOrgUnits[0];
-                                    setDisplayValue(selectedOrgUnit.name);
-                                    setSelected(selectedOrgUnit.id);
-                                    setSelectedOrganisationUnit(selectedOrgUnit.id);
-                                    setValue(selectedOrgUnit.id);
-                                    setShowOrgUnit(false);
-                                    setTouched(true);
-                                }
-                            } }))),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "date", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }) }),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "date", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }) }),
-                    React__default.createElement("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            height: '100%',
-                        } },
-                        React__default.createElement("label", { style: {
-                                color: 'transparent', // Hides label text but keeps spacing
-                                fontSize: '14px',
-                                marginBottom: '4px',
-                            } }, "Toggle"),
-                        React__default.createElement(Button$1, { style: { height: '40px' }, onClick: () => setShowMoreFilters(!showMoreFilters) }, showMoreFilters ? 'Hide Filters' : 'More Filters'))),
-                showMoreFilters && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", { style: {
-                            display: 'grid',
-                            gridTemplateColumns: 'repeat(4, 1fr)',
-                            gap: '16px',
-                        } }, filters.programAttributesFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', type: filter.valueType, value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
-                    React__default.createElement("div", { style: {
-                            display: 'grid',
-                            gridTemplateColumns: 'repeat(4, 1fr)',
-                            gap: '16px',
-                        } }, filters.programStageDataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", type: filter.valueType, label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
-                    React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
-                        React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))))));
+                    },
+                }, filters.programAttributesFilters.map((filter, index) => React__default.createElement('div', {
+                    key: index,
+                    style: { gridColumn: getAttributeColumnSpan(index) },
+                }, filter.hasOptions && filter.options.length > 0
+                    ? React__default.createElement(SingleSelectField, {
+                        className: 'single-select',
+                        label: filter.name || 'Select Option',
+                        selected: filter.value,
+                        onChange: (event) => handleAttributeChange(index, event.selected),
+                    }, filter.options.map((option, i) => React__default.createElement(SingleSelectOption, {
+                        key: crypto.randomUUID() || i,
+                        label: option.name,
+                        value: option.code,
+                    })))
+                    : React__default.createElement(InputField$1, {
+                        className: 'input-field',
+                        label: filter.name || 'Program name',
+                        type: filter.valueType,
+                        value: filter.value,
+                        onChange: (event) => handleAttributeChange(index, event.value),
+                    })))), 
+                /* Data Element Filters Grid */
+                React__default.createElement('div', {
+                    style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                        gap: '16px',
+                    },
+                }, filters.programStageDataElementFilters.map((filter, index) => React__default.createElement('div', {
+                    key: index,
+                    style: { gridColumn: getDataElementColumnSpan(index) },
+                }, filter.hasOptions && filter.options.length > 0
+                    ? React__default.createElement(SingleSelectField, {
+                        className: 'single-select',
+                        label: filter.name || 'Aggregation type',
+                        selected: filter.value,
+                        onChange: (event) => handleDataElementChange(index, event.selected),
+                    }, filter.options.map((option, i) => React__default.createElement(SingleSelectOption, {
+                        key: crypto.randomUUID() || i,
+                        label: option.name,
+                        value: option.code,
+                    })))
+                    : React__default.createElement(InputField$1, {
+                        className: 'input-field',
+                        type: filter.valueType,
+                        label: filter.name || 'Program name',
+                        value: filter.value,
+                        onChange: (event) => handleDataElementChange(index, event.value),
+                    })))), 
+                /* Search Button */
+                React__default.createElement('div', { style: { textAlign: 'right', marginTop: '16px' } }, React__default.createElement(Button$1, { onClick: handleSearch }, 'Search')))));
         };
     }
     async getAppConfig() {
@@ -7650,10 +7923,10 @@ class SelectionFiltersComponent extends ReactWrapperModule {
         this.component = this.SelectionFiltersUI;
         this.render();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate", program: "program", organisationUnit: "organisationUnit" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate", program: "program", organisationUnit: "organisationUnit" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }]
         }], propDecorators: { actionOptions: [{
@@ -7675,11 +7948,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class SelectionFiltersUiModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule, OrganisationUnitSelectorModule], exports: [SelectionFiltersComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule, OrganisationUnitSelectorModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule, OrganisationUnitSelectorModule], exports: [SelectionFiltersComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule, OrganisationUnitSelectorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersUiModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SelectionFiltersComponent],
@@ -7690,9 +7963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 
 class TrackerFormComponent {
     constructor() {
-        this.program = input.required();
-        this.programStage = input();
-        this.trackedEntity = input();
+        this.program = input.required(...(ngDevMode ? [{ debugName: "program" }] : []));
+        this.programStage = input(...(ngDevMode ? [undefined, { debugName: "programStage" }] : []));
+        this.trackedEntity = input(...(ngDevMode ? [undefined, { debugName: "trackedEntity" }] : []));
         this.d2 = window.d2Web;
     }
     async ngOnInit() {
@@ -7718,20 +7991,20 @@ class TrackerFormComponent {
     }
     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  (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", "formValidityUpdate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TrackerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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", "formValidityUpdate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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  (formUpdate)=\"onFormUpdate($event)\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n" }]
         }] });
 
 class TrackerFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, declarations: [TrackerFormComponent], imports: [CommonModule, D2FormModule], exports: [TrackerFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, imports: [CommonModule, D2FormModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TrackerFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: TrackerFormModule, declarations: [TrackerFormComponent], imports: [CommonModule, D2FormModule], exports: [TrackerFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TrackerFormModule, imports: [CommonModule, D2FormModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TrackerFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, D2FormModule],
@@ -7746,11 +8019,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 
 class EventFormComponent {
     constructor() {
-        this.program = input.required();
-        this.programStage = input.required();
-        this.eventId = input();
-        this.enrollment = input();
-        this.trackedEntity = input();
+        this.program = input.required(...(ngDevMode ? [{ debugName: "program" }] : []));
+        this.programStage = input.required(...(ngDevMode ? [{ debugName: "programStage" }] : []));
+        this.eventId = input(...(ngDevMode ? [undefined, { debugName: "eventId" }] : []));
+        this.enrollment = input(...(ngDevMode ? [undefined, { debugName: "enrollment" }] : []));
+        this.trackedEntity = input(...(ngDevMode ? [undefined, { debugName: "trackedEntity" }] : []));
         this.d2 = window.d2Web;
     }
     async ngOnInit() {
@@ -7777,20 +8050,20 @@ class EventFormComponent {
     }
     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", "formValidityUpdate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: EventFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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", "formValidityUpdate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EventFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: EventFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: EventFormModule, declarations: [EventFormComponent], imports: [CommonModule, D2FormModule], exports: [EventFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: EventFormModule, imports: [CommonModule, D2FormModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EventFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: EventFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, D2FormModule],
@@ -8174,19 +8447,19 @@ class ProgramEntryFormSection {
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class ProgramEntryFormModule {
     constructor() {
-        this.config = input.required();
-        this.trackedEntity = input();
-        this.event = input();
-        this.enrollment = input();
-        this.orgUnit = input();
-        this.customOrgUnitRoots = input();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.trackedEntity = input(...(ngDevMode ? [undefined, { debugName: "trackedEntity" }] : []));
+        this.event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
+        this.enrollment = input(...(ngDevMode ? [undefined, { debugName: "enrollment" }] : []));
+        this.orgUnit = input(...(ngDevMode ? [undefined, { debugName: "orgUnit" }] : []));
+        this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
         this.ngZone = inject(NgZone);
         this.d2 = window.d2Web;
-        this.loading = signal(false);
-        this.metaData = signal(null);
-        this.isFormValid = signal(true);
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.metaData = signal(null, ...(ngDevMode ? [{ debugName: "metaData" }] : []));
+        this.isFormValid = signal(true, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
         this.isFormValid$ = toObservable(this.isFormValid);
-        this.instance = signal(null);
+        this.instance = signal(null, ...(ngDevMode ? [{ debugName: "instance" }] : []));
         this.instanceSave = new EventEmitter();
         this.instanceSaveCompleted = new EventEmitter();
         this.instanceUpdate = new EventEmitter();
@@ -8195,9 +8468,18 @@ class ProgramEntryFormModule {
         this.FormLoader = () => {
             return React__default.createElement(CircularLoader$1, { small: true });
         };
+        // dataId = computed(() => {
+        //   return this.instance()?.trackedEntity || this.instance()?.event;
+        // });
         this.dataId = computed(() => {
-            return this.instance()?.trackedEntity || this.instance()?.event;
-        });
+            if (this.config().formType === 'EVENT') {
+                return this.instance()?.event;
+            }
+            if (this.config().formType === 'TRACKER') {
+                return this.instance()?.trackedEntity;
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "dataId" }] : []));
         this.FormActionButtons = computed(() => {
             if (this.config().hideActionButtons) {
                 return React__default.createElement(React__default.Fragment, null);
@@ -8229,7 +8511,7 @@ class ProgramEntryFormModule {
                             });
                         } }, this.config().cancelButtonLabel))));
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "FormActionButtons" }] : []));
     }
     async ngOnInit() {
         this.loading.set(true);
@@ -8351,10 +8633,10 @@ class ProgramEntryFormModule {
                 return firstValueFrom(of(null));
         }
     }
-    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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", 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    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ProgramEntryFormModule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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 }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", 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    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\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: [{