@iapps/ng-dhis2-ui 1.1.51 → 1.1.54

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

@@ -1,7 +1,7 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, Injectable, inject, NgZone, input, model, signal, computed, ViewChildren } from '@angular/core';
+import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, inject, NgZone, input, ChangeDetectionStrategy, Injectable, 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';
@@ -25,10 +25,10 @@ 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, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, Chip, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
-import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, Chip, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { isObject, isString, sortBy, isArray, find, camelCase, flatten, debounce, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
+import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 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';
@@ -1183,6 +1183,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// 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.
+
+const TRANSFER_OPTIONS_WIDTH = '420px';
+const TRANSFER_SELECTED_WIDTH = '298px';
+const TRANSFER_HEIGHT = '512px';
+
 const AssignedCategoriesIcon = () => {
     return (React__default.createElement("svg", { height: "16", viewBox: "0 0 16 16", width: "16" },
         React__default.createElement("g", { fill: "#212934", fillRule: "evenodd" },
@@ -1238,10 +1246,6 @@ const filterOutPredefinedDimensions = (dimensionIds) => dimensionIds.filter((dim
 const getPredefinedDimensionProp = (dimensionId, propName) => (getPredefinedDimensions()[dimensionId] || {})[propName];
 const getDimensionById = (dimensionId) => getPredefinedDimensions()[dimensionId];
 
-const TRANSFER_OPTIONS_WIDTH = '420px';
-const TRANSFER_SELECTED_WIDTH = '298px';
-const TRANSFER_HEIGHT = '512px';
-
 const formatList = (items) => {
     // Wrap Intl.ListFormat in try/catch as DHIS2 locales are not always ISO 639 compliant
     try {
@@ -1392,7 +1396,7 @@ const dimensionGetItems = (dimension) => dimensionIsValid(dimension, { requireIt
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-var styles$1 = `
+var styles$2 = `
     .filterContainer {
         display: flex;
         margin-bottom: ${spacers$1.dp12};
@@ -1564,55 +1568,55 @@ TransferOption.propTypes = {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-// Helper function to generate a unique class name
 const generateClassName$2 = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
-// Helper function to convert camelCased properties to hyphenated CSS properties
-const convertStylesToCSS$2 = (className, styles) => {
-    let cssString = `.${className} {`;
+const convertStylesToCSS$2 = (className, styles, parentSelector = '') => {
+    let cssString = '';
+    let mainBlock = parentSelector ? `${parentSelector} {` : `.${className} {`;
     for (const key in styles) {
-        if (typeof styles[key] === 'object' && key.startsWith('@media')) {
-            const mediaStyles = convertStylesToCSS$2(className, styles[key]);
-            cssString += `${key} { ${mediaStyles} }`;
-        }
-        else if (key.startsWith('&:')) {
-            const pseudoClass = key.replace('&', '');
-            cssString += `${pseudoClass} { ${convertStylesToCSS$2('', styles[key])} }`;
+        const value = styles[key];
+        if (typeof value === 'object') {
+            if (key.startsWith('@media')) {
+                // Handle media queries
+                cssString += `${key} { ${convertStylesToCSS$2(className, value, `.${className}`)} }`;
+            }
+            else if (key.startsWith('&')) {
+                // Handle pseudo-classes and nested selectors
+                const selector = key.replace('&', `.${className}`);
+                cssString += convertStylesToCSS$2(className, value, selector);
+            }
+            else {
+                // Handle nested elements (e.g., '& > div')
+                cssString += convertStylesToCSS$2(className, value, `.${className} ${key}`);
+            }
         }
         else {
+            // Convert camelCase to kebab-case
             const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-            cssString += `${cssKey}: ${styles[key]}; `;
+            mainBlock += `${cssKey}: ${value}; `;
         }
     }
-    cssString += '}';
-    return cssString;
+    mainBlock += '}';
+    return mainBlock + ' ' + cssString;
 };
-// Custom hook for dynamic styles with generics
+// Custom hook for dynamic styles
 const useDynamicStyles$2 = (stylesObj) => {
     const [classNames, setClassNames] = useState({});
     useEffect(() => {
-        const convertedStyles = Object.keys(stylesObj).map((key) => {
+        const styleElements = [];
+        const generatedClassNames = Object.keys(stylesObj).reduce((acc, key) => {
             const className = generateClassName$2(key);
             const styleElement = document.createElement('style');
             styleElement.innerHTML = convertStylesToCSS$2(className, stylesObj[key]);
             document.head.appendChild(styleElement);
-            return {
-                key,
-                className,
-                styleElement,
-            };
-        });
-        setClassNames(convertedStyles.reduce((classNameEntity, convertedStyle) => {
-            return {
-                ...classNameEntity,
-                [convertedStyle.key]: convertedStyle.className,
-            };
-        }, {}));
+            styleElements.push(styleElement);
+            acc[key] = className;
+            return acc;
+        }, {});
+        setClassNames(generatedClassNames);
         return () => {
-            convertedStyles.forEach((convertedStyle) => {
-                document.head.removeChild(convertedStyle.styleElement);
-            });
+            styleElements.forEach((el) => document.head.removeChild(el));
         };
-    }, []);
+    }, [stylesObj]);
     return classNames;
 };
 
@@ -1624,6 +1628,104 @@ const useDynamicStyles$2 = (stylesObj) => {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// 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.
+const styles$1 = {
+    button: {
+        // Reset button styles
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        font: 'inherit',
+        // Custom button styles
+        fontSize: '14px',
+        padding: '6px 4px',
+        color: colors$1.grey800,
+        borderRadius: '3px',
+        '&:hover': {
+            textDecoration: 'underline',
+            color: 'black',
+        },
+        '&.selected': {
+            color: 'black',
+        },
+    },
+};
+const BreadcrumbItemComponent = (props) => {
+    const { breadcrumb, onClick } = props;
+    const classes = useDynamicStyles$2(styles$1);
+    return (React__default.createElement("button", { type: "button", title: breadcrumb.label, className: [
+            classes.button,
+            breadcrumb.selected ? classes.button + '.selected' : null,
+        ]
+            .filter((cssClass) => cssClass !== null)
+            .join(' '), onClick: onClick }, breadcrumb.label));
+};
+
+class BreadcrumbComponent extends ReactWrapperModule {
+    constructor() {
+        super(...arguments);
+        this.#ngZone = inject(NgZone);
+        this.breadcrumbs = input.required();
+        this.selectBreadcrumb = new EventEmitter();
+    }
+    #ngZone;
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        const breadcrumbStyles = {
+            container: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+        };
+        this.component = () => {
+            const classes = useDynamicStyles$2(breadcrumbStyles);
+            return (React__default.createElement("div", { className: classes.container }, this.breadcrumbs().map((breadcrumb, index) => (React__default.createElement(React__default.Fragment, { key: index },
+                React__default.createElement(BreadcrumbItemComponent, { key: index, breadcrumb: breadcrumb, onClick: () => {
+                        this.#ngZone.run(() => {
+                            this.selectBreadcrumb.emit(breadcrumb);
+                        });
+                    } }),
+                index < this.breadcrumbs().length - 1 && (React__default.createElement(IconChevronRight16, { color: colors$1.grey800 })))))));
+        };
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: BreadcrumbComponent, isStandalone: false, selector: "ng-dhis2-ui-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectBreadcrumb: "selectBreadcrumb" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-dhis2-ui-breadcrumb',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], propDecorators: { selectBreadcrumb: [{
+                type: Output
+            }] } });
+
+class BreadcrumbModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule], exports: [BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BreadcrumbComponent],
+                    imports: [CommonModule],
+                    exports: [BreadcrumbComponent],
+                }]
+        }] });
+
+// 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 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.
@@ -2206,17 +2308,17 @@ const PeriodTransfer = ({ onSelect, dataTest, initialSelectedPeriods, rightFoote
                     year,
                 });
             }, dataTest: `${dataTest}-fixed-period-filter`, excludedPeriodTypes: excludedPeriodTypes }))),
