@iapps/ng-dhis2-ui 1.0.9 → 1.1.1

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, 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 { switchMap, map as map$1 } 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 { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, range } from 'lodash';
+import cx from 'classnames';
+import { map as map$1, switchMap } from 'rxjs/operators';
+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 {
@@ -1151,9 +1028,6 @@ class ReactWrapperComponent {
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
         this.render();
     }
-    ngOnChanges() {
-        // if (this.elementRef) this.render();
-    }
     ngOnDestroy() {
         this.reactDomRoot?.unmount();
     }
@@ -1173,10 +1047,10 @@ 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 }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ReactWrapperComponent, isStandalone: false, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
 }
-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: ReactWrapperComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-dhis2-ui-wrapper',
@@ -1192,11 +1066,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }] } });
 
 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, declarations: [ReactWrapperComponent], imports: [CommonModule], exports: [ReactWrapperComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ReactWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -1225,10 +1099,10 @@ 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',
@@ -1238,11 +1112,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }], 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],
@@ -1282,10 +1156,10 @@ 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',
@@ -1311,11 +1185,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],
@@ -1540,38 +1414,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;
     }
 `;
 
@@ -1579,6 +1453,136 @@ var styles$1 = `
 // 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;
+        }
+
+        .chip:hover {
+          background: ${colors$1.grey300};
+        }
+
+        .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.
@@ -2071,7 +2075,7 @@ const FixedPeriodFilter = ({ allowedPeriodTypes, excludedPeriodTypes, currentPer
         }
         .rightSection {
           width: 120px;
-          margin-left: ${spacers.dp8};
+          margin-left: ${spacers$1.dp8};
         }
       `)));
 };
@@ -2100,7 +2104,7 @@ const RelativePeriodFilter = ({ currentFilter, onSelectFilter, dataTest, exclude
       }
       .rightSection {
         width: 120px;
-        margin-left: ${spacers.dp8};
+        margin-left: ${spacers$1.dp8};
       }
     `)));
 RelativePeriodFilter.propTypes = {
@@ -2303,10 +2307,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: [{
@@ -2363,10 +2367,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: [{
@@ -2376,11 +2380,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],
@@ -2472,20 +2476,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 {
@@ -2499,7 +2503,7 @@ const styles = `
     .summaryWrapper {
         display: inline-flex;
         align-items: center;
-        margin-top: ${spacers.dp8};
+        margin-top: ${spacers$1.dp8};
     }
 
     .warningWrapper {
@@ -2508,21 +2512,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};
     }
 `;
 
@@ -2537,7 +2541,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)) {
@@ -2706,7 +2709,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')))),
@@ -2818,10 +2821,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',
@@ -2920,10 +2923,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: [{
@@ -2939,13 +2942,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],
@@ -2964,34 +2967,97 @@ 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.
 
+// export function buildFilters(filters: AttributeFilter[]): string {
+//   return filters
+//     .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
+//     .join('&');
+// }
 function buildFilters(filters) {
     return filters
-        .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
+        .map(({ attribute, dataElement, operator, value }) => {
+        // Check if attribute is defined, otherwise use dataElement
+        const field = attribute || dataElement;
+        return field ? `filter=${field}:${operator}:${value}` : '';
+    })
+        .filter(Boolean) // Remove any empty strings
         .join('&');
 }
-
-class LineListService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-    }
+const matchesCondition = (eventValue, operator, filterValue) => {
+    if (typeof eventValue === 'number' && typeof filterValue === 'number') {
+        switch (operator) {
+            case '=':
+                return eventValue === filterValue;
+            case '!=':
+                return eventValue !== filterValue;
+            case '>':
+                return eventValue > filterValue;
+            case '<':
+                return eventValue < filterValue;
+            case '>=':
+                return eventValue >= filterValue;
+            case '<=':
+                return eventValue <= filterValue;
+            default:
+                return false;
+        }
+    }
+    const strEventValue = String(eventValue);
+    const strFilterValue = String(filterValue);
+    switch (operator) {
+        case '=':
+            return strEventValue === strFilterValue;
+        case '!=':
+            return strEventValue !== strFilterValue;
+        case 'contains':
+            return strEventValue.includes(strFilterValue);
+        case 'startsWith':
+            return strEventValue.startsWith(strFilterValue);
+        case 'endsWith':
+            return strEventValue.endsWith(strFilterValue);
+        case 'regex':
+            return new RegExp(strFilterValue).test(strEventValue);
+        default:
+            return false;
+    }
+};
+const getFilteredTrackedEntityInstances = (trackedEntityInstance, filters) => {
+    return trackedEntityInstance.filter((trackedEntityInstance) => trackedEntityInstance.enrollments.some((enrollment) => enrollment.events.some((event) => filters.every((filter) => event.programStage === filter.programStage &&
+        event.dataValues.some((dataValue) => dataValue.dataElement === filter.dataElement &&
+            matchesCondition(dataValue.value, filter.operator, filter.value))))));
+};
+
+class LineListService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
     getProgramMetadata(programId) {
         return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name]`);
     }
     getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
         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}`);
+        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) => {
+            response.trackedEntityInstances.forEach((tei) => {
+                // Filter attributes to only include those with displayInList=true
+                tei.attributes = tei.attributes.filter((attr) => attr.displayInList);
+            });
+            return response;
+        }));
     }
-    getEvents(programId, orgUnit, page, pageSize) {
-        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=event,programStage,dataValues[dataElement,value]&totalPages=true`);
+    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+        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}`);
     }
-    getEventsByProgramStage(programStageId, orgUnit, page, pageSize) {
-        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=event,dataValues[dataElement,value]&totalPages=true`);
+    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+        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}`);
     }
     getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate) {
         return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
             if (programStageId) {
-                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize).pipe(map$1((events) => ({
+                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
                     metadata: programMetadata,
                     data: events,
                 })));
@@ -3003,17 +3069,17 @@ class LineListService {
                 })));
             }
             else {
-                return this.getEvents(programId, orgUnit, page, pageSize).pipe(map$1((events) => ({
+                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate).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 }] });
 
@@ -3091,11 +3157,11 @@ const ContextMenu = (params) => {
     const [CurrentModal, setCurrentModal] = useCurrentModal();
     const styles = useDynamicStyles(dropdownStyles);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Layer$1, { onBackdropClick: onClose, className: styles.layer },
+        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();
+                        onMenuClick(dropDownOption);
+                        onClose();
                     }, dense: true })))))),
         CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
                 onClose();
@@ -3107,7 +3173,7 @@ const DropdownMenu = (props) => {
     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) }),
+        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);
             } }))));
@@ -3138,8 +3204,12 @@ const getProgramStageData = (response, programStageId, pager) => {
     });
     return { columns: entityColumns, data: dataElementsData };
 };
