@iapps/ng-dhis2-ui 1.0.8 → 1.1.0

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output } from '@angular/core';
-import { IconEdit16, spacers, colors, theme, Tooltip, Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16 } from '@dhis2/ui';
+import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, Injectable, inject } from '@angular/core';
+import { IconEdit16, spacers, colors, theme, Tooltip, Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination } from '@dhis2/ui';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -27,6 +27,7 @@ import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { isObject, isString } from 'lodash';
+import { map as map$1, switchMap } from 'rxjs/operators';
 
 const TransferOption = ({ disabled, label, highlighted, selected, onClick, onDoubleClick, value, icon, active, tooltipText, dataTest, onEditClick, }) => {
     const renderContent = () => (React__default.createElement("div", { className: cx('chip', {
@@ -1150,9 +1151,6 @@ class ReactWrapperComponent {
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
         this.render();
     }
-    ngOnChanges() {
-        // if (this.elementRef) this.render();
-    }
     ngOnDestroy() {
         this.reactDomRoot?.unmount();
     }
@@ -1173,13 +1171,13 @@ class ReactWrapperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: ReactWrapperComponent, isStandalone: false, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: ReactWrapperComponent, isStandalone: false, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-dhis2-ui-wrapper',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { props: [{
                 type: Input
@@ -2963,9 +2961,515 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// export function buildFilters(filters: AttributeFilter[]): string {
+//   return filters
+//     .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
+//     .join('&');
+// }
+function buildFilters(filters) {
+    return filters
+        .map(({ attribute, dataElement, operator, value }) => {
+        // Check if attribute is defined, otherwise use dataElement
+        const field = attribute || dataElement;
+        return field ? `filter=${field}:${operator}:${value}` : '';
+    })
+        .filter(Boolean) // Remove any empty strings
+        .join('&');
+}
+const matchesCondition = (eventValue, operator, filterValue) => {
+    if (typeof eventValue === 'number' && typeof filterValue === 'number') {
+        switch (operator) {
+            case '=':
+                return eventValue === filterValue;
+            case '!=':
+                return eventValue !== filterValue;
+            case '>':
+                return eventValue > filterValue;
+            case '<':
+                return eventValue < filterValue;
+            case '>=':
+                return eventValue >= filterValue;
+            case '<=':
+                return eventValue <= filterValue;
+            default:
+                return false;
+        }
+    }
+    const strEventValue = String(eventValue);
+    const strFilterValue = String(filterValue);
+    switch (operator) {
+        case '=':
+            return strEventValue === strFilterValue;
+        case '!=':
+            return strEventValue !== strFilterValue;
+        case 'contains':
+            return strEventValue.includes(strFilterValue);
+        case 'startsWith':
+            return strEventValue.startsWith(strFilterValue);
+        case 'endsWith':
+            return strEventValue.endsWith(strFilterValue);
+        case 'regex':
+            return new RegExp(strFilterValue).test(strEventValue);
+        default:
+            return false;
+    }
+};
+const getFilteredTrackedEntityInstances = (trackedEntityInstance, filters) => {
+    return trackedEntityInstance.filter((trackedEntityInstance) => trackedEntityInstance.enrollments.some((enrollment) => enrollment.events.some((event) => filters.every((filter) => event.programStage === filter.programStage &&
+        event.dataValues.some((dataValue) => dataValue.dataElement === filter.dataElement &&
+            matchesCondition(dataValue.value, filter.operator, filter.value))))));
+};
+
+class LineListService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    getProgramMetadata(programId) {
+        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name]`);
+    }
+    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+        const filterParams = buildFilters(filters);
+        const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
+        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`).pipe(map$1((response) => {
+            response.trackedEntityInstances.forEach((tei) => {
+                // Filter attributes to only include those with displayInList=true
+                tei.attributes = tei.attributes.filter((attr) => attr.displayInList);
+            });
+            return response;
+        }));
+    }
+    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+        const filterParams = buildFilters(filters);
+        const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
+        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
+    }
+    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+        const filterParams = buildFilters(filters);
+        const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
+        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
+    }
+    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate) {
+        return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
+            if (programStageId) {
+                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
+                    metadata: programMetadata,
+                    data: events,
+                })));
+            }
+            if (programMetadata.programType === 'WITH_REGISTRATION') {
+                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((teis) => ({
+                    metadata: programMetadata,
+                    data: teis,
+                })));
+            }
+            else {
+                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
+                    metadata: programMetadata,
+                    data: events,
+                })));
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService, deps: [{ token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
+
+const dropdownStyles = {
+    layer: {
+        zIndex: '1 !important',
+    },
+};
+
+// Helper function to generate a unique class name
+const generateClassName = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === "object" && key.startsWith("@media")) {
+            const mediaStyles = convertStylesToCSS(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith("&:")) {
+            const pseudoClass = key.replace("&", "");
+            cssString += `${pseudoClass} { ${convertStylesToCSS("", styles[key])} }`;
+        }
+        else {
+            const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+            cssString += `${cssKey}: ${styles[key]}; `;
+        }
+    }
+    cssString += "}";
+    return cssString;
+};
+// Custom hook for dynamic styles with generics
+const useDynamicStyles = (stylesObj) => {
+    const [classNames, setClassNames] = useState({});
+    useEffect(() => {
+        const convertedStyles = Object.keys(stylesObj).map((key) => {
+            const className = generateClassName(key);
+            const styleElement = document.createElement("style");
+            styleElement.innerHTML = convertStylesToCSS(className, stylesObj[key]);
+            document.head.appendChild(styleElement);
+            return {
+                key,
+                className,
+                styleElement,
+            };
+        });
+        setClassNames(convertedStyles.reduce((classNameEntity, convertedStyle) => {
+            return {
+                ...classNameEntity,
+                [convertedStyle.key]: convertedStyle.className,
+            };
+        }, {}));
+        return () => {
+            convertedStyles.forEach((convertedStyle) => {
+                document.head.removeChild(convertedStyle.styleElement);
+            });
+        };
+    }, []);
+    return classNames;
+};
+
+const useCurrentModal = () => {
+    const [CurrentModal, setCurrentModal] = useState();
+    return [
+        CurrentModal,
+        (Modal) => {
+            // As setState supports functional updates, we can't pass functional
+            // components directly
+            setCurrentModal(() => Modal);
+        },
+    ];
+};
+const ContextMenu = (params) => {
+    const { onClose, onMenuClick, anchorRef, dropDownOptions } = params;
+    const [CurrentModal, setCurrentModal] = useCurrentModal();
+    const styles = useDynamicStyles(dropdownStyles);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Layer$1, { onBackdropClick: (event, data) => onClose(event, data), className: styles.layer },
+            React__default.createElement(Popper, { reference: anchorRef, placement: "bottom-start" },
+                React__default.createElement(FlyoutMenu, null, dropDownOptions.map((dropDownOption, index) => (React__default.createElement(MenuItem$1, { key: index, destructive: dropDownOption.destructive, label: dropDownOption.label, icon: dropDownOption.icon, onClick: () => {
+                        onMenuClick(dropDownOption);
+                        onClose();
+                    }, dense: true })))))),
+        CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
+                onClose();
+                setCurrentModal(null);
+            } }))));
+};
+const DropdownMenu = (props) => {
+    const ref = useRef();
+    const [visible, setVisible] = useState(false);
+    const { dropdownOptions, onClick } = props;
+    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
+        React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors.grey600 }), onClick: () => setVisible(true) }),
+        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
+                onClick(dropDownOption);
+            } }))));
+};
+
+const getProgramStageData = (response, programStageId, pager) => {
+    const events = response.data.events;
+    const allDataElements = new Set();
+    events.forEach((event) => {
+        event.dataValues.forEach((dv) => allDataElements.add(dv.dataElement));
+    });
+    const stageFromMetaData = response.metadata.programStages.find((stage) => stage.id === programStageId);
+    if (!stageFromMetaData) {
+        throw new Error(`Program stage with ID ${programStageId} not found`);
+    }
+    const entityColumns = Array.from(allDataElements).map((dataElementId) => ({
+        label: stageFromMetaData.programStageDataElements.find((psde) => psde.dataElement.id === dataElementId)?.dataElement.name || dataElementId,
+        key: dataElementId,
+    }));
+    const dataElementsData = events.map((event, idx) => {
+        let row = {
+            event: event.event,
+            index: (pager.page - 1) * pager.pageSize + idx + 1,
+        };
+        allDataElements.forEach((dataElementId) => (row[dataElementId] = ''));
+        event.dataValues.forEach((dv) => (row[dv.dataElement] = dv.value));
+        return row;
+    });
+    return { columns: entityColumns, data: dataElementsData };
+};
+const getTrackedEntityData = (response, programId, pager, filters) => {
+    let teis = response.data
+        .trackedEntityInstances;
+    if (filters) {
+        teis = getFilteredTrackedEntityInstances(teis, filters);
+    }
+    const allAttributes = new Set();
+    teis.forEach((tei) => {
+        const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
+        const attributes = matchingEnrollment
+            ? matchingEnrollment.attributes
+            : tei.attributes;
+        attributes.forEach((attr) => allAttributes.add(attr.attribute));
+    });
+    const entityColumns = Array.from(allAttributes).map((attrId) => {
+        const foundAttribute = teis
+            .flatMap((tei) => {
+            const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
+            return matchingEnrollment
+                ? matchingEnrollment.attributes
+                : tei.attributes;
+        })
+            .find((attr) => attr.attribute === attrId);
+        return {
+            label: foundAttribute?.displayName || attrId,
+            key: attrId,
+        };
+    });
+    const attributesData = teis.map((tei, idx) => {
+        let row = {
+            trackedEntityInstance: tei.trackedEntityInstance,
+            index: (pager.page - 1) * pager.pageSize + idx + 1,
+        };
+        allAttributes.forEach((attrId) => (row[attrId] = ''));
+        const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
+        const attributesToUse = matchingEnrollment
+            ? matchingEnrollment.attributes
+            : tei.attributes;
+        attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
+        return row;
+    });
+    return { columns: entityColumns, data: attributesData };
+};
+const getEventData = (response, pager) => {
+    const events = response.data.events;
+    const uniqueDataElements = new Set();
+    events.forEach((event) => {
+        event.dataValues.forEach((dv) => uniqueDataElements.add(dv.dataElement));
+    });
+    const entityColumns = Array.from(uniqueDataElements).map((dataElement) => ({
+        label: response.metadata.programStages[0].programStageDataElements.find((psde) => psde.dataElement.id === dataElement)?.dataElement.name || dataElement,
+        key: dataElement,
+    }));
+    const dataElementsData = events.map((event, idx) => {
+        let row = {
+            event: event.event,
+            index: (pager.page - 1) * pager.pageSize + idx + 1,
+        };
+        uniqueDataElements.forEach((dataElement) => (row[dataElement] = ''));
+        event.dataValues.forEach((dv) => (row[dv.dataElement] = dv.value));
+        return row;
+    });
+    return { columns: entityColumns, data: dataElementsData };
+};
+const addActionsColumn = (columns, actionOptions) => {
+    return [
+        ...columns,
+        ...(actionOptions && actionOptions.length > 0
+            ? [{ label: 'Actions', key: 'actions' }]
+            : []),
+    ];
+};
+
+// src/app/line-list-table.component.ts
+class LineListTableComponent extends ReactWrapperComponent {
+    constructor() {
+        super(...arguments);
+        this.actionSelected = new EventEmitter();
+        this.reactStateUpdaters = null;
+        this.setReactStateUpdaters = (updaters) => {
+            this.reactStateUpdaters = updaters;
+        };
+        this.lineListService = inject(LineListService);
+        this.LineList = () => {
+            const [columns, setColumns] = useState([]);
+            const [data, setData] = useState([]);
+            const [pager, setPager] = useState({
+                page: 1,
+                pageSize: 10,
+                total: 0,
+                pageCount: 1,
+            });
+            const paginationRef = useRef(null);
+            const [programIdState, setProgramIdState] = useState(this.programId);
+            const [orgUnitState, setOrgUnitState] = useState(this.orgUnit);
+            const [programStageIdState, setProgramStageIdState] = useState(this.programStageId);
+            const [attributeFiltersState, setAttributeFiltersState] = useState(this.attributeFilters);
+            const [startDateState, setStartDateState] = useState(this.startDate);
+            const [endDateState, setEndDateState] = useState(this.endDate);
+            const [loading, setLoading] = useState(false);
+            // Store updaters in refs for Angular to access
+            const updateRefs = useRef({
+                setProgramIdState,
+                setOrgUnitState,
+                setProgramStageIdState,
+                setAttributeFiltersState,
+                setStartDateState,
+                setEndDateState,
+            });
+            useEffect(() => {
+                this.setReactStateUpdaters?.(updateRefs.current);
+            }, []);
+            useEffect(() => {
+                if (!loading) {
+                    setTimeout(() => {
+                        const paginationContainer = document.querySelector('[data-test="dhis2-uiwidgets-pagination"]');
+                        if (paginationContainer) {
+                            paginationContainer.style.display = 'flex';
+                            paginationContainer.style.flexDirection = 'row';
+                            paginationContainer.style.justifyContent = 'space-between';
+                            paginationContainer.style.alignItems = 'center';
+                        }
+                    }, 500); // Short delay to ensure styles apply after data renders
+                }
+            }, [loading]);
+            useEffect(() => {
+                setLoading(true);
+                this.lineListService
+                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate)
+                    .subscribe((response) => {
+                    let entityColumns = [];
+                    let responsePager;
+                    let entityData = [];
+                    if (this.programStageId) {
+                        responsePager = response.data.pager;
+                        const { columns, data } = getProgramStageData(response, this.programStageId, pager);
+                        entityColumns = columns;
+                        entityData = data;
+                    }
+                    else if ('trackedEntityInstances' in response.data) {
+                        responsePager = response.data
+                            .pager;
+                        const { columns, data } = getTrackedEntityData(response, this.programId, pager, this.filters);
+                        entityColumns = columns;
+                        entityData = data;
+                    }
+                    else {
+                        responsePager = response.data.pager;
+                        const { columns, data } = getEventData(response, pager);
+                        entityColumns = columns;
+                        entityData = data;
+                    }
+                    const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
+                    setLoading(false);
+                    console.log('hey');
+                    setColumns(...[finalColumns]);
+                    setData(...[entityData]);
+                    setPager(...[responsePager]);
+                    console.log('columns', columns);
+                    console.log('data', data);
+                });
+            }, [
+                programIdState,
+                orgUnitState,
+                programStageIdState,
+                attributeFiltersState,
+                startDateState,
+                endDateState,
+                pager.page,
+                pager.pageSize,
+            ]);
+            const getDropdownOptions = (row) => {
+                return (this.actionOptions || []).map((option) => ({
+                    ...option,
+                    onClick: () => {
+                        option.onClick?.(row);
+                        this.actionSelected.emit({ action: option.label, row });
+                    },
+                }));
+            };
+            return (React__default.createElement("div", null, loading ? (React__default.createElement(CircularLoader$1, null)) :
+                (React__default.createElement(DataTable, null,
+                    React__default.createElement(TableHead, null,
+                        React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
+                    React__default.createElement(TableBody, null, data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions' ? (React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key])))))))),
+                    React__default.createElement(TableFoot, null,
+                        React__default.createElement(DataTableRow, null,
+                            React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
+                                React__default.createElement("div", null,
+                                    React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
+                                            const newPageSize = Number(pageSize);
+                                            setPager((prev) => ({
+                                                ...prev,
+                                                page: 1,
+                                                pageSize: newPageSize,
+                                            }));
+                                        }, pageSizes: ['5', '10', '20', '50'] })))))))));
+        };
+    }
+    ngOnChanges(changes) {
+        if (this.reactStateUpdaters) {
+            if (changes['programId']) {
+                this.reactStateUpdaters.setProgramIdState(this.programId);
+            }
+            if (changes['orgUnit']) {
+                this.reactStateUpdaters.setOrgUnitState(this.orgUnit);
+            }
+            if (changes['programStageId']) {
+                this.reactStateUpdaters.setProgramStageIdState(this.programStageId);
+            }
+            if (changes['attributeFilters']) {
+                this.reactStateUpdaters.setAttributeFiltersState(this.attributeFilters);
+            }
+            if (changes['startDate']) {
+                this.reactStateUpdaters.setStartDateState(this.startDate);
+            }
+            if (changes['endDate']) {
+                this.reactStateUpdaters.setEndDateState(this.endDate);
+            }
+        }
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = this.LineList;
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }]
+        }], propDecorators: { programId: [{
+                type: Input
+            }], orgUnit: [{
+                type: Input
+            }], programStageId: [{
+                type: Input
+            }], actionOptions: [{
+                type: Input
+            }], attributeFilters: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
+            }] } });
+
+class LineListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [LineListTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LineListTableComponent],
+                    exports: [LineListTableComponent],
+                    imports: [CommonModule, SharedDhis2UiModule],
+                    providers: [LineListService],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule };
+export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map