@iapps/ng-dhis2-ui 1.1.0 → 1.1.2

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

@@ -1,17 +1,17 @@
+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, Injectable, inject } from '@angular/core';
-import { IconEdit16, spacers, colors, theme, Tooltip, Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination } from '@dhis2/ui';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import * as React from 'react';
-import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo } from 'react';
+import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, Injectable, inject, NgZone, input, model, signal, computed, ViewChildren } from '@angular/core';
 import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider, useDataEngine, Provider } from '@dhis2/app-runtime';
 import * as i1 from '@iapps/ngx-dhis2-http-client';
+import { NgxDhis2HttpClientService } from '@iapps/ngx-dhis2-http-client';
+import * as React from 'react';
+import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { catchError, of, map, zip, firstValueFrom } from 'rxjs';
+import { catchError, of, map, zip, firstValueFrom, Subject, takeUntil } from 'rxjs';
 import i18n from '@dhis2/d2-i18n';
-import { colors as colors$1, theme as theme$1, spacers as spacers$1 } from '@dhis2/ui-constants';
+import { colors, theme, spacers } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
 import { Card } from '@dhis2-ui/card';
 import { InputField } from '@dhis2-ui/input';
 import { IconSettings24, IconApps24, IconMessages24, IconMail24, IconUser24, IconQuestion24, IconInfo24, IconLogOut24 } from '@dhis2/ui-icons';
@@ -25,152 +25,29 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
-import { isObject, isString } from 'lodash';
+import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, isEmpty } from 'lodash';
+import cx from 'classnames';
 import { map as map$1, switchMap } from 'rxjs/operators';
-
-const TransferOption = ({ disabled, label, highlighted, selected, onClick, onDoubleClick, value, icon, active, tooltipText, dataTest, onEditClick, }) => {
-    const renderContent = () => (React__default.createElement("div", { className: cx('chip', {
-            highlighted,
-            disabled,
-            selected,
-            inactive: active !== undefined && !active,
-        }), "data-test": `${dataTest}-content`, onClick: (event) => {
-            if (disabled) {
-                return;
-            }
-            onClick({ label, value }, event);
-        }, onDoubleClick: (event) => {
-            if (disabled) {
-                return;
-            }
-            onDoubleClick({ label, value }, event);
-        } },
-        React__default.createElement("span", { className: "icon" }, icon),
-        React__default.createElement("span", { className: "label" }, label),
-        onEditClick && (React__default.createElement("span", { className: "edit", onClick: (e) => {
-                e.stopPropagation();
-                onEditClick();
-            }, "data-test": `${dataTest}-edit-button` },
-            React__default.createElement(IconEdit16, null))),
-        React__default.createElement("style", { jsx: true }, `
-        .wrapper:last-child {
-          margin-bottom: ${spacers.dp4};
-        }
-        .chip {
-          display: inline-flex;
-          background: ${colors.grey200};
-          font-size: 14px;
-          line-height: 16px;
-          padding: 2px ${spacers.dp8} 2px ${spacers.dp4};
-          margin: ${spacers.dp4} ${spacers.dp8} 0 ${spacers.dp8};
-          border-radius: 3px;
-          user-select: none;
-        }
-
-        .chip:hover {
-          background: ${colors.grey300};
-        }
-
-        .selected {
-          background: ${theme.secondary100};
-          color: ${theme.secondary900};
-        }
-
-        .selected :global(.icon path) {
-          fill: ${theme.secondary700};
-        }
-
-        .selected:hover {
-          background: #c9edeb;
-        }
-
-        .highlighted,
-        .highlighted:hover {
-          background: ${theme.secondary800};
-          color: ${colors.white};
-        }
-
-        .highlighted :global(.icon path) {
-          fill: ${colors.white};
-        }
-
-        .disabled {
-          opacity: 0.3;
-          cursor: not-allowed;
-        }
-
-        .inactive {
-          opacity: 0.3;
-        }
-
-        .icon,
-        .label {
-          line-height: 18px;
-        }
-
-        .icon {
-          margin-right: ${spacers.dp4};
-          display: inline-flex;
-          vertical-align: text-bottom;
-          padding-top: 1px;
-        }
-
-        .label {
-          font-size: 14px;
-        }
-
-        .edit {
-          height: 16px;
-          margin-top: 1px;
-          margin-left: ${spacers.dp8};
-          cursor: pointer;
-        }
-
-        .edit:hover {
-          background-color: rgba(0, 0, 0, 0.12);
-          outline: 1px solid rgba(0, 0, 0, 0.12);
-          border-radius: 3px;
-        }
-
-        .highlighted .edit:hover {
-          background-color: rgba(255, 255, 255, 0.12);
-          outline: 1px solid rgba(255, 255, 255, 0.12);
-        }
-      `)));
-    return (React__default.createElement("div", { "data-value": value, "data-test": dataTest, className: "wrapper" }, tooltipText ? (React__default.createElement(Tooltip, { key: `${value}`, content: tooltipText, placement: 'top', openDelay: 750, closeDelay: 150 }, renderContent())) : (renderContent())));
-};
-TransferOption.propTypes = {
-    label: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    active: PropTypes.bool,
-    dataTest: PropTypes.string,
-    disabled: PropTypes.bool,
-    highlighted: PropTypes.bool,
-    icon: PropTypes.node,
-    selected: PropTypes.bool,
-    tooltipText: PropTypes.string,
-    onClick: PropTypes.func,
-    onDoubleClick: PropTypes.func,
-    onEditClick: PropTypes.func,
-};
-
-// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-const sharedComponents = [];
+import * as i2 from '@angular/forms';
+import { Validators, UntypedFormControl, UntypedFormGroup, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { format } from 'date-fns';
+import moment from 'moment';
+import { ProgramRuleEngine } from '@iapps/d2-web-sdk';
 
 class SharedDhis2UiModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SharedDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [...sharedComponents],
-                    exports: [...sharedComponents],
+                    declarations: [],
+                    exports: [],
                 }]
         }] });
 