-        React__default.createElement("style", { jsx: true }, styles$1)));
+        React__default.createElement("style", { jsx: true }, styles$2)));
     const renderRightHeader = () => (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("p", { className: "rightHeader" }, i18n.t('Selected Periods')),
-        React__default.createElement("style", { jsx: true }, styles$1)));
+        React__default.createElement("style", { jsx: true }, styles$2)));
     const onSelectFixedPeriods = (filter) => {
         setFixedFilter(filter);
         setAllPeriods((getFixedPeriodsOptionsById(filter.periodType, periodsSettings)?.getPeriods(fixedPeriodConfig(Number(filter.year))) || []));
     };
     const renderEmptySelection = () => (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("p", { className: "emptyList" }, i18n.t('No periods selected')),
-        React__default.createElement("style", { jsx: true }, styles$1)));
+        React__default.createElement("style", { jsx: true }, styles$2)));
     return (React__default.createElement(Transfer, { onChange: ({ selected }) => {
             const formattedItems = selected.map((id) => ({
                 id,
@@ -3193,15 +3295,24 @@ class LineListService {
     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, ouMode) {
+    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode, filterRootOrgUnit) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
         const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
         return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,orgUnit,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=created:desc`).pipe(map$1((response) => {
-            //TODO: use the api to to order by desc
-            // response.trackedEntityInstances.reverse();
+            if (filterRootOrgUnit) {
+                response.trackedEntityInstances = response.trackedEntityInstances.filter((tei) => tei.orgUnit !== orgUnit // Exclude TEIs with the root orgUnit
+                );
+            }
             return response;
         }));
+        // pipe(
+        //   map((response: any) => {
+        //    //TODO: use the api to to order by desc
+        //   // response.trackedEntityInstances.reverse();
+        //     return response;
+        //   })
+        // );
     }
     getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode) {
         const filterParams = buildFilters(filters);
@@ -3215,7 +3326,7 @@ class LineListService {
         const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
         return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
-    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode) {
+    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode, filterRootOrgUnit) {
         return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
             if (programStageId) {
                 return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
@@ -3224,7 +3335,7 @@ class LineListService {
                 })));
             }
             if (programMetadata.programType === 'WITH_REGISTRATION') {
-                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((teis) => ({
+                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode, filterRootOrgUnit).pipe(map$1((teis) => ({
                     metadata: programMetadata,
                     data: teis,
                 })));
@@ -3276,7 +3387,10 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     //organisation units from metadata
     let orgUnitsFromMetaData = response.metadata.organisationUnits;
     //a Map to efficiently look up orgUnit names by ID
-    const orgUnitMap = new Map(orgUnitsFromMetaData.map((ou) => [ou.id, ou.name]));
+    const orgUnitMap = new Map(orgUnitsFromMetaData.map((ou) => [
+        ou.id,
+        ou.name,
+    ]));
     const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
         displayInList: attr.displayInList,
         searchable: attr.searchable,
@@ -3347,11 +3461,17 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
             ? matchingEnrollment.attributes
             : tei.attributes;
         attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
+        //include orgUnit in the row for id access
+        row['orgUnitId'] = tei.orgUnit;
         // Access the name of the orgUnit using the Map
         row['orgUnit'] = orgUnitMap.get(tei.orgUnit) || tei.orgUnit || 'N/A';
         return row;
     });
-    return { columns: entityColumns, data: attributesData, filteredEntityColumns: filteredEntityColumns };
+    return {
+        columns: entityColumns,
+        data: attributesData,
+        filteredEntityColumns: filteredEntityColumns,
+    };
 };
 const getEventData = (response, pager) => {
     const events = response.data.events;
@@ -3395,6 +3515,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.isButtonLoading = false;
         this.buttonLabel = '';
         this.firstValue = new EventEmitter();
+        this.filterRootOrgUnit = false;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
         };
@@ -3454,7 +3575,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, 
                 // this.attributeFilters,
-                this.startDate, this.endDate, this.ouMode)
+                this.startDate, this.endDate, this.ouMode, this.filterRootOrgUnit)
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
@@ -3680,7 +3801,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, 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.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -3719,6 +3840,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Output
             }], buttonFilter: [{
                 type: Input
+            }], filterRootOrgUnit: [{
+                type: Input
             }] } });
 
 class LineListModule {
@@ -4988,14 +5111,14 @@ const OrgUnitFormField = (props) => {
     const [loading, setLoading] = useState(true);
     const [searchLoading, setSearchLoading] = useState();
     const [searchData, setSearchData] = useState();
-    const [selectedOrgUnit, setSelectedOrgUnit] = React__default.useState();
-    const [expanded, setExpanded] = React__default.useState(initiallyExpanded);
+    const [selectedOrgUnit, setSelectedOrgUnit] = useState();
+    const [expanded, setExpanded] = useState(initiallyExpanded);
     const [showOrgUnitTree, setShowOrgUnitTree] = useState(!selected);
     useEffect(() => {
         setLoading(true);
         if (selected) {
             d2.httpInstance
-                .get(`organisationUnits/${selected}.json?fields=id,name,path,code,ancestors[id,name]`)
+                .get(`organisationUnits/${selected}.json?fields=id,displayName,path,code,ancestors[id,displayName]`)
                 .then((response) => {
                 if (response.data) {
                     setSelectedOrgUnit(response.data);
@@ -5005,9 +5128,10 @@ const OrgUnitFormField = (props) => {
             });
         }
         else {
+            setShowOrgUnitTree(true);
             setLoading(false);
         }
-    }, [selected]);
+    }, []);
     const highlighted = useMemo(() => {
         if (selectedOrgUnit) {
             return [selectedOrgUnit['path']];
@@ -5020,7 +5144,7 @@ const OrgUnitFormField = (props) => {
                 ...(selectedOrgUnit['ancestors'] || []),
                 selectedOrgUnit,
             ]
-                .map((orgUnit) => orgUnit['name'])
+                .map((orgUnit) => orgUnit['displayName'])
                 .join(' / ');
         }
         return '';
@@ -5068,11 +5192,13 @@ const OrgUnitFormField = (props) => {
             }
             return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
                     setSelectedOrgUnit(event);
+                    setShowOrgUnitTree(false);
                     onSelectOrgUnit(event.id);
                 } })));
         }
         return (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
                 setSelectedOrgUnit(event);
+                setShowOrgUnitTree(false);
                 onSelectOrgUnit(event.id);
             } }));
     };
@@ -5084,10 +5210,11 @@ const OrgUnitFormField = (props) => {
             label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
                 React__default.createElement("span", null, label),
                 required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
-            selected && !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
-                React__default.createElement(Chip, { onRemove: () => {
-                        setShowOrgUnitTree(true);
-                    } }, selectedOrgUnit.name))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+            !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
+                    React__default.createElement(Chip, { onRemove: () => {
+                            setShowOrgUnitTree(true);
+                        } }, selectedOrgUnit.displayName)))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
                 React__default.createElement(CircularLoader$1, { small: true })))) : (React__default.createElement("div", { className: classes.container },
                 React__default.createElement("div", { className: classes.debounceFieldContainer },
                     React__default.createElement(InputField$1, { placeholder: "Search", value: searchText, disabled: disabled, onChange: handleFilterChange })),
@@ -5128,7 +5255,7 @@ const FileUploadField = (props) => {
             }
         }
     };
-    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: label, name: id, valid: valid, required: required, validationText: validationText, onChange: (event) => {
+    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: label, name: id, required: required, validationText: validationText, onChange: (event) => {
             const fileItem = (event?.files || [])[0];
             setFile(fileItem);
             if (performUpload) {
@@ -5269,10 +5396,16 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                         } }));
                 case 'org-unit':
                     return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, required: this.field().required, onSelectOrgUnit: (selectedOrgUnit) => {
-                            setValue(selectedOrgUnit);
                             this.ngZone.run(() => {
-                                this.update.emit({ form: this.form(), value });
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(selectedOrgUnit);
+                                this.update.emit({
+                                    form: this.form(),
+                                    value: selectedOrgUnit,
+                                });
                             });
+                            setValue(selectedOrgUnit);
+                            setTouched(true);
                         }, selected: value }));
                 case 'transfer':
                     return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: {
@@ -6364,5 +6497,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Boolean$1 as Boolean, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DataTableUIComponent, DataTableUIModule, DateField, DateRangeValue, Dropdown, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, SelectionFiltersComponent, SelectionFiltersUiModule, TrackerFormComponent, TrackerFormModule, TranslationUtil };
+export { Boolean$1 as Boolean, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DataTableUIComponent, DataTableUIModule, DateField, DateRangeValue, Dropdown, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, SelectionFiltersComponent, SelectionFiltersUiModule, TrackerFormComponent, TrackerFormModule, TranslationUtil };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map