@iapps/ng-dhis2-ui 1.2.105 → 1.2.112

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

@@ -1,13 +1,13 @@
-import * as i1$1 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, ContentChild, Input, Directive, Component, EventEmitter, Output, inject, NgZone, input, ChangeDetectionStrategy, Injectable, model, computed, signal, effect, ViewChildren } from '@angular/core';
+import { NgModule, ContentChild, Input, Directive, inject, ElementRef, Component, EventEmitter, Output, NgZone, input, ChangeDetectionStrategy, Injectable, model, computed, signal, effect, ViewChildren } from '@angular/core';
 import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider, useDataEngine, Provider } from '@dhis2/app-runtime';
-import * as i1 from '@iapps/ngx-dhis2-http-client';
 import * as React from 'react';
 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, filter, take, Subject, takeUntil } from 'rxjs';
+import { from, map, catchError, of, zip, firstValueFrom, filter, take, Subject, takeUntil } from 'rxjs';
+import parse from 'html-react-parser';
 import i18n from '@dhis2/d2-i18n';
 import { colors, theme, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
@@ -23,7 +23,6 @@ import { Divider } from '@dhis2-ui/divider';
 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, IconDimensionOrgUnit16, IconClock16, IconDimensionData16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { isObject, isString, debounce, sortBy, isArray, find, camelCase, flatten, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
@@ -51,6 +50,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 }]
         }] });
 
+window.React = React;
+class ReactWrapperModule {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.render();
+    }
+    ngOnDestroy() {
+        this.reactDomRoot?.unmount();
+    }
+    render() {
+        if (!this.component) {
+            console.warn('React component must be supplied');
+        }
+        else {
+            if (!this.reactDomRoot)
+                return;
+            const jsxContent = this.content?.nativeElement?.outerHTML
+                ? parse(this.content?.nativeElement?.outerHTML)
+                : undefined;
+            this.reactDomRoot.render(React.createElement(this.component, this.props, jsxContent || ''));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReactWrapperModule, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ReactWrapperModule, isStandalone: true, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReactWrapperModule, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-dhis2-ui-wrapper',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { props: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], content: [{
+                type: ContentChild,
+                args: ['ngDhis2UiContent']
+            }] } });
+
 // 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.