@@ -270,7 +147,7 @@ function Search({ value, onChange, baseUrl }) {
             React__default.createElement(InputField, { value: value, name: "filter", placeholder: i18n.t('Search apps'), onChange: onChange, initialFocus: true })),
         React__default.createElement("span", { className: "headerbar-apps-search-icon" },
             React__default.createElement("a", { href: joinPath(baseUrl, 'dhis-web-menu-management') },
-                React__default.createElement(IconSettings24, { color: colors$1.grey700 }))),
+                React__default.createElement(IconSettings24, { color: colors.grey700 }))),
         React__default.createElement("style", { jsx: true }, `
         .headerbar-apps-search {
           display: flex;
@@ -328,7 +205,7 @@ function Item({ name, path, img }) {
 
         .headerbar-app-item-logo:hover,
         .headerbar-app-item-logo:focus {
-          background-color: ${theme$1.primary050};
+          background-color: ${theme.primary050};
           cursor: pointer;
         }
 
@@ -433,13 +310,13 @@ const Apps = ({ apps, baseUrl }) => {
     }, [onDocClick]);
     return (React__default.createElement("div", { className: "headerbar-apps", ref: containerEl, "data-test": "headerbar-apps" },
         React__default.createElement("button", { onClick: handleVisibilityToggle, "data-test": "headerbar-apps-icon" },
-            React__default.createElement(IconApps24, { color: colors$1.white })),
+            React__default.createElement(IconApps24, { color: colors.white })),
         show ? (React__default.createElement(AppMenu, { apps: apps, filter: filter, baseUrl: baseUrl, onFilterChange: handleFilterChange })) : null,
         React__default.createElement("style", { jsx: true }, `
         .headerbar-apps button {
           display: block;
           background: transparent;
-          padding: ${spacers$1.dp4} ${spacers$1.dp12} 0;
+          padding: ${spacers.dp4} ${spacers.dp12} 0;
           border: 0;
           cursor: pointer;
           height: 100%;
@@ -553,10 +430,10 @@ const Logo = ({ baseUrl }) => {
 
 function icon(kind) {
     if (kind === 'message') {
-        return React__default.createElement(IconMessages24, { color: colors$1.white });
+        return React__default.createElement(IconMessages24, { color: colors.white });
     }
     else {
-        return React__default.createElement(IconMail24, { color: colors$1.white });
+        return React__default.createElement(IconMail24, { color: colors.white });
     }
 }
 const NotificationIcon = (params) => {
@@ -570,7 +447,7 @@ const NotificationIcon = (params) => {
           position: relative;
           margin: 0;
           cursor: pointer;
-          padding: 0 ${spacers$1.dp12};
+          padding: 0 ${spacers.dp12};
           height: 100%;
           display: flex;
           align-items: center;
@@ -598,17 +475,17 @@ const NotificationIcon = (params) => {
           right: 2px;
           min-width: 18px;
           min-height: 18px;
-          border-radius: ${spacers$1.dp12};
+          border-radius: ${spacers.dp12};
           box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
             0 1px 2px 0 rgba(0, 0, 0, 0.06);
-          background-color: ${theme$1.secondary500};
-          color: ${colors$1.white};
+          background-color: ${theme.secondary500};
+          color: ${colors.white};
           font-size: 13px;
           font-weight: 600;
           line-height: 15px;
           text-align: center;
           cursor: inherit;
-          padding: 0 ${spacers$1.dp4};
+          padding: 0 ${spacers.dp4};
         }
       `)));
 };
@@ -688,7 +565,7 @@ function DebugInfoTable() {
           white-space: pre-wrap;
           font-size: 14px;
           line-height: 1.2;
-          color: ${colors$1.grey700};
+          color: ${colors.grey700};
           font-famile: Menlo, Courier, monospace !important;
         }
         td {
@@ -748,7 +625,7 @@ const DebugInfoMenuItem = (params) => {
                 : i18n.t('App version unknown')),
         React__default.createElement("style", { jsx: true }, `
         .root {
-          color: ${colors$1.grey700};
+          color: ${colors.grey700};
           font-style: italic;
           font-size: 14px;
           line-height: 17px;
@@ -902,7 +779,7 @@ function UpdateNotification(params) {
           height: 12px;
           margin: 0 8px;
           border-radius: 6px;
-          background-color: ${colors$1.blue600};
+          background-color: ${colors.blue600};
         }
         .spacer {
           display: inline-block;
@@ -930,10 +807,10 @@ const ProfileContents = (params) => {
             React__default.createElement(ProfileHeader, { name: name, email: email, avatarId: avatarId }),
             React__default.createElement(Divider, { margin: "13px 0 7px 0" }),
             React__default.createElement("ul", { "data-test": "headerbar-profile-menu" },
-                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/settings'), label: i18n.t('Settings'), value: "settings", icon: React__default.createElement(IconSettings24, { color: colors$1.grey700 }) }),
-                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/account'), label: i18n.t('Account'), value: "account", icon: React__default.createElement(IconUser24, { color: colors$1.grey700 }) }),
-                helpUrl && (React__default.createElement(MenuItem, { href: helpUrl, label: i18n.t('Help'), value: "help", icon: React__default.createElement(IconQuestion24, { color: colors$1.grey700 }) })),
-                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/aboutPage'), label: i18n.t('About DHIS2'), value: "about", icon: React__default.createElement(IconInfo24, { color: colors$1.grey700 }) }),
+                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/settings'), label: i18n.t('Settings'), value: "settings", icon: React__default.createElement(IconSettings24, { color: colors.grey700 }) }),
+                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/account'), label: i18n.t('Account'), value: "account", icon: React__default.createElement(IconUser24, { color: colors.grey700 }) }),
+                helpUrl && (React__default.createElement(MenuItem, { href: helpUrl, label: i18n.t('Help'), value: "help", icon: React__default.createElement(IconQuestion24, { color: colors.grey700 }) })),
+                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/aboutPage'), label: i18n.t('About DHIS2'), value: "about", icon: React__default.createElement(IconInfo24, { color: colors.grey700 }) }),
                 React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-commons-security/logout.action'), 
                     // NB: By MenuItem implementation, this callback
                     // overwrites default navigation behavior but maintains
@@ -943,7 +820,7 @@ const ProfileContents = (params) => {
                         await clearSensitiveCaches();
                         setLoading(false);
                         window.location.assign(joinPath(baseUrl, 'dhis-web-commons-security/logout.action'));
-                    }, label: i18n.t('Logout'), value: "logout", icon: React__default.createElement(IconLogOut24, { color: colors$1.grey700 }) }),
+                    }, label: i18n.t('Logout'), value: "logout", icon: React__default.createElement(IconLogOut24, { color: colors.grey700 }) }),
                 React__default.createElement(MenuDivider, { dense: true }),
                 React__default.createElement(DebugInfoMenuItem, { hideProfileMenu: hideProfileMenu, showDebugInfoModal: showDebugInfoModal }),
                 React__default.createElement(UpdateNotification, { hideProfileMenu: hideProfileMenu }))),
@@ -1124,7 +1001,7 @@ const HeaderBar = ({ appName, data, className }) => {
           align-items: center;
           justify-content: space-between;
           background-color: #2c6693;
-          color: ${colors$1.white};
+          color: ${colors.white};
           height: 48px;
         }
         .right-control-spacer {
@@ -1141,7 +1018,7 @@ HeaderBar.propTypes = {
 };
 
 window.React = React;
-class ReactWrapperComponent {
+class ReactWrapperModule {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
@@ -1170,14 +1047,13 @@ class ReactWrapperComponent {
                 " "));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: ReactWrapperComponent, isStandalone: false, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ReactWrapperModule, isStandalone: true, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-dhis2-ui-wrapper',
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { props: [{
                 type: Input
@@ -1188,25 +1064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 args: ['ngDhis2UiContent']
             }] } });
 
-class ReactWrapperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperModule, declarations: [ReactWrapperComponent], imports: [CommonModule], exports: [ReactWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [ReactWrapperComponent],
-                    exports: [ReactWrapperComponent],
-                }]
-        }] });
-
-// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-class HeaderBarComponent extends ReactWrapperComponent {
+class HeaderBarComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -1222,24 +1080,24 @@ class HeaderBarComponent extends ReactWrapperComponent {
             : () => React__default.createElement("div", null, "Something went wrong");
         this.render();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", 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.0.7", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HeaderBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-header-bar',
                     template: `<ng-container></ng-container>`,
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }] });
 
 class HeaderBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HeaderBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: HeaderBarModule, declarations: [HeaderBarComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [HeaderBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HeaderBarModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HeaderBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HeaderBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
@@ -1252,7 +1110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-class ButtonComponent extends ReactWrapperComponent {
+class ButtonComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.buttonClick = new EventEmitter();
@@ -1279,15 +1137,15 @@ class ButtonComponent extends ReactWrapperComponent {
     onButtonClick(event) {
         this.buttonClick.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-button',
                     template: '<ng-content></ng-content>',
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { label: [{
                 type: Input
@@ -1308,11 +1166,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }] } });
 
 class ButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [ButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ButtonModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ButtonComponent],
@@ -1537,38 +1395,38 @@ const dimensionGetItems = (dimension) => dimensionIsValid(dimension, { requireIt
 var styles$1 = `
     .filterContainer {
         display: flex;
-        margin-bottom: ${spacers.dp12};
-        margin-top: ${spacers.dp8};
+        margin-bottom: ${spacers$1.dp12};
+        margin-top: ${spacers$1.dp8};
     }
     .emptyList {
         text-align: center;
         font-size: 14px;
         line-height: 16px;
-        margin: ${spacers.dp24} 0 0;
-        color: ${colors.grey700};
+        margin: ${spacers$1.dp24} 0 0;
+        color: ${colors$1.grey700};
     }
     .rightHeader {
         font-size: 14px;
         font-weight: 400;
     }
     .leftHeader {
-        padding: ${spacers.dp12} ${spacers.dp4};
+        padding: ${spacers$1.dp12} ${spacers$1.dp4};
     }
     .info-container {
         display: flex;
-        margin-bottom: ${spacers.dp8};
-        padding: ${spacers.dp8};
-        background-color: ${colors.grey200};
+        margin-bottom: ${spacers$1.dp8};
+        padding: ${spacers$1.dp8};
+        background-color: ${colors$1.grey200};
         border-radius: 3px;
     }
     .info-text {
-        padding-left: ${spacers.dp8};
-        color: ${colors.grey900};
+        padding-left: ${spacers$1.dp8};
+        color: ${colors$1.grey900};
         font-size: 12px;
         line-height: 16px;
     }
     .calculation-button {
-        margin: ${spacers.dp8} 0;
+        margin: ${spacers$1.dp8} 0;
     }
 `;
 
@@ -1576,82 +1434,212 @@ var styles$1 = `
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
+const TransferOption = ({ disabled, label, highlighted, selected, onClick, onDoubleClick, value, icon, active, tooltipText, dataTest, onEditClick, }) => {
+    const renderContent = () => (React__default.createElement("div", { className: cx('chip', {
+            highlighted,
+            disabled,
+            selected,
+            inactive: active !== undefined && !active,
+        }), "data-test": `${dataTest}-content`, onClick: (event) => {
+            if (disabled) {
+                return;
+            }
+            onClick({ label, value }, event);
+        }, onDoubleClick: (event) => {
+            if (disabled) {
+                return;
+            }
+            onDoubleClick({ label, value }, event);
+        } },
+        React__default.createElement("span", { className: "icon" }, icon),
+        React__default.createElement("span", { className: "label" }, label),
+        onEditClick && (React__default.createElement("span", { className: "edit", onClick: (e) => {
+                e.stopPropagation();
+                onEditClick();
+            }, "data-test": `${dataTest}-edit-button` },
+            React__default.createElement(IconEdit16, null))),
+        React__default.createElement("style", { jsx: true }, `
+        .wrapper:last-child {
+          margin-bottom: ${spacers$1.dp4};
+        }
+        .chip {
+          display: inline-flex;
+          background: ${colors$1.grey200};
+          font-size: 14px;
+          line-height: 16px;
+          padding: 2px ${spacers$1.dp8} 2px ${spacers$1.dp4};
+          margin: ${spacers$1.dp4} ${spacers$1.dp8} 0 ${spacers$1.dp8};
+          border-radius: 3px;
+          user-select: none;
+        }
 
-// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-const DAILY = 'DAILY';
-const WEEKLY = 'WEEKLY';
-const WEEKLYWED = 'WEEKLYWED';
-const WEEKLYTHU = 'WEEKLYTHU';
-const WEEKLYSAT = 'WEEKLYSAT';
-const WEEKLYSUN = 'WEEKLYSUN';
-const WEEKS_THIS_YEAR = 'WEEKS_THIS_YEAR';
-const BIWEEKLY = 'BIWEEKLY';
-const MONTHLY = 'MONTHLY';
-const BIMONTHLY = 'BIMONTHLY';
-const QUARTERLY = 'QUARTERLY';
-const SIXMONTHLY = 'SIXMONTHLY';
-const SIXMONTHLYAPR = 'SIXMONTHLYAPR';
-const YEARLY = 'YEARLY';
-const FINANCIAL = 'FINANCIAL';
-const FYNOV = 'FYNOV';
-const FYOCT = 'FYOCT';
-const FYJUL = 'FYJUL';
-const FYAPR = 'FYAPR';
+        .chip:hover {
+          background: ${colors$1.grey300};
+        }
 
-const getDaysPeriodType = () => [
-    { id: 'TODAY', name: i18n.t('Today') },
-    { id: 'YESTERDAY', name: i18n.t('Yesterday') },
-    { id: 'LAST_3_DAYS', name: i18n.t('Last 3 days') },
-    { id: 'LAST_7_DAYS', name: i18n.t('Last 7 days') },
-    { id: 'LAST_14_DAYS', name: i18n.t('Last 14 days') },
-    { id: 'LAST_30_DAYS', name: i18n.t('Last 30 days') },
-    { id: 'LAST_60_DAYS', name: i18n.t('Last 60 days') },
-    { id: 'LAST_90_DAYS', name: i18n.t('Last 90 days') },
-    { id: 'LAST_180_DAYS', name: i18n.t('Last 180 days') },
-];
-const getWeeksPeriodType = () => [
-    { id: 'THIS_WEEK', name: i18n.t('This week') },
-    { id: 'LAST_WEEK', name: i18n.t('Last week') },
-    { id: 'LAST_4_WEEKS', name: i18n.t('Last 4 weeks') },
-    { id: 'LAST_12_WEEKS', name: i18n.t('Last 12 weeks') },
-    { id: 'LAST_52_WEEKS', name: i18n.t('Last 52 weeks') },
-    { id: WEEKS_THIS_YEAR, name: i18n.t('Weeks this year') },
-];
-const getBiWeeksPeriodType = () => [
-    { id: 'THIS_BIWEEK', name: i18n.t('This bi-week') },
-    { id: 'LAST_BIWEEK', name: i18n.t('Last bi-week') },
-    { id: 'LAST_4_BIWEEKS', name: i18n.t('Last 4 bi-weeks') },
-];
-const getMonthsPeriodType = () => [
-    { id: 'THIS_MONTH', name: i18n.t('This month') },
-    { id: 'LAST_MONTH', name: i18n.t('Last month') },
-    { id: 'LAST_3_MONTHS', name: i18n.t('Last 3 months') },
-    { id: 'LAST_6_MONTHS', name: i18n.t('Last 6 months') },
-    { id: 'LAST_12_MONTHS', name: i18n.t('Last 12 months') },
-    {
-        id: 'MONTHS_THIS_YEAR',
-        name: i18n.t('Months this year'),
-    },
-];
-const getBiMonthsPeriodType = () => [
-    { id: 'THIS_BIMONTH', name: i18n.t('This bi-month') },
-    { id: 'LAST_BIMONTH', name: i18n.t('Last bi-month') },
-    {
-        id: 'LAST_6_BIMONTHS',
-        name: i18n.t('Last 6 bi-months'),
-    },
-    {
-        id: 'BIMONTHS_THIS_YEAR',
-        name: i18n.t('Bi-months this year'),
-    },
-];
-const getQuartersPeriodType = () => [
-    { id: 'THIS_QUARTER', name: i18n.t('This quarter') },
+        .selected {
+          background: ${theme$1.secondary100};
+          color: ${theme$1.secondary900};
+        }
+
+        .selected :global(.icon path) {
+          fill: ${theme$1.secondary700};
+        }
+
+        .selected:hover {
+          background: #c9edeb;
+        }
+
+        .highlighted,
+        .highlighted:hover {
+          background: ${theme$1.secondary800};
+          color: ${colors$1.white};
+        }
+
+        .highlighted :global(.icon path) {
+          fill: ${colors$1.white};
+        }
+
+        .disabled {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+
+        .inactive {
+          opacity: 0.3;
+        }
+
+        .icon,
+        .label {
+          line-height: 18px;
+        }
+
+        .icon {
+          margin-right: ${spacers$1.dp4};
+          display: inline-flex;
+          vertical-align: text-bottom;
+          padding-top: 1px;
+        }
+
+        .label {
+          font-size: 14px;
+        }
+
+        .edit {
+          height: 16px;
+          margin-top: 1px;
+          margin-left: ${spacers$1.dp8};
+          cursor: pointer;
+        }
+
+        .edit:hover {
+          background-color: rgba(0, 0, 0, 0.12);
+          outline: 1px solid rgba(0, 0, 0, 0.12);
+          border-radius: 3px;
+        }
+
+        .highlighted .edit:hover {
+          background-color: rgba(255, 255, 255, 0.12);
+          outline: 1px solid rgba(255, 255, 255, 0.12);
+        }
+      `)));
+    return (React__default.createElement("div", { "data-value": value, "data-test": dataTest, className: "wrapper" }, tooltipText ? (React__default.createElement(Tooltip, { key: `${value}`, content: tooltipText, placement: 'top', openDelay: 750, closeDelay: 150 }, renderContent())) : (renderContent())));
+};
+TransferOption.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    active: PropTypes.bool,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    highlighted: PropTypes.bool,
+    icon: PropTypes.node,
+    selected: PropTypes.bool,
+    tooltipText: PropTypes.string,
+    onClick: PropTypes.func,
+    onDoubleClick: PropTypes.func,
+    onEditClick: PropTypes.func,
+};
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+const DAILY = 'DAILY';
+const WEEKLY = 'WEEKLY';
+const WEEKLYWED = 'WEEKLYWED';
+const WEEKLYTHU = 'WEEKLYTHU';
+const WEEKLYSAT = 'WEEKLYSAT';
+const WEEKLYSUN = 'WEEKLYSUN';
+const WEEKS_THIS_YEAR = 'WEEKS_THIS_YEAR';
+const BIWEEKLY = 'BIWEEKLY';
+const MONTHLY = 'MONTHLY';
+const BIMONTHLY = 'BIMONTHLY';
+const QUARTERLY = 'QUARTERLY';
+const SIXMONTHLY = 'SIXMONTHLY';
+const SIXMONTHLYAPR = 'SIXMONTHLYAPR';
+const YEARLY = 'YEARLY';
+const FINANCIAL = 'FINANCIAL';
+const FYNOV = 'FYNOV';
+const FYOCT = 'FYOCT';
+const FYJUL = 'FYJUL';
+const FYAPR = 'FYAPR';
+
+const getDaysPeriodType = () => [
+    { id: 'TODAY', name: i18n.t('Today') },
+    { id: 'YESTERDAY', name: i18n.t('Yesterday') },
+    { id: 'LAST_3_DAYS', name: i18n.t('Last 3 days') },
+    { id: 'LAST_7_DAYS', name: i18n.t('Last 7 days') },
+    { id: 'LAST_14_DAYS', name: i18n.t('Last 14 days') },
+    { id: 'LAST_30_DAYS', name: i18n.t('Last 30 days') },
+    { id: 'LAST_60_DAYS', name: i18n.t('Last 60 days') },
+    { id: 'LAST_90_DAYS', name: i18n.t('Last 90 days') },
+    { id: 'LAST_180_DAYS', name: i18n.t('Last 180 days') },
+];
+const getWeeksPeriodType = () => [
+    { id: 'THIS_WEEK', name: i18n.t('This week') },
+    { id: 'LAST_WEEK', name: i18n.t('Last week') },
+    { id: 'LAST_4_WEEKS', name: i18n.t('Last 4 weeks') },
+    { id: 'LAST_12_WEEKS', name: i18n.t('Last 12 weeks') },
+    { id: 'LAST_52_WEEKS', name: i18n.t('Last 52 weeks') },
+    { id: WEEKS_THIS_YEAR, name: i18n.t('Weeks this year') },
+];
+const getBiWeeksPeriodType = () => [
+    { id: 'THIS_BIWEEK', name: i18n.t('This bi-week') },
+    { id: 'LAST_BIWEEK', name: i18n.t('Last bi-week') },
+    { id: 'LAST_4_BIWEEKS', name: i18n.t('Last 4 bi-weeks') },
+];
+const getMonthsPeriodType = () => [
+    { id: 'THIS_MONTH', name: i18n.t('This month') },
+    { id: 'LAST_MONTH', name: i18n.t('Last month') },
+    { id: 'LAST_3_MONTHS', name: i18n.t('Last 3 months') },
+    { id: 'LAST_6_MONTHS', name: i18n.t('Last 6 months') },
+    { id: 'LAST_12_MONTHS', name: i18n.t('Last 12 months') },
+    {
+        id: 'MONTHS_THIS_YEAR',
+        name: i18n.t('Months this year'),
+    },
+];
+const getBiMonthsPeriodType = () => [
+    { id: 'THIS_BIMONTH', name: i18n.t('This bi-month') },
+    { id: 'LAST_BIMONTH', name: i18n.t('Last bi-month') },
+    {
+        id: 'LAST_6_BIMONTHS',
+        name: i18n.t('Last 6 bi-months'),
+    },
+    {
+        id: 'BIMONTHS_THIS_YEAR',
+        name: i18n.t('Bi-months this year'),
+    },
+];
+const getQuartersPeriodType = () => [
+    { id: 'THIS_QUARTER', name: i18n.t('This quarter') },
     { id: 'LAST_QUARTER', name: i18n.t('Last quarter') },
     { id: 'LAST_4_QUARTERS', name: i18n.t('Last 4 quarters') },
     {
@@ -2068,7 +2056,7 @@ const FixedPeriodFilter = ({ allowedPeriodTypes, excludedPeriodTypes, currentPer
         }
         .rightSection {
           width: 120px;
-          margin-left: ${spacers.dp8};
+          margin-left: ${spacers$1.dp8};
         }
       `)));
 };
@@ -2097,7 +2085,7 @@ const RelativePeriodFilter = ({ currentFilter, onSelectFilter, dataTest, exclude
       }
       .rightSection {
         width: 120px;
-        margin-left: ${spacers.dp8};
+        margin-left: ${spacers$1.dp8};
       }
     `)));
 RelativePeriodFilter.propTypes = {
@@ -2244,7 +2232,7 @@ PeriodDimension.defaultProps = {
     selectedPeriods: [],
 };
 
-class PeriodSelectorModalComponent extends ReactWrapperComponent {
+class PeriodSelectorModalComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2300,10 +2288,10 @@ class PeriodSelectorModalComponent extends ReactWrapperComponent {
     onConfirm(selectedItems) {
         this.confirm.emit(selectedItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PeriodSelectorModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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: "19.1.8", ngImport: i0, type: PeriodSelectorModalComponent, 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: 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.0.7", ngImport: i0, type: PeriodSelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", 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 }, { type: i1.NgxDhis2HttpClientService }], propDecorators: { selectedPeriods: [{
@@ -2314,7 +2302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 type: Output
             }] } });
 
-class PeriodSelectorComponent extends ReactWrapperComponent {
+class PeriodSelectorComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient, ngZone) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2360,10 +2348,10 @@ class PeriodSelectorComponent extends ReactWrapperComponent {
     onSelectItems(selectionEvent) {
         this.selectPeriods.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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: "19.1.8", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { 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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PeriodSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", 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: i1.NgxDhis2HttpClientService }, { type: i0.NgZone }], propDecorators: { selectedPeriods: [{
@@ -2373,11 +2361,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }] } });
 
 class PeriodSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PeriodSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PeriodSelectorModule, declarations: [PeriodSelectorComponent, PeriodSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [PeriodSelectorComponent, PeriodSelectorModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PeriodSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PeriodSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
@@ -2469,20 +2457,20 @@ const styles = `
 
     .userOrgUnitsWrapper {
         display: flex;
-        background: ${colors.grey200};
-        padding: ${spacers.dp8} ${spacers.dp8} ${spacers.dp8} ${spacers.dp24};
-        margin-bottom: ${spacers.dp12};
+        background: ${colors$1.grey200};
+        padding: ${spacers$1.dp8} ${spacers$1.dp8} ${spacers$1.dp8} ${spacers$1.dp24};
+        margin-bottom: ${spacers$1.dp12};
     }
 
     .userOrgUnitsWrapper > :global(*) {
-        margin-right: ${spacers.dp48};
+        margin-right: ${spacers$1.dp48};
     }
 
     .selectsWrapper {
         display: flex;
         align-items: flex-start;
-        gap: ${spacers.dp8};
-        margin-top: ${spacers.dp12};
+        gap: ${spacers$1.dp8};
+        margin-top: ${spacers$1.dp12};
     }
 
     .selectsWrapper.hidden {
@@ -2496,7 +2484,7 @@ const styles = `
     .summaryWrapper {
         display: inline-flex;
         align-items: center;
-        margin-top: ${spacers.dp8};
+        margin-top: ${spacers$1.dp8};
     }
 
     .warningWrapper {
@@ -2505,21 +2493,21 @@ const styles = `
     }
 
     .warningText {
-        margin-left: ${spacers.dp8};
+        margin-left: ${spacers$1.dp8};
         font-size: 14px;
         line-height: 18px;
-        color: ${colors.red600};
+        color: ${colors$1.red600};
     }
 
     .summaryText {
         font-size: 14px;
         line-height: 18px;
-        color: ${colors.grey700};
+        color: ${colors$1.grey700};
     }
 
     .deselectButton {
         display: inline-block;
-        margin-left: ${spacers.dp8};
+        margin-left: ${spacers$1.dp8};
     }
 `;
 
@@ -2534,7 +2522,6 @@ const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLeve
     const [selectedItems, setSelectedItems] = useState(selected);
     const dataEngine = useDataEngine();
     const onSelectItems = (selectedItem) => {
-        console.log('WE ARE SELECTING HERE', selectedItem);
         const { id, checked, displayName, path } = selectedItem;
         let result = [...selectedItems];
         if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
@@ -2703,7 +2690,7 @@ const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLeve
                     : [], onChange: ({ selected }) => onGroupChange(selected), placeholder: i18n.t('Select a group'), loading: !ouGroups.length, dense: true, dataTest: 'org-unit-group-select' }, ouGroups.map((group) => (React__default.createElement(MultiSelectOption, { key: group.id, value: group.id, label: group.displayName, dataTest: `org-unit-group-select-option-${group.id}` })))))),
         React__default.createElement("div", { className: "summaryWrapper" },
             warning ? (React__default.createElement("div", { className: "warningWrapper" },
-                React__default.createElement(IconWarningFilled16, { color: colors.red500 }),
+                React__default.createElement(IconWarningFilled16, { color: colors$1.red500 }),
                 React__default.createElement("span", { className: "warningText" }, warning))) : (React__default.createElement("span", { className: "summaryText" }, getSummary())),
             React__default.createElement("div", { className: "deselectButton" },
                 React__default.createElement(Button$1, { secondary: true, small: true, onClick: clearSelection, disabled: !selectedItems.length }, i18n.t('Deselect all')))),
@@ -2752,7 +2739,7 @@ class OrganisationUnitSelectionConfig {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-class OrganisationUnitSelectorComponent extends ReactWrapperComponent {
+class OrganisationUnitSelectorComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient, ngZone) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2815,10 +2802,10 @@ class OrganisationUnitSelectorComponent extends ReactWrapperComponent {
     onSelectItems(selectionEvent) {
         this.selectOrgUnits.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-org-unit-selector',
@@ -2833,7 +2820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 type: Output
             }] } });
 
-class OrganisationUnitSelectorModalComponent extends ReactWrapperComponent {
+class OrganisationUnitSelectorModalComponent extends ReactWrapperModule {
     constructor(elementRef, httpClient) {
         super(elementRef);
         this.httpClient = httpClient;
@@ -2917,10 +2904,10 @@ class OrganisationUnitSelectorModalComponent extends ReactWrapperComponent {
     onSelectItems(selectionEvent) {
         this.selectOrgUnits.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: OrganisationUnitSelectorModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModalComponent, 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: 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.0.7", ngImport: i0, type: OrganisationUnitSelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", 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 }, { type: i1.NgxDhis2HttpClientService }], propDecorators: { selectedOrgUnits: [{
@@ -2936,13 +2923,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }] } });
 
 class OrganisationUnitSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: OrganisationUnitSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: OrganisationUnitSelectorModule, declarations: [OrganisationUnitSelectorComponent,
+    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,
             OrganisationUnitSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [OrganisationUnitSelectorComponent,
             OrganisationUnitSelectorModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: OrganisationUnitSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
@@ -2961,6 +2948,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+const dropdownStyles = {
+    layer: {
+        zIndex: '1 !important',
+    },
+};
+
+// Helper function to generate a unique class name
+const generateClassName = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === "object" && key.startsWith("@media")) {
+            const mediaStyles = convertStylesToCSS(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith("&:")) {
+            const pseudoClass = key.replace("&", "");
+            cssString += `${pseudoClass} { ${convertStylesToCSS("", styles[key])} }`;
+        }
+        else {
+            const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+            cssString += `${cssKey}: ${styles[key]}; `;
+        }
+    }
+    cssString += "}";
+    return cssString;
+};
+// Custom hook for dynamic styles with generics
+const useDynamicStyles = (stylesObj) => {
+    const [classNames, setClassNames] = useState({});
+    useEffect(() => {
+        const convertedStyles = Object.keys(stylesObj).map((key) => {
+            const className = generateClassName(key);
+            const styleElement = document.createElement("style");
+            styleElement.innerHTML = convertStylesToCSS(className, stylesObj[key]);
+            document.head.appendChild(styleElement);
+            return {
+                key,
+                className,
+                styleElement,
+            };
+        });
+        setClassNames(convertedStyles.reduce((classNameEntity, convertedStyle) => {
+            return {
+                ...classNameEntity,
+                [convertedStyle.key]: convertedStyle.className,
+            };
+        }, {}));
+        return () => {
+            convertedStyles.forEach((convertedStyle) => {
+                document.head.removeChild(convertedStyle.styleElement);
+            });
+        };
+    }, []);
+    return classNames;
+};
+
+const useCurrentModal = () => {
+    const [CurrentModal, setCurrentModal] = useState();
+    return [
+        CurrentModal,
+        (Modal) => {
+            // As setState supports functional updates, we can't pass functional
+            // components directly
+            setCurrentModal(() => Modal);
+        },
+    ];
+};
+const ContextMenu = (params) => {
+    const { onClose, onMenuClick, anchorRef, dropDownOptions } = params;
+    const [CurrentModal, setCurrentModal] = useCurrentModal();
+    const styles = useDynamicStyles(dropdownStyles);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Layer$1, { onBackdropClick: (event, data) => onClose(event, data), className: styles.layer },
+            React__default.createElement(Popper, { reference: anchorRef, placement: "bottom-start" },
+                React__default.createElement(FlyoutMenu, null, dropDownOptions.map((dropDownOption, index) => (React__default.createElement(MenuItem$1, { key: index, destructive: dropDownOption.destructive, label: dropDownOption.label, icon: dropDownOption.icon, onClick: () => {
+                        onMenuClick(dropDownOption);
+                        onClose();
+                    }, dense: true })))))),
+        CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
+                onClose();
+                setCurrentModal(null);
+            } }))));
+};
+const DropdownMenu = (props) => {
+    const ref = useRef();
+    const [visible, setVisible] = useState(false);
+    const { dropdownOptions, onClick } = props;
+    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
+        React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors$1.grey600 }), onClick: () => setVisible(true) }),
+        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
+                onClick(dropDownOption);
+            } }))));
+};
+
 // export function buildFilters(filters: AttributeFilter[]): string {
 //   return filters
 //     .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
@@ -3025,12 +3108,13 @@ class LineListService {
         this.httpClient = httpClient;
     }
     getProgramMetadata(programId) {
-        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name]`);
+        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name],*`);
     }
-    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
-        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`).pipe(map$1((response) => {
+        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
+        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`).pipe(map$1((response) => {
             response.trackedEntityInstances.forEach((tei) => {
                 // Filter attributes to only include those with displayInList=true
                 tei.attributes = tei.attributes.filter((attr) => attr.displayInList);
@@ -3038,141 +3122,47 @@ class LineListService {
             return response;
         }));
     }
-    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
-        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
+        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
+        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
-    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
-        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
+        const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
+        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
-    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate) {
+    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode) {
         return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
             if (programStageId) {
-                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
+                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
                     metadata: programMetadata,
                     data: events,
                 })));
             }
             if (programMetadata.programType === 'WITH_REGISTRATION') {
-                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((teis) => ({
+                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((teis) => ({
                     metadata: programMetadata,
                     data: teis,
                 })));
             }
             else {
-                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
+                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
                     metadata: programMetadata,
                     data: events,
                 })));
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService, deps: [{ token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
 
-const dropdownStyles = {
-    layer: {
-        zIndex: '1 !important',
-    },
-};
-
-// Helper function to generate a unique class name
-const generateClassName = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
-// Helper function to convert camelCased properties to hyphenated CSS properties
-const convertStylesToCSS = (className, styles) => {
-    let cssString = `.${className} {`;
-    for (const key in styles) {
-        if (typeof styles[key] === "object" && key.startsWith("@media")) {
-            const mediaStyles = convertStylesToCSS(className, styles[key]);
-            cssString += `${key} { ${mediaStyles} }`;
-        }
-        else if (key.startsWith("&:")) {
-            const pseudoClass = key.replace("&", "");
-            cssString += `${pseudoClass} { ${convertStylesToCSS("", styles[key])} }`;
-        }
-        else {
-            const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-            cssString += `${cssKey}: ${styles[key]}; `;
-        }
-    }
-    cssString += "}";
-    return cssString;
-};
-// Custom hook for dynamic styles with generics
-const useDynamicStyles = (stylesObj) => {
-    const [classNames, setClassNames] = useState({});
-    useEffect(() => {
-        const convertedStyles = Object.keys(stylesObj).map((key) => {
-            const className = generateClassName(key);
-            const styleElement = document.createElement("style");
-            styleElement.innerHTML = convertStylesToCSS(className, stylesObj[key]);
-            document.head.appendChild(styleElement);
-            return {
-                key,
-                className,
-                styleElement,
-            };
-        });
-        setClassNames(convertedStyles.reduce((classNameEntity, convertedStyle) => {
-            return {
-                ...classNameEntity,
-                [convertedStyle.key]: convertedStyle.className,
-            };
-        }, {}));
-        return () => {
-            convertedStyles.forEach((convertedStyle) => {
-                document.head.removeChild(convertedStyle.styleElement);
-            });
-        };
-    }, []);
-    return classNames;
-};
-
-const useCurrentModal = () => {
-    const [CurrentModal, setCurrentModal] = useState();
-    return [
-        CurrentModal,
-        (Modal) => {
-            // As setState supports functional updates, we can't pass functional
-            // components directly
-            setCurrentModal(() => Modal);
-        },
-    ];
-};
-const ContextMenu = (params) => {
-    const { onClose, onMenuClick, anchorRef, dropDownOptions } = params;
-    const [CurrentModal, setCurrentModal] = useCurrentModal();
-    const styles = useDynamicStyles(dropdownStyles);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Layer$1, { onBackdropClick: (event, data) => onClose(event, data), className: styles.layer },
-            React__default.createElement(Popper, { reference: anchorRef, placement: "bottom-start" },
-                React__default.createElement(FlyoutMenu, null, dropDownOptions.map((dropDownOption, index) => (React__default.createElement(MenuItem$1, { key: index, destructive: dropDownOption.destructive, label: dropDownOption.label, icon: dropDownOption.icon, onClick: () => {
-                        onMenuClick(dropDownOption);
-                        onClose();
-                    }, dense: true })))))),
-        CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
-                onClose();
-                setCurrentModal(null);
-            } }))));
-};
-const DropdownMenu = (props) => {
-    const ref = useRef();
-    const [visible, setVisible] = useState(false);
-    const { dropdownOptions, onClick } = props;
-    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
-        React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors.grey600 }), onClick: () => setVisible(true) }),
-        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
-                onClick(dropDownOption);
-            } }))));
-};
-
 const getProgramStageData = (response, programStageId, pager) => {
     const events = response.data.events;
     const allDataElements = new Set();
@@ -3201,6 +3191,14 @@ const getProgramStageData = (response, programStageId, pager) => {
 const getTrackedEntityData = (response, programId, pager, filters) => {
     let teis = response.data
         .trackedEntityInstances;
+    let programMetaData = response.metadata.programTrackedEntityAttributes;
+    const programAttributesMap = programMetaData.reduce((acc, attribute) => {
+        if (attribute.displayInList) {
+            acc[attribute.id] = attribute.displayName;
+        }
+        return acc;
+    }, {});
+    console.log('metadata', programAttributesMap);
     if (filters) {
         teis = getFilteredTrackedEntityInstances(teis, filters);
     }
@@ -3212,7 +3210,12 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             : tei.attributes;
         attributes.forEach((attr) => allAttributes.add(attr.attribute));
     });
-    const entityColumns = Array.from(allAttributes).map((attrId) => {
+    console.log('all of the attributes', allAttributes);
+    // const filteredAttributes = new Set(
+    //   [...allAttributes].filter((attributeId) => programAttributesMap[attributeId])
+    // );
+    // console.log('Filtered All Attributes:', filteredAttributes);
+    let entityColumns = Array.from(allAttributes).map((attrId) => {
         const foundAttribute = teis
             .flatMap((tei) => {
             const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
@@ -3226,6 +3229,10 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             key: attrId,
         };
     });
+    entityColumns = entityColumns.filter((column) => {
+        // Check if the column label is part of any value in programAttributesMap
+        return Object.values(programAttributesMap).some((value) => value.includes(column.label));
+    });
     const attributesData = teis.map((tei, idx) => {
         let row = {
             trackedEntityInstance: tei.trackedEntityInstance,
@@ -3272,7 +3279,7 @@ const addActionsColumn = (columns, actionOptions) => {
 };
 
 // src/app/line-list-table.component.ts
-class LineListTableComponent extends ReactWrapperComponent {
+class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.actionSelected = new EventEmitter();
@@ -3326,7 +3333,7 @@ class LineListTableComponent extends ReactWrapperComponent {
             useEffect(() => {
                 setLoading(true);
                 this.lineListService
-                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate)
+                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
@@ -3378,23 +3385,31 @@ class LineListTableComponent extends ReactWrapperComponent {
                     },
                 }));
             };
-            return (React__default.createElement("div", null, loading ? (React__default.createElement(CircularLoader$1, null)) :
-                (React__default.createElement(DataTable, null,
-                    React__default.createElement(TableHead, null,
-                        React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
-                    React__default.createElement(TableBody, null, data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions' ? (React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key])))))))),
-                    React__default.createElement(TableFoot, null,
-                        React__default.createElement(DataTableRow, null,
-                            React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
-                                React__default.createElement("div", null,
-                                    React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
-                                            const newPageSize = Number(pageSize);
-                                            setPager((prev) => ({
-                                                ...prev,
-                                                page: 1,
-                                                pageSize: newPageSize,
-                                            }));
-                                        }, pageSizes: ['5', '10', '20', '50'] })))))))));
+            return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: 8,
+                } },
+                React__default.createElement(CircularLoader$1, { small: true }),
+                React__default.createElement("div", { style: {
+                        fontSize: 14,
+                    } }, "Loading"))) : (React__default.createElement(DataTable, null,
+                React__default.createElement(TableHead, null,
+                    React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
+                React__default.createElement(TableBody, null, data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions' ? (React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key])))))))),
+                React__default.createElement(TableFoot, null,
+                    React__default.createElement(DataTableRow, null,
+                        React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
+                            React__default.createElement("div", null,
+                                React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
+                                        const newPageSize = Number(pageSize);
+                                        setPager((prev) => ({
+                                            ...prev,
+                                            page: 1,
+                                            pageSize: newPageSize,
+                                        }));
+                                    }, pageSizes: ['5', '10', '20', '50'] })))))))));
         };
     }
     ngOnChanges(changes) {
@@ -3426,10 +3441,10 @@ class LineListTableComponent extends ReactWrapperComponent {
         this.component = this.LineList;
         this.render();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }]
         }], propDecorators: { programId: [{
@@ -3448,16 +3463,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 type: Input
             }], filters: [{
                 type: Input
+            }], ouMode: [{
+                type: Input
             }], actionSelected: [{
                 type: Output
             }] } });
 
 class LineListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [LineListTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
+    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], exports: [LineListTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LineListTableComponent],
@@ -3467,9 +3484,1721 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
+class FormField {
+    constructor(options = {}) {
+        this.value = options.value || '';
+        this.key = options.key || '';
+        this.referenceKey = options.referenceKey || '';
+        this.id = options.id || '';
+        this.code = options.code || '';
+        this.label = options.label || '';
+        this.required = !!options.required;
+        this.order = options.order === undefined ? 1 : options.order;
+        this.controlType = options.controlType;
+        this.type = options.type || '';
+        this.options = options.options || [];
+        this.disabled = options.disabled || false;
+        this.placeholder = options.placeholder || '';
+        this.min = options.min;
+        this.max =
+            options.max || (this.controlType === 'date' ? new Date() : undefined);
+        this.maxLength = options.maxLength;
+        this.hidden = options.hidden || false;
+        this.isDataElement = options.isDataElement;
+        this.isAttribute = options.isAttribute;
+        this.isOrgUnit = options.isOrgUnit;
+        this.isEnrollmentDate = options.isEnrollmentDate;
+        this.event = options.event;
+        this.programStage = options.programStage;
+        this.program = options.program;
+        this.trackedEntityInstance = options.trackedEntityInstance;
+        this.hasOptions = options.hasOptions;
+        this.dependentField = options.dependentField;
+        this.displayInList = options.displayInList;
+        this.displayInReports = options.displayInReports;
+        this.searchable = options.searchable;
+        this.unique = options.unique;
+        this.metaType = options.metaType;
+        this.stepId = options.stepId;
+        this.availableOptionsLabel =
+            options.availableOptionsLabel ?? 'Available options';
+        this.selectedOptionsLabel =
+            options.availableOptionsLabel ?? 'Selected options';
+    }
+}
+
+let Boolean$1 = class Boolean extends FormField {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'boolean';
+    }
+};
+
+class CheckBox extends FormField {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'checkbox';
+    }
+}
+
+class DateField extends FormField {
+    constructor(field) {
+        super(field);
+        this.controlType = 'date';
+        this.type = 'date';
+        this.max = field.max ?? format(new Date(), 'yyyy-MM-dd');
+    }
+}
+
+class Dropdown extends FormField {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'dropdown';
+    }
+}
+
+// Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class FieldConfig {
+    constructor(config) {
+        this.hideLabel = config?.hideLabel ?? false;
+        this.inputWidth = config?.inputWidth || '100%';
+    }
+}
+
+// Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class DateRangeValue {
+}
+
+var FieldType;
+(function (FieldType) {
+    FieldType["TEXT"] = "TEXT";
+    FieldType["TRUE_ONLY"] = "TRUE_ONLY";
+    FieldType["LONG_TEXT"] = "LONG_TEXT";
+    FieldType["BOOLEAN"] = "BOOLEAN";
+    FieldType["NUMBER"] = "NUMBER";
+    FieldType["INTEGER_ZERO_OR_POSITIVE"] = "INTEGER_ZERO_OR_POSITIVE";
+    FieldType["IMAGE"] = "IMAGE";
+    FieldType["FILE_RESOURCE"] = "FILE_RESOURCE";
+    FieldType["DATE"] = "DATE";
+    FieldType["DATE_TIME"] = "DATETIME";
+    FieldType["ORG_UNIT"] = "ORGANISATION_UNIT";
+    FieldType["PHONE_NUMBER"] = "PHONE_NUMBER";
+    FieldType["EMAIL"] = "EMAIL";
+})(FieldType || (FieldType = {}));
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+class FieldDropdown {
+    constructor(params) {
+        this.key = params.key;
+        this.value = params.value;
+        this.label = params.label;
+        this.order = params.order;
+    }
+    toJson() {
+        return {
+            key: this.key,
+            value: this.value,
+            label: this.label,
+            order: this.order,
+        };
+    }
+    static getDropdownOptions(field, locale) {
+        if (field?.valueType === FieldType.BOOLEAN) {
+            return [
+                {
+                    key: 'Yes',
+                    value: 'true',
+                    label: 'Yes',
+                    order: 1,
+                },
+                {
+                    key: 'No',
+                    value: 'false',
+                    label: 'No',
+                    order: 2,
+                },
+            ].map((dropdown) => new FieldDropdown(dropdown));
+        }
+        return sortBy((field?.optionSet?.options || []).map((option) => {
+            return new FieldDropdown({
+                key: option.id,
+                value: option.code,
+                label: option.name,
+                order: option.sortOrder,
+            });
+        }), 'order');
+    }
+}
+
+class FormConfig {
+    constructor(config) {
+        this.direction = config?.direction || 'vertical';
+        this.showSaveButton = config?.showSaveButton ?? true;
+        this.fieldConfig = config?.fieldConfig || new FieldConfig();
+        this.formName = config?.formName;
+    }
+    get directionClassName() {
+        return this.direction === 'vertical' ? 'form-vertical' : 'form-horizontal';
+    }
+}
+
+class FieldUtil {
+    static getFieldDropdownOptions(field) {
+        if (field.valueType === FieldType.BOOLEAN) {
+            return [
+                {
+                    key: 'Yes',
+                    value: 'true',
+                    label: 'Yes',
+                    order: 1,
+                },
+                {
+                    key: 'No',
+                    value: 'false',
+                    label: 'No',
+                    order: 2,
+                },
+            ];
+        }
+        return FieldUtil.sanitizeOptions(field.optionSet?.options || []);
+    }
+    static sanitizeOptions(options) {
+        return sortBy((options || []).map((option) => ({
+            key: option.id,
+            value: option.code,
+            label: option.name,
+            order: option.sortOrder,
+            color: option.style?.color,
+            attributeValues: option.attributeValues,
+            options: FieldUtil.sanitizeOptions(option.options),
+        })), 'order');
+    }
+    static getFieldType(valueType) {
+        switch (valueType) {
+            case FieldType.NUMBER:
+                return 'number';
+            case FieldType.PHONE_NUMBER:
+                return 'tel';
+            case FieldType.ORG_UNIT:
+                return 'org-unit';
+            case FieldType.DATE:
+                return 'date';
+            case FieldType.FILE_RESOURCE:
+                return 'file';
+            default:
+                return 'text';
+        }
+    }
+    static getFieldControlType(valueType, hasOptions) {
+        if (hasOptions) {
+            return 'dropdown';
+        }
+        switch (valueType) {
+            case FieldType.TEXT:
+                return 'textbox';
+            case FieldType.LONG_TEXT:
+                return 'textarea';
+            case FieldType.TRUE_ONLY:
+                return 'checkbox';
+            case FieldType.NUMBER:
+                return 'textbox';
+            case FieldType.PHONE_NUMBER:
+                return 'textbox';
+            case FieldType.ORG_UNIT:
+                return 'org-unit';
+            case FieldType.DATE:
+                return 'date';
+            case FieldType.DATE_TIME:
+                return 'date-time';
+            case FieldType.IMAGE:
+                return 'image';
+            case FieldType.FILE_RESOURCE:
+                return 'file';
+            default:
+                return 'textbox';
+        }
+    }
+    static getOptionEntities(options) {
+        return (options || []).reduce((entity, option) => {
+            return { ...entity, [option.value]: option.label };
+        }, {});
+    }
+}
+
+class FieldControlTypeUtil {
+    static getFieldControlType(valueType, hasOptions) {
+        if (hasOptions) {
+            return 'dropdown';
+        }
+        switch (valueType) {
+            case FieldType.TEXT:
+                return 'textbox';
+            case FieldType.BOOLEAN:
+                return 'dropdown';
+            case FieldType.LONG_TEXT:
+                return 'textarea';
+            case FieldType.TRUE_ONLY:
+                return 'checkbox';
+            case FieldType.NUMBER:
+                return 'textbox';
+            case FieldType.INTEGER_ZERO_OR_POSITIVE:
+                return 'textbox';
+            case FieldType.ORG_UNIT:
+                return 'org-unit';
+            case FieldType.DATE:
+                return 'date';
+            case FieldType.DATE_TIME:
+                return 'date-time';
+            case FieldType.IMAGE:
+                return 'image';
+            case FieldType.FILE_RESOURCE:
+                return 'file';
+            default:
+                return 'textbox';
+        }
+    }
+}
+
+class FormFieldTypeUtil {
+    static getFieldType(valueType) {
+        switch (valueType) {
+            case FieldType.NUMBER:
+                return 'number';
+            case FieldType.INTEGER_ZERO_OR_POSITIVE:
+                return 'number';
+            case FieldType.ORG_UNIT:
+                return 'org-unit';
+            case FieldType.IMAGE:
+                return 'image';
+            case FieldType.FILE_RESOURCE:
+                return 'file';
+            default:
+                return 'text';
+        }
+    }
+}
+
+class FormUtil {
+    static getFormGroup(fields, dataEntities) {
+        const group = {};
+        (fields || []).forEach((field) => {
+            if (field) {
+                const value = FormUtil.getFieldValue(field, dataEntities);
+                const minValidators = field.min
+                    ? [Validators.min(field.min)]
+                    : [];
+                const maxValidators = field.max
+                    ? [Validators.max(field.max)]
+                    : [];
+                const phoneNumberValidator = field.type === 'tel'
+                    ? [Validators.pattern('\\+255[6-7][1-9][0-9]{7}$')]
+                    : [];
+                group[field.key] = field.required
+                    ? new UntypedFormControl({ value, disabled: field.disabled }, {
+                        validators: [
+                            Validators.required,
+                            ...minValidators,
+                            ...maxValidators,
+                            ...phoneNumberValidator,
+                        ],
+                        updateOn: 'change',
+                    })
+                    : new UntypedFormControl({ value, disabled: field.disabled }, {
+                        validators: [
+                            ...minValidators,
+                            ...maxValidators,
+                            ...phoneNumberValidator,
+                        ],
+                    });
+                if (field.referenceKey) {
+                    const value = dataEntities
+                        ? dataEntities[field.referenceKey] || ''
+                        : '';
+                    group[field.referenceKey] = field.required
+                        ? new UntypedFormControl({ value, disabled: field.disabled }, {
+                            validators: [
+                                Validators.required,
+                                ...minValidators,
+                                ...maxValidators,
+                                ...phoneNumberValidator,
+                            ],
+                            updateOn: 'change',
+                        })
+                        : new UntypedFormControl({ value, disabled: field.disabled }, {
+                            validators: [
+                                ...minValidators,
+                                ...maxValidators,
+                                ...phoneNumberValidator,
+                            ],
+                        });
+                }
+            }
+        });
+        return new UntypedFormGroup(group);
+    }
+    static getFieldValue(field, dataEntities) {
+        const fieldValue = dataEntities
+            ? dataEntities[field.id] || dataEntities[field.key] || ''
+            : '';
+        return isArray(fieldValue) ? JSON.stringify(fieldValue) : fieldValue;
+    }
+    static getFormFields(fields) {
+        return (fields || []).map((field) => {
+            const options = FieldUtil.getFieldDropdownOptions(field);
+            const dependentField = find(fields, ['id', field.fieldOptionsDependsOn]);
+            const label = field.formName || field.name || field.displayName;
+            return new FormField({
+                id: field.id,
+                label,
+                code: field.code,
+                key: camelCase(field.code) || field.id,
+                referenceKey: field.referenceKey,
+                required: field.mandatory && !field.generated,
+                displayInList: field.displayInList,
+                type: FieldUtil.getFieldType(field.valueType),
+                controlType: FieldUtil.getFieldControlType(field.valueType, options?.length > 0 || field.hasOptions),
+                options,
+                isDataElement: field.isDataElement,
+                isAttribute: field.isAttribute,
+                isOrgUnit: field.isOrgUnit,
+                isEnrollmentDate: field.isEnrollmentDate,
+                programStage: field.stageId,
+                event: field.event,
+                trackedEntityInstance: field.trackedEntityInstance,
+                disabled: field.disabled || field.generated,
+                dependentField: dependentField,
+                min: field.min,
+                max: field.max,
+                maxLength: field.maxLength,
+            });
+        });
+    }
+    static createField(id, label, required, controlType, disabled, placeholder, options) {
+        return new FormField({
+            id,
+            code: id,
+            key: id,
+            label,
+            required,
+            controlType,
+            type: 'text',
+            options: options ?? [],
+            disabled: disabled ?? false,
+            placeholder: placeholder,
+        });
+    }
+}
+
+class FormValueUtil {
+    static getFormDataEntities(formValueEntities) {
+        const formValueKeys = Object.keys(formValueEntities);
+        return formValueKeys.reduce((entity, key) => {
+            const formValue = formValueEntities[key];
+            const formRawValues = formValue.form.getRawValue() || {};
+            const dataValueEntities = Object.keys(formRawValues).reduce((valueObject, key) => {
+                const field = formValue.fields.find((field) => field.id === key);
+                if (!field) {
+                    return valueObject;
+                }
+                return {
+                    ...valueObject,
+                    [key]: {
+                        ...field,
+                        value: formRawValues[key],
+                        attribute: field?.isAttribute ? field.id : undefined,
+                        dataElement: field?.isDataElement ? field.id : undefined,
+                    },
+                };
+            }, {});
+            return { ...entity, ...dataValueEntities };
+        }, {});
+    }
+}
+
+class TranslationUtil {
+    static getTranslatedFormName(field, locale = 'sw') {
+        const translation = (field['translations'] || []).find((translation) => translation['locale'] == locale && translation['property'] == 'NAME');
+        return (translation ? translation['value'] : field['formName'] || field['name']);
+    }
+}
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class FormFieldGroup {
+    constructor(params) {
+        this.params = params;
+    }
+    get fields() {
+        const fields = this.params.formFieldGroup?.fields || [];
+        return fields
+            .map((field) => {
+            if (field instanceof FormField) {
+                return field;
+            }
+            const fieldMetaData = this.params.fieldMetaData.find((attribute) => attribute['id'] === field.id);
+            if (!fieldMetaData) {
+                return null;
+            }
+            const dependentField = find(fields, [
+                'id',
+                field?.fieldOptionsDependsOn,
+            ]);
+            const options = FieldDropdown.getDropdownOptions(fieldMetaData, this.params.locale);
+            const hasOptions = (options?.length > 0 ||
+                dependentField !== undefined ||
+                fieldMetaData['hasOptions']);
+            return new FormField({
+                ...(fieldMetaData || {}),
+                ...field,
+                id: field.id,
+                code: fieldMetaData['code'],
+                label: (fieldMetaData['formName'] ?? field['label']),
+                key: camelCase(fieldMetaData['code']) || field.id,
+                required: (fieldMetaData['mandatory'] ??
+                    fieldMetaData['required']),
+                type: FieldUtil.getFieldType(fieldMetaData['valueType']),
+                dependentField,
+                options,
+                disabled: field.disabled ?? fieldMetaData['disabled'],
+                min: field.min ?? fieldMetaData['min'],
+                max: field.max ?? fieldMetaData['max'],
+                order: field.order ??
+                    (fieldMetaData['order'] ?? fieldMetaData['sortOrder']),
+                hidden: field.hidden ?? fieldMetaData['hidden'],
+                fieldOptionsDependsOn: field.fieldOptionsDependsOn,
+                hasOptions,
+                controlType: FieldUtil.getFieldControlType(fieldMetaData['valueType'], hasOptions),
+                metaType: fieldMetaData['metaType'],
+                stepId: fieldMetaData['stepId'],
+            });
+        })
+            .filter((field) => field);
+    }
+    toJson() {
+        return {
+            id: this.params.formFieldGroup?.id,
+            name: TranslationUtil.getTranslatedFormName(this.params.formFieldGroup, this.params.locale),
+            isFormHorizontal: this.params.formFieldGroup?.isFormHorizontal,
+            repeatDependentField: this.params.formFieldGroup?.repeatDependentField,
+            dataKey: this.params.formFieldGroup?.dataKey,
+            repeatableStage: this.params.formFieldGroup?.repeatableStage,
+            fields: this.fields,
+        };
+    }
+}
+
+class MetadataRuleAction {
+    constructor(ruleAction) {
+        this.ruleAction = ruleAction;
+    }
+    get field() {
+        return (this.ruleAction.dataElement?.id ||
+            this.ruleAction.trackedEntityAttribute?.id);
+    }
+    get actionType() {
+        return this.ruleAction.programRuleActionType;
+    }
+    toJson() {
+        return {
+            field: this.field,
+            actionType: this.actionType,
+        };
+    }
+}
+class MetadataRule {
+    constructor(rule, ruleVariables) {
+        this.rule = rule;
+        this.ruleVariables = ruleVariables;
+    }
+    get actions() {
+        return (this.rule?.programRuleActions || []).map((action) => new MetadataRuleAction(action));
+    }
+    get condition() {
+        const regex = /(A|#)\{([^}]+)\}/g;
+        return this.rule?.condition?.replace(regex, (match, _, ruleVariable) => {
+            const ruleVariableObject = this.ruleVariables?.find((variable) => variable.name === ruleVariable);
+            const code = camelCase(ruleVariableObject?.dataElement?.code) ||
+                ruleVariableObject?.dataElement?.id ||
+                camelCase(ruleVariableObject?.trackedEntityAttribute?.code) ||
+                ruleVariableObject?.trackedEntityAttribute?.id;
+            return `{${code}}`;
+        });
+    }
+    toJson() {
+        return {
+            actions: this.actions.map((action) => action.toJson()),
+            condition: this.condition,
+        };
+    }
+}
+
+class FormMetadataSection {
+    constructor(params) {
+        this.params = params;
+    }
+    get attributes() {
+        return (this.params.program['programTrackedEntityAttributes'] || []).map((programTrackedEntityAttribute) => {
+            return {
+                ...programTrackedEntityAttribute['trackedEntityAttribute'],
+                formName: (programTrackedEntityAttribute['trackedEntityAttribute'] || {})['name'],
+                sortOrder: programTrackedEntityAttribute['sortOrder'],
+                mandatory: programTrackedEntityAttribute['mandatory'],
+                metaType: 'ATTRIBUTE',
+            };
+        });
+    }
+    get dataElements() {
+        return flatten((this.params.program['programStages'] ||
+            []).map((programStage) => {
+            return (programStage['programStageDataElements'] || []).map((stageDataElement) => {
+                return {
+                    ...(stageDataElement['dataElement'] ||
+                        {}),
+                    mandatory: stageDataElement['compulsory'],
+                    stepId: programStage['id'],
+                    metaType: 'DATA_ELEMENT',
+                };
+            });
+        }));
+    }
+    get fieldGroups() {
+        return (this.params.section.fieldGroups || []).map((formFieldGroup) => {
+            return new FormFieldGroup({
+                formFieldGroup,
+                fieldMetaData: [...this.attributes, ...this.dataElements],
+                locale: this.params.locale,
+            }).toJson();
+        });
+    }
+    toJson() {
+        return {
+            id: this.params.section?.id,
+            name: this.params.section?.name,
+            fieldGroups: this.fieldGroups,
+        };
+    }
+}
+
+class FormMetaData {
+    constructor(params) {
+        this.params = params;
+    }
+    get sections() {
+        const customSections = this.params.customFormMetaData?.sections;
+        if (!customSections) {
+            return this.#getSectionFromPrograms(this.params.programs);
+        }
+        return (this.params.customFormMetaData?.sections || [])
+            .map((section) => {
+            const program = this.params.programs.find((program) => section.program === program['id']);
+            if (!program) {
+                return null;
+            }
+            return new FormMetadataSection({
+                section,
+                program,
+                locale: this.params.locale,
+            }).toJson();
+        })
+            .filter((section) => section !== null);
+    }
+    get fields() {
+        return flatten(flatten(this.sections.map((section) => section.fieldGroups.map((fieldGroup) => fieldGroup.fields || []))));
+    }
+    get rules() {
+        let ruleVariables = [];
+        return [
+            ...(this.params.customFormMetaData?.rules || []),
+            ...(flatten(this.params.programs.map((program) => {
+                ruleVariables = [
+                    ...ruleVariables,
+                    ...program.programRuleVariables,
+                ];
+                return program.programRules;
+            })) || []).map((rule) => new MetadataRule(rule, ruleVariables).toJson()),
+        ];
+    }
+    #getSectionFromPrograms(programs) {
+        const sections = flatten(programs.map((program) => {
+            return [
+                this.#getReportingDetailsSection(program),
+                new FormMetadataSection({
+                    section: {
+                        id: 'registration',
+                        name: 'Registration',
+                        fieldGroups: (program.programSections || []).length > 0
+                            ? program.programSections.map((programSection) => {
+                                return {
+                                    id: programSection.id,
+                                    name: programSection.name,
+                                    sortOrder: programSection.sortOrder,
+                                    fields: programSection.trackedEntityAttributes,
+                                };
+                            })
+                            : [
+                                {
+                                    id: 'registration',
+                                    name: '',
+                                    sortOrder: 1,
+                                    fields: (program.programTrackedEntityAttributes || []).map((programTrackedEntityAttribute) => {
+                                        return {
+                                            id: programTrackedEntityAttribute
+                                                .trackedEntityAttribute?.id,
+                                        };
+                                    }),
+                                },
+                            ],
+                    },
+                    program,
+                    locale: this.params.locale,
+                }).toJson(),
+                ...(program.programStages || []).map((programStage) => {
+                    return new FormMetadataSection({
+                        section: {
+                            id: programStage.id,
+                            name: programStage.name,
+                            fieldGroups: (programStage.programStageSections || []).length > 0
+                                ? programStage.programStageSections.map((programStageSection) => {
+                                    return {
+                                        id: programStageSection.id,
+                                        name: programStageSection.name,
+                                        dataKey: camelCase(programStage.code),
+                                        repeatableStage: programStage.repeatable
+                                            ? programStage.id
+                                            : undefined,
+                                        sortOrder: programStageSection.sortOrder,
+                                        fields: programStageSection.dataElements,
+                                    };
+                                })
+                                : [
+                                    {
+                                        id: programStage.id,
+                                        dataKey: camelCase(programStage.code),
+                                        repeatableStage: programStage.repeatable
+                                            ? programStage.id
+                                            : undefined,
+                                        fields: (programStage.programStageDataElements || []).map((programStageDataElement) => {
+                                            return {
+                                                id: programStageDataElement.dataElement?.id,
+                                            };
+                                        }),
+                                    },
+                                ],
+                        },
+                        program,
+                        locale: this.params.locale,
+                    }).toJson();
+                }),
+            ];
+        }));
+        if (sections.length === 0) {
+            return [];
+        }
+        return sections;
+    }
+    #getReportingDetailsSection(program) {
+        return new FormMetadataSection({
+            section: {
+                id: 'reporting_details',
+                name: 'Reporting details',
+                fieldGroups: [
+                    {
+                        id: 'reporting_details',
+                        sortOrder: 1,
+                        isFormHorizontal: true,
+                        fields: [
+                            new FormField({
+                                id: 'orgUnit',
+                                key: 'orgUnit',
+                                label: 'Organisation unit',
+                                code: 'orgUnit',
+                                required: true,
+                                controlType: 'org-unit',
+                            }),
+                            new DateField({
+                                id: 'enrollmentDate',
+                                label: program.enrollmentDateLabel || 'Enrollment date',
+                                code: 'enrollmentDate',
+                                key: 'enrollmentDate',
+                                required: true,
+                            }),
+                            program.displayIncidentDate
+                                ? new DateField({
+                                    id: 'incidentDate',
+                                    label: program.incidentDateLabel || 'Incident date',
+                                    code: 'incidentDate',
+                                    key: 'incidentDate',
+                                    required: true,
+                                })
+                                : null,
+                        ].filter((field) => field),
+                    },
+                ],
+            },
+            program,
+            locale: this.params.locale,
+        }).toJson();
+    }
+    toJson() {
+        return {
+            id: this.params.customFormMetaData?.id,
+            name: TranslationUtil.getTranslatedFormName(this.params.customFormMetaData || {}, this.params.locale),
+            fields: this.fields,
+            sections: this.sections,
+            rules: this.rules,
+        };
+    }
+}
+
+class FormValue {
+    constructor(form, fields, changedField) {
+        this.form = form;
+        this.fields = fields;
+        this.changedField = changedField;
+    }
+    get isValid() {
+        return this.form.valid;
+    }
+    clear() {
+        this.form.reset();
+    }
+    getValues(options) {
+        const newValues = {};
+        const formValues = this.form?.getRawValue();
+        if (options?.valueOnly) {
+            return formValues;
+        }
+        Object.keys(formValues).forEach((key) => {
+            const field = find(this.fields, ['key', key]);
+            if (field) {
+                newValues[key] = {
+                    ...field,
+                    value: formValues[key],
+                };
+            }
+        });
+        return newValues;
+    }
+}
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+// Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class BaseFormFieldComponent extends ReactWrapperModule {
+    constructor() {
+        super(...arguments);
+        this.ngZone = inject(NgZone);
+        this.httpClient = inject(NgxDhis2HttpClientService);
+        this.fieldType = 'textbox';
+        this.field = input.required();
+        this.fieldConfig = input(new FieldConfig());
+        this.form = model.required();
+        this.isValid = input();
+        this.uploadedFiles = [];
+        this.value = model();
+        this.value$ = toObservable(this.value);
+        this.FieldOrgUnitSelector = (props) => {
+            const { onSelectOrgUnit, onCancelOrgUnit } = props;
+            const [selected, setSelected] = useState([]);
+            const [rootOrgUnits, setRootOrgUnits] = useState();
+            const [config, setConfig] = useState();
+            useEffect(() => {
+                zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
+                    next: ([appConfig, rootOrgUnits]) => {
+                        setConfig(appConfig);
+                        setRootOrgUnits(rootOrgUnits);
+                    },
+                    error: (error) => console.error(error),
+                });
+            }, []);
+            return config ? (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(Modal$1, { position: "middle", large: true },
+                React__default.createElement(ModalTitle$1, null, "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 }));
+        };
+        this.showOrgUnitTree = signal(false);
+        this.orgUnitSelectionConfig = {
+            hideGroupSelect: true,
+            hideLevelSelect: true,
+            hideUserOrgUnits: true,
+            allowSingleSelection: true,
+            usageType: 'DATA_ENTRY',
+        };
+        this.selectedOrgUnit = signal(null);
+        this.selectedOrgUnit$ = toObservable(this.selectedOrgUnit);
+        this.label = computed(() => {
+            return !this.fieldConfig()?.hideLabel ? this.field().label : undefined;
+        });
+        this.placeholder = computed(() => {
+            return (this.field()?.placeholder || `Enter ${this.field()?.label || 'value'}`);
+        });
+        this.InputField = this.#getInputField();
+        this.update = new EventEmitter();
+        this.immediateUpdate = new EventEmitter();
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = this.InputField;
+        this.render();
+    }
+    ngOnChanges(changes) {
+        if (!(changes['field'] || {})?.firstChange) {
+            this.InputField = this.#getInputField();
+            this.component = this.#getInputField();
+            this.render();
+        }
+    }
+    #getInputField() {
+        return () => {
+            const [value, setValue] = useState(this.form().get(this.field().id)?.value ||
+                this.form().get(this.field().key)?.value);
+            const [displayValue, setDisplayValue] = useState(null);
+            const [selected, setSelected] = useState();
+            const [touched, setTouched] = useState(false);
+            const [showOrgUnit, setShowOrgUnit] = useState(false);
+            const onChange = (payload) => setSelected(payload.selected);
+            const hasError = useMemo(() => {
+                return (touched &&
+                    (this.form().get(this.field().id) ||
+                        this.form().get(this.field().key))?.invalid);
+            }, [value, touched]);
+            const validationError = useMemo(() => {
+                if (!touched) {
+                    return undefined;
+                }
+                const field = this.field();
+                const error = (this.form().get(field.id) || this.form().get(field.key))
+                    ?.errors;
+                if (!error) {
+                    return undefined;
+                }
+                if (error['min']) {
+                    return `${this.label() || 'Value'} should not be less than ${error['min'].min}!`;
+                }
+                else if (error['max']) {
+                    return `${this.label() || 'Value'} should not be greater than ${error['max'].max}!`;
+                }
+                else if (error['pattern']) {
+                    if (field.type === 'email') {
+                        return `The email address provided is not valid`;
+                    }
+                    else if (field.type === 'tel') {
+                        return 'Phone number provided is not valid';
+                    }
+                    else {
+                        return `${this.label() || 'Value'} should have appropriate format`;
+                    }
+                }
+                return error['required']
+                    ? `${this.label() || 'Value'} is required`
+                    : undefined;
+            }, [hasError]);
+            switch (this.field().controlType) {
+                case 'textarea':
+                    return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, onChange: (event) => {
+                            this.ngZone.run(() => {
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(event.value);
+                                this.immediateUpdate.emit({
+                                    form: this.form(),
+                                    value: event.value,
+                                });
+                            });
+                            setValue(event.value);
+                            setTouched(true);
+                        }, onBlur: () => {
+                            this.ngZone.run(() => {
+                                this.update.emit({ form: this.form(), value });
+                            });
+                        } }));
+                case 'org-unit':
+                    return (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, prefixIcon: React__default.createElement(IconDimensionOrgUnit16, null), required: this.field().required, name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: displayValue, readOnly: false, onFocus: () => {
+                                setShowOrgUnit(true);
+                            }, onBlur: () => {
+                                this.ngZone.run(() => {
+                                    this.update.emit({ form: this.form(), value });
+                                });
+                                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);
+                                    setValue(selectedOrgUnit.id);
+                                    setShowOrgUnit(false);
+                                    setTouched(true);
+                                    this.ngZone.run(() => {
+                                        (this.form().get(this.field().id) ||
+                                            this.form().get(this.field().key))?.setValue(selectedOrgUnit.id);
+                                        this.immediateUpdate.emit({
+                                            form: this.form(),
+                                            value: selectedOrgUnit.id,
+                                        });
+                                    });
+                                }
+                            } }))));
+                case 'transfer':
+                    return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: selected, leftHeader: React__default.createElement("div", { style: {
+                                fontSize: 14,
+                                padding: '8px 4px',
+                            } }, this.field().availableOptionsLabel), rightHeader: React__default.createElement("div", { style: {
+                                fontSize: 14,
+                                padding: '8px 4px',
+                            } }, this.field().selectedOptionsLabel), options: this.field().options, onChange: (event) => {
+                            onChange({ selected: event.selected });
+                            this.ngZone.run(() => {
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(event.selected);
+                            });
+                            setValue(event.selected);
+                            setTouched(true);
+                            this.update.emit({ form: this.form(), value });
+                        } }));
+                case 'checkbox':
+                    return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, onChange: (event) => {
+                            this.ngZone.run(() => {
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(event.checked);
+                            });
+                            setValue(event.checked);
+                            setTouched(true);
+                        }, onBlur: () => {
+                            this.ngZone.run(() => {
+                                this.update.emit({ form: this.form(), value });
+                            });
+                        } }));
+                case 'dropdown':
+                    return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, className: "select", label: this.label(), selected: value, onChange: (event) => {
+                            this.ngZone.run(() => {
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(event.selected);
+                                this.update.emit({
+                                    form: this.form(),
+                                    value: event.selected,
+                                });
+                            });
+                            setValue(event.selected);
+                            setTouched(true);
+                        } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: option.key, label: option.label, value: option.value })))));
+                case 'file':
+                    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: this.label(), name: this.field().id, files: this.uploadedFiles, onChange: (event) => {
+                            this.uploadedFiles.push((event?.files || [])[0]);
+                            this.ngZone.run(() => {
+                                this.form().get(this.field().id) ||
+                                    this.form()
+                                        .get(this.field().key)
+                                        ?.setValue((event?.files || [])[0]);
+                                this.update.emit({
+                                    form: this.form(),
+                                    value: (event?.files || [])[0],
+                                });
+                            });
+                            setValue((event?.files || [])[0]);
+                            setTouched(true);
+                        } }, this.uploadedFiles.map((file, index) => (React__default.createElement(FileListItem, { key: index, cancelText: "Cancel", label: file.name, onCancel: () => { }, onRemove: () => {
+                            this.ngZone.run(() => {
+                                this.uploadedFiles.splice(index, 1);
+                                setValue(this.uploadedFiles);
+                                setTouched(true);
+                            });
+                        }, removeText: "Remove" })))));
+                default:
+                    return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: this.field().disabled, onChange: (event) => {
+                            this.ngZone.run(() => {
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(event.value);
+                                this.immediateUpdate.emit({
+                                    form: this.form(),
+                                    value: event.value,
+                                });
+                            });
+                            setValue(event.value);
+                            setTouched(true);
+                        }, onBlur: () => {
+                            this.ngZone.run(() => {
+                                this.update.emit({ form: this.form(), value });
+                            });
+                        } }));
+            }
+        };
+    }
+    onChange(event) {
+        this.value.set(event);
+    }
+    onSelectOrgUnit(selectedOrgUnits) {
+        this.showOrgUnitTree.set(false);
+        if ((selectedOrgUnits || [])[0]) {
+            this.selectedOrgUnit.set(selectedOrgUnits[0]);
+        }
+    }
+    onCancelOrgUnit() {
+        this.showOrgUnitTree.set(false);
+    }
+    getAppConfig() {
+        return this.httpClient.systemInfo().pipe(map((response) => {
+            const systemInfo = response;
+            return {
+                baseUrl: (document?.location?.host?.includes('localhost')
+                    ? `${document.location.protocol}//${document.location.host}`
+                    : systemInfo['contextPath']),
+                apiVersion: Number(((systemInfo['version'] || '')?.split('.') || [])[1]),
+            };
+        }));
+    }
+    getOrgUnitAttributeByUsage(usageType) {
+        switch (usageType) {
+            case 'DATA_ENTRY':
+                return 'organisationUnits';
+            case 'DATA_VIEW':
+                return 'dataViewOrganisationUnits';
+            default:
+                return 'organisationUnits';
+        }
+    }
+    getRootOrgUnits() {
+        const orgUnitAttribute = this.getOrgUnitAttributeByUsage(this.orgUnitSelectionConfig.usageType);
+        return this.httpClient
+            .me()
+            .pipe(map((user) => (user ? user[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id)));
+    }
+    getOrgUnitGroups() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitGroups.json?fields=id,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitGroups'])));
+    }
+    getOrgUnitLevels() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitLevels'])));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseFormFieldComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { update: [{
+                type: Output
+            }], immediateUpdate: [{
+                type: Output
+            }] } });
+
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-dhis2-ui-form-field-item',
+                    template: `<ng-content></ng-content>`,
+                    standalone: false,
+                }]
+        }] });
+
+class FormFieldComponent {
+    constructor() {
+        this.field = input.required();
+        this.maxDate = new Date();
+        this.color = 'primary';
+        this.fieldUpdate = new EventEmitter();
+        this.immediateFieldUpdate = new EventEmitter();
+        this.runtimeOptionChange = new EventEmitter();
+        this.value = signal('');
+        this._runtimeOptions = [];
+        this.runtimeOptions = [];
+        this.fieldFilterControl = new FormControl();
+        this._onDestroy = new Subject();
+    }
+    ngOnChanges(changes) {
+        if (changes && changes['dataEntities'] && this.field()?.dependentField) {
+            if (this._runtimeOptions?.length === 0) {
+                const parentOption = find(this.field()?.dependentField?.optionSet?.options, ['code', (this.form?.value || {})[this.field()?.dependentField?.id]]);
+                this.runtimeOptions = parentOption?.options || [];
+                this.runtimeOptionChange.emit({
+                    field: this.field(),
+                    options: this.runtimeOptions,
+                });
+            }
+            else {
+                this.runtimeOptions = this._runtimeOptions;
+            }
+        }
+    }
+    ngOnInit() {
+        this.value.set(this.form?.get(this.field()?.id)?.value);
+        this.fieldFilterControl.valueChanges
+            .pipe(takeUntil(this._onDestroy))
+            .subscribe(() => {
+            this.optionSearchTerm = this.fieldFilterControl.value;
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    get isValid() {
+        return this.form?.controls[this.field().id]?.valid;
+    }
+    get fieldError() {
+        const error = this.form?.controls[this.field()?.id]?.errors;
+        if (!error) {
+            return undefined;
+        }
+        if (error['min']) {
+            return `${this.field().label} should not be less than ${error['min'].min}!`;
+        }
+        else if (error['max']) {
+            return `${this.field().label} should not be greater than ${error['max'].max}!`;
+        }
+        else if (error['pattern']) {
+            if (this.field().type === 'email') {
+                return `The email address provided is not valid`;
+            }
+            else if (this.field().type === 'tel') {
+                return 'Phone number provided is not valid';
+            }
+            else {
+                return `${this.field().label} should have appropriate format`;
+            }
+        }
+        return error['required'] ? `${this.field()?.label} is required` : undefined;
+    }
+    get minErrorText() {
+        const minError = this.form?.controls[this.field()?.id]?.errors?.['min'];
+        return minError ? `${this.field()?.label} is min` : undefined;
+    }
+    get maxErrorText() {
+        const maxError = this.form?.controls[this.field()?.id]?.errors?.['max'];
+        return maxError ? `${this.field()?.label} is required` : undefined;
+    }
+    get isInvalid() {
+        return (this.form?.controls[this.field().id]?.invalid &&
+            !this.form?.controls[this.field().id].pristine);
+    }
+    get isDate() {
+        return this.field().controlType === 'date';
+    }
+    get isDateTime() {
+        return this.field().controlType === 'date-time';
+    }
+    get isBoolean() {
+        return this.field().controlType === 'boolean';
+    }
+    get isCheckbox() {
+        return this.field()?.controlType === 'checkbox';
+    }
+    get isCommonField() {
+        return !this.isCheckbox && !this.isDate && !this.isDateTime;
+    }
+    get fieldId() {
+        return this.field()?.id;
+    }
+    onValueChange() {
+        this.fieldUpdate.emit(this.form);
+    }
+    onImmediateChange(event) {
+        this.immediateFieldUpdate.emit({ value: event?.value || '' });
+    }
+    onFieldUpdate(e, isDate, isDateTime) {
+        if (e && e.value) {
+            const dateValue = new Date(e.value);
+            if (isDate) {
+                const dateValue = new Date(e.value);
+                const formattedDate = moment(e.value).format('YYYY-MM-DD');
+                let dateTimeString = formattedDate;
+                if (isDateTime) {
+                    const hours = dateValue.getHours() < 10
+                        ? '0' + dateValue.getHours()
+                        : dateValue.getHours();
+                    const minutes = dateValue.getMinutes() < 10
+                        ? '0' + dateValue.getMinutes()
+                        : dateValue.getMinutes();
+                    const seconds = dateValue.getSeconds() < 10
+                        ? '0' + dateValue.getSeconds()
+                        : dateValue.getSeconds();
+                    const timeValue = `${hours}:${minutes}:${seconds}`;
+                    dateTimeString = `${formattedDate}T${timeValue}`;
+                }
+                const formControl = this.form.get(this.field().key);
+                if (formControl) {
+                    formControl.setValue(dateTimeString);
+                }
+            }
+            else {
+                const formControl = this.form.get(this.field().key);
+                if (formControl) {
+                    formControl.setValue(e.value);
+                }
+            }
+        }
+        this.fieldUpdate.emit(this.form);
+    }
+    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: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldConfig]=\"fieldConfig\"\n    [(form)]=\"form\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
+        }], propDecorators: { fieldConfig: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], isCheckBoxButton: [{
+                type: Input
+            }], fieldClass: [{
+                type: Input
+            }], programRuleActions: [{
+                type: Input
+            }], dataEntities: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], fieldUpdate: [{
+                type: Output
+            }], immediateFieldUpdate: [{
+                type: Output
+            }], runtimeOptionChange: [{
+                type: Output
+            }] } });
+
+class FormComponent {
+    constructor() {
+        this.formConfig = input();
+        this.configuration = computed(() => {
+            if (!this.formConfig()) {
+                return new FormConfig({
+                    direction: this.isFormHorizontal ? 'horizontal' : 'vertical',
+                });
+            }
+            return this.formConfig();
+        });
+        this.formUpdate = new EventEmitter();
+    }
+    get sanitizedFields() {
+        return (this.fields || []).filter((field) => {
+            if (field.hidden) {
+                return false;
+            }
+            const type = field.isDataElement
+                ? 'dataElement'
+                : 'trackedEntityAttribute';
+            const elementItem = field[type] || field;
+            if (!elementItem) {
+                return true;
+            }
+            const availableRule = head((this.programRuleActions || []).filter((ruleAction) => {
+                const fieldId = ruleAction.field || ruleAction[type]?.id;
+                return (fieldId === elementItem.id &&
+                    (ruleAction.programRuleActionType === 'HIDEFIELD' ||
+                        ruleAction.actionType === 'HIDEFIELD'));
+            }));
+            if (!availableRule) {
+                return true;
+            }
+            const actionType = availableRule?.programRuleActionType || availableRule?.actionType;
+            return actionType !== 'HIDEFIELD';
+        });
+    }
+    get layoutCssClass() {
+        if (!this.isFormHorizontal) {
+            return 'col-12';
+        }
+        const numberOfFields = this.sanitizedFields.length;
+        if (numberOfFields === 2) {
+            return 'col-sm-6';
+        }
+        if (numberOfFields === 1) {
+            return 'col-12';
+        }
+        return 'col-sm-4';
+    }
+    onUpdateFields(programRuleActions) {
+        this.fields = (this.fields || []).filter((field) => {
+            const type = field.isDataElement
+                ? 'dataElement'
+                : 'trackedEntityAttribute';
+            const elementItem = field[type] || field;
+            if (!elementItem) {
+                return true;
+            }
+            const availableRule = head((programRuleActions || []).filter((rule) => {
+                return (rule[type] &&
+                    rule[type].id === elementItem.id &&
+                    rule.programRuleActionType === 'HIDEFIELD');
+            }));
+            if (!availableRule) {
+                return true;
+            }
+            return (availableRule && availableRule.programRuleActionType !== 'HIDEFIELD');
+        });
+    }
+    ngOnChanges() {
+        this.values = this.form.getRawValue();
+    }
+    onSubmit() {
+        this.formUpdate.emit(this.form.getRawValue());
+    }
+    onFieldUpdate(form, field) {
+        if (!this.showSaveButton && form) {
+            this.formUpdate.emit(new FormValue(this.form, this.fields, field));
+            this.values = form.getRawValue();
+        }
+    }
+    onClear() {
+        this.form.reset();
+    }
+    isFormInValid() {
+        return this.form.invalid;
+    }
+    onRunTimeOptionUpdate(result) {
+        if (this.fieldComponents) {
+            const fieldToUpdate = this.fieldComponents.find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
+            const parentOption = result?.options.find((option) => option.code === this.form?.value[result?.field?.id]);
+            fieldToUpdate?.onUpdateRuntimeOptions(parentOption?.options || []);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: false, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: false, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: false, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: false, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form\"\n      [fieldClass]=\"fieldClass\"\n      [dataEntities]=\"dataEntities\"\n      [programRuleActions]=\"programRuleActions\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<form [formGroup]=\"form\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form\"\n      [fieldClass]=\"fieldClass\"\n      [dataEntities]=\"dataEntities\"\n      [programRuleActions]=\"programRuleActions\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], isFormHorizontal: [{
+                type: Input
+            }], showSaveButton: [{
+                type: Input
+            }], fieldsData: [{
+                type: Input
+            }], fieldClass: [{
+                type: Input
+            }], shouldRenderAsCheckBoxesButton: [{
+                type: Input
+            }], programRuleActions: [{
+                type: Input
+            }], dataEntities: [{
+                type: Input
+            }], formUpdate: [{
+                type: Output
+            }], fieldComponents: [{
+                type: ViewChildren,
+                args: [FormFieldComponent]
+            }] } });
+
+class RepeatableFormComponent {
+    #eventFormValue$;
+    #showForm$;
+    #events$;
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.fieldGroup = input.required();
+        this.events = model();
+        this.dataEntities = input.required();
+        this.repeatableEvents = [];
+        this.repeatableData = {};
+        this.repeatableStageUpdate = new EventEmitter();
+        this.eventFormValue = signal(null);
+        this.showForm = signal(false);
+        this.eventIndex = signal(0);
+        this.#eventFormValue$ = toObservable(this.eventFormValue);
+        this.#showForm$ = toObservable(this.showForm);
+        this.#events$ = toObservable(this.events);
+    }
+    get isValid() {
+        return !Object.keys(this.repeatableData).some((index) => {
+            const formValue = this.repeatableData[index];
+            return !formValue?.isValid;
+        });
+    }
+    ngOnInit() {
+        this.eventForm = FormUtil.getFormGroup(this.fieldGroup().fields, {});
+        this.eventFormValue.set(new FormValue(this.eventForm, this.fieldGroup().fields));
+        this.repeatableEvents = (this.events() || []).map((event, index) => {
+            const fieldControls = (this.fieldGroup().fields || []).reduce((fieldObject, field) => {
+                const value = (event.dataValueEntities || {})[field.key] || '';
+                return {
+                    ...fieldObject,
+                    [field.key]: new FormControl(value, field.required ? [Validators.required] : []),
+                };
+            }, {});
+            const form = new FormGroup(fieldControls);
+            this.repeatableData[index] = new FormValue(form, this.fieldGroup().fields || []);
+            return { ...event, form };
+        });
+        this.repeatableStageUpdate.emit(this.repeatableData);
+    }
+    onFormUpdate(formValue) {
+        this.eventFormValue.set(formValue);
+        this.repeatableData = {
+            ...this.repeatableData,
+            [this.eventIndex()]: formValue,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { events: "eventsChange", repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-repeatable-form', standalone: false, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formObject: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], numberOfRows: [{
+                type: Input
+            }], programRuleActions: [{
+                type: Input
+            }], program: [{
+                type: Input
+            }], programStage: [{
+                type: Input
+            }], repeatDependentField: [{
+                type: Input
+            }], repeatableStageUpdate: [{
+                type: Output
+            }] } });
+
+class SectionFormComponent {
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.loading = input();
+        this.formMetaData = input.required();
+        this.dataValueEntities = input.required();
+        this.formGroups = {};
+        this.formValueEntity = {};
+        this.repeatableFormValueEntity = {};
+        this.ruleActions = [];
+        this.save = new EventEmitter();
+        this.formUpdate = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.inValid = signal(true);
+        this.inValid$ = toObservable(this.inValid);
+    }
+    ngOnInit() {
+        if (this.formMetaData().sections) {
+            (this.formMetaData().sections || []).forEach((formSection) => {
+                (formSection.fieldGroups || []).forEach((fieldGroup) => {
+                    const formGroup = FormUtil.getFormGroup(fieldGroup.fields, this.dataValueEntities());
+                    const formValue = new FormValue(formGroup, fieldGroup.fields);
+                    this.formGroups[fieldGroup.id] = formGroup;
+                    if (!fieldGroup.repeatableStage) {
+                        this.formValueEntity[fieldGroup.id] = formValue;
+                    }
+                    else {
+                        this.repeatableFormValueEntity[fieldGroup.dataKey || fieldGroup.id] = {
+                            0: formValue,
+                        };
+                    }
+                });
+            });
+            this.inValid.set(this.checkIfInValid());
+            this.ruleActions = new ProgramRuleEngine()
+                .setRules(this.formMetaData().rules)
+                .setDataValues(this.#getDataValue())
+                .execute();
+        }
+    }
+    onUpdateRepeatableStage(repeatableData, fieldGroup) {
+        if (!isEmpty(repeatableData)) {
+            this.repeatableFormValueEntity[fieldGroup.dataKey || fieldGroup.id] =
+                repeatableData;
+            this.inValid.set(this.checkIfInValid());
+            const dataValues = this.#getDataValue();
+            this.formUpdate.emit(dataValues);
+        }
+    }
+    onFormUpdate(formValue, fieldGroupId) {
+        this.formValueEntity[fieldGroupId] = formValue;
+        this.inValid.set(this.checkIfInValid());
+        const dataValues = this.#getDataValue();
+        this.ruleActions = new ProgramRuleEngine()
+            .setRules(this.formMetaData().rules)
+            .setDataValues(dataValues)
+            .execute();
+        this.formUpdate.emit(dataValues);
+    }
+    onSubmit() {
+        const dataValues = this.#getDataValue();
+        this.save.emit(dataValues);
+    }
+    onCancel(event) {
+        event?.stopPropagation();
+        this.cancel.emit();
+    }
+    #getDataValue() {
+        const dataValues = Object.keys(this.formValueEntity).reduce((valueObject, key) => {
+            const values = this.formValueEntity[key]?.form?.getRawValue();
+            return { ...valueObject, ...(values || {}) };
+        }, {});
+        const repeatableValues = Object.keys(this.repeatableFormValueEntity).reduce((repeatableObject, key) => {
+            const formValueEntity = this.repeatableFormValueEntity[key];
+            const values = Object.keys(formValueEntity)
+                .map((valueIndex) => {
+                return (formValueEntity[+valueIndex] || {}).form?.getRawValue();
+            })
+                .filter((value) => value);
+            return { ...repeatableObject, [key]: values };
+        }, {});
+        return { ...dataValues, ...repeatableValues };
+    }
+    checkIfInValid() {
+        const valueValidity = Object.keys(this.formValueEntity)
+            .map((key) => {
+            return (this.formValueEntity[key] || {}).isValid;
+        })
+            .some((validity) => !validity);
+        const repeatableDataValidity = Object.keys(this.repeatableFormValueEntity)
+            .map((key) => {
+            return Object.keys(this.repeatableFormValueEntity[key]).some((valueIndex) => {
+                return ((this.repeatableFormValueEntity[key] || {})[+valueIndex] || {}).isValid;
+            });
+        })
+            .some((validity) => !validity);
+        return valueValidity || repeatableDataValidity;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["eventsChange", "repeatableStageUpdate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SectionFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-section-form', standalone: false, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { save: [{
+                type: Output
+            }], formUpdate: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+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,
+            FormComponent,
+            RepeatableFormComponent,
+            SectionFormComponent,
+            FormFieldItemComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            ReactWrapperModule,
+            OrganisationUnitSelectorModule], exports: [FormFieldComponent,
+            FormComponent,
+            RepeatableFormComponent,
+            SectionFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            OrganisationUnitSelectorModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: D2FormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FormFieldComponent,
+                        FormComponent,
+                        RepeatableFormComponent,
+                        SectionFormComponent,
+                        FormFieldItemComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        ReactWrapperModule,
+                        OrganisationUnitSelectorModule,
+                    ],
+                    exports: [
+                        FormFieldComponent,
+                        FormComponent,
+                        RepeatableFormComponent,
+                        SectionFormComponent,
+                    ],
+                }]
+        }] });
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+class TrackerFormComponent {
+    constructor() {
+        this.program = input.required();
+        this.d2 = window.d2Web;
+    }
+    async ngOnInit() {
+        this.trackerQuery = this.d2.trackerModule.trackedEntity.setProgram(this.program());
+        const program = await this.trackerQuery.getMetaData();
+        if (program) {
+            this.formMetaData = new FormMetaData({
+                programs: [program],
+            }).toJson();
+        }
+    }
+    onSave(event) { }
+    onCancel() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: TrackerFormComponent, isStandalone: false, selector: "ng-dhis2-ui-tracker-form", inputs: { program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"{}\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n", dependencies: [{ kind: "component", type: SectionFormComponent, selector: "ng-dhis2-ui-section-form", inputs: ["loading", "formMetaData", "dataValueEntities"], outputs: ["save", "formUpdate", "cancel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-tracker-form', standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n  [formMetaData]=\"formMetaData\"\n  [dataValueEntities]=\"{}\"\n  (save)=\"onSave($event)\"\n  (cancel)=\"onCancel()\"\n/>\n}\n" }]
+        }] });
+
+class TrackerFormModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, declarations: [TrackerFormComponent], imports: [CommonModule, D2FormModule], exports: [TrackerFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, imports: [CommonModule, D2FormModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TrackerFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, D2FormModule],
+                    declarations: [TrackerFormComponent],
+                    exports: [TrackerFormComponent],
+                }]
+        }] });
+
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule };
+export { Boolean$1 as Boolean, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DateField, DateRangeValue, Dropdown, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, TrackerFormComponent, TrackerFormModule, TranslationUtil };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map