@iapps/ng-dhis2-ui 1.1.6 → 1.1.8

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

@@ -25,7 +25,7 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
-import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, isEmpty } from 'lodash';
 import cx from 'classnames';
@@ -2661,7 +2661,7 @@ const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLeve
         React__default.createElement("div", { className: cx('orgUnitTreeWrapper', {
                 disabled: selectedItems.some((item) => DYNAMIC_ORG_UNITS.includes(item.id)),
             }) },
-            React__default.createElement(OrganisationUnitTree, { roots: roots, initiallyExpanded: [
+            React__default.createElement(OrganisationUnitTree, { roots: roots, singleSelection: allowSingleSelection, initiallyExpanded: [
                     ...(roots.length === 1 ? [`/${roots[0]}`] : []),
                     ...selectedItems
                         .filter((item) => !DYNAMIC_ORG_UNITS.includes(item.id) &&
@@ -3778,6 +3778,7 @@ class DateRangeValue {
 var FieldType;
 (function (FieldType) {
     FieldType["TEXT"] = "TEXT";
+    FieldType["MULTI_TEXT"] = "MULTI_TEXT";
     FieldType["TRUE_ONLY"] = "TRUE_ONLY";
     FieldType["LONG_TEXT"] = "LONG_TEXT";
     FieldType["BOOLEAN"] = "BOOLEAN";
@@ -3937,11 +3938,16 @@ class FieldUtil {
 class FieldControlTypeUtil {
     static getFieldControlType(valueType, hasOptions) {
         if (hasOptions) {
+            if (valueType === FieldType.MULTI_TEXT) {
+                return 'multi-dropdown';
+            }
             return 'dropdown';
         }
         switch (valueType) {
             case FieldType.TEXT:
                 return 'textbox';
+            case FieldType.MULTI_TEXT:
+                return 'multi-dropdown';
             case FieldType.BOOLEAN:
                 return 'dropdown';
             case FieldType.LONG_TEXT:
@@ -4169,7 +4175,9 @@ class FormFieldGroup {
                 type: FieldUtil.getFieldType(fieldMetaData['valueType']),
                 dependentField,
                 options,
-                disabled: field.disabled ?? fieldMetaData['disabled'],
+                disabled: field.disabled ??
+                    fieldMetaData['disabled'] ??
+                    fieldMetaData['generated'],
                 min: field.min ?? fieldMetaData['min'],
                 max: field.max ?? fieldMetaData['max'],
                 order: field.order ??
@@ -4331,7 +4339,8 @@ class FormMetaData {
     #getSectionFromPrograms(programs) {
         const sections = flatten(programs.map((program) => {
             return [
-                this.#getReportingDetailsSection(program),
+                this.#getRegisteringUnitSection(program),
+                this.#getReportingDateSection(program),
                 new FormMetadataSection({
                     section: {
                         id: 'registration',
@@ -4406,25 +4415,44 @@ class FormMetaData {
         }
         return sections;
     }
-    #getReportingDetailsSection(program) {
+    #getRegisteringUnitSection(program) {
         return new FormMetadataSection({
             section: {
-                id: 'reporting_details',
-                name: 'Reporting details',
+                id: 'registering_unit_details',
+                name: 'Registering unit details',
                 fieldGroups: [
                     {
-                        id: 'reporting_details',
+                        id: 'registering_unit_details',
                         sortOrder: 1,
-                        isFormHorizontal: true,
+                        isFormHorizontal: false,
                         fields: [
                             new FormField({
                                 id: 'orgUnit',
                                 key: 'orgUnit',
-                                label: 'Organisation unit',
+                                label: program.orgUnitLabel || 'Registering unit',
                                 code: 'orgUnit',
                                 required: true,
                                 controlType: 'org-unit',
                             }),
+                        ],
+                    },
+                ],
+            },
+            program,
+            locale: this.params.locale,
+        }).toJson();
+    }
+    #getReportingDateSection(program) {
+        return new FormMetadataSection({
+            section: {
+                id: 'reporting_dates',
+                name: 'Reporting dates',
+                fieldGroups: [
+                    {
+                        id: 'reporting_dates',
+                        sortOrder: 1,
+                        isFormHorizontal: false,
+                        fields: [
                             new DateField({
                                 id: 'enrollmentDate',
                                 label: program.enrollmentDateLabel || 'Enrollment date',
@@ -4512,8 +4540,8 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.value = model();
         this.value$ = toObservable(this.value);
         this.FieldOrgUnitSelector = (props) => {
-            const { onSelectOrgUnit, onCancelOrgUnit } = props;
-            const [selected, setSelected] = useState([]);
+            const { onSelectOrgUnit, selectedOrgUnits } = props;
+            const [selected, setSelected] = useState(selectedOrgUnits);
             const [rootOrgUnits, setRootOrgUnits] = useState();
             const [config, setConfig] = useState();
             useEffect(() => {
@@ -4526,19 +4554,14 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 });
             }, []);
             return config ? (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(Modal$1, { position: "middle", large: true },
-                React__default.createElement(ModalTitle$1, null, "Organisation unit"),
+                React__default.createElement(ModalTitle$1, null,
+                    "Select ",
+                    this.field().label),
                 React__default.createElement(ModalContent$1, null,
-                    React__default.createElement(OrgUnitDimension, { selected: selected, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
+                    React__default.createElement(OrgUnitDimension, { selected: selected, allowSingleSelection: true, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
                             setSelected(selectionEvent.items);
-                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })),
-                React__default.createElement(ModalActions$1, null,
-                    React__default.createElement(ButtonStrip$1, { end: true },
-                        React__default.createElement(Button$1, { onClick: () => {
-                                onCancelOrgUnit();
-                            } }, "Cancel"),
-                        React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
-                                onSelectOrgUnit(selected);
-                            } }, "Confirm")))))) : (React__default.createElement(CircularLoader$1, { small: true }));
+                            onSelectOrgUnit(selectionEvent.items);
+                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits }))))) : (React__default.createElement(CircularLoader$1, { small: true }));
         };
         this.showOrgUnitTree = signal(false);
         this.orgUnitSelectionConfig = {
@@ -4583,6 +4606,12 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             const [touched, setTouched] = useState(false);
             const [showOrgUnit, setShowOrgUnit] = useState(false);
             const onChange = (payload) => setSelected(payload.selected);
+            const arrayValue = useMemo(() => {
+                if (value && value.length > 0) {
+                    return value.split(',');
+                }
+                return [];
+            }, [value]);
             const hasError = useMemo(() => {
                 return (touched &&
                     (this.form().get(this.field().id) ||
@@ -4647,10 +4676,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                 });
                                 setTouched(true);
                             } }),
-                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { onCancelOrgUnit: () => {
-                                setShowOrgUnit(false);
-                                setTouched(true);
-                            }, onSelectOrgUnit: (selectedOrgUnits) => {
+                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { selectedOrgUnits: [], onSelectOrgUnit: (selectedOrgUnits) => {
                                 if ((selectedOrgUnits || [])[0]) {
                                     const selectedOrgUnit = selectedOrgUnits[0];
                                     setDisplayValue(selectedOrgUnit.name);
@@ -4710,6 +4736,20 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             setValue(event.selected);
                             setTouched(true);
                         } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: option.key, label: option.label, value: option.value })))));
+                case 'multi-dropdown':
+                    return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, label: this.label(), name: this.field().id, required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                            const selectedValue = (event.selected || []).join(',');
+                            this.ngZone.run(() => {
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(selectedValue);
+                                this.update.emit({
+                                    form: this.form(),
+                                    value: selectedValue,
+                                });
+                            });
+                            setValue(selectedValue);
+                            setTouched(true);
+                        }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
                 case 'file':
                     return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: this.label(), name: this.field().id, files: this.uploadedFiles, onChange: (event) => {
                             this.uploadedFiles.push((event?.files || [])[0]);
@@ -5363,105 +5403,163 @@ class SelectionFiltersComponent extends ReactWrapperModule {
         this.attributeFilters = [];
         this.dataElementFilters = [];
         this.actionSelected = new EventEmitter();
+        this.httpClient = inject(NgxDhis2HttpClientService);
+        this.ngZone = inject(NgZone);
+        this.FieldOrgUnitSelector = (props) => {
+            const { onSelectOrgUnit, onCancelOrgUnit } = props;
+            const [selected, setSelected] = useState([]);
+            const [rootOrgUnits, setRootOrgUnits] = useState();
+            const [config, setConfig] = useState();
+            useEffect(() => {
+                zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
+                    next: ([appConfig, rootOrgUnits]) => {
+                        setConfig(appConfig);
+                        setRootOrgUnits(rootOrgUnits);
+                    },
+                    error: (error) => console.error(error),
+                });
+            }, []);
+            return config ? (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(Modal$1, { position: "middle", large: true },
+                React__default.createElement(ModalTitle$1, null, "Organisation unit"),
+                React__default.createElement(ModalContent$1, null,
+                    React__default.createElement(OrgUnitDimension, { selected: selected, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
+                            setSelected(selectionEvent.items);
+                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })),
+                React__default.createElement(ModalActions$1, null,
+                    React__default.createElement(ButtonStrip$1, { end: true },
+                        React__default.createElement(Button$1, { onClick: () => {
+                                onCancelOrgUnit();
+                            } }, "Cancel"),
+                        React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
+                                onSelectOrgUnit(selected);
+                            } }, "Confirm")))))) : (React__default.createElement(CircularLoader$1, { small: true }));
+        };
+        this.showOrgUnitTree = signal(false);
+        this.orgUnitSelectionConfig = {
+            hideGroupSelect: true,
+            hideLevelSelect: true,
+            hideUserOrgUnits: true,
+            allowSingleSelection: true,
+            usageType: 'DATA_ENTRY',
+        };
+        this.selectedOrgUnit = signal(null);
+        this.selectedOrgUnit$ = toObservable(this.selectedOrgUnit);
         this.SelectionFiltersUI = () => {
             const [filters, setFilters] = useState({
                 attributeFilters: this.attributeFilters || [],
                 dataElementFilters: this.dataElementFilters || [],
+                organizationUnitId: '',
+                startDate: this.startDate || '',
+                endDate: this.endDate || '',
             });
+            const [displayValue, setDisplayValue] = useState(null);
+            const [selected, setSelected] = useState();
+            const [selectedOrganisationUnit, setSelectedOrganisationUnit] = useState();
+            const [touched, setTouched] = useState(false);
+            const [showOrgUnit, setShowOrgUnit] = useState(false);
+            const [value, setValue] = useState(null);
             useEffect(() => {
                 setFilters({
                     attributeFilters: this.attributeFilters,
                     dataElementFilters: this.dataElementFilters,
+                    organizationUnitId: '',
+                    startDate: this.startDate || '',
+                    endDate: this.endDate || '',
                 });
-            }, [this.attributeFilters, this.dataElementFilters]);
+            }, [
+                this.attributeFilters,
+                this.dataElementFilters,
+                this.startDate,
+                this.endDate,
+            ]);
             const handleAttributeChange = (index, selectedValue) => {
                 setFilters((prevFilters) => {
                     const updatedFilters = [...prevFilters.attributeFilters];
-                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
+                    updatedFilters[index] = {
+                        ...updatedFilters[index],
+                        value: selectedValue,
+                    };
                     return { ...prevFilters, attributeFilters: updatedFilters };
                 });
             };
             const handleDataElementChange = (index, selectedValue) => {
                 setFilters((prevFilters) => {
                     const updatedFilters = [...prevFilters.dataElementFilters];
-                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
+                    updatedFilters[index] = {
+                        ...updatedFilters[index],
+                        value: selectedValue,
+                    };
                     return { ...prevFilters, dataElementFilters: updatedFilters };
                 });
             };
             const handleSearch = () => {
-                this.actionSelected.emit(filters);
+                this.actionSelected.emit({
+                    ...filters,
+                    organizationUnit: selectedOrganisationUnit,
+                    organizationUnitId: selectedOrganisationUnit,
+                    startDate: filters.startDate,
+                    endDate: filters.endDate,
+                });
             };
-            // Grid Column Span Logic for Attribute Filters
             const getAttributeColumnSpan = (index) => {
                 const totalItems = filters.attributeFilters.length;
                 if (totalItems <= 4) {
-                    // If 1 to 4 items, place them in a single row (span all columns if there's only one item)
                     if (totalItems === 1) {
-                        return 'span 4'; // One item spans all four columns
+                        return 'span 4';
                     }
                     if (totalItems === 2) {
-                        return 'span 2'; // Two items, each spans 2 columns
+                        return 'span 2';
                     }
                     if (totalItems === 3) {
-                        return 'span 1'; // Three items, each spans one column
+                        return 'span 1';
                     }
                     if (totalItems === 4) {
-                        return 'span 1'; // Four items, each spans one column
+                        return 'span 1';
                     }
                 }
                 else {
-                    // More than 4 items, recursively adjust the placement
-                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    const rowIndex = Math.floor(index / 2);
                     if (index % 2 === 0) {
-                        // For first item in each row, span 2 columns
                         return 'span 2';
                     }
                     else if (index === totalItems - 1) {
-                        // Last item, spans the full row (4 columns)
                         return 'span 4';
                     }
                     else {
-                        // For other items, span 2 columns
                         return 'span 2';
                     }
                 }
-                return 'span 1'; // Default behavior
+                return 'span 1';
             };
-            // Grid Column Span Logic for Data Element Filters
             const getDataElementColumnSpan = (index) => {
                 const totalItems = filters.dataElementFilters.length;
                 if (totalItems <= 4) {
-                    // If 1 to 4 items, place them in a single row (span all columns if there's only one item)
                     if (totalItems === 1) {
-                        return 'span 4'; // One item spans all four columns
+                        return 'span 4';
                     }
                     if (totalItems === 2) {
-                        return 'span 2'; // Two items, each spans 2 columns
+                        return 'span 2';
                     }
                     if (totalItems === 3) {
-                        return 'span 1'; // Three items, each spans one column
+                        return 'span 1';
                     }
                     if (totalItems === 4) {
-                        return 'span 1'; // Four items, each spans one column
+                        return 'span 1';
                     }
                 }
                 else {
-                    // More than 4 items, recursively adjust the placement
-                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    const rowIndex = Math.floor(index / 2);
                     if (index % 2 === 0) {
-                        // For first item in each row, span 2 columns
                         return 'span 2';
                     }
                     else if (index === totalItems - 1) {
-                        // Last item, spans the full row (4 columns)
                         return 'span 4';
                     }
                     else {
-                        // For other items, span 2 columns
                         return 'span 2';
                     }
                 }
-                return 'span 1'; // Default behavior
+                return 'span 1';
             };
             return (React__default.createElement("div", { style: {
                     fontFamily: 'Arial, sans-serif',
@@ -5470,6 +5568,45 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                     borderRadius: '8px',
                     boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                 } },
+                React__default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(3, 1fr)',
+                        gap: '16px',
+                        marginBottom: '16px',
+                    } },
+                    React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(InputField$1, { value: displayValue, label: "Organization Unit", readOnly: false, onFocus: () => {
+                                setShowOrgUnit(true);
+                            }, onBlur: () => {
+                                this.ngZone.run(() => {
+                                    console.log('THIS IS IT::: ');
+                                });
+                                setTouched(true);
+                            } }),
+                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { onCancelOrgUnit: () => {
+                                setShowOrgUnit(false);
+                                setTouched(true);
+                            }, onSelectOrgUnit: (selectedOrgUnits) => {
+                                if ((selectedOrgUnits || [])[0]) {
+                                    const selectedOrgUnit = selectedOrgUnits[0];
+                                    setDisplayValue(selectedOrgUnit.name);
+                                    setSelected(selectedOrgUnit.id);
+                                    setSelectedOrganisationUnit(selectedOrgUnit.id);
+                                    setValue(selectedOrgUnit.id);
+                                    setShowOrgUnit(false);
+                                    setTouched(true);
+                                    // this.ngZone.run(() => {
+                                    //   setDisplayValue(selectedOrgUnit.name);
+                                    //   setSelected(selectedOrgUnit.id)
+                                    //   setSelectedOrganisationUnit(selectedOrgUnit.id)
+                                    //   setValue(selectedOrgUnit.id);
+                                    //   setShowOrgUnit(false);
+                                    // setTouched(true);
+                                    // });
+                                }
+                            } }))),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "date", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }) }),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "date", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }) })),
                 React__default.createElement("div", { style: {
                         display: 'grid',
                         gridTemplateColumns: 'repeat(4, 1fr)',
@@ -5484,6 +5621,49 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                     React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))));
         };
     }