@@ -86,15 +129,15 @@ class HeaderBarNotification {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 class HeaderBarData {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
+    constructor(httpInstance) {
+        this.httpInstance = httpInstance;
     }
     getApps() {
-        return this.httpClient
-            .get('dhis-web-commons/menu/getModules.action', {
+        return from(this.httpInstance.get('dhis-web-commons/menu/getModules.action', {
             useRootUrl: true,
-        })
-            .pipe(catchError(() => of({
+        })).pipe(map((result) => result.data || {
+            modules: [],
+        }), catchError(() => of({
             modules: [],
         })), map((result) => {
             return (result?.modules || [])
@@ -103,12 +146,12 @@ class HeaderBarData {
         }));
     }
     getNotifications() {
-        return this.httpClient
-            .get('me/dashboard')
-            .pipe(map((notifications) => notifications ? new HeaderBarNotification(notifications) : null));
+        return from(this.httpInstance.get('me/dashboard')).pipe(map((notificationResponse) => notificationResponse?.data
+            ? new HeaderBarNotification(notificationResponse?.data)
+            : null));
     }
     get() {
-        return zip(this.getApps(), this.httpClient.get('systemSettings/helpPageLink'), this.httpClient.get('me/dashboard'), this.httpClient.get('systemSettings/applicationTitle'), this.httpClient.get('me.json?fields=authorities,avatar,email,name,settings')).pipe(map((response) => {
+        return zip(this.getApps(), from(this.httpInstance.get('systemSettings/helpPageLink')).pipe(map((response) => response?.data)), from(this.httpInstance.get('me/dashboard')).pipe(map((response) => response?.data)), from(this.httpInstance.get('systemSettings/applicationTitle')).pipe(map((response) => response?.data)), from(this.httpInstance.get('me.json?fields=authorities,avatar,email,name,settings')).pipe(map((response) => response?.data))).pipe(map((response) => {
             if (response) {
                 const [apps, help, notifications, title, user] = response;
                 this.apps = apps;
@@ -1017,73 +1060,31 @@ HeaderBar.propTypes = {
     onApplyAvailableUpdate: PropTypes.func,
 };
 
-window.React = React;
-class ReactWrapperModule {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngAfterViewInit() {
-        if (!this.elementRef)
-            throw new Error('No element ref');
-        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
-        this.render();
-    }
-    ngOnDestroy() {
-        this.reactDomRoot?.unmount();
-    }
-    render() {
-        if (!this.component) {
-            console.warn('React component must be supplied');
-        }
-        else {
-            if (!this.reactDomRoot)
-                return;
-            const jsxContent = this.content?.nativeElement?.outerHTML
-                ? parse(this.content?.nativeElement?.outerHTML)
-                : undefined;
-            this.reactDomRoot.render(React.createElement(this.component, this.props, jsxContent || ''));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReactWrapperModule, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ReactWrapperModule, isStandalone: true, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReactWrapperModule, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-dhis2-ui-wrapper',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { props: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }], content: [{
-                type: ContentChild,
-                args: ['ngDhis2UiContent']
-            }] } });
-
 class HeaderBarComponent extends ReactWrapperModule {
-    constructor(elementRef, httpClient) {
-        super(elementRef);
-        this.httpClient = httpClient;
+    constructor() {
+        super(inject((ElementRef)));
     }
     async ngAfterViewInit() {
-        if (!this.elementRef)
-            throw new Error('No element ref');
-        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
-        const manifest = await firstValueFrom(this.httpClient.manifest());
-        const data = await firstValueFrom(new HeaderBarData(this.httpClient).get());
-        this.component = data
-            ? () => {
-                const headerBarElement = React__default.createElement(HeaderBar, {
-                    appName: manifest?.name,
-                    data: data,
-                });
-                return React__default.createElement(DataProvider, null, headerBarElement);
-            }
-            : () => React__default.createElement('div', null, 'Something went wrong');
-        this.render();
+        const d2 = window?.d2Web;
+        if (d2) {
+            if (!this.elementRef)
+                throw new Error('No element ref');
+            this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+            const manifest = d2.appManifest;
+            const data = await firstValueFrom(new HeaderBarData(d2.httpInstance).get());
+            this.component = data
+                ? () => {
+                    const headerBarElement = React__default.createElement(HeaderBar, {
+                        appName: manifest?.name,
+                        data: data,
+                    });
+                    return React__default.createElement(DataProvider, null, headerBarElement);
+                }
+                : () => React__default.createElement('div', null, 'Something went wrong');
+            this.render();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: HeaderBarComponent, isStandalone: false, selector: "ng-dhis2-ui-header-bar", usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarComponent, decorators: [{
@@ -1093,7 +1094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                     template: `<ng-container></ng-container>`,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }] });
+        }], ctorParameters: () => [] });
 
 class HeaderBarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: HeaderBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4088,10 +4089,10 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
     }))
         .filter((col) => searcheableDataElements.includes(col.key)));
     const dataElementColumns = metaData
-        .programStages.sort((a, b) => a.sortOrder - b.sortOrder) // Sorts stages by sortOrder
+        .programStages.sort((a, b) => a.sortOrder - b.sortOrder)
         .flatMap((stage) => stage
         .programStageDataElements.filter((psde) => psde.displayInReports)
-        .sort((a, b) => a.sortOrder - b.sortOrder) // Sorts data elements within stage
+        .sort((a, b) => a.sortOrder - b.sortOrder)
         .map((psde) => ({
         label: psde.dataElement.name || psde.dataElement.formName || 'default',
         key: psde.dataElement.id,
@@ -4120,94 +4121,204 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
         options: attr.optionSet ?? undefined,
         type: 'attribute',
     }));
-    const tableData = teis.map((tei, idx) => {
+    const getOptionColor = (option) => option?.color || option?.style?.color;
+    const formatDate = (value) => {
+        try {
+            return format(parse$1(value, 'yyyy-MM-dd', new Date()), 'dd/MM/yyyy');
+        }
+        catch {
+            return value;
+        }
+    };
+    const trackedEntityAttributeMap = new Map();
+    (metaData.programTrackedEntityAttributes || []).forEach(({ trackedEntityAttribute }) => {
+        if (trackedEntityAttribute?.id) {
+            trackedEntityAttributeMap.set(trackedEntityAttribute.id, trackedEntityAttribute);
+        }
+    });
+    const dataElementOptionMap = new Map();
+    dataElementOptions.forEach((deo) => {
+        if (deo.id) {
+            dataElementOptionMap.set(deo.id, deo);
+        }
+    });
+    const tableData = teis.map((tei, index) => {
         const row = {
             trackedEntityInstance: { value: tei.trackedEntity },
-            index: { value: (pager.page - 1) * pager.pageSize + idx + 1 },
+            index: { value: (pager.page - 1) * pager.pageSize + index + 1 },
         };
-        const matchingEnrollment = tei.latestEnrollment;
-        let attributesData = matchingEnrollment.attributes;
-        const dataElementsData = matchingEnrollment.events.flatMap((event) => event.dataValues);
-        attributesData = attributesData.map((attr) => {
-            if (attr?.valueType?.toLowerCase() === 'date') {
-                try {
-                    return {
-                        ...attr,
-                        value: format(parse$1(attr.value, 'yyyy-MM-dd', new Date()), 'dd/MM/yyyy'),
-                    };
-                }
-                catch {
-                    return { ...attr };
-                }
+        const enrollment = tei.latestEnrollment;
+        if (!enrollment)
+            return row;
+        const attributes = (enrollment.attributes || []).map((attr) => {
+            if (attr?.valueType?.toLowerCase() === 'date' &&
+                typeof attr.value === 'string') {
+                return { ...attr, value: formatDate(attr.value) };
             }
             return attr;
         });
-        // attributesData.forEach((attr: any) => {
-        //   const attributeMeta = metaData.programTrackedEntityAttributes?.find(
-        //     (metadata) => metadata.trackedEntityAttribute.id === attr.attribute
-        //   );
-        //   if (attributeMeta?.trackedEntityAttribute.optionSetValue) {
-        //     const optionSet = attributeMeta?.trackedEntityAttribute?.optionSet;
-        //     const option = optionSet?.options?.find(
-        //       (option) => option.code === attr.value
-        //     );
-        //     row[attr.attribute] = option
-        //       ? { value: option?.name }
-        //       : { value: attr.value };
-        //   } else {
-        //     row[attr.attribute] = { value: attr.value };
-        //   }
-        // });
-        attributesData.forEach((attr) => {
-            const attributeMeta = metaData.programTrackedEntityAttributes?.find((metadata) => metadata.trackedEntityAttribute.id === attr.attribute);
-            const valueType = attributeMeta?.trackedEntityAttribute?.valueType;
+        attributes.forEach((attr) => {
+            const attributeId = attr?.attribute;
+            const value = attr?.value;
+            if (!attributeId || value == null)
+                return;
+            const attributeMeta = trackedEntityAttributeMap.get(attributeId);
+            const valueType = attributeMeta?.valueType;
             if (valueType === 'ORGANISATION_UNIT') {
-                const orgUnitName = orgUnitMap?.get(attr.value);
-                row[attr.attribute] = { value: orgUnitName || attr.value };
-            }
-            else if (attributeMeta?.trackedEntityAttribute.optionSetValue) {
-                const optionSet = attributeMeta?.trackedEntityAttribute?.optionSet;
-                const option = optionSet?.options?.find((option) => option.code === attr.value);
-                row[attr.attribute] = option
-                    ? { value: option?.name }
-                    : { value: attr.value };
+                const name = orgUnitMap?.get(value);
+                row[attributeId] = { value: name || value };
             }
-            else {
-                row[attr.attribute] = { value: attr.value };
-            }
-        });
-        dataElementsData.forEach((element) => {
-            // Finds the matching data element in dataElementOptions by ID
-            const dataElementOption = dataElementOptions.find((deo) => deo.id === element.dataElement);
-            // finds a matching option within that data element's options
-            const matchingOption = dataElementOption?.options?.find((opt) => opt.name === element.value);
-            // Builds the row entry with value and optional style
-            if (matchingOption) {
-                row[element.dataElement] = {
-                    value: element.value,
-                    style: matchingOption.color,
+            else if (attributeMeta?.optionSetValue &&
+                attributeMeta?.optionSet?.options) {
+                const matchedOption = attributeMeta.optionSet.options.find((opt) => opt.code === value);
+                row[attributeId] = {
+                    value: matchedOption?.name || value,
+                    ...(getOptionColor(matchedOption) && {
+                        style: getOptionColor(matchedOption),
+                    }),
                 };
             }
             else {
-                row[element.dataElement] = {
-                    value: element.value,
-                };
+                row[attributeId] = { value };
             }
         });
-        // Includes orgUnit in the row for id access with style
-        row['orgUnitId'] = { value: matchingEnrollment.orgUnit };
-        row['orgUnit'] = {
-            value: orgUnitMap?.get(matchingEnrollment.orgUnit) || '-',
+        const dataValues = enrollment.events?.flatMap((event) => event.dataValues || []) || [];
+        dataValues.forEach((dataValue) => {
+            const dataElementId = dataValue.dataElement;
+            const value = dataValue.value;
+            if (!dataElementId || value == null)
+                return;
+            const dataElementOption = dataElementOptionMap.get(dataElementId);
+            const matchedOption = dataElementOption?.options?.find((opt) => opt.name === value);
+            row[dataElementId] = {
+                value,
+                ...(getOptionColor(matchedOption) && {
+                    style: getOptionColor(matchedOption),
+                }),
+            };
+        });
+        const orgUnitId = enrollment.orgUnit;
+        const orgUnitName = orgUnitMap?.get(orgUnitId) || '-';
+        row['orgUnitId'] = { value: orgUnitId || '-' };
+        row['orgUnit'] = { value: orgUnitName };
+        const teiObject = typeof tei.toObject === 'function' ? tei.toObject() : null;
+        row['responseData'] = {
+            value: teiObject || null,
         };
-        row['responseData'] = { value: tei.toObject() };
         return row;
     });
     return {
         columns: tableColumns,
         data: tableData,
         filteredEntityColumns: [...tableFilters, ...tableSearcheableDataElements],
-        orgUnitLabel: orgUnitLabel,
+        orgUnitLabel,
     };
+    // const tableData = teis.map((tei: TrackedEntityInstance, idx: number) => {
+    //   const row: TableRow = {
+    //     trackedEntityInstance: { value: tei.trackedEntity },
+    //     index: { value: (pager.page - 1) * pager.pageSize + idx + 1 },
+    //   };
+    //   const matchingEnrollment = tei.latestEnrollment;
+    //   let attributesData = matchingEnrollment.attributes;
+    //   const dataElementsData = matchingEnrollment!.events.flatMap(
+    //     (event) => event.dataValues
+    //   );
+    //   attributesData = attributesData!.map((attr: any) => {
+    //     if (attr?.valueType?.toLowerCase() === 'date') {
+    //       try {
+    //         return {
+    //           ...attr,
+    //           value: format(
+    //             parse(attr.value, 'yyyy-MM-dd', new Date()),
+    //             'dd/MM/yyyy'
+    //           ),
+    //         };
+    //       } catch {
+    //         return { ...attr };
+    //       }
+    //     }
+    //     return attr;
+    //   });
+    //   // Tracked Entity Instance Attributes
+    //   const trackedEntityAttributeMap = new Map<string, any>();
+    //   (metaData.programTrackedEntityAttributes || []).forEach(
+    //     (programAttribute) => {
+    //       const attributeId = programAttribute.trackedEntityAttribute?.id;
+    //       if (attributeId) {
+    //         trackedEntityAttributeMap.set(
+    //           attributeId,
+    //           programAttribute.trackedEntityAttribute
+    //         );
+    //       }
+    //     }
+    //   );
+    //   attributesData.forEach((attributeItem: any) => {
+    //     const attributeId = attributeItem?.attribute;
+    //     const attributeValue = attributeItem?.value;
+    //     if (!attributeId || attributeValue == null) return;
+    //     const trackedEntityAttribute = trackedEntityAttributeMap.get(attributeId);
+    //     const valueType = trackedEntityAttribute?.valueType;
+    //     if (valueType === 'ORGANISATION_UNIT') {
+    //       const organisationUnitName = orgUnitMap?.get(attributeValue);
+    //       row[attributeId] = {
+    //         value: organisationUnitName || attributeValue,
+    //       };
+    //     } else if (
+    //       trackedEntityAttribute?.optionSetValue &&
+    //       trackedEntityAttribute?.optionSet?.options
+    //     ) {
+    //       const matchedOption = trackedEntityAttribute.optionSet.options.find(
+    //         (option: any) => option.code === attributeValue
+    //       );
+    //       const optionColor = matchedOption?.color || matchedOption?.style?.color;
+    //       row[attributeId] = {
+    //         value: matchedOption?.name || attributeValue,
+    //         ...(optionColor && { style: optionColor }),
+    //       };
+    //     } else {
+    //       row[attributeId] = {
+    //         value: attributeValue,
+    //       };
+    //     }
+    //   });
+    //   // Program Stage Data Elements
+    //   const dataElementOptionMap = new Map(
+    //     dataElementOptions.map((deo) => [deo.id, deo])
+    //   );
+    //   dataElementsData.forEach((element: DataValue) => {
+    //     if (!element?.dataElement || element.value == null) return;
+    //     const dataElementOption = dataElementOptionMap.get(element.dataElement);
+    //     const matchingOption: any = dataElementOption?.options?.find(
+    //       (opt) => opt.name === element.value
+    //     );
+    //     const optionColor = matchingOption?.color || matchingOption?.style?.color;
+    //     row[element.dataElement] = {
+    //       value: element.value,
+    //       ...(optionColor && { style: optionColor }),
+    //     };
+    //   });
+    //   const orgUnitId = matchingEnrollment?.orgUnit;
+    //   if (orgUnitId) {
+    //     row['orgUnitId'] = { value: orgUnitId };
+    //     const orgUnitName = orgUnitMap?.get(orgUnitId) || '-';
+    //     row['orgUnit'] = { value: orgUnitName };
+    //   } else {
+    //     row['orgUnitId'] = { value: '-' };
+    //     row['orgUnit'] = { value: '-' };
+    //   }
+    //   const teiObject =
+    //     typeof tei?.toObject === 'function' ? tei.toObject() : null;
+    //   row['responseData'] = {
+    //     value: (teiObject as TrackedEntityInstance) || null,
+    //   };
+    //   return row;
+    // });
+    // return {
+    //   columns: tableColumns,
+    //   data: tableData,
+    //   filteredEntityColumns: [...tableFilters, ...tableSearcheableDataElements],
+    //   orgUnitLabel: orgUnitLabel,
+    // };
 };
 const addActionsColumn = (columns, actionOptions) => {
     return [
@@ -6217,6 +6328,17 @@ class FormValue {
     }
 }
 
+var OrgUnitLevel;
+(function (OrgUnitLevel) {
+    OrgUnitLevel["FACILITY"] = "FACILITY";
+    OrgUnitLevel["HAMLET"] = "HAMLET";
+    OrgUnitLevel["STREET"] = "STREET";
+    OrgUnitLevel["WARD"] = "WARD";
+    OrgUnitLevel["COUNCIL"] = "COUNCIL";
+    OrgUnitLevel["REGION"] = "REGION";
+    OrgUnitLevel["NATIONAL"] = "NATIONAL";
+})(OrgUnitLevel || (OrgUnitLevel = {}));
+
 // 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.
@@ -6324,6 +6446,58 @@ const orgUnitFieldStyles = {
         paddingInlineStart: '4px',
     },
 };
+const FACILITY_KEYWORDS = [
+    'Hospital',
+    'Dispensary',
+    'Health Center',
+    'Clinic',
+    'Health Post',
+    'Medical Center',
+    'Polyclinic',
+];
+const LOWERCASE_FACILITY_KEYWORDS = FACILITY_KEYWORDS.map((k) => k.toLowerCase());
+const getFacilityMatch = (name, config) => {
+    if (!name)
+        return null;
+    const cleanedName = name.trim().toLowerCase();
+    if (cleanedName.length < 3)
+        return null;
+    const matchesKeyword = LOWERCASE_FACILITY_KEYWORDS.some((keyword) => cleanedName.includes(keyword));
+    if (!matchesKeyword) {
+        return null;
+    }
+    return {
+        type: config?.level ?? 'UNKNOWN',
+        confidence: config?.confidence ?? 0,
+    };
+};
+const flattenChildren = (rootUnits) => {
+    const result = [];
+    const stack = [...rootUnits];
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (!current)
+            continue;
+        result.push(current);
+        if (Array.isArray(current.children) && current.children.length > 0) {
+            stack.push(...current.children);
+        }
+    }
+    return result;
+};
+const buildReadableFullName = (unit) => {
+    const ancestors = (unit.ancestors || [])
+        .map((a) => a.displayName?.trim())
+        .filter(Boolean);
+    const currentName = (unit.displayName || unit.name || '').trim();
+    const pathParts = [];
+    for (const name of [...ancestors, currentName]) {
+        if (name && name !== pathParts[pathParts.length - 1]) {
+            pathParts.push(name);
+        }
+    }
+    return pathParts.join(' / ');
+};
 const OrgUnitFormField = (props) => {
     // const { onSelectOrgUnit, label, required, selected, disabled, key, customOrgUnitRoots } = props;
     // const d2 = (window as unknown as D2Window)?.d2Web;
@@ -6391,24 +6565,45 @@ const OrgUnitFormField = (props) => {
         if (matchList.length > 0) {
             setUseCustomRoots(true);
             setConfiguredRootsLoading(true);
-            Promise.all(matchList.map((entry) => d2.httpInstance
-                .get(`organisationUnits/${entry.orgUnit}.json?fields=id,displayName,name,code,path,level`)
-                .then((res) => {
-                const orgUnitPayload = res.data;
-                return {
-                    id: orgUnitPayload?.id,
-                    name: orgUnitPayload?.displayName || orgUnitPayload?.name,
-                    code: orgUnitPayload?.code,
-                    path: orgUnitPayload?.path,
-                    level: orgUnitPayload.level,
-                };
-            })))
-                .then((result) => {
-                setConfiguredRootInfo(result);
+            Promise.allSettled(matchList.map(async (orgUnitConfig) => {
+                try {
+                    const orgUnitResponse = await d2.httpInstance.get(`organisationUnits/${orgUnitConfig.orgUnit}.json?fields=id,displayName,name,code,path,level,ancestors[displayName],children[id,displayName,name,code,path,level,ancestors[displayName],children[id,displayName,name,code,path,level,ancestors[displayName]]]&paging=false`);
+                    const rootOrgUnitData = orgUnitResponse.data;
+                    const allDescendantOrgUnits = flattenChildren([rootOrgUnitData]);
+                    const matchingConfig = customOrgUnitRoots?.find((config) => config.orgUnit === orgUnitConfig.orgUnit);
+                    const facilityResults = allDescendantOrgUnits
+                        .map((orgUnit) => {
+                        const orgUnitName = orgUnit.displayName || orgUnit.name || '';
+                        const facilityMatch = getFacilityMatch(orgUnitName, matchingConfig);
+                        if (!facilityMatch)
+                            return null;
+                        return {
+                            id: orgUnit.id,
+                            name: buildReadableFullName(orgUnit),
+                            code: orgUnit.code,
+                            path: orgUnit.path,
+                            level: orgUnit.level,
+                            type: facilityMatch.type,
+                            confidence: facilityMatch.confidence,
+                        };
+                    })
+                        .filter((facility) => facility !== null);
+                    return facilityResults;
+                }
+                catch (fetchError) {
+                    console.warn(`[OrgUnitFormField] Failed to fetch orgUnit ${orgUnitConfig.orgUnit}:`, fetchError);
+                    return [];
+                }
+            }))
+                .then((settledResults) => {
+                const allFacilities = settledResults
+                    .filter((result) => result.status === 'fulfilled')
+                    .flatMap((result) => result.value);
+                setConfiguredRootInfo(allFacilities);
                 setConfiguredRootsLoading(false);
             })
-                .catch((err) => {
-                console.warn(`[OrgUnitFormField] Failed to fetch customOrgUnitRoots:`, err);
+                .catch((unexpectedError) => {
+                console.warn(`[OrgUnitFormField] Unexpected error:`, unexpectedError);
                 setConfiguredRootsLoading(false);
             });
         }
@@ -7038,7 +7233,7 @@ class FormFieldComponent {
         this._runtimeOptions = [...options];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig()\"\n    [(form)]=\"form\"\n    [dataId]=\"dataId()\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig()\"\n    [(form)]=\"form\"\n    [dataId]=\"dataId()\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.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: "20.1.3", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -7178,7 +7373,7 @@ class FormComponent {
         this.ruleProcessor.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <!-- form name -->\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form>\n", styles: [".form-horizontal{display:flex;flex-wrap:wrap;gap:16px;width:100%}.hidden-field{display:none}.units-and-ranges span{margin-left:1%;font-weight:600}.for-warning{margin-left:8px}.form-field-vertical{margin-bottom:8px}.form-field-horizontal{flex:1;margin-bottom:8px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -7370,7 +7565,7 @@ class SectionFormComponent {
         return valueValidity || repeatableDataValidity;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions()\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["eventsChange", "repeatableStageUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions()\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots"], outputs: ["formUpdate", "formValidityUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["eventsChange", "repeatableStageUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SectionFormComponent, decorators: [{
             type: Component,
@@ -8652,5 +8847,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Boolean$1 as Boolean, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DataTableUIComponent, DataTableUIModule, DateField, DateRangeValue, Dropdown, EventFormComponent, EventFormModule, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FlatFormComponent, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ProgramEntryFormConfig, ProgramEntryFormMetaData, ProgramEntryFormModule, ProgramEntryFormSection, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, SelectionFiltersComponent, SelectionFiltersUiModule, TrackerFormComponent, TrackerFormModule, TranslationUtil };
+export { Boolean$1 as Boolean, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DataTableUIComponent, DataTableUIModule, DateField, DateRangeValue, Dropdown, EventFormComponent, EventFormModule, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FlatFormComponent, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrgUnitLevel, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ProgramEntryFormConfig, ProgramEntryFormMetaData, ProgramEntryFormModule, ProgramEntryFormSection, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, SelectionFiltersComponent, SelectionFiltersUiModule, TrackerFormComponent, TrackerFormModule, TranslationUtil };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map