@iapps/ng-dhis2-ui 1.2.165 → 1.2.167

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

@@ -4300,6 +4300,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             type: Injectable
         }] });
 
+const getOptionCode = (option) => option.code ?? option.value ?? option.id;
+const getMultiOptionCodes = (value) => {
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => String(item).trim())
+            .filter((item) => item.length > 0);
+    }
+    if (typeof value !== 'string') {
+        return value == null ? [] : [String(value)];
+    }
+    return value
+        .split(/[;,]/)
+        .map((item) => item.trim())
+        .filter((item) => item.length > 0);
+};
+const formatMultiTextOptionValue = (value, options = []) => {
+    const optionByCode = new Map(options
+        .map((option) => [getOptionCode(option), option])
+        .filter(([code]) => !!code));
+    const codes = getMultiOptionCodes(value);
+    return codes.map((code) => optionByCode.get(code)?.name || code).join(', ');
+};
+
 const getTrackedEntityTableData = (response, programId, pager, metaData, searcheableDataElements, customDisplayInReportsIds, columnNameSource = 'NAME') => {
     const getColumnLabel = (item) => columnNameSource === 'FORM_NAME'
         ? item?.formName || item?.name || 'Default'
@@ -4359,6 +4382,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
         .filter((psde) => psde.dataElement && shouldIncludeDataElement(psde))
         .map(({ dataElement }) => ({
         id: dataElement.id,
+        valueType: dataElement.valueType,
         options: dataElement.optionSet?.options?.map((option) => ({
             name: option.name,
             code: option.code,
@@ -4446,13 +4470,20 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
             }
             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),
-                    }),
-                };
+                if (valueType === 'MULTI_TEXT') {
+                    row[attributeId] = {
+                        value: formatMultiTextOptionValue(value, attributeMeta.optionSet.options),
+                    };
+                }
+                else {
+                    const matchedOption = attributeMeta.optionSet.options.find((opt) => opt.code === value);
+                    row[attributeId] = {
+                        value: matchedOption?.name || value,
+                        ...(getOptionColor(matchedOption) && {
+                            style: getOptionColor(matchedOption),
+                        }),
+                    };
+                }
             }
             else {
                 row[attributeId] = { value };
@@ -4465,13 +4496,20 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
             if (!dataElementId || value == null)
                 return;
             const dataElementOption = dataElementOptionMap.get(dataElementId);
-            const matchedOption = dataElementOption?.options?.find((opt) => opt.code === value);
-            row[dataElementId] = {
-                value: matchedOption?.name || value,
-                ...(getOptionColor(matchedOption) && {
-                    style: getOptionColor(matchedOption),
-                }),
-            };
+            if (dataElementOption?.valueType === 'MULTI_TEXT') {
+                row[dataElementId] = {
+                    value: formatMultiTextOptionValue(value, dataElementOption.options),
+                };
+            }
+            else {
+                const matchedOption = dataElementOption?.options?.find((opt) => opt.code === value);
+                row[dataElementId] = {
+                    value: matchedOption?.name || value,
+                    ...(getOptionColor(matchedOption) && {
+                        style: getOptionColor(matchedOption),
+                    }),
+                };
+            }
         });
         const orgUnitId = enrollment.orgUnit;
         const orgUnitName = orgUnitMap?.get(orgUnitId) || '-';