+    getAppConfig() {
+        return this.httpClient.systemInfo().pipe(map((response) => {
+            const systemInfo = response;
+            return {
+                baseUrl: (document?.location?.host?.includes('localhost')
+                    ? `${document.location.protocol}//${document.location.host}`
+                    : systemInfo['contextPath']),
+                apiVersion: Number(((systemInfo['version'] || '')?.split('.') || [])[1]),
+            };
+        }));
+    }
+    getRootOrgUnits() {
+        const orgUnitAttribute = this.getOrgUnitAttributeByUsage(this.orgUnitSelectionConfig.usageType);
+        return this.httpClient
+            .me()
+            .pipe(map((user) => (user ? user[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id)));
+    }
+    getOrgUnitLevels() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitLevels'])));
+    }
+    onSelectOrgUnit(selectedOrgUnits) {
+        this.showOrgUnitTree.set(false);
+        if ((selectedOrgUnits || [])[0]) {
+            this.selectedOrgUnit.set(selectedOrgUnits[0]);
+        }
+    }
+    getOrgUnitGroups() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitGroups.json?fields=id,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitGroups'])));
+    }
+    getOrgUnitAttributeByUsage(usageType) {
+        switch (usageType) {
+            case 'DATA_ENTRY':
+                return 'organisationUnits';
+            case 'DATA_VIEW':
+                return 'dataViewOrganisationUnits';
+            default:
+                return 'organisationUnits';
+        }
+    }
     async ngAfterViewInit() {
         if (!this.elementRef)
             throw new Error('No element ref');
@@ -5513,14 +5693,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 
 class SelectionFiltersUiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [SelectionFiltersComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule, OrganisationUnitSelectorModule], exports: [SelectionFiltersComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule, OrganisationUnitSelectorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SelectionFiltersComponent],
-                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule],
+                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule, OrganisationUnitSelectorModule],
                     exports: [SelectionFiltersComponent],
                 }]
         }] });