@iapps/ng-dhis2-ui 1.1.2 → 1.1.3

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

@@ -2948,25 +2948,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-const dropdownStyles = {
+const dropdownStyles$1 = {
     layer: {
         zIndex: '1 !important',
     },
 };
 
 // Helper function to generate a unique class name
-const generateClassName = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+const generateClassName$1 = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
 // Helper function to convert camelCased properties to hyphenated CSS properties
-const convertStylesToCSS = (className, styles) => {
+const convertStylesToCSS$1 = (className, styles) => {
     let cssString = `.${className} {`;
     for (const key in styles) {
         if (typeof styles[key] === "object" && key.startsWith("@media")) {
-            const mediaStyles = convertStylesToCSS(className, styles[key]);
+            const mediaStyles = convertStylesToCSS$1(className, styles[key]);
             cssString += `${key} { ${mediaStyles} }`;
         }
         else if (key.startsWith("&:")) {
             const pseudoClass = key.replace("&", "");
-            cssString += `${pseudoClass} { ${convertStylesToCSS("", styles[key])} }`;
+            cssString += `${pseudoClass} { ${convertStylesToCSS$1("", styles[key])} }`;
         }
         else {
             const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
@@ -2977,13 +2977,13 @@ const convertStylesToCSS = (className, styles) => {
     return cssString;
 };
 // Custom hook for dynamic styles with generics
-const useDynamicStyles = (stylesObj) => {
+const useDynamicStyles$1 = (stylesObj) => {
     const [classNames, setClassNames] = useState({});
     useEffect(() => {
         const convertedStyles = Object.keys(stylesObj).map((key) => {
-            const className = generateClassName(key);
+            const className = generateClassName$1(key);
             const styleElement = document.createElement("style");
-            styleElement.innerHTML = convertStylesToCSS(className, stylesObj[key]);
+            styleElement.innerHTML = convertStylesToCSS$1(className, stylesObj[key]);
             document.head.appendChild(styleElement);
             return {
                 key,
@@ -3006,7 +3006,7 @@ const useDynamicStyles = (stylesObj) => {
     return classNames;
 };
 
-const useCurrentModal = () => {
+const useCurrentModal$1 = () => {
     const [CurrentModal, setCurrentModal] = useState();
     return [
         CurrentModal,
@@ -3017,10 +3017,10 @@ const useCurrentModal = () => {
         },
     ];
 };
-const ContextMenu = (params) => {
+const ContextMenu$1 = (params) => {
     const { onClose, onMenuClick, anchorRef, dropDownOptions } = params;
-    const [CurrentModal, setCurrentModal] = useCurrentModal();
-    const styles = useDynamicStyles(dropdownStyles);
+    const [CurrentModal, setCurrentModal] = useCurrentModal$1();
+    const styles = useDynamicStyles$1(dropdownStyles$1);
     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" },
@@ -3033,13 +3033,13 @@ const ContextMenu = (params) => {
                 setCurrentModal(null);
             } }))));
 };
-const DropdownMenu = (props) => {
+const DropdownMenu$1 = (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$1.grey600 }), onClick: () => setVisible(true) }),
-        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
+        visible && (React__default.createElement(ContextMenu$1, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
                 onClick(dropDownOption);
             } }))));
 };
@@ -3397,7 +3397,7 @@ class LineListTableComponent extends ReactWrapperModule {
                     } }, "Loading"))) : (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(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$1, { 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() },
@@ -3484,6 +3484,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 }]
         }] });
 