@@ -4615,7 +4653,6 @@ const getEvents = (response, programStageId, pager, metaData, columnNameSource =
         ? item?.formName || item?.name || 'Default'
         : item?.name || item?.formName || 'Default';
     const events = response.data.events;
-    const eventsiiii = response.data;
     const allDataElements = new Set();
     events.forEach((event) => {
         event.dataValues.forEach((dv) => allDataElements.add(dv.dataElement));
@@ -4656,10 +4693,17 @@ const getEvents = (response, programStageId, pager, metaData, columnNameSource =
             const dataElementMeta = stageFromMetaData.programStageDataElements.find((psde) => psde.dataElement.id === dv.dataElement);
             if (dataElementMeta?.dataElement.optionSet) {
                 const optionSet = dataElementMeta.dataElement.optionSet;
-                const matchingOption = optionSet.options.find((option) => option.code === dv.value);
-                row[dv.dataElement] = matchingOption
-                    ? { value: matchingOption.name }
-                    : { value: dv.value };
+                if (dataElementMeta.dataElement.valueType === 'MULTI_TEXT') {
+                    row[dv.dataElement] = {
+                        value: formatMultiTextOptionValue(dv.value, optionSet.options),
+                    };
+                }
+                else {
+                    const matchingOption = optionSet.options.find((option) => option.code === dv.value);
+                    row[dv.dataElement] = matchingOption
+                        ? { value: matchingOption.name }
+                        : { value: dv.value };
+                }
             }
             else {
                 row[dv.dataElement] = { value: dv.value };
@@ -4670,6 +4714,141 @@ const getEvents = (response, programStageId, pager, metaData, columnNameSource =
     return { columns: entityColumns, data: dataElementsData };
 };
 
+const getCellValue = (cell) => {
+    if (cell === null || cell === undefined)
+        return '';
+    if (typeof cell === 'object') {
+        if ('value' in cell)
+            return cell.value;
+        return JSON.stringify(cell);
+    }
+    return cell;
+};
+const getExportColumns = (columns) => columns.filter((column) => column.label !== 'Actions');
+const downloadLineListExcel = (columns, data, fileName = 'records') => {
+    const exportColumns = getExportColumns(columns);
+    const header = exportColumns.map((column) => column.label);
+    const rows = data.map((row) => exportColumns.map((column) => getCellValue(row[column.key])));
+    const worksheet = XLSX.utils.aoa_to_sheet([header, ...rows]);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'LineListData');
+    XLSX.writeFile(workbook, `${fileName}.xlsx`);
+};
+const downloadLineListCsv = (columns, data, fileName = 'records') => {
+    const exportColumns = getExportColumns(columns);
+    const escapeCsvValue = (value) => `"${String(getCellValue(value)).replace(/"/g, '""')}"`;
+    const header = exportColumns.map((column) => escapeCsvValue(column.label));
+    const rows = data.map((row) => exportColumns.map((column) => escapeCsvValue(row[column.key])));
+    const csvContent = [header, ...rows].map((row) => row.join(',')).join('\n');
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `${fileName}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+};
+
+const applyDownloadColumnFilter = (columns, filterableColumnIds) => {
+    if (!Array.isArray(filterableColumnIds) || filterableColumnIds.length === 0) {
+        return columns;
+    }
+    const filterableColumnIdsSet = new Set(filterableColumnIds);
+    return columns.filter((column) => filterableColumnIdsSet.has(column.key));
+};
+const fetchLineListDownloadRows = async ({ d2, metaData, programId, programStageId, orgUnit, ouMode, startDate, endDate, dataQueryFilters, enrollmentStatus, eventStatus, filterableColumnIds, searcheableDataElements, customDisplayInReportsIds, columnNameSource, fetchOrgUnits, }) => {
+    if (!metaData) {
+        return { columns: [], data: [] };
+    }
+    const isTracker = metaData.programType === 'WITH_REGISTRATION';
+    const isEvent = metaData.programType === 'WITHOUT_REGISTRATION';
+    const downloadPager = new Pager({ paging: false });
+    const resolvedEndDate = endDate ?? format(addDays(new Date(), 1), 'yyyy-MM-dd');
+    if (programStageId || isEvent) {
+        const eventQuery = d2.eventModule.event
+            .setEndDate(resolvedEndDate)
+            .setStartDate(startDate)
+            .setProgram(programId)
+            .setOrgUnit(orgUnit)
+            .setOuMode(ouMode)
+            .setPagination(downloadPager);
+        if (programStageId) {
+            eventQuery.setProgramStage(programStageId);
+        }
+        const response = await eventQuery.get();
+        const events = Array.isArray(response.data)
+            ? response.data
+            : response.data
+                ? [response.data]
+                : [];
+        const eventsResponse = {
+            events,
+            pager: new Pager({
+                page: 1,
+                pageSize: events.length || 1,
+            }),
+        };
+        const downloadRows = getEvents({ data: eventsResponse }, programStageId || '', eventsResponse.pager, metaData, columnNameSource);
+        return {
+            columns: applyDownloadColumnFilter(downloadRows.columns, filterableColumnIds),
+            data: downloadRows.data,
+        };
+    }
+    if (isTracker) {
+        const trackerQuery = d2.trackerModule.trackedEntity
+            .setEndDate(resolvedEndDate)
+            .setStartDate(startDate)
+            .setProgram(programId)
+            .setOrgUnit(orgUnit)
+            .setOuMode(ouMode)
+            .setStatus(enrollmentStatus)
+            .setFilters(dataQueryFilters)
+            .setPagination(downloadPager)
+            .setOrderCriterias([
+            new DataOrderCriteria().setField('createdAt').setOrder('desc'),
+        ]);
+        if (eventStatus?.status && eventStatus?.programStage) {
+            trackerQuery.setEventStatus(eventStatus.status, eventStatus.programStage);
+        }
+        if (programStageId) {
+            trackerQuery.setProgramStage(programStageId);
+        }
+        const response = await trackerQuery.get();
+        const trackedEntityInstances = Array.isArray(response.data)
+            ? response.data
+            : response.data
+                ? [response.data]
+                : [];
+        const uniqueOrgUnitIds = Array.from(new Set(trackedEntityInstances
+            .flatMap((tei) => [
+            tei.latestEnrollment?.orgUnit,
+            ...(tei.attributes
+                ?.filter((attr) => attr.valueType === 'ORGANISATION_UNIT')
+                .map((attr) => attr.value) || []),
+        ])
+            .filter((orgUnitId) => !!orgUnitId)));
+        const fetchedOrgUnits = uniqueOrgUnitIds.length > 0
+            ? await firstValueFrom(fetchOrgUnits(uniqueOrgUnitIds))
+            : new Map();
+        const trackedEntityResponse = {
+            trackedEntityInstances,
+            pager: new Pager({
+                page: 1,
+                pageSize: trackedEntityInstances.length || 1,
+            }),
+            orgUnitsMap: fetchedOrgUnits,
+        };
+        const downloadRows = getTrackedEntityTableData({ data: trackedEntityResponse }, programId, trackedEntityResponse.pager, metaData, searcheableDataElements, customDisplayInReportsIds, columnNameSource);
+        return {
+            columns: applyDownloadColumnFilter(downloadRows.columns, filterableColumnIds),
+            data: downloadRows.data,
+        };
+    }
+    return { columns: [], data: [] };
+};
+
 class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
@@ -4718,6 +4897,7 @@ class LineListTableComponent extends ReactWrapperModule {
             const [endDateState, setEndDateState] = useState(this.endDate);
             const [tempEndDateState, setTempEndDateState] = useState(this.endDate);
             const [loading, setLoading] = useState(false);
+            const [downloadLoading, setDownloadLoading] = useState(false);
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
             const [orgUnitLabel, setOrgUnitLabel] = useState('');
@@ -4941,47 +5121,41 @@ class LineListTableComponent extends ReactWrapperModule {
                 triggerRefetch,
                 triggerTokenState,
             ]);
-            const handleExcelDownload = () => {
-                const filteredColumns = columns.filter((col) => col.label !== 'Actions');
-                const header = filteredColumns.map((col) => col.label);
-                const rows = data.map((row) => filteredColumns.map((col) => {
-                    const cell = row[col.key];
-                    if (cell === null || cell === undefined)
-                        return '';
-                    return typeof cell === 'object' && 'value' in cell
-                        ? cell.value
-                        : cell;
-                }));
-                const worksheetData = [header, ...rows];
-                const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
-                const workbook = XLSX.utils.book_new();
-                XLSX.utils.book_append_sheet(workbook, worksheet, 'LineListData');
-                XLSX.writeFile(workbook, 'records.xlsx');
-            };
-            const handleCsvDownload = () => {
-                const safeValue = (value) => {
-                    if (value === null || value === undefined)
-                        return '';
-                    if (typeof value === 'object') {
-                        if ('value' in value) {
-                            return value.value;
-                        }
-                        return JSON.stringify(value);
+            //TODO: ADD DOWNLOADING SUPPORT USING ANALYTICS
+            const handleDownload = async (format) => {
+                try {
+                    setDownloadLoading(true);
+                    const { columns, data } = await fetchLineListDownloadRows({
+                        d2,
+                        metaData,
+                        programId: programIdState,
+                        programStageId: programStageIdState,
+                        orgUnit: orgUnitState,
+                        ouMode: this.ouMode,
+                        startDate: startDateState,
+                        endDate: endDateState,
+                        dataQueryFilters: dataQueryFiltersState,
+                        enrollmentStatus: this.enrollmentStatus,
+                        eventStatus: this.eventStatus,
+                        filterableColumnIds: this.filterableColumnIds,
+                        searcheableDataElements: this.searcheableDataElements,
+                        customDisplayInReportsIds: this.customDisplayInReportsIds,
+                        columnNameSource: this.columnNameSource,
+                        fetchOrgUnits: (orgUnitIds) => this.lineListService.fetchOrgUnits(orgUnitIds),
+                    });
+                    if (format === 'CSV') {
+                        downloadLineListCsv(columns, data);
+                        return;
                     }
-                    return value;
-                };
-                const filteredColumns = columns.filter((col) => col.label !== 'Actions');
-                const header = filteredColumns.map((col) => `"${col.label}"`).join(',');
-                const csvData = data.map((row) => filteredColumns.map((col) => `"${safeValue(row[col.key])}"`).join(','));
-                const csvContent = [header, ...csvData].join('\n');
-                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-                const url = URL.createObjectURL(blob);
-                const link = document.createElement('a');
-                link.href = url;
-                link.setAttribute('download', 'records.csv');
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
+                    downloadLineListExcel(columns, data);
+                }
+                catch (error) {
+                    console.error('Failed to download line list data:', error);
+                    setError('Could not download records. Please try again.');
+                }
+                finally {
+                    setDownloadLoading(false);
+                }
             };
             const handleInputChange = (key, value, type) => {
                 setInputValues((prevValues) => ({
@@ -5117,7 +5291,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 // Returns black for light backgrounds, white for dark backgrounds
                 return yiq >= 128 ? colors$1.grey700 : '#FFFFFF';
             }
-            return React__default.createElement('div', null, loading
+            return React__default.createElement('div', { className: 'line-list-root' }, loading
                 ? React__default.createElement('div', {
                     style: {
                         display: 'flex',
@@ -5132,22 +5306,26 @@ class LineListTableComponent extends ReactWrapperModule {
                 }, 'Loading'))
                 : React__default.createElement('div', null, this.showDownloadButton &&
                     React__default.createElement('div', {
+                        className: 'line-list-download-toolbar',
                         style: {
                             paddingBottom: '1rem',
-                            display: 'flex',
-                            justifyContent: 'flex-end',
                         },
                     }, React__default.createElement(DropdownButton, {
                         name: 'Download',
+                        disabled: downloadLoading,
                         component: React__default.createElement('span', null, ' ', React__default.createElement(MenuItem$1, {
-                            label: 'Download Csv',
-                            onClick: handleCsvDownload,
+                            label: 'CSV',
+                            disabled: downloadLoading,
+                            onClick: () => handleDownload('CSV'),
                         }), React__default.createElement(MenuItem$1, {
-                            label: 'Download Excel',
-                            onClick: handleExcelDownload,
+                            label: 'Excel',
+                            disabled: downloadLoading,
+                            onClick: () => handleDownload('XLSX'),
                         })),
                         value: 'Download',
-                    }, 'Download')), orgUnitModalVisible &&
+                    }, downloadLoading
+                        ? React__default.createElement(CircularLoader$1, { small: true })
+                        : 'Download')), orgUnitModalVisible &&
                     React__default.createElement(OrgUnitSelector, {
                         hide: hide,
                         setHide: setHide,
@@ -5200,7 +5378,7 @@ class LineListTableComponent extends ReactWrapperModule {
                         prevSelectedOrgUnit: prevSelectedOrgUnit,
                         setPrevSelectedOrgUnit: setPrevSelectedOrgUnit,
                         //  filteredFilters: filteredFilters
-                    }), React__default.createElement(LineListTable, {
+                    }), React__default.createElement('div', { className: 'line-list-table-scroll' }, React__default.createElement(LineListTable, {
                     columns: columns,
                     data: data,
                     pager: pager,
@@ -5214,7 +5392,7 @@ class LineListTableComponent extends ReactWrapperModule {
                     rowsSelected: this.rowsSelected,
                     showActionButtons: showActionButtons,
                     error: error,
-                })));
+                }))));
         };
     }
     ngOnChanges(changes) {
@@ -5263,11 +5441,11 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", lineListRowActionFilterConfig: "lineListRowActionFilterConfig", hydrateForActionFiltering: "hydrateForActionFiltering", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton", searcheableDataElements: "searcheableDataElements", columnNameSource: "columnNameSource", customDisplayInReportsIds: "customDisplayInReportsIds" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", lineListRowActionFilterConfig: "lineListRowActionFilterConfig", hydrateForActionFiltering: "hydrateForActionFiltering", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton", searcheableDataElements: "searcheableDataElements", columnNameSource: "columnNameSource", customDisplayInReportsIds: "customDisplayInReportsIds" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .line-list-root{width:100%;max-width:100%;min-width:0}::ng-deep .line-list-download-toolbar{position:sticky;left:0;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:100%;box-sizing:border-box;background:#fff}::ng-deep .line-list-table-scroll{width:100%;max-width:100%;overflow-x:auto}::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["@charset \"UTF-8\";::ng-deep .line-list-root{width:100%;max-width:100%;min-width:0}::ng-deep .line-list-download-toolbar{position:sticky;left:0;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:100%;box-sizing:border-box;background:#fff}::ng-deep .line-list-table-scroll{width:100%;max-width:100%;overflow-x:auto}::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }]
         }], propDecorators: { triggerToken: [{
                 type: Input
             }], programId: [{
@@ -9067,6 +9245,42 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             // ----------------------------
             useEffect(() => {
                 const cascade = this.#resolveCascadeForCurrentField();
+                const dependentField = field.dependentField;
+                if (dependentField) {
+                    const parentCtrl = this.#getControl(fg, dependentField.key || dependentField.id);
+                    if (!parentCtrl) {
+                        setFilteredOptions([]);
+                        setDisabled(baseDisabled);
+                        return undefined;
+                    }
+                    const parentOptions = dependentField.options?.length > 0
+                        ? dependentField.options
+                        : dependentField.optionSet?.options ?? [];
+                    const applyDependentOptions = (parentValue) => {
+                        const parentOption = parentOptions.find((option) => {
+                            const optionValue = option?.value ?? option?.code ?? option?.key;
+                            return optionValue === parentValue;
+                        });
+                        const nextOptions = parentOption?.options ?? [];
+                        const childCtrl = this.#getCurrentFieldControl(fg);
+                        const currentChildValue = String(childCtrl?.value ?? '').trim();
+                        if (currentChildValue) {
+                            const stillValid = nextOptions.some((option) => {
+                                const optionValue = String(option?.value ?? option?.code ?? option?.key ?? '');
+                                return optionValue === currentChildValue;
+                            });
+                            if (!stillValid) {
+                                childCtrl?.setValue(null, { emitEvent: true });
+                                setValue('');
+                            }
+                        }
+                        setFilteredOptions(nextOptions);
+                        setDisabled(baseDisabled || !parentValue);
+                    };
+                    applyDependentOptions(parentCtrl.value);
+                    const sub = parentCtrl.valueChanges.subscribe((value) => applyDependentOptions(value));
+                    return () => sub.unsubscribe();
+                }
                 if (!cascade || cascade.kind !== 'OPTIONS_PATH') {
                     setFilteredOptions(field.options ?? []);
                     setDisabled(baseDisabled);
@@ -9905,7 +10119,8 @@ class FormComponent {
                     if (fieldToRemove) {
                         const form = this.form();
                         const currentValue = form.get(fieldToRemove.key)?.value;
-                        if (currentValue != null) {
+                        const shouldPreserveValue = fieldToRemove.disabled || fieldToRemove.generated;
+                        if (currentValue != null && !shouldPreserveValue) {
                             form.get(fieldToRemove.key)?.setValue(null);
                             this.onFieldUpdate(form, fieldToRemove);
                         }
@@ -10013,6 +10228,7 @@ class FormField {
         this.trackedEntityType = options.trackedEntityType;
         this.hasOptions = options.hasOptions;
         this.dependentField = options.dependentField;
+        this.fieldOptionsDependsOn = options.fieldOptionsDependsOn;
         this.displayInList = options.displayInList;
         this.displayInReports = options.displayInReports;
         this.searchable = options.searchable;
@@ -10098,10 +10314,13 @@ var FieldType;
 
 class FieldDropdown {
     constructor(params) {
-        this.key = params.key;
-        this.value = params.value;
-        this.label = params.label;
-        this.order = params.order;
+        const rawParams = params;
+        this.key = params.key ?? rawParams.id ?? rawParams.code ?? rawParams.name;
+        this.value = params.value ?? rawParams.code ?? rawParams.name;
+        this.label =
+            params.label ?? rawParams.name ?? rawParams.displayName ?? rawParams.code;
+        this.order = params.order ?? rawParams.sortOrder;
+        this.options = params.options?.map((option) => new FieldDropdown(option));
     }
     toJson() {
         return {
@@ -10109,6 +10328,7 @@ class FieldDropdown {
             value: this.value,
             label: this.label,
             order: this.order,
+            options: this.options?.map((option) => option.toJson()),
         };
     }
     static getDropdownOptions(field, locale, extension) {
@@ -10140,10 +10360,11 @@ class FieldDropdown {
         }
         return sortBy((field?.optionSet?.options || []).map((option) => {
             return new FieldDropdown({
-                key: option.id,
-                value: option.code,
-                label: option.name,
+                key: option.id ?? option.code ?? option.name,
+                value: option.code ?? option.value ?? option.name,
+                label: option.name ?? option.label ?? option.code,
                 order: option.sortOrder,
+                options: option.options,
             });
         }), 'order');
     }
@@ -10204,6 +10425,9 @@ class FieldUtil {
     }
     static getFieldControlType(valueType, hasOptions) {
         if (hasOptions) {
+            if (valueType === FieldType.MULTI_TEXT) {
+                return 'multi-dropdown';
+            }
             return 'dropdown';
         }
         switch (valueType) {
@@ -12345,9 +12569,10 @@ class ProgramStageEntryFormSectionUtil {
 // }
 class ProgramEntryFormSectionUtil {
     #sortedCanonicalFieldsCache = null;
-    constructor(program, config) {
+    constructor(program, config, customFieldConfigurations = {}) {
         this.program = program;
         this.config = config;
+        this.customFieldConfigurations = customFieldConfigurations;
         this.fieldUtil = new ProgramEntryFormFieldUtil(program, config);
     }
     // get programEntryFormSections(): IProgramEntryFormSection[] {
@@ -12570,7 +12795,12 @@ class ProgramEntryFormSectionUtil {
             sortOrder: programTrackedEntityAttribute.sortOrder,
             optionSet: tea.optionSet,
         };
-        const options = FieldDropdown.getDropdownOptions(iTrackedEntityFormFieldBase);
+        const customConfiguration = this.customFieldConfigurations?.[iTrackedEntityFormFieldBase.id];
+        const fieldWithCustomConfiguration = {
+            ...iTrackedEntityFormFieldBase,
+            ...(customConfiguration || {}),
+        };
+        const options = FieldDropdown.getDropdownOptions(fieldWithCustomConfiguration);
         const hasOptions = (options?.length ?? 0) > 0;
         const fieldExtension = this.config.formFieldExtensions?.find((formFieldExtension) => formFieldExtension?.id === iTrackedEntityFormFieldBase.id);
         const autoAssignedValue = this.#getAutoAssignedValue(iTrackedEntityFormFieldBase);
@@ -12579,22 +12809,24 @@ class ProgramEntryFormSectionUtil {
             return null;
         }
         return new FormField({
-            id: iTrackedEntityFormFieldBase.id,
-            code: iTrackedEntityFormFieldBase.code,
-            label: iTrackedEntityFormFieldBase.formName ||
-                iTrackedEntityFormFieldBase.name,
-            key: iTrackedEntityFormFieldBase.code
-                ? camelCase(iTrackedEntityFormFieldBase.code)
-                : iTrackedEntityFormFieldBase.id,
-            required: iTrackedEntityFormFieldBase.mandatory,
-            type: FieldUtil.getFieldType(iTrackedEntityFormFieldBase.valueType),
+            id: fieldWithCustomConfiguration.id,
+            code: fieldWithCustomConfiguration.code,
+            label: fieldWithCustomConfiguration.formName ||
+                fieldWithCustomConfiguration.name,
+            key: fieldWithCustomConfiguration.code
+                ? camelCase(fieldWithCustomConfiguration.code)
+                : fieldWithCustomConfiguration.id,
+            required: fieldWithCustomConfiguration.mandatory,
+            type: FieldUtil.getFieldType(fieldWithCustomConfiguration.valueType),
             options,
             hasOptions,
-            disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase) || !!tea.generated,
-            order: iTrackedEntityFormFieldBase.sortOrder,
-            controlType: FieldUtil.getFieldControlType(iTrackedEntityFormFieldBase.valueType, hasOptions),
+            disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase) ||
+                !!tea.generated,
+            order: fieldWithCustomConfiguration.sortOrder,
+            controlType: FieldUtil.getFieldControlType(fieldWithCustomConfiguration.valueType, hasOptions),
             allowFutureDate: programTrackedEntityAttribute.allowFutureDate === true,
             extension: fieldExtension,
+            fieldOptionsDependsOn: fieldWithCustomConfiguration.fieldOptionsDependsOn,
             generated: !!tea.generated,
             unique: !!tea.unique,
             pattern: tea.pattern,
@@ -12618,6 +12850,18 @@ class ProgramEntryFormSectionUtil {
                 continue;
             fieldsByAttributeId.set(canonicalField.id, canonicalField);
         }
+        for (const [fieldId, field] of fieldsByAttributeId.entries()) {
+            if (!field.fieldOptionsDependsOn)
+                continue;
+            const dependentField = fieldsByAttributeId.get(field.fieldOptionsDependsOn);
+            if (!dependentField)
+                continue;
+            fieldsByAttributeId.set(fieldId, new FormField({
+                ...field,
+                dependentField,
+                controlType: 'dropdown',
+            }));
+        }
         return fieldsByAttributeId;
     }
 }
@@ -12628,6 +12872,7 @@ class ProgramEntryFormSectionUtil {
 class ProgramEntryFormMetaData {
     constructor() {
         this.d2 = window?.d2Web;
+        this.customFieldConfigurations = {};
     }
     setConfig(config) {
         this.config = config;
@@ -12826,7 +13071,7 @@ class ProgramEntryFormMetaData {
         if (displayType !== 'FLAT') {
             return [];
         }
-        const baseSections = new ProgramEntryFormSectionUtil(this.program, this.config).programEntryFormSections;
+        const baseSections = new ProgramEntryFormSectionUtil(this.program, this.config, this.customFieldConfigurations).programEntryFormSections;
         const autoAssigned = this.config?.autoAssignedValues;
         if (!autoAssigned?.length) {
             return baseSections;
@@ -12908,13 +13153,37 @@ class ProgramEntryFormMetaData {
             sections,
             programStageSections,
             rules: this.rules,
+            customFieldConfigurations: this.customFieldConfigurations,
         };
     }
+    async #getCustomFieldConfigurations() {
+        try {
+            const response = await this.d2.httpInstance.get('dataStore/field-extensions?fields=id,fieldOptionsDependsOn,optionSet&paging=false');
+            const entries = response?.data?.['entries'];
+            if (!Array.isArray(entries)) {
+                return {};
+            }
+            return entries.reduce((fieldConfigurations, fieldConfiguration) => {
+                if (!fieldConfiguration?.id) {
+                    return fieldConfigurations;
+                }
+                return {
+                    ...fieldConfigurations,
+                    [fieldConfiguration.id]: fieldConfiguration,
+                };
+            }, {});
+        }
+        catch {
+            return {};
+        }
+    }
     async get() {
         try {
             const program = await this.#getProgramMetaData();
             if (program) {
                 this.program = program;
+                this.customFieldConfigurations =
+                    await this.#getCustomFieldConfigurations();
                 if (this.config?.formFieldExtensions &&
                     this.config.formFieldExtensions.length > 0 &&
                     this.config.formFieldExtensions[0]?.optionsSourceCode) {