-const getTrackedEntityData = (response, programId, pager) => {
-    const teis = response.data.trackedEntityInstances;
+const getTrackedEntityData = (response, programId, pager, filters) => {
+    let teis = response.data
+        .trackedEntityInstances;
+    if (filters) {
+        teis = getFilteredTrackedEntityInstances(teis, filters);
+    }
     const allAttributes = new Set();
     teis.forEach((tei) => {
         const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
@@ -3207,9 +3277,15 @@ const addActionsColumn = (columns, actionOptions) => {
     ];
 };
 
+// src/app/line-list-table.component.ts
 class LineListTableComponent extends ReactWrapperComponent {
     constructor() {
         super(...arguments);
+        this.actionSelected = new EventEmitter();
+        this.reactStateUpdaters = null;
+        this.setReactStateUpdaters = (updaters) => {
+            this.reactStateUpdaters = updaters;
+        };
         this.lineListService = inject(LineListService);
         this.LineList = () => {
             const [columns, setColumns] = useState([]);
@@ -3221,20 +3297,40 @@ class LineListTableComponent extends ReactWrapperComponent {
                 pageCount: 1,
             });
             const paginationRef = useRef(null);
+            const [programIdState, setProgramIdState] = useState(this.programId);
+            const [orgUnitState, setOrgUnitState] = useState(this.orgUnit);
+            const [programStageIdState, setProgramStageIdState] = useState(this.programStageId);
+            const [attributeFiltersState, setAttributeFiltersState] = useState(this.attributeFilters);
+            const [startDateState, setStartDateState] = useState(this.startDate);
+            const [endDateState, setEndDateState] = useState(this.endDate);
+            const [loading, setLoading] = useState(false);
+            // Store updaters in refs for Angular to access
+            const updateRefs = useRef({
+                setProgramIdState,
+                setOrgUnitState,
+                setProgramStageIdState,
+                setAttributeFiltersState,
+                setStartDateState,
+                setEndDateState,
+            });
             useEffect(() => {
-                setTimeout(() => {
-                    const paginationContainer = document.querySelector('[data-test="dhis2-uiwidgets-pagination"]');
-                    if (paginationContainer) {
-                        paginationContainer.style.setProperty('display', 'flex', 'important');
-                        paginationContainer.style.setProperty('flex-direction', 'row', 'important');
-                        paginationContainer.style.setProperty('justify-content', 'space-between', 'important');
-                        paginationContainer.style.setProperty('align-items', 'center', 'important');
-                    }
-                }, 1000);
-                if (paginationRef.current) {
-                    paginationRef.current.style.setProperty('display', 'flex', 'important');
-                    paginationRef.current.style.setProperty('flex-direction', 'row', 'important');
+                this.setReactStateUpdaters?.(updateRefs.current);
+            }, []);
+            useEffect(() => {
+                if (!loading) {
+                    setTimeout(() => {
+                        const paginationContainer = document.querySelector('[data-test="dhis2-uiwidgets-pagination"]');
+                        if (paginationContainer) {
+                            paginationContainer.style.display = 'flex';
+                            paginationContainer.style.flexDirection = 'row';
+                            paginationContainer.style.justifyContent = 'space-between';
+                            paginationContainer.style.alignItems = 'center';
+                        }
+                    }, 500); // Short delay to ensure styles apply after data renders
                 }
+            }, [loading]);
+            useEffect(() => {
+                setLoading(true);
                 this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate)
                     .subscribe((response) => {
@@ -3250,7 +3346,7 @@ class LineListTableComponent extends ReactWrapperComponent {
                     else if ('trackedEntityInstances' in response.data) {
                         responsePager = response.data
                             .pager;
-                        const { columns, data } = getTrackedEntityData(response, this.programId, pager);
+                        const { columns, data } = getTrackedEntityData(response, this.programId, pager, this.filters);
                         entityColumns = columns;
                         entityData = data;
                     }
@@ -3261,27 +3357,41 @@ class LineListTableComponent extends ReactWrapperComponent {
                         entityData = data;
                     }
                     const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
-                    setColumns(finalColumns);
-                    setData(entityData);
-                    setPager(responsePager);
+                    setLoading(false);
+                    console.log('hey');
+                    setColumns(...[finalColumns]);
+                    setData(...[entityData]);
+                    setPager(...[responsePager]);
+                    console.log('columns', columns);
+                    console.log('data', data);
                 });
-            }, [pager.page, pager.pageSize]);
-            console.log('columns', columns);
-            console.log('data', data);
+            }, [
+                programIdState,
+                orgUnitState,
+                programStageIdState,
+                attributeFiltersState,
+                startDateState,
+                endDateState,
+                pager.page,
+                pager.pageSize,
+            ]);
             const getDropdownOptions = (row) => {
                 return (this.actionOptions || []).map((option) => ({
                     ...option,
-                    onClick: () => option.onClick?.(row),
+                    onClick: () => {
+                        option.onClick?.(row);
+                        this.actionSelected.emit({ action: option.label, row });
+                    },
                 }));
             };
-            return (React__default.createElement("div", null,
-                React__default.createElement(DataTable, null,
+            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 },
+                            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);
@@ -3290,9 +3400,31 @@ class LineListTableComponent extends ReactWrapperComponent {
                                                 page: 1,
                                                 pageSize: newPageSize,
                                             }));
-                                        }, pageSizes: ['5', '10', '20', '50'] }))))))));
+                                        }, pageSizes: ['5', '10', '20', '50'] })))))))));
         };
     }
+    ngOnChanges(changes) {
+        if (this.reactStateUpdaters) {
+            if (changes['programId']) {
+                this.reactStateUpdaters.setProgramIdState(this.programId);
+            }
+            if (changes['orgUnit']) {
+                this.reactStateUpdaters.setOrgUnitState(this.orgUnit);
+            }
+            if (changes['programStageId']) {
+                this.reactStateUpdaters.setProgramStageIdState(this.programStageId);
+            }
+            if (changes['attributeFilters']) {
+                this.reactStateUpdaters.setAttributeFiltersState(this.attributeFilters);
+            }
+            if (changes['startDate']) {
+                this.reactStateUpdaters.setStartDateState(this.startDate);
+            }
+            if (changes['endDate']) {
+                this.reactStateUpdaters.setEndDateState(this.endDate);
+            }
+        }
+    }
     async ngAfterViewInit() {
         if (!this.elementRef)
             throw new Error('No element ref');
@@ -3300,12 +3432,12 @@ 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" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
 }
-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 }]
+            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: [{
                 type: Input
             }], orgUnit: [{
@@ -3320,14 +3452,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 type: Input
             }], endDate: [{
                 type: Input
+            }], filters: [{
+                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],
@@ -3337,9 +3473,1528 @@ 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 };
+        }, {});
+    }
+}
+
+// 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) => {
+            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: this.params.formFieldGroup?.name,
+            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() {
+        return (this.params.formMetaData.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.formMetaData.rules || []),
+            ...(flatten(this.params.programs.map((program) => {
+                ruleVariables = [
+                    ...ruleVariables,
+                    ...program.programRuleVariables,
+                ];
+                return program.programRules;
+            })) || []).map((rule) => new MetadataRule(rule, ruleVariables).toJson()),
+        ];
+    }
+    toJson() {
+        return {
+            id: this.params.formMetaData?.id,
+            name: this.params.formMetaData?.name,
+            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() {
+        const newValues = {};
+        const formValues = this.form?.getRawValue();
+        Object.keys(formValues).forEach((key) => {
+            const field = find(this.fields, ['key', key]);
+            if (field) {
+                newValues[key] = {
+                    id: field.id,
+                    value: formValues[key],
+                    options: field.options,
+                };
+            }
+        });
+        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 ReactWrapperComponent {
+    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 {
+    constructor() {
+        this.fieldGroup = input.required();
+        this.dataEntities = input.required();
+        this.repeatableEvents = [];
+        this.repeatableData = {};
+        this.repeatableStageUpdate = new EventEmitter();
+    }
+    get isValid() {
+        return !Object.keys(this.repeatableData).some((index) => {
+            const formValue = this.repeatableData[index];
+            return !formValue?.isValid;
+        });
+    }
+    ngOnInit() {
+        this.repeatableEvents = (this.events?.length > 0
+            ? this.events
+            : range(this.numberOfRows).map(() => ({}))).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, eventIndex) {
+        this.repeatableData = { ...this.repeatableData, [eventIndex]: formValue };
+        if (this.isValid) {
+            this.repeatableStageUpdate.emit(this.repeatableData);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div>\n  <div\n    *ngFor=\"let repeatableEvent of repeatableEvents; let i = index\"\n    class=\"card p-3 mb-2\"\n  >\n    <div class=\"font-weight-bold h6\">{{ fieldGroup().name }}: #{{ i + 1 }}</div>\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"repeatableEvent.form\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"repeatableEvent\"\n      [isFormHorizontal]=\"true\"\n      (formUpdate)=\"onFormUpdate($event, i)\"\n    />\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RepeatableFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-repeatable-form', standalone: false, template: "<div>\n  <div\n    *ngFor=\"let repeatableEvent of repeatableEvents; let i = index\"\n    class=\"card p-3 mb-2\"\n  >\n    <div class=\"font-weight-bold h6\">{{ fieldGroup().name }}: #{{ i + 1 }}</div>\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"repeatableEvent.form\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"repeatableEvent\"\n      [isFormHorizontal]=\"true\"\n      (formUpdate)=\"onFormUpdate($event, i)\"\n    />\n  </div>\n</div>\n" }]
+        }], propDecorators: { formObject: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], numberOfRows: [{
+                type: Input
+            }], programRuleActions: [{
+                type: Input
+            }], events: [{
+                type: Input
+            }], program: [{
+                type: Input
+            }], programStage: [{
+                type: Input
+            }], repeatDependentField: [{
+                type: Input
+            }], repeatableStageUpdate: [{
+                type: Output
+            }] } });
+
+class SectionFormComponent {
+    constructor() {
+        this.loading = input();
+        this.isLabResulst = false;
+        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();
+    }
+    get inValid() {
+        const valueValidity = Object.keys(this.formValueEntity)
+            .map((key) => {
+            return (this.formValueEntity[key] || {}).isValid;
+        })
+            .some((validity) => !validity);
+        const repeatableDataValidity = Object.keys(this.repeatableFormValueEntity)
+            .map((key) => {
+            return Object.keys(this.repeatableFormValueEntity[key]).some((valueIndex) => {
+                return ((this.repeatableFormValueEntity[key] || {})[+valueIndex] || {}).isValid;
+            });
+        })
+            .some((validity) => !validity);
+        return valueValidity && repeatableDataValidity;
+    }
+    ngOnInit() {
+        if (this.formMetaData().sections) {
+            (this.formMetaData().sections || []).forEach((formSection) => {
+                (formSection.fieldGroups || []).forEach((fieldGroup) => {
+                    const formGroup = FormUtil.getFormGroup(fieldGroup.fields, this.dataValueEntities());
+                    // Set bookingId as default value for `travelerReferenceId` after search refLabNum
+                    const refLabNum = formGroup.get('refLabNum');
+                    const travelerReferenceIdControl = formGroup.get('travelerReferenceId');
+                    if (travelerReferenceIdControl) {
+                        const defaultValue = this.clientId ? this.clientId : '';
+                        travelerReferenceIdControl.setValue(defaultValue);
+                    }
+                    else if (refLabNum) {
+                        const defaultValue = this.labNumber ? this.labNumber : '';
+                        refLabNum.setValue(defaultValue);
+                    }
+                    const formValue = new FormValue(formGroup, fieldGroup.fields);
+                    this.formValueEntity[fieldGroup.id] = formValue;
+                    this.formGroups[fieldGroup.id] = formGroup;
+                });
+            });
+            this.ruleActions = new ProgramRuleEngine()
+                .setRules(this.formMetaData().rules)
+                .setDataValues(this.#getDataValue())
+                .execute();
+        }
+    }
+    onUpdateRepeatableStage(repeatableData, fieldGroup) {
+        this.repeatableFormValueEntity[fieldGroup.dataKey || fieldGroup.id] =
+            repeatableData;
+        const dataValues = this.#getDataValue();
+        this.formUpdate.emit(dataValues);
+    }
+    onFormUpdate(formValue, fieldGroupId) {
+        this.formValueEntity[fieldGroupId] = formValue;
+        const dataValues = this.#getDataValue();
+        this.ruleActions = new ProgramRuleEngine()
+            .setRules(this.formMetaData().rules)
+            .setDataValues(dataValues)
+            .execute();
+        this.formUpdate.emit(dataValues);
+    }
+    onSubmit(event) {
+        event.stopPropagation();
+        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 };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isLab: { classPropertyName: "isLab", publicName: "isLab", isSignal: false, isRequired: false, transformFunction: null }, isLabResulst: { classPropertyName: "isLabResulst", publicName: "isLabResulst", isSignal: false, isRequired: false, transformFunction: null }, clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: false, isRequired: false, transformFunction: null }, labNumber: { classPropertyName: "labNumber", publicName: "labNumber", isSignal: false, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"pt-3 pb-3 font-weight-bold text-left\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"p-2\">\n      <ng-container *ngIf=\"formSection\">\n        <div class=\"row\" *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"col-12\"\n            >\n              <div class=\"pt-2 pb-3 font-weight-bold text-left\">\n                {{ fieldGroup?.name }}\n              </div>\n            </div>\n            <div class=\"col-12\" *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                />\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                  /></ng-container>\n                </ng-container>\n                } @else { Normal event form }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"flex gap-2 m-2\">\n    <button mat-stroked-button (click)=\"onCancel($event)\">\n      {{ 'cancel' }}\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"!isLab || isLabResulst\"\n    >\n      <div *ngIf=\"isloading\" class=\"p-1\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n      <span *ngIf=\"!loading()\">{{ 'submit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Add sample' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Exit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities"], outputs: ["formUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["repeatableStageUpdate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SectionFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-section-form', standalone: false, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"pt-3 pb-3 font-weight-bold text-left\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"p-2\">\n      <ng-container *ngIf=\"formSection\">\n        <div class=\"row\" *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"col-12\"\n            >\n              <div class=\"pt-2 pb-3 font-weight-bold text-left\">\n                {{ fieldGroup?.name }}\n              </div>\n            </div>\n            <div class=\"col-12\" *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                />\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                  /></ng-container>\n                </ng-container>\n                } @else { Normal event form }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"flex gap-2 m-2\">\n    <button mat-stroked-button (click)=\"onCancel($event)\">\n      {{ 'cancel' }}\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"!isLab || isLabResulst\"\n    >\n      <div *ngIf=\"isloading\" class=\"p-1\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n      <span *ngIf=\"!loading()\">{{ 'submit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Add sample' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      [disabled]=\"inValid\"\n      (click)=\"onSubmit($event)\"\n      *ngIf=\"isLab && !isLabResulst\"\n    >\n      <span *ngIf=\"!loading()\">{{ 'Save & Exit' }}</span>\n      <div class=\"p-1\" *ngIf=\"loading()\">\n        <!-- <mat-spinner diameter=\"30\" strokeWidth=\"2\"></mat-spinner> -->\n      </div>\n    </button>\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { isLab: [{
+                type: Input
+            }], isLabResulst: [{
+                type: Input
+            }], clientId: [{
+                type: Input
+            }], labNumber: [{
+                type: Input
+            }], save: [{
+                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, 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, 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.
+
 /**
  * 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, ReactWrapperComponent, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map