+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$1.grey600 }), onClick: () => setVisible(true) }),
+        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
+                onClick(dropDownOption);
+            } }))));
+};
+
+class DataTableUIComponent extends ReactWrapperModule {
+    constructor() {
+        super(...arguments);
+        this.actionSelected = new EventEmitter();
+        this.DataTableUI = () => {
+            const [columns, setColumns] = useState([]);
+            const [tableData, setTableData] = useState([]);
+            useEffect(() => {
+                if (!this.data || !this.columnDefinitions)
+                    return;
+                const filteredColumns = this.columnDefinitions.filter((col) => col.visible !== false);
+                const sortedColumns = filteredColumns.sort((a, b) => {
+                    const indexA = Number(a.index) || 0;
+                    const indexB = Number(b.index) || 0;
+                    return indexA - indexB;
+                });
+                setColumns(sortedColumns);
+                setTableData(this.data);
+            }, [this.data, this.columnDefinitions]);
+            const getDropdownOptions = (row) => {
+                return (this.actionOptions || []).map((option) => ({
+                    ...option,
+                    onClick: () => {
+                        // Ensure the onClick is called with the correct context
+                        if (option.onClick) {
+                            option.onClick(row); // Passing row to the handler
+                        }
+                        this.actionSelected.emit({ action: option.label, row }); // Emit action and row details
+                    },
+                }));
+            };
+            return (React__default.createElement("div", 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.column }, col.display))),
+                            this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableColumnHeader, null, "Actions")))),
+                    React__default.createElement(TableBody, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
+                        columns.map((col) => (React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-'))),
+                        this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableCell, null,
+                            React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
+                    React__default.createElement(TableFoot, null,
+                        React__default.createElement(DataTableRow, null,
+                            React__default.createElement(DataTableCell, { colSpan: columns.length + 1 }))))));
+        };
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = this.DataTableUI;
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: DataTableUIComponent, isStandalone: false, selector: "app-data-table-ui", inputs: { data: "data", columnDefinitions: "columnDefinitions", actionOptions: "actionOptions" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-table-ui', standalone: false, template: '<ng-content></ng-content>' }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], columnDefinitions: [{
+                type: Input
+            }], actionOptions: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
+            }] } });
+
+class DataTableUIModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, declarations: [DataTableUIComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [DataTableUIComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DataTableUIComponent],
+                    exports: [DataTableUIComponent],
+                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule],
+                    providers: [],
+                }]
+        }] });
+
 class FormField {
     constructor(options = {}) {
         this.value = options.value || '';
@@ -5154,6 +5334,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+class SelectionFiltersComponent extends ReactWrapperModule {
+    constructor() {
+        super(...arguments);
+        this.actionOptions = [];
+        this.attributeFilters = [];
+        this.dataElementFilters = [];
+        this.actionSelected = new EventEmitter();
+        this.SelectionFiltersUI = () => {
+            const [filters, setFilters] = useState({
+                attributeFilters: this.attributeFilters || [],
+                dataElementFilters: this.dataElementFilters || [],
+            });
+            useEffect(() => {
+                setFilters({
+                    attributeFilters: this.attributeFilters,
+                    dataElementFilters: this.dataElementFilters,
+                });
+            }, [this.attributeFilters, this.dataElementFilters]);
+            const handleAttributeChange = (index, selectedValue) => {
+                setFilters((prevFilters) => {
+                    const updatedFilters = [...prevFilters.attributeFilters];
+                    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 };
+                    return { ...prevFilters, dataElementFilters: updatedFilters };
+                });
+            };
+            const handleSearch = () => {
+                this.actionSelected.emit(filters);
+            };
+            // 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
+                    }
+                    if (totalItems === 2) {
+                        return 'span 2'; // Two items, each spans 2 columns
+                    }
+                    if (totalItems === 3) {
+                        return 'span 1'; // Three items, each spans one column
+                    }
+                    if (totalItems === 4) {
+                        return 'span 1'; // Four items, each spans one column
+                    }
+                }
+                else {
+                    // More than 4 items, recursively adjust the placement
+                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    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
+            };
+            // 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
+                    }
+                    if (totalItems === 2) {
+                        return 'span 2'; // Two items, each spans 2 columns
+                    }
+                    if (totalItems === 3) {
+                        return 'span 1'; // Three items, each spans one column
+                    }
+                    if (totalItems === 4) {
+                        return 'span 1'; // Four items, each spans one column
+                    }
+                }
+                else {
+                    // More than 4 items, recursively adjust the placement
+                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    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 (React__default.createElement("div", { style: {
+                    fontFamily: 'Arial, sans-serif',
+                    padding: '20px',
+                    backgroundColor: '#f9f9f9',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+                } },
+                React__default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                        gap: '16px',
+                    } }, filters.attributeFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
+                React__default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                        gap: '16px',
+                    } }, filters.dataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
+                React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
+                    React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))));
+        };
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = this.SelectionFiltersUI;
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", attributeFilters: "attributeFilters", dataElementFilters: "dataElementFilters", startDate: "startDate", endDate: "endDate" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }]
+        }], propDecorators: { actionOptions: [{
+                type: Input
+            }], attributeFilters: [{
+                type: Input
+            }], dataElementFilters: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
+            }] } });
+
+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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SelectionFiltersComponent],
+                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule],
+                    exports: [SelectionFiltersComponent],
+                }]
+        }] });
+
 class TrackerFormComponent {
     constructor() {
         this.program = input.required();
@@ -5162,6 +5511,7 @@ class TrackerFormComponent {
     async ngOnInit() {
         this.trackerQuery = this.d2.trackerModule.trackedEntity.setProgram(this.program());
         const program = await this.trackerQuery.getMetaData();
+        const instance = await this.trackerQuery.create();
         if (program) {
             this.formMetaData = new FormMetaData({
                 programs: [program],
@@ -5200,5 +5550,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Boolean$1 as Boolean, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DateField, DateRangeValue, Dropdown, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, TrackerFormComponent, TrackerFormModule, TranslationUtil };
+export { Boolean$1 as Boolean, ButtonComponent, ButtonModule, CheckBox, D2FormModule, DataTableUIComponent, DataTableUIModule, DateField, DateRangeValue, Dropdown, FieldConfig, FieldControlTypeUtil, FieldDropdown, FieldType, FieldUtil, FormComponent, FormConfig, FormField, FormFieldComponent, FormFieldGroup, FormFieldTypeUtil, FormMetaData, FormMetadataSection, FormUtil, FormValue, FormValueUtil, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, MetadataRule, MetadataRuleAction, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperModule, RepeatableFormComponent, SectionFormComponent, SelectionFiltersComponent, SelectionFiltersUiModule, TrackerFormComponent, TrackerFormModule, TranslationUtil };